/* ==========================================================================
   presentado-tema.css
   Paleta y temas del aplicativo de Presentado.

   Se carga DESPUES de presentado-base.css y redefine sus tokens de color, sin
   cambiarles el nombre: main y revision consumen --clr-* en 326 lugares y
   siguen funcionando sin tocarlos. Lo que cambia es a que color apunta cada
   nombre, y que ahora depende del tema.

   El primario es el naranja #ff6a00 de ventas-presenciales y
   presentado-recepcion, para que los aplicativos se vean de la misma familia.

   TRES ESTADOS DE TEMA, en este orden de prioridad:
     1. [data-theme="dark"] / [data-theme="light"]  -> eleccion explicita
     2. prefers-color-scheme                        -> preferencia del sistema
     3. :root                                       -> claro, el que queda
   ========================================================================== */

:root {
    /* Sin eleccion explicita sigue al sistema; con `data-theme` puesto, manda
       la eleccion -mas abajo-. Estaba solo en `light dark`, asi que al forzar el
       tema claro el navegador seguia dando sus colores oscuros a lo que pinta
       el: el texto por defecto de los botones, las barras de scroll y los
       controles de formulario. De ahi el icono blanco sobre blanco de las
       miniaturas. */
    color-scheme: light dark;

    /* ----------------------------------------------------------------------
       Marca — igual en los dos temas
       ---------------------------------------------------------------------- */
    --clr-marca:          #ff6a00;
    --clr-marca-fuerte:   #e85c00;
    --clr-marca-suave:    #ff9140;
    --clr-marca-tenue:    rgba(255, 106, 0, 0.14);
    --clr-marca-halo:     rgba(255, 106, 0, 0.42);
    --clr-acento:         #ff2d1a;
    /* Texto que va ENCIMA del naranja. Blanco daria 2.87 de contraste, por
       debajo del minimo; este marron casi negro da 7.31 y deja el naranja
       de marca intacto. */
    --clr-sobre-marca:    #2a1200;
    /* El fondo de un boton que lleva texto encima. En claro es el mismo
       naranja de marca; en oscuro baja, porque ahi el texto va claro. */
    --clr-marca-relleno:  var(--clr-marca);
    /* El naranja de marca como TEXTO sobre una superficie clara da 2.87 de
       contraste: sirve de relleno, no para leer. Esta variante es la que se usa
       cuando la marca tiene que leerse -etiquetas, enlaces-. */
    --clr-marca-texto:    #b34200;

    /* Compatibilidad: main y revision piden estos nombres para sus acentos.
       Se remapean al naranja para que toda la interfaz hable el mismo idioma. */
    --clr-blue:           var(--clr-marca);
    --clr-blue-dark:      var(--clr-marca-fuerte);
    --clr-blue-dim:       var(--clr-marca-tenue);
    --clr-purple:         var(--clr-acento);
    --clr-purple-dim:     rgba(255, 45, 26, 0.16);
    --clr-teal:           var(--clr-marca);
    --clr-teal-dim:       var(--clr-marca-tenue);
    --clr-teal-glow:      var(--clr-marca-halo);
    --clr-pink:           var(--clr-acento);

    /* ----------------------------------------------------------------------
       Tema claro (el de partida)
       ---------------------------------------------------------------------- */
    --clr-bg:             #f6f6f5;
    --clr-surface-1:      #ffffff;
    --clr-surface-2:      #fafaf9;
    --clr-surface-3:      #f2f1f0;
    --clr-border:         rgba(0, 0, 0, 0.12);
    --clr-border-light:   rgba(0, 0, 0, 0.06);

    --clr-text:           #0b0b0b;
    --clr-text-muted:     #4a4a4a;
    --clr-text-dimmed:    #6d6d6d;
    --clr-text-inverso:   #ffffff;

    --clr-success:        #10b981;
    --clr-success-light:  rgba(16, 185, 129, 0.14);
    --clr-danger:         #ef4444;
    --clr-danger-light:   rgba(239, 68, 68, 0.14);
    /* Los colores de estado como TEXTO: el color puro sobre su propio fondo
       tenue da 3.14 de contraste en claro -medido-, o sea ilegible. Mismo
       motivo que --clr-marca-texto, y ningun valor fijo sirve para los dos
       temas: #991b1b da 6.93 en claro pero 1.65 en oscuro. */
    --clr-success-texto:  #047857;
    --clr-danger-texto:   #b91c1c;
    --clr-warning-texto:  #92400e;
    --clr-warning:        #f59e0b;
    --clr-warning-light:  rgba(245, 158, 11, 0.14);

    /* Retiro en tienda (carriers sin despacho). Violeta porque es el unico
       tono libre: el naranja ya dice "seleccionado" y "rapido", el verde
       "completo", el rojo y el ambar son avisos, y un azul se pierde sobre el
       marino del tema oscuro. El fondo es opaco -mezclado con la superficie-
       para que se lea igual sobre una tarjeta o una fila pintadas de naranja.
       Medido: el texto sobre el fondo da 5.9 en claro y 6.3 en oscuro; el
       blanco sobre el relleno, 7.1 en los dos. */
    --clr-retiro:         #7c3aed;
    --clr-retiro-fondo:   color-mix(in srgb, #7c3aed 12%, var(--clr-surface-1));
    --clr-retiro-borde:   color-mix(in srgb, #7c3aed 30%, transparent);
    --clr-retiro-texto:   #6d28d9;
    --clr-retiro-relleno: #6d28d9;

    /* Cambio de tecnica (pedidos CMB, TIPO_ORDER 3). Verde azulado: con el
       violeta del retiro, los dos tonos que no dicen otra cosa (ver arriba).
       El mismo armado que el retiro: fondo opaco y relleno con texto blanco. */
    --clr-cambio:         #0f766e;
    --clr-cambio-fondo:   color-mix(in srgb, #0d9488 12%, var(--clr-surface-1));
    --clr-cambio-borde:   color-mix(in srgb, #0d9488 32%, transparent);
    --clr-cambio-texto:   #0f766e;
    --clr-cambio-relleno: #0f766e;

    /* Cristal: la tarjeta translucida sobre el fondo animado */
    --cristal-fondo:      rgba(255, 255, 255, 0.58);
    --cristal-borde:      rgba(255, 255, 255, 0.85);
    --cristal-difuso:     blur(20px) saturate(180%);
    --cristal-sombra:     0 10px 40px rgba(15, 32, 56, 0.13);
    /* Brillo del borde superior: es lo que hace leer "vidrio" y no "panel" */
    --cristal-brillo:     rgba(255, 255, 255, 0.9);

    /* Manchas del fondo animado */
    --halo-1:             rgba(255, 106, 0, 0.14);
    --halo-2:             rgba(59, 110, 180, 0.12);
    --halo-3:             rgba(0, 0, 0, 0.04);
    /* Trama de lineas del fondo: tiene que ser casi imperceptible */
    --trama-linea:        rgba(15, 32, 56, 0.055);

    /* Fondo de los campos. Necesita su propio token porque la tarjeta es
       translucida: si el campo usa el color de la tarjeta, no se distingue. */
    --clr-campo:          #ffffff;
    --clr-campo-foco:     #ffffff;

    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.12);

    /* Curvas de animacion, tomadas del sistema de ventas-presenciales */
    --ease-salida:  cubic-bezier(0, 0, 0.2, 1);
    --ease-rebote:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-rapida:   150ms;
    --dur-normal:   250ms;
    --dur-lenta:    350ms;
}

/* --------------------------------------------------------------------------
   Tema oscuro por preferencia del sistema.
   Se excluye [data-theme="light"] para que la eleccion explicita mande.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Azul marino, no gris: le da caracter propio al aplicativo y ademas
           contrasta mejor -el minimo medido pasa de 4.29 a 4.66, todos AA-. */
        --clr-bg:            #0d1a2d;
        --clr-surface-1:     #132540;
        --clr-surface-2:     #172c4a;
        --clr-surface-3:     #1d3556;
        --clr-border:        rgba(147, 180, 220, 0.18);
        --clr-border-light:  rgba(147, 180, 220, 0.10);

        --clr-text:          #eef4fb;
        --clr-text-muted:    #9db4d0;

        /* El texto que va ENCIMA del naranja pleno, claro en tema oscuro. En
           claro se queda con el marron de mas arriba. */
        --clr-sobre-marca:   #ffffff;
        /* Un naranja mas hondo SOLO para los rellenos con texto: sobre el
           pleno el blanco da 2.87 y AA pide 4.5. Aca llega a 4.56. El
           acento -bordes, iconos, tintes- sigue en el pleno. */
        --clr-marca-relleno: #c65200;
        --clr-text-dimmed:   #7590b0;
        --clr-text-inverso:  #0d1a2d;
        --clr-marca-texto:   #ff8c3a;

        --clr-success-light: rgba(16, 185, 129, 0.18);
        --clr-danger-light:  rgba(239, 68, 68, 0.18);
        --clr-warning-light: rgba(245, 158, 11, 0.18);
        /* En oscuro el estado como texto va al lado CLARO del color */
        --clr-success-texto: #6ee7b7;
        --clr-danger-texto:  #fca5a5;
        --clr-warning-texto: #fcd34d;

        /* Retiro: el icono y el texto al lado claro del violeta */
        --clr-retiro:        #a78bfa;
        --clr-retiro-fondo:  color-mix(in srgb, #8b5cf6 24%, var(--clr-surface-1));
        --clr-retiro-borde:  color-mix(in srgb, #a78bfa 40%, transparent);
        --clr-retiro-texto:  #c4b5fd;

        /* Cambio: el icono y el texto al lado claro del verde azulado */
        --clr-cambio:        #5eead4;
        --clr-cambio-fondo:  color-mix(in srgb, #14b8a6 22%, var(--clr-surface-1));
        --clr-cambio-borde:  color-mix(in srgb, #5eead4 40%, transparent);
        --clr-cambio-texto:  #99f6e4;

        --cristal-fondo:     rgba(19, 37, 64, 0.62);
        --cristal-borde:     rgba(147, 180, 220, 0.22);
        --cristal-sombra:    0 12px 44px rgba(3, 10, 22, 0.62);
        --cristal-brillo:    rgba(190, 215, 245, 0.35);

        --halo-1:            rgba(255, 106, 0, 0.10);
        --halo-2:            rgba(59, 110, 180, 0.20);
        --halo-3:            rgba(147, 180, 220, 0.06);
        /* Trama de lineas del fondo: casi imperceptible */
        --trama-linea:       rgba(147, 180, 220, 0.045);

        /* Mas oscuro que la tarjeta: el campo se lee hundido y el icono queda
           claramente adentro. */
        --clr-campo:         rgba(9, 20, 38, 0.72);
        --clr-campo-foco:    rgba(9, 20, 38, 0.9);

        --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 3px -1px rgba(0, 0, 0, 0.45);
        --shadow-md:  0 6px 16px -2px rgba(0, 0, 0, 0.50), 0 2px 8px -2px rgba(0, 0, 0, 0.50);
        --shadow-lg:  0 14px 24px -6px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.55);
    }
}

/* --------------------------------------------------------------------------
   Tema oscuro elegido a mano. Repite los valores del bloque anterior porque
   una variable CSS no se puede "heredar" de un @media: hay que redeclararla.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    /* Azul marino, no gris: le da caracter propio al aplicativo y ademas
       contrasta mejor -el minimo medido pasa de 4.29 a 4.66, todos AA-. */
    --clr-bg:            #0d1a2d;
    --clr-surface-1:     #132540;
    --clr-surface-2:     #172c4a;
    --clr-surface-3:     #1d3556;
    --clr-border:        rgba(147, 180, 220, 0.18);
    --clr-border-light:  rgba(147, 180, 220, 0.10);

    --clr-text:          #eef4fb;
    --clr-text-muted:    #9db4d0;
    --clr-text-dimmed:   #7590b0;

    /* El texto que va ENCIMA del naranja pleno, claro en tema oscuro. En claro
       se queda con el marron de mas arriba. */
    --clr-sobre-marca:   #ffffff;
    /* Un naranja mas hondo SOLO para los rellenos con texto: sobre el pleno
       el blanco da 2.87 y AA pide 4.5. Aca llega a 4.56. El acento -bordes,
       iconos, tintes- sigue en el pleno. */
    --clr-marca-relleno: #c65200;
    --clr-text-inverso:  #0d1a2d;
    --clr-marca-texto:   #ff8c3a;

    --clr-success-light: rgba(16, 185, 129, 0.18);
    --clr-danger-light:  rgba(239, 68, 68, 0.18);
    --clr-warning-light: rgba(245, 158, 11, 0.18);
    /* En oscuro el estado como texto va al lado CLARO del color */
    --clr-success-texto: #6ee7b7;
    --clr-danger-texto:  #fca5a5;
    --clr-warning-texto: #fcd34d;

    /* Retiro: el icono y el texto al lado claro del violeta */
    --clr-retiro:        #a78bfa;
    --clr-retiro-fondo:  color-mix(in srgb, #8b5cf6 24%, var(--clr-surface-1));
    --clr-retiro-borde:  color-mix(in srgb, #a78bfa 40%, transparent);
    --clr-retiro-texto:  #c4b5fd;

    /* Cambio: el icono y el texto al lado claro del verde azulado */
    --clr-cambio:        #5eead4;
    --clr-cambio-fondo:  color-mix(in srgb, #14b8a6 22%, var(--clr-surface-1));
    --clr-cambio-borde:  color-mix(in srgb, #5eead4 40%, transparent);
    --clr-cambio-texto:  #99f6e4;

    --cristal-fondo:     rgba(19, 37, 64, 0.62);
    --cristal-borde:     rgba(147, 180, 220, 0.22);
    --cristal-sombra:    0 12px 44px rgba(3, 10, 22, 0.62);
    --cristal-brillo:    rgba(190, 215, 245, 0.35);

    --halo-1:            rgba(255, 106, 0, 0.10);
    --halo-2:            rgba(59, 110, 180, 0.20);
    --halo-3:            rgba(147, 180, 220, 0.06);
    /* Trama de lineas del fondo: casi imperceptible */
    --trama-linea:       rgba(147, 180, 220, 0.045);

    /* Mas oscuro que la tarjeta: el campo se lee hundido y el icono queda
       claramente adentro. */
    --clr-campo:         rgba(9, 20, 38, 0.72);
    --clr-campo-foco:    rgba(9, 20, 38, 0.9);

    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 3px -1px rgba(0, 0, 0, 0.45);
    --shadow-md:  0 6px 16px -2px rgba(0, 0, 0, 0.50), 0 2px 8px -2px rgba(0, 0, 0, 0.50);
    --shadow-lg:  0 14px 24px -6px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Respeto por quien pidio menos movimiento.
   El aplicativo se usa en deposito muchas horas seguidas; si el sistema pide
   reducir animaciones, se reducen. No se apagan del todo -eso rompe los
   estados que dependen de una transicion- pero quedan practicamente
   instantaneas.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   BOTON DE CAMBIO DE TEMA
   Vive aca y no en la hoja de una pantalla porque lo usan todas: pertenece al
   sistema de temas. Los ids que lee presentado-tema.js son temaBtn y temaIcono.
   -------------------------------------------------------------------------- */
.tema-btn {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: var(--z-barra-fija);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--cristal-fondo);
    backdrop-filter: var(--cristal-difuso);
    -webkit-backdrop-filter: var(--cristal-difuso);
    color: var(--clr-text-muted);
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        color var(--dur-rapida) var(--ease-salida),
        border-color var(--dur-rapida) var(--ease-salida),
        transform var(--dur-rapida) var(--ease-rebote);
}

.tema-btn:hover {
    color: var(--clr-marca);
    border-color: var(--clr-marca);
    transform: rotate(-18deg) scale(1.06);
}

.tema-btn:active {
    transform: scale(0.94);
}

/* ==========================================================================
   MODAL DE INACTIVIDAD — compartido por login y main

   Vive aca y no en la hoja de cada pantalla porque es EL MISMO widget: pide
   elegir un concepto para registrar la pausa. Estaba definido tres veces -base,
   login y main, 25 reglas entre las tres- con markup distinto en cada una, y de
   ahi que se vieran diferentes.

   Lo unico que cambia entre pantallas son los ids de los controles, porque cada
   JS busca los suyos, y que el login tiene un boton de cancelar de mas.
   ========================================================================== */

/* Panel: dos superficies en total -la del panel y la de la lista, hundida-. */
.inactividad-panel {
    width: min(440px, calc(100vw - 24px));
    /* Aprovecha el alto disponible. Con solo max-height el panel se ajustaba a su
       contenido -medido: 483px de 805- porque la lista pedia 5 filas y nadie la
       estiraba. Con height, el panel toma el alto y la lista, que es el unico
       hijo que crece, se queda con lo que sobra. El tope evita que en una
       pantalla muy alta quede un modal desproporcionado. */
    height: min(calc(100dvh - 32px), 720px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 18px;
    background: var(--clr-surface-1);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* --- Cabecera --- */
.inactividad-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--clr-border-light);
    flex-shrink: 0;
}

.inactividad-cabecera::before {
    content: '';
    width: 4px;
    align-self: stretch;
    min-height: 16px;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, var(--clr-marca), var(--clr-acento));
    flex-shrink: 0;
}

.inactividad-titulo {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--text-md);
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--clr-text);
}

/* --- Ayuda ---
   Con 14px arriba y abajo: antes tenia el margen del <p> mas el padding del
   cuerpo, y quedaba con mucho mas aire que el resto de los elementos. */
.inactividad-ayuda {
    margin: 0;
    padding: 14px 16px;
    text-align: center;
    font-size: var(--text-sm);
    line-height: 1.35;
    color: var(--clr-text-muted);
    flex-shrink: 0;
}

/* --- Buscador ---
   La divisoria inferior va como borde del contenedor, y el padding de arriba y
   de abajo es el MISMO: antes el de arriba lo daba el margen de la ayuda y el de
   abajo este padding, asi que no coincidian. */
.inactividad-panel .concepto-buscador {
    /* El ancla del icono absoluto. Sin esto se posiciona contra el panel y
       termina midiendo todo su alto. */
    position: relative;
    display: flex;
    padding: 0 16px 12px;
    margin: 0;
    border-bottom: 1px solid var(--clr-border-light);
    flex-shrink: 0;
}

/* El icono se posiciona respecto al contenedor, que ahora tiene padding: hay que
   descontarlo o la lupa queda encima del texto -era el bug del placeholder
   superpuesto-. */
.inactividad-panel .concepto-buscador__icono {
    position: absolute;
    left: 16px;
    top: 0;
    /* Hasta donde termina el input: el padding de la divisoria no es del campo */
    bottom: 12px;
    width: 40px;
    /* Font Awesome declara `display: var(--fa-display, inline-block)` con la
       misma especificidad y cargando despues: hay que fijar SU variable, no el
       display. Sin esto el icono sale de la caja y queda sobre el placeholder. */
    --fa-display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--clr-text-dimmed);
    font-size: 13px;
    pointer-events: none;
    transition: color var(--dur-rapida, 150ms) var(--ease-salida, ease);
}

/* La divisoria vertical entre el icono y el texto, con el mismo aire arriba y
   abajo -antes el de arriba lo daba otro elemento y no coincidian-. */
.inactividad-panel .concepto-buscador__icono::after {
    content: '';
    position: absolute;
    right: 0;
    top: 22%;
    height: 56%;
    width: 1px;
    background: var(--clr-border);
    transition: background var(--dur-rapida, 150ms) var(--ease-salida, ease);
}

.inactividad-panel .concepto-buscador:focus-within .concepto-buscador__icono {
    color: var(--clr-marca);
}

.inactividad-panel .concepto-buscador:focus-within .concepto-buscador__icono::after {
    background: var(--clr-marca);
}

/* Con los ids concretos: en main hay reglas con ID para estos inputs y le ganan
   por especificidad a la clase, dejando el texto sobre la lupa. */
.inactividad-panel .concepto-buscador input,
.inactividad-panel .concepto-buscador #searchInactivity,
.inactividad-panel .concepto-buscador #inactivitySearch {
    width: 100%;
    /* Las mismas medidas que los otros cuatro buscadores de la app: este era el
       unico que difería -44px de alto y radio 12 contra 38 y 10-. El font-size
       de 16px si se conserva, que evita el zoom de iOS al enfocar. */
    height: 38px;
    /* 16px del borde + 40px de la celda de la lupa */
    padding: 0 14px 0 56px;
    margin: 0;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-campo);
    color: var(--clr-text);
    /* 16px: evita que iOS haga zoom al enfocar */
    font-size: 16px;
}

.inactividad-panel .concepto-buscador input:focus {
    outline: none;
    border-color: var(--clr-marca);
    box-shadow: 0 0 0 3px var(--clr-marca-tenue);
}

/* --- Lista ---
   El aviso de "hay mas" se hace con un degradado FIJO al fondo del contenedor y
   la lista scrolleando por encima: asi el degradado no se mueve con el scroll.
   Se usa la tecnica de background-attachment local + scroll, que muestra la
   sombra solo cuando hay contenido fuera de vista, sin JavaScript. */
.concept-list-inactivity {
    /* 56px y no 46: este modal se usa sobre todo en telefono, y una fila mas
       alta es mas facil de acertar sin mirar. */
    --alto-fila: 56px;
    --filas-visibles: 5;
    /* Sin tope de filas: la lista ocupa el alto que el modal le deje, que ahora
       depende de la pantalla. El minimo evita que se comprima a nada. */
    flex: 1 1 auto;
    min-height: calc(var(--alto-fila) * 3);
    overflow-y: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: var(--text-sm);
    color: var(--clr-text);
    scroll-snap-type: y proximity;

    /* Aviso de "hay mas", solo en el borde que corresponde. Son dos bandas
       oscuras con background-attachment:scroll, asi que viajan con el contenido:
       cuando la lista esta en el tope la de arriba queda fuera de vista, y
       aparece recien al desplazarse. Sin las "tapas" del color del panel que
       habia antes, que producian un halo azul en el tope. */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%)
            top / 100% 0 no-repeat scroll,
        linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%)
            bottom / 100% 0 no-repeat scroll;
    background-color: var(--clr-bg);
    transition: background-size var(--dur-normal, 250ms) var(--ease-salida, ease);
}

