/* ══════════════════════════════════════════════════════════════════════
 * menu-desborde.css — el botón "Más" del menú principal
 *
 * Lo que no cabe en la barra no desaparece: pasa aquí. El desplegable se
 * construye con copias limpias de los enlaces (ver menu-desborde.js), así
 * que aquí se estiliza una lista propia, no nodos heredados del tema.
 * ══════════════════════════════════════════════════════════════════════ */

#horizontal-nav ul.left,
.nav-wrapper > ul.left {
  /* Sin esto el navegador sigue partiendo la fila y el reparto no sirve */
  flex-wrap: nowrap;
}

/* El ítem que no cupo. Se oculta el original y en su lugar va una copia
   dentro del desplegable — el nodo del tema no se mueve de sitio. */
.nav-desbordado {
  display: none !important;
}

.nav-mas {
  position: relative;
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  /* La barra impone su altura a los <li>; el botón debe ir a juego o se ve
     un escalón blanco al final del menú. */
  height: 64px;
  line-height: normal;
}

.nav-mas-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
}

.nav-mas-btn:hover,
.nav-mas.abierto .nav-mas-btn {
  background: rgba(0, 0, 0, 0.05);
}

.nav-mas-btn .material-icons {
  font-size: 22px;
  line-height: 1;
}

/* Cuando la opción en la que está el usuario quedó dentro del desplegable */
.nav-mas.tiene-activo .nav-mas-btn {
  box-shadow: inset 0 -3px 0 #26a69a;
  font-weight: 600;
}

.nav-mas-caja {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #dbe5e3;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 36, 31, 0.18);
  /* Por encima de la cabecera del tema y de Tabulator */
  z-index: 1200;
  display: none;
}

.nav-mas.abierto .nav-mas-caja {
  display: block;
}

.nav-mas-caja > li {
  display: block;
  width: 100%;
  height: auto;
  line-height: normal;
}

.nav-mas-caja > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 9px;
  color: #10241f;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
}

.nav-mas-caja > li > a:hover {
  background: #f2f7f6;
}

.nav-mas-caja > li.active > a {
  background: #0f3d3a;
  color: #fff;
}

.nav-mas-caja > li > a .material-icons,
.nav-mas-caja > li > a .material-symbols-rounded,
.nav-mas-caja > li > a svg {
  font-size: 20px;
  flex: 0 0 auto;
  margin: 0;
}

@media print {
  .nav-mas { display: none !important; }
}

/* El icono de Esterilización va en SVG: el ligature "sanitizer" no existe en
   la fuente clásica del menú y el ítem salía sin icono. */
.ico-ester {
  display: block;
  width: 21px;
  height: 21px;
  /* Medido en el navegador: los iconos de fuente del menu pintan su glifo
     entre y=76 e y=97 (alto 21) y su caja NO aporta alto ninguno. El SVG si
     aporta el suyo, asi que hay que hacer dos cosas:
       · bajarlo 12px para que caiga donde caen ellos, y
       · restarle todo lo que ocupa (12 + 21 = 33) para que el <a> siga
         midiendo 64px y la etiqueta no se salga de la barra.
     Con margin: 0 auto -22px quedaba 12px mas arriba que sus hermanos. */
  margin: 12px auto -33px;
  /* `nav a { color: #fff }` del tema dejaba el trazo BLANCO sobre la barra
     blanca: en estado normal el icono era invisible. Los iconos de fuente
     llevan su propio gris; aqui se le pone el mismo. */
  color: rgb(120, 120, 120);
}

/* En el item activo el fondo es azul y los iconos van en blanco */
li.active > a .ico-ester {
  color: #fff;
}

.nav-mas-caja .ico-ester {
  display: inline-block;
  /* Dentro del desplegable "Más" no hay barra que cuadrar: el icono va en
     linea con el texto, sin los margenes de arriba. */
  margin: 0;
  flex: 0 0 auto;
  color: rgb(120, 120, 120);
}

