.centro_ademir {
  display: flex;
  justify-content: center !important; /* Centra horizontalmente */
  align-items: center !important; /* Centra verticalmente si hay altura definida */
  width: 100%; /* Asegura que ocupe todo el ancho */
}

/* Reduce el espacio entre las opciones del menú */
#primary-nav ul.menu li a {
  padding-left: 10px; /* Ajusta según necesites */
  padding-right: 10px;
  font-size: 15px; /* Reducir un poco el tamaño de letra ayuda mucho */
}

/* Evita que el texto salte de línea si el espacio es muy justo */
#primary-nav ul.menu li a {
  white-space: nowrap;
}

.col-md-12 {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Empuja el logo a la izquierda y el menú a la derecha */
}

.logo {
  flex-shrink: 0; /* Evita que el logo se haga pequeño */
  width: 180px; /* Define un ancho fijo pequeño para el logo */
  margin-left: 100px; /* Espacio a la izquierda del logo */
}

#primary-nav {
  flex-grow: 1; /* Deja que el menú use el resto del espacio */
  display: flex;
  justify-content: flex-end;
  margin-right: 200px; /* Espacio a la derecha del menú */
}

/* --- ESTILOS PARA PANTALLAS GRANDES (Escritorio) --- */
@media (min-width: 992px) {
  #primary-nav-button {
    display: none; /* Oculta el botón "Menu" en PC */
  }

  .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #primary-nav {
    display: block !important; /* Asegura que el menú se vea */
  }

  #primary-nav ul.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* --- ESTILOS PARA PANTALLAS PEQUEÑAS (Móvil/Tablet) --- */
@media (max-width: 991px) {
  .col-md-12 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
  }

  .logo {
    margin-left: 0 !important;
    width: 120px !important;
  }

  #primary-nav {
    display: none; /* Se mantiene oculto al inicio */
    width: 100%;
    margin-right: 0 !important;
    order: 3;
  }

  /* ESTA ES LA LÍNEA QUE QUERÍAS AGREGAR: */
  #primary-nav.open {
    display: block !important;
  }

  #primary-nav ul.menu {
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  #primary-nav ul.menu li {
    border-bottom: 1px solid #eee;
    width: 100%;
  }

  #primary-nav-button {
    display: block;
    order: 2;
    /* Ajusta estos valores para reducir el tamaño general */
    padding: 5px 10px; /* Antes tenías 10px 15px */
    font-size: 14px; /* Reduce el tamaño del texto o icono */

    color: white;
    border: none;
    border-radius: 4px; /* Opcional: redondea un poco las esquinas */
    cursor: pointer;

    /* Si el botón se ve muy alto, puedes definir un height fijo */
    height: auto;
    line-height: 1;
  }
}