/* El aviso aparece SOLO del lado donde hay contenido fuera de vista. Las clases
   las pone PresentadoAvisoScroll: un degradado de CSS no sabe si la lista esta
   en el tope, y un aviso permanente ahi dice "hay mas" cuando no hay. */
.hay-mas-arriba .concept-list-inactivity,
.concept-list-inactivity.hay-mas-arriba {
    background-size: 100% 18px, 100% 0;
}

.hay-mas-abajo .concept-list-inactivity,
.concept-list-inactivity.hay-mas-abajo {
    background-size: 100% 0, 100% 18px;
}

.hay-mas-arriba.hay-mas-abajo .concept-list-inactivity,
.concept-list-inactivity.hay-mas-arriba.hay-mas-abajo {
    background-size: 100% 18px, 100% 18px;
}

.concept-list-inactivity div {
    position: relative;
    min-height: var(--alto-fila, 46px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: none;
    border-bottom: 1px solid var(--clr-border-light);
    border-radius: 0;
    /* Centrado en el DIV: el JS de las dos pantallas pone el texto directo en el
       div, sin <span>, asi que la regla del span de mas abajo no alcanzaba a
       estas filas y el nombre quedaba pegado a la izquierda. */
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--clr-text);
    cursor: pointer;
    scroll-snap-align: start;
    overflow: hidden;
    /* Sin fondo propio: taparia el degradado del aviso de scroll */
    background: none;
    transition: background var(--dur-rapida, 150ms) var(--ease-salida, ease),
                color var(--dur-rapida, 150ms) var(--ease-salida, ease);
}