/* Contabilidad va por el mismo camino que Esterilización: SVG inline, porque
   la fuente de iconos del menu no tiene ningun glifo de dinero que se lea a
   este tamano. Y arrastra sus mismos dos problemas, resueltos igual. */
.ico-conta {
  display: block;
  width: 21px;
  height: 21px;
  /* Los iconos de fuente del menu pintan su glifo entre y=76 e y=97 sin que
     su caja aporte alto; la del SVG si lo aporta. Se baja 12px para caer a su
     altura y se le resta todo lo que ocupa (12 + 21 = 33), o el <a> se iria a
     88px contra los 64px de sus hermanos y romperia la fila. */
  margin: 12px auto -33px;
  /* `nav a { color: #fff }` del tema pintaba el trazo BLANCO sobre la barra
     blanca y el icono no se veia. Se le fija el mismo gris que traen de serie
     los iconos de fuente. */
  color: rgb(120, 120, 120);
}

/* En el item activo el fondo es azul y los iconos van en blanco */
li.active > a .ico-conta {
  color: #fff;
}

.nav-mas-caja .ico-conta {
  display: inline-block;
  /* Dentro del desplegable "Más" no hay barra que cuadrar: el icono va en
     linea con el texto, sin los margenes de arriba. */
  margin: 0;
  flex: 0 0 auto;
  color: rgb(120, 120, 120);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Menú lateral del celular (#slide-out): los títulos largos ya no se pisan
 *
 * Materialize fija `.sidenav li > a { height: 44px; line-height: 44px }`.
 * Con eso un título de dos renglones —«Exportar reporte de niveles de
 * referencia»— pinta 61px de texto dentro de una caja de 44px: el segundo
 * renglón caía encima del ítem siguiente y se leía «nivelesCdeareferctenizacaón».
 * Medido en el navegador a 360, 390, 412 y 430px: 30px de invasión sobre
 * «Crear cotización», idéntico en los cuatro anchos.
 *
 * El parche que ya traía la vista (style="height: 80px" en línea en cinco
 * ítems) sólo tapaba el síntoma en esos cinco y dejaba el <a> en 44px: la
 * caja táctil y la caja pintada no coincidían, y en esos <a> el sobrante se
 * recortaba con overflow: hidden.
 *
 * Aquí el ítem crece con su texto. Todo cuelga de #slide-out —el <ul> del
 * menú lateral— para no rozar la barra horizontal de escritorio, que es
 * otro árbol y ya estaba bien.
 * ═══════════════════════════════════════════════════════════════════════ */

#slide-out li {
  /* La vista trae style="height: 80px" en línea en cinco ítems; un estilo en
     línea gana a cualquier selector, así que sin !important esos cinco
     seguirían con alto fijo y recortando su segundo renglón. */
  height: auto !important;
  /* El 44px heredado sólo servía para centrar a la fuerza una única línea */
  line-height: normal;
}

#slide-out li > a {
  /* La altura de un renglón, en px, para poder dársela también al icono: así
     su caja mide exactamente una línea y `flex-start` lo deja a la altura de
     la PRIMERA, no centrado entre las dos. */
  --sn-linea: 19px;
  /* El relleno vertical también es variable porque el contador del
     Dashboard se ancla a él: si cambia uno tiene que cambiar el otro. */
  --sn-relleno: 12px;

  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;

  /* Que el ítem crezca con su texto en vez de desbordarlo */
  height: auto;
  /* 44px es el objetivo táctil mínimo recomendado para el dedo. Con 12 + 19 +
     12 = 43 el mínimo lo redondea a 44: los ítems de una línea —la mayoría
     del menú— miden lo mismo que antes y el menú no cambia de aspecto. Con
     dos líneas el ítem pasa a 62px en lugar de invadir al vecino. */
  min-height: 44px;
  line-height: var(--sn-linea);
  /* El tema declara `padding: 0 16px !important` sobre el mismo <a>: a una
     abreviada marcada como importante sólo la vence otra declaración
     importante. Sin esto el relleno vertical se pierde y el texto de dos
     líneas queda pegado a los bordes del ítem. Sólo se tocan arriba y abajo;
     los 16px laterales del tema siguen mandando. */
  padding-top: var(--sn-relleno) !important;
  padding-bottom: var(--sn-relleno) !important;
  white-space: normal;
}

