/* Ajustes propios sobre Metronic.
   Va en un archivo aparte y no editando style.bundle.css: ese es del template y
   se reemplaza entero cuando se actualiza. */

/* Los nombres de la barra de arriba no se parten en dos líneas.
   Con los rótulos largos —«Quién responde», «Administración»— el flex encogía
   los ítems y hasta «Mi día» quedaba en dos renglones, con la cabecera
   descuadrada a cualquier ancho.

   El selector apunta **solo al primer nivel**. La versión anterior era
   `#kt_app_header_menu .menu-title` y alcanzaba también a los ítems de los
   desplegables, que tienen ancho fijo del template (250 px): sin poder partirse
   ni ensancharse, «Tareas y cada cuánto se repiten» —198 px de texto— llegaba
   pegado al borde y se salía del panel. */
#kt_app_header_menu > .menu-item > .menu-link .menu-title {
    white-space: nowrap;
}

/* Los desplegables se ajustan a su contenido en vez de quedarse en el ancho
   fijo del template, que estaba pensado para los rótulos cortos del demo. */
#kt_app_header_menu .menu-sub-xl-dropdown {
    /* `!important` porque la utilidad del template lo lleva —`w-xl-250px` es
       `width:250px!important`— y sin esto el panel no se ensancha: el rótulo
       largo cabía partiéndose en dos líneas, con un ítem del doble de alto que
       los demás. */
    width: max-content !important;
    min-width: 250px !important;
    max-width: 22rem !important;
}

#kt_app_header_menu .menu-sub-xl-dropdown .menu-title {
    white-space: normal;
}

/* ── Select con buscador ────────────────────────────────────────────────────
   Las opciones usaban `btn btn-link` con utilidades `px-3`, y `.btn` de
   Metronic le gana a la utilidad: el padding horizontal quedaba en 0 y el texto
   pegado al borde del panel. Se estilan como filas de lista, que es lo que son,
   en vez de pelear con la especificidad de un botón. */
.sb-panel {
    /* `fixed` y no `absolute`: dentro de una tabla, `.table-responsive` es
       `overflow-x: auto` y recorta a cualquier hijo posicionado, por mucho
       `z-index` que lleve. El alto, el ancho y la posición los calcula
       `colocar()` desde el campo, porque con `fixed` ya no los hereda. */
    position: fixed;
    z-index: 1055;
    min-width: 260px;
}