.concept-list-inactivity div:last-child {
    border-bottom: none;
}

.concept-list-inactivity div > span {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.concept-list-inactivity div:hover:not(.disabled):not(.selected) {
    background: var(--clr-surface-2);
}

.concept-list-inactivity div.selected {
    background: color-mix(in srgb, var(--clr-marca) 28%, transparent);
    color: var(--clr-marca-texto);
    font-weight: 700;
    box-shadow: none;
}

.concept-list-inactivity div.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--clr-marca);
    z-index: 2;
}

.concept-list-inactivity div.disabled {
    color: var(--clr-text-dimmed);
    cursor: not-allowed;
    opacity: 0.55;
}

.concept-list-inactivity .no-results {
    padding: 16px;
    color: var(--clr-text-muted);
    text-align: center;
    font-style: italic;
    cursor: default;
    background: none;
}

/* --- Acciones ---
   Con divisoria arriba, que faltaba: la lista terminaba pegada a los botones. */
.inactividad-acciones {
    display: flex;
    gap: 8px;
    /* Menos aire: 14px arriba y abajo sobraba, el boton quedaba flotando */
    padding: 10px 12px;
    border-top: 1px solid var(--clr-border-light);
    flex-shrink: 0;
}

.inactividad-acciones button {
    flex: 1;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: filter var(--dur-rapida, 150ms) var(--ease-salida, ease),
                background var(--dur-rapida, 150ms) var(--ease-salida, ease),
                transform var(--dur-rapida, 150ms) var(--ease-salida, ease);
}