#slide-out li > a > i,
#slide-out li > a > .material-icons {
  /* Caja de exactamente un renglón: es lo que lo cuadra con la primera línea
     del título. Venía con height/line-height de 44px y su glifo se centraba
     entre los dos renglones. El glifo (19.6px) rebosa medio píxel su caja de
     19px, que es justo lo que lo deja ópticamente sobre la línea. */
  height: var(--sn-linea);
  line-height: var(--sn-linea);
  flex: 0 0 auto;
  /* En un contenedor flex el float no se aplica; se quita para no dejar una
     declaración huérfana que confunda al siguiente que lea esto. */
  float: none;
}

#slide-out li > a > svg {
  /* Los iconos SVG del menú (.ico-ester, .ico-conta) llevan márgenes negativos
     calculados para la barra de 64px de escritorio; en una fila de 44px
     descuadrarían el ítem entero. Aquí se les da la misma caja de un renglón
     que a los iconos de fuente y la separación que usan sus hermanos. */
  height: var(--sn-linea);
  width: var(--sn-linea);
  margin: 0 20px 0 0;
  flex: 0 0 auto;
}

#slide-out li > a > span:not(.badge) {
  /* Un flex item no baja de su ancho mínimo de contenido salvo que se le
     permita: sin esto una palabra larga sin espacios volvería a desbordar. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

#slide-out li > a:has(> .badge) > span:not(.badge) {
  /* El contador del Dashboard va en posición absoluta arriba a la derecha: se
     le reserva el sitio para que un título largo no se le meta debajo. Un
     navegador sin :has() ignora la regla y se queda como estaba hoy. */
  padding-right: 40px;
}

#slide-out li > a > .badge {
  /* El contador va en posición absoluta sin `top`, así que lo colocaba su
     posición estática. Al pasar el <a> a flex esa posición bajó con el relleno
     superior y el contador se descolgó 12px. Se anclan las dos coordenadas a
     mano para que quede junto a la PRIMERA línea del título, que es donde el
     usuario lo busca, y no flotando a media altura de un ítem de dos líneas.
     margin-top del tema (calc(24px - 11px)) se anula: estaba calculado para
     centrarlo dentro de la fila rígida de 44px que ya no existe. */
  top: var(--sn-relleno);
  margin-top: 0;
}


/* ─── Objetivos táctiles del móvil ────────────────────────────────────────
   44 px es el mínimo con el que un dedo acierta. Medidos a 360, 390, 412 y
   430 px, estos estaban en 40. El del sidenav es el más crítico de todo el
   backend: es el ÚNICO acceso al menú en un teléfono, así que fallar el toque
   ahí deja a la persona sin poder navegar. */
@media (max-width: 992px) {
  a.sidenav-trigger,
  a.sidenav-trigger.btn-floating {
    width: 46px;
    height: 46px;
    line-height: 46px;
  }

  a.sidenav-trigger i,
  a.sidenav-trigger.btn-floating i {
    line-height: 46px;
    font-size: 24px;
  }

  /* Los sub-botones del FAB de la historia clínica: uno de ellos es la única
     puerta al modal de imágenes, que es justo lo que se usa desde el celular
     para guardar la foto de un documento. */
  .fixed-action-btn ul a.btn-floating,
  .fixed-action-btn ul li a.btn-floating {
    width: 46px;
    height: 46px;
    line-height: 46px;
  }

  .fixed-action-btn ul a.btn-floating i {
    line-height: 46px;
    font-size: 22px;
  }
}