.sb-lista {
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.sb-opcion {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    /* Lo que faltaba. */
    padding: 0.625rem 0.85rem;
    font-size: 0.8125rem;
    /* Los nombres largos se parten en dos líneas —un contrato se llama
       «Servicios de mantención mecánica planta concentradora»— y con 1.35 las
       dos líneas de una opción quedaban más juntas entre sí que la distancia a
       la opción siguiente: se leían como cuatro renglones sueltos. */
    line-height: 1.45;
    color: var(--bs-gray-800);
    /* Los cargos compuestos son largos: se parten en dos líneas en vez de
       ensanchar el panel. */
    white-space: normal;
    word-break: break-word;
}

.sb-opcion + .sb-opcion {
    border-top: 1px solid var(--bs-gray-200);
}

/* Blanca cuando toca una opción elegida.
   El gris se ve sobre el fondo blanco de las opciones sin marcar, pero las
   elegidas van sobre celeste —`--bs-primary-light`— y ahí un gris de 1 px
   desaparece: dos contratos marcados uno debajo del otro se leían como un solo
   bloque azul, sin nada que dijera que eran dos. Se reportó así, mirando la
   pantalla: «se ven juntos los dos».
   Las dos reglas cubren el borde por sus dos lados, porque el borde lo dibuja
   el elemento de abajo y el celeste puede venir de cualquiera de los dos. */
.sb-opcion.sb-elegida + .sb-opcion,
.sb-opcion + .sb-opcion.sb-elegida {
    /* Dos, no uno: el blanco sobre el celeste son cinco puntos de luminosidad
       de diferencia, y a un píxel no se ve. Con dos, el bloque se parte. */
    border-top: 2px solid #fff;
}

.sb-opcion:hover,
.sb-opcion.sb-resaltada {
    background-color: var(--bs-gray-100);
}

.sb-opcion.sb-elegida {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
    font-weight: 600;
}

.sb-opcion:disabled {
    color: var(--bs-gray-400);
    cursor: not-allowed;
}

.sb-nueva {
    color: var(--bs-primary);
    border-top: 1px solid var(--bs-gray-200);
}

.sb-buscador {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

/* ── Anchos que las vistas ya usaban y el build de Metronic no trae ─────────
 *
 * Metronic genera las utilidades de ancho de 25 en 25 (100, 125, 150, 175),
 * así que `w-140px` —y otras quince— no existían: la clase estaba escrita en
 * la vista, no aplicaba nada, y la columna crecía a su gusto. Se veía como un
 * campo de fecha de 560 px al lado de un select de 250.
 *
 * Van con `!important` como las de Metronic, o las de `.form-control` les
 * ganarían por especificidad.
 */
.w-110px { width: 110px !important; }
.w-120px { width: 120px !important; }
.w-130px { width: 130px !important; }
.w-140px { width: 140px !important; }
.w-160px { width: 160px !important; }
.w-180px { width: 180px !important; }

.min-w-110px { min-width: 110px !important; }
.min-w-120px { min-width: 120px !important; }
.min-w-130px { min-width: 130px !important; }
.min-w-140px { min-width: 140px !important; }
.min-w-160px { min-width: 160px !important; }
.min-w-170px { min-width: 170px !important; }
.min-w-180px { min-width: 180px !important; }
.min-w-220px { min-width: 220px !important; }
.min-w-240px { min-width: 240px !important; }
.min-w-260px { min-width: 260px !important; }

/* ── Sello de familia: quién escribió la exigencia ──────────────────────────
   Dos cosas que la gente confunde: lo que el mandante exige —un marco con sus
   exigencias— y lo que la empresa definió por su cuenta —la MIPER, el programa
   SSO—. Las dos generan tareas, y de ahí para abajo el camino es el mismo.

   No se usa `badge badge-light-*` a propósito: toda esa paleta ya significa
   estado —ámbar «falta algo», rojo criticidad alta, verde conforme— y esto es
   una taxonomía. La colisión no es teórica: `TipoMatrizEnum::color()` devuelve
   `danger` para MIPER, así que un badge rojo junto a «Matrices de riesgo» se
   leería como criticidad. Estos dos tonos —pizarra y ciruela— no los usa nada
   más en la aplicación. */
.sello {
    display: inline-block;
    padding: .1rem .4rem;
    border: 1px solid transparent;
    border-radius: .3rem;
    /* Bajo el fs-9 del template (12px): acompaña al rótulo, no compite. */
    font-size: .6875rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

/* Pegado al rótulo y no en una columna aparte: con el panel del desplegable en
   `max-content`, un `margin-left:auto` igual sumaría al ancho intrínseco. */
.menu-title > .sello,
.sello + .sello {
    margin-inline-start: .5rem;
}

.sello-mandante { color: #3F4E6E; background-color: #EDF0F7; border-color: #DCE2EE; }
.sello-empresa  { color: #6B4E86; background-color: #F4EFF9; border-color: #E7DDF1; }

/* El sistema ofrece modo oscuro: sin esto el relleno claro queda de parche. */
[data-bs-theme="dark"] .sello-mandante {
    color: #A9B6D2; background-color: rgba(105, 125, 175, .16); border-color: rgba(120, 140, 190, .30);
}
[data-bs-theme="dark"] .sello-empresa {
    color: #C4A9DC; background-color: rgba(150, 110, 190, .16); border-color: rgba(165, 130, 200, .30);
}

/* La leyenda del pie del desplegable no manda el ancho del panel: acotada por
   debajo de la fila más ancha, el panel lo siguen definiendo los ítems. */
.menu-leyenda {
    max-width: 15rem;
    white-space: normal;
    line-height: 1.45;
}

/* ── La cabecera no puede empujar la página hacia los lados ─────────────────
   El menú horizontal pasa al cajón lateral por debajo de `xl` (1200px). Justo
   en 1200 vuelve a la barra y ahí no cabe por poco: logo 175 + menú 754 +
   navbar 326 = 1255. Los 55px que faltan salían por la derecha, la página
   ganaba desplazamiento horizontal, y al correrla se veía una franja blanca —
   el fondo oscuro mide el ancho de la ventana, no el del documento.

   Entre 1200 y 1400 se recorta la separación entre ítems, que es de donde se
   pueden sacar esos píxeles sin tocar nada más. Desde 1400 sobra espacio y
   todo vuelve a su tamaño normal. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #kt_app_header_menu > .menu-item {
        margin-right: 0 !important;
    }

    #kt_app_header_menu > .menu-item > .menu-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ── La franja oscura no puede cortar las tarjetas ──────────────────────────
   El bloque de «toolbar oscuro» del bundle deja la franja 100px más larga de
   lo que ocupa su contenido y sube el contenido esos mismos 100px para que la
   primera tarjeta quede flotando encima. Con una tarjeta corta —«Mi día»— se
   ve bien. Con dos tarjetas altas al lado —la carga de evidencia— el borde
   inferior de la franja las cruza por la mitad, y eso no se lee como diseño:
   se lee como una pantalla a medio dibujar.

   El alto de una tarjeta lo decide su contenido, así que ningún valor fijo de
   sobresalto funciona en todas. La franja termina donde termina su texto y el
   contenido empieza debajo, que se ve igual en todas las pantallas.

   Va acá y no en `style.bundle.css`: ese archivo es del tema y se reemplaza
   entero al actualizarlo. */
@media (min-width: 992px) {
    .app-toolbar {
        padding-bottom: 1.5rem !important;
    }

    .app-content {
        margin-top: 0;
    }
}

@media (max-width: 991.98px) {
    .app-content {
        margin-top: 0;
    }
}

/* `min-w-0` no viene en Metronic, y sin él un hijo flex no se encoge: el
   título del visor no se acortaba y un nombre de archivo largo empujaba
   «Descargar» y la X fuera de la pantalla (02-10-2026). */
.min-w-0 {
    min-width: 0 !important;
}