#confirmInactivityBtn {
    border: none;
    background: linear-gradient(135deg, var(--clr-marca), var(--clr-marca-fuerte));
    color: var(--clr-sobre-marca);
    box-shadow: 0 4px 14px var(--clr-marca-tenue);
}

#confirmInactivityBtn:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

#confirmInactivityBtn:disabled {
    background: var(--clr-surface-2);
    color: var(--clr-text-dimmed);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

#cancelInactivityBtn {
    border: 1px solid var(--clr-border);
    background: transparent;
    color: var(--clr-text-muted);
}

#cancelInactivityBtn:hover {
    background: var(--clr-surface-2);
    color: var(--clr-text);
}

#cancelInactivityBtn:active,
#confirmInactivityBtn:active:not(:disabled) {
    transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   LISTA BLOQUEADA MIENTRAS SE REGISTRA
   El JS pone .esta-ocupada al confirmar. Sin esto el operario seguia tocando
   conceptos durante la carga, sin ninguna señal de que su click ya conto.
   -------------------------------------------------------------------------- */
.concept-list-inactivity.esta-ocupada {
    pointer-events: none;
    opacity: 0.5;
    filter: saturate(0.6);
    transition: opacity var(--dur-normal, 250ms) var(--ease-salida, ease);
}

/* --------------------------------------------------------------------------
   color-scheme atado al tema elegido

   Lo que pinta el NAVEGADOR -el `buttontext` de un boton sin color propio, las
   barras de scroll, los controles de formulario, el relleno de autocompletado-
   no mira nuestros tokens: mira `color-scheme`. Sin esto, elegir tema claro a
   mano dejaba esas piezas en oscuro.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}