/* =========================================
   CONTENCIÓN VISUAL MÓVIL
   Va al final a propósito: gana la cascada a las reglas de 100vh / height:auto
   repartidas por el archivo sin tener que tocarlas una a una.
========================================= */

/* 1. Bloqueo del scroll infinito: el documento mide exactamente la pantalla y
   solo #app-container (el área de vistas) desplaza. min-height:0 anula los
   min-height:100vh previos, que en móvil son más altos que 100dvh y cortaban el pie. */
html,
body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

html body #marco-app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

/* app.js ya resetea #app-container.scrollTop al cambiar de vista; los modos
   enfoque/onboarding usan selectores más específicos y conservan su layout */
html body #app-container {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Las vistas rellenan el área visible en lugar de sumar otro 100vh dentro del scroll */
#app-container > .vista,
#app-container > .vista-app {
    min-height: 100%;
}

/* 2. Títulos de vista: el h1 es una placa inline-block de una palabra en mayúsculas;
   en pantallas estrechas no cabía entre la hamburguesa y el botón ❓ y desbordaba */
.header-superior,
.cabecera-vista {
    flex-wrap: wrap;
    min-width: 0;
}

/* break-word (no anywhere): anywhere encoge el ancho mínimo de la placa y el flex la estrechaba
   hasta partir palabras que sí cabían ("CÉNTR/ATE"); break-word solo parte si de verdad no cabe */
.header-superior h1,
.cabecera-vista h1 {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 480px) {
    /* Incluye los selectores con id: sin ellos #vista-campamento h1 (!important) ganaba y
       el título del Campamento seguía con el tamaño de escritorio */
    html body .header-superior h1,
    html body .cabecera-vista h1,
    html body #vista-campamento h1,
    html body #vista-planificador h1,
    html body #vista-planificacion h1,
    html body #vista-completadas h1,
    html body #titulo-planificacion,
    html body #titulo-completadas,
    html body #titulo-ajustes {
        font-size: clamp(1.05rem, 5.2vw, 1.4rem);
        letter-spacing: 0.06em;
        padding: 0.5rem 1rem;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 379.98px) {
    /* Hueco justo para la hamburguesa fija (izq.) y el botón ❓ de 40px (dcha.) */
    html body .header-superior,
    html body .cabecera-vista {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* 3. Subtareas y micro-pasos: el texto ocupa el espacio libre y parte palabras
   largas; los botones conservan su tamaño táctil y no se montan sobre las letras */
.subtarea-item,
.subtarea-pildora,
.card-tarea-titulo,
.texto-subtarea-modal,
.item-micro-paso {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.subtarea-item .subtarea-texto,
.item-micro-paso > span {
    flex: 1 1 auto;
    min-width: 0;
}

.item-micro-paso {
    gap: 0.5rem;
}

.item-micro-paso button {
    flex-shrink: 0;
    min-width: 2rem;
    min-height: 2rem;
}

.card-tarea-titulo {
    flex: 1 1 8rem;
    min-width: 0;
}

@media (max-width: 379.98px) {
    .card-tarea-backlog,
    #lista-tareas-backlog > li {
        padding: 0.75rem;
    }

    .seccion-planificador-creacion {
        padding: 0.875rem;
    }

    .item-subtarea-detalle-modal {
        flex-wrap: wrap;
        padding: 0.625rem 0.75rem;
    }

    .modal-detalle-contenedor {
        min-width: 0;
    }
}

/* 4. Indicador de subtareas ocultas: con más de 3 ítems la lista se limita a ~3,5
   (el 4.º asoma), muestra una barra grafito y un desvanecido inferior que avisa
   de que hay más sin obligar a adivinarlo */
#lista-micro-pasos:has(> li:nth-child(4)),
.lista-subtareas-modal-ul:has(> li:nth-child(4)) {
    overflow-y: auto;
    padding-right: 0.5rem !important; /* #lista-micro-pasos trae padding en línea */
    --fondo-desvanecido: var(--fondo-paneles);
}

#lista-micro-pasos:has(> li:nth-child(4)) { max-height: 8.5rem; }
.lista-subtareas-modal-ul:has(> li:nth-child(4)) {
    max-height: 10.75rem;
    --fondo-desvanecido: #1a1c20; /* fondo de .modal-detalle-contenedor */
}

/* La regla global oculta todas las barras: aquí se reactivan a propósito */
#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar,
#lista-subtareas-campamento::-webkit-scrollbar {
    display: block;
    width: 6px;
}

#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar-track,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar-track,
#lista-subtareas-campamento::-webkit-scrollbar-track {
    background: var(--fondo-app);
    border-radius: 3px;
}

#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar-thumb,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar-thumb,
#lista-subtareas-campamento::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 3px;
}

#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar-thumb:hover,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar-thumb:hover,
#lista-subtareas-campamento::-webkit-scrollbar-thumb:hover {
    background: #5c5c5c;
}

/* Firefox no conoce ::-webkit-scrollbar; en Chrome scrollbar-color anularía
   los estilos de arriba, por eso solo se aplica donde no existen */
@supports not selector(::-webkit-scrollbar) {
    #lista-micro-pasos:has(> li:nth-child(4)),
    .lista-subtareas-modal-ul:has(> li:nth-child(4)),
    #lista-subtareas-campamento {
        scrollbar-width: thin;
        scrollbar-color: #4a4a4a var(--fondo-app);
    }
}

/* Desvanecido pegado al borde inferior visible mientras se desplaza; al llegar
   al final queda tras el último ítem y lo deja totalmente legible */
#lista-micro-pasos:has(> li:nth-child(4))::after,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    flex: 0 0 auto;
    height: 1.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--fondo-desvanecido));
}

/* =========================================
   RENDIMIENTO WEBVIEW (60 FPS EN GAMA MEDIA/BAJA)
   Solo transform/opacity en lo que se anima de forma continua o a pantalla completa:
   el compositor de la GPU los mueve sin recalcular layout ni repintar.
========================================= */

/* 1. Menú lateral (modo cajón): se desliza con transform en vez de animar `left`, que
   forzaba layout + repintado de 290-340px en cada fotograma. Mismas condiciones que activan
   el cajón (< 900px o vertical); en escritorio horizontal sigue anclado como columna. */
@media (max-width: 899px), (orientation: portrait) {
    html body #menu-lateral,
    html body .menu-lateral {
        left: 0;
        transform: translateX(calc(-100% - 30px)); /* +30px: oculta también la sombra */
        will-change: transform;
    }

    /* Sin !important: así el Modo Calma (transition-duration 0s) también lo deja sin deslizamiento */
    html:root body #menu-lateral,
    html:root body .menu-lateral {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    html body #menu-lateral.abierto,
    html body .menu-lateral.abierto {
        transform: translateX(0);
    }
}

/* 2. Compañero del Modo Enfoque: latidoZen corre durante TODA la misión y animaba
   filter: drop-shadow, que se re-rasteriza en cada fotograma. Ahora la imagen solo se
   mueve (transform) con una sombra fija, y la "respiración" del brillo es un halo
   detrás que solo cambia opacity/transform. (::before lo usan las auras del Vínculo.) */
#img-companero-mision {
    filter: drop-shadow(0 0 12px rgba(var(--color-tema-rgb), 0.35));
    will-change: transform;
}

@keyframes latidoZen {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(0.97); } /* Inhala: sube un poco y se concentra hacia adentro */
}

.aura-concentracion {
    position: relative;
    isolation: isolate; /* el halo queda detrás del compañero sin salir del contenedor */
}

.aura-concentracion::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--color-tema-rgb), 0.45) 0%, rgba(var(--color-tema-rgb), 0.12) 40%, transparent 68%);
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(0.9);
    animation: halo-zen 6s ease-in-out infinite; /* mismo ritmo que latidoZen */
    will-change: opacity, transform;
}

@keyframes halo-zen {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    #img-companero-mision,
    .aura-concentracion::after {
        animation: none;
    }
}

/* Anillo del temporizador: stroke-dashoffset no lo acelera la GPU y la transición de 1s lo
   repintaba ~60 veces por segundo durante toda la misión, para avanzar menos de 1px por
   segundo (misión de 25 min). Sin transición: un repintado por segundo, a simple vista igual. */
.anillo-activo {
    transition: none;
}

/* 3. Desenfoques que no aportan nada visible pero cuestan GPU:
   - Placas de título: debajo solo hay el fondo liso de la vista, el blur era invisible.
   - Barra sticky del Planificador: el contenido se desplaza por debajo y el blur de 14px
     se recalculaba en cada fotograma de scroll. Un fondo casi opaco se ve prácticamente igual. */
html body h1,
html body .header-superior h1,
html body .cabecera-vista h1,
html body #titulo-planificacion,
html body #titulo-completadas,
html body #titulo-ajustes {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.barra-sticky-planificador,
.interruptor-vistas-planificador {
    background: rgba(30, 30, 30, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 4. El resto de desenfoques (revisión de riesgos del 2026-10-14): en móviles modestos el blur se
   recalcula cada vez que algo se mueve detrás (scroll, cielo animado, compañero flotando). Se cambia
   por el mismo color casi opaco: se ve prácticamente igual y la GPU no trabaja. */
#modal-fin-mision,
#modal-foto-perfil,
#overlay-panel {
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.modal-celebracion-nivel,
.modal-bautizo,
.overlay-menu {
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.modal-guarida {
    background: rgba(5, 8, 12, 0.88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#modal-detalle-mision {
    background: rgba(10, 12, 14, 0.9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.libro-categorias,
.libro-panel {
    background: rgba(24, 26, 32, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tarjeta-glass-expedicion,
.contenedor-tareas-dia-seleccionado {
    background: rgba(30, 30, 34, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.controles-filtro-dia {
    background: rgba(20, 20, 24, 0.9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#btn-menu-hamburguesa {
    background: rgba(22, 24, 34, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Ya casi opacos o sobre un fondo quieto: basta con quitar el desenfoque */
.aviso-logro,
.vestidor-perfil,
.tarjeta-guarida,
.input-mes-constancia,
.modal-detalle-contenedor {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* =========================================
   MODO ENFOQUE EN UNA SOLA VISTA (maqueta D5 del 22-oct, v2-3; misión en curso v3 del 26-oct, MC-1)
   Va agrupado en el centro, sin huecos aunque la misión no tenga objetivos. Orden: anillo con el
   compañero dentro, tiempo en palabras, título, objetivo, sonidos y los dos botones. Los tamaños en
   vh se comprimen en pantallas bajas. Si aun así no cabe (móvil pequeño o letra grande), empieza
   arriba y se desliza hasta «Parar por ahora»: «safe center» centra solo si cabe; con «center» a
   secas sobraba por los dos lados y lo de arriba quedaba fuera, sin poder llegar.
========================================= */
html body.modo-enfoque-activo #vista-mision {
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: safe center;
    padding: max(2.5vh, env(safe-area-inset-top)) 1rem max(2vh, env(safe-area-inset-bottom));
}

html body.modo-enfoque-activo #vista-mision .entorno-inmersivo {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: clamp(6px, 1.4vh, 16px);
}

#vista-mision .entorno-inmersivo > * {
    flex-shrink: 0;
}

/* El anillo crece hasta ~240px: ahora lleva al compañero dentro */
html body.modo-enfoque-activo #vista-mision .contenedor-temporizador-zen {
    width: clamp(120px, 27vh, 240px);
    height: clamp(120px, 27vh, 240px);
    margin: 0 auto clamp(4px, 1.2vh, 12px);
}

/* Compañero dentro del anillo: ocupa ~62 % del círculo, centrado y por encima de las capas del anillo */
#vista-mision #zona-companero-mision {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    margin: 0;
    pointer-events: none;
    --tamano-companero: 62%;
}

#vista-mision .aura-concentracion {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tamano-companero);
    height: var(--tamano-companero);
    margin: 0;
}

#vista-mision #img-companero-mision {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

#vista-mision .aura-concentracion::after {
    width: 115%;
    height: 115%;
}

/* El aura del vínculo usa la misma caja que la imagen (dentro del anillo) */
#vista-mision #zona-companero-mision .aura-organica {
    inset: 0;
    height: auto;
    max-height: none;
    transform: none;
}

/* Tiempo en palabras debajo del anillo; un toque enseña los números y otro los quita */
#vista-mision .tiempo-mision {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    margin: 0;
    padding: 2px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

#vista-mision .tiempo-mision:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

/* MC-3: los textos grandes llevan un tope según el ancho (móvil pequeño o letra del sistema grande).
   En 412 px con letra normal el tope no llega a actuar y se ve igual; ninguna letra baja de 15,5 px (mínimo de la app, decisión de Sergio 26-oct) */
#vista-mision .tiempo-palabras {
    font-size: min(clamp(1.25rem, 3.4vh, 1.6rem), 6.25vw);
    line-height: 1.25;
    color: var(--color-texto);
}

#vista-mision .tiempo-quedan {
    font-size: max(15.5px, min(clamp(1rem, 2.5vh, 1.15rem), 5vw));
    line-height: 1.3;
    color: var(--texto-secundario);
}

/* Los números solo se ven a petición, en el sitio de las palabras */
#vista-mision .tiempo-mision .tiempo-discreto {
    display: none;
    position: static;
    font-size: clamp(1.4rem, 3.8vh, 1.8rem);
}

#vista-mision .tiempo-mision.con-numeros .tiempo-discreto {
    display: block;
}

#vista-mision .tiempo-mision.con-numeros .tiempo-palabras {
    display: none;
}

/* MC-2: los tres sonidos nunca se salen por los lados. Si no caben en una fila (320 px o letra
   grande), pasan a dos filas centradas; antes iban forzados a una sola y Silencio y Lo-Fi se cortaban */
#vista-mision .selector-ambiente {
    margin: 0;
    gap: 6px;
    row-gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

#vista-mision .btn-ambiente {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.4rem clamp(0.5rem, 2.5vw, 0.9rem);
    font-size: max(15.5px, min(clamp(var(--letra-pequena), 3.4vw, 1rem), 4.4vw));
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* En 320-360px los iconos de línea no caben con el espaciado normal: se aprieta sin bajar la letra */
@media (max-width: 360px) {
    #vista-mision .selector-ambiente {
        gap: 4px;
    }

    #vista-mision .btn-ambiente {
        padding: 0.4rem 0.45rem;
        letter-spacing: 0;
    }
}

/* Título en el color del tema, como en la maqueta */
#vista-mision #titulo-mision-activa {
    font-size: min(clamp(1.1rem, 3.2vh, 1.6rem), 6.25vw);
    color: var(--color-tema);
    margin: 0;
    /* Títulos muy largos: máximo 3 líneas para no empujar los controles fuera de la pantalla */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#vista-mision #lista-subtareas-activa {
    margin: 0 auto;
}

#vista-mision #lista-subtareas-activa:empty {
    display: none;
}

#vista-mision #lista-subtareas-activa .subtarea-item.paso-activo,
#vista-mision #lista-subtareas-activa .paso-completado-exito {
    padding: min(clamp(0.75rem, 2.2vh, 1.6rem), 5vw) clamp(1rem, 4vw, 2rem);
    font-size: min(clamp(1rem, 2.6vh, 1.3rem), 5.2vw);
}

/* «Objetivo 1 de 3» va en su propia línea, bajo el texto del paso (alineado con él, no con la casilla) */
#vista-mision #lista-subtareas-activa .subtarea-item.paso-activo:has(> .objetivo-n) {
    flex-wrap: wrap;
    row-gap: 2px;
}

#vista-mision .objetivo-n {
    flex: 0 0 100%;
    padding-left: 38px;
    text-align: left;
    font-size: var(--letra-pequena);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--texto-secundario);
}

/* El estado solo se ve cuando trae un aviso (p. ej. «Solo 2 minutos»); si no, va oculto */
#vista-mision #estado-mision {
    margin: 0;
    font-size: var(--letra-pequena);
}

#vista-mision .checkout-bienestar {
    margin: 0;
}

#vista-mision .checkout-bienestar-pregunta {
    font-size: max(15.5px, min(var(--letra-pequena), 4.6vw));
}

#vista-mision .btn-bienestar {
    width: clamp(44px, 6.5vh, 56px);
    height: clamp(44px, 6.5vh, 56px);
}

/* Botones justo debajo del bloque, uno encima del otro y al alcance del pulgar */
html body.modo-enfoque-activo #vista-mision .grupo-botones-mision {
    flex-direction: column;
    gap: 10px;
    width: min(100%, 360px);
    margin: clamp(4px, 1.2vh, 12px) auto 0;
    padding-bottom: 0;
}

#vista-mision .btn-mision-accion {
    width: 100%;
    min-height: 44px;
    padding: clamp(0.6rem, 1.6vh, 0.75rem) 1rem;
}

/* Pantallas muy bajas (móvil en horizontal): el anillo cede primero y el aviso de estado se retira */
@media (max-height: 560px) {
    html body.modo-enfoque-activo #vista-mision .contenedor-temporizador-zen {
        width: clamp(96px, 24vh, 140px);
        height: clamp(96px, 24vh, 140px);
    }

    #vista-mision #estado-mision {
        display: none;
    }

    #vista-mision #lista-subtareas-activa .subtarea-item.paso-activo {
        padding: 0.4rem 1rem;
    }

    /* Los dos botones lado a lado: ahorran una fila entera */
    html body.modo-enfoque-activo #vista-mision .grupo-botones-mision {
        flex-direction: row;
        width: min(100%, 520px);
    }
}

/* =========================================
   BOTONES DE ENERGÍA: SIEMPRE EN UNA FILA
   Las tres opciones comparten fila con alto fijo. El texto parte línea dentro del botón y,
   si aun así no cabe ("Supervivencia" en 320px), se desliza en vertical por dentro sin
   barra visible, en vez de ensanchar el botón o mandarlo a otra fila.
========================================= */
.botones-energia {
    flex-wrap: nowrap;
}

.btn-energia {
    flex: 1 1 0;
    min-width: 0;
    height: 3.6rem;
    min-height: 44px;
    padding: 0.35rem 0.4rem;
    font-size: clamp(var(--letra-pequena), 3.4vw, 1rem);
    line-height: 1.25;
    /* El espaciado global (0.12em) no cabe en un tercio de 320px: aquí se ajusta solo en estos botones */
    letter-spacing: 0.03em;
    word-spacing: normal;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.btn-energia::-webkit-scrollbar {
    display: none;
}

/* =========================================
   MAPA DE EXPEDICIÓN: LO PLANEADO (BAJA ACTIVACIÓN)
   En la cuadrícula, un aro pequeño y tranquilo marca los días con algo apuntado: no es un relleno,
   así no se confunde con el verde de «hiciste misiones» y se lee igual sobre una celda verde.
   El detalle se lee abajo, en «Planeado»: texto plano en filas, colores apagados y una acción grande.
========================================= */
.marca-planeado {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: transparent;
    opacity: 0.75;
    box-sizing: border-box;
    pointer-events: none;
}

/* La marca de «Planeado» va en su propia línea de la leyenda, bajo la escala de verdes */
.leyenda-constancia {
    flex-wrap: wrap;
}

.leyenda-constancia .leyenda-texto {
    white-space: nowrap;
}

.leyenda-planeado-grupo {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.marca-planeado-leyenda {
    position: static;
    color: var(--color-texto-secundario);
}

.subtitulo-detalle-dia {
    margin: 1.1rem 0 0.6rem;
    font-size: var(--letra-pequena);
    font-weight: 600;
    color: var(--color-texto-secundario);
}

.subtitulo-detalle-dia[hidden] {
    display: none;
}

.planeado-dia .subtitulo-detalle-dia {
    margin-top: 0.8rem;
}

.lista-dia-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-dia-item {
    display: grid;
    grid-template-columns: 1.5rem 3.5rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--letra-pequena);
}

.lista-dia-item:last-child {
    border-bottom: none;
}

.lista-dia-icono {
    opacity: 0.8;
}

.lista-dia-hora {
    color: var(--color-texto-secundario);
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.lista-dia-texto {
    color: var(--color-texto);
    overflow-wrap: anywhere;
}

.lista-dia-acciones {
    display: inline-flex;
    gap: 6px;
}

.lista-dia-vacio {
    margin: 0;
    font-size: var(--letra-pequena);
    color: var(--color-texto-secundario);
}

.lista-dia-accion {
    width: 100%;
    margin-top: 0.9rem;
}

/* En pantallas estrechas las acciones bajan a su propia fila, alineadas con el texto */
@media (max-width: 420px) {
    .lista-dia-item {
        grid-template-columns: 1.5rem 3.5rem minmax(0, 1fr);
    }

    .lista-dia-acciones {
        grid-column: 3;
    }
}


/* =========================================
   DIAGNÓSTICO DE PERMISOS (TONO INFORMATIVO, NO DE ALARMA)
   Reutiliza el modal de emergencia pero sin su borde/resplandor coral: es una ayuda, no un error.
========================================= */
#modal-permisos {
    padding: 1rem;
}

/* En pantallas bajas el contenido supera el alto: se desplaza dentro de la tarjeta en vez de
   cortarse por arriba y por abajo (el overlay centra y no tiene scroll) */
#modal-permisos .contenido-permisos {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    max-width: 440px;
    padding: 1.5rem 1.25rem;
    text-align: left;
    border: 1px solid var(--color-bordes);
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
}

#titulo-modal-permisos {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--color-texto);
}

#intro-modal-permisos {
    margin: 0 0 1rem;
    font-size: var(--letra-pequena);
    color: var(--color-texto-secundario);
}

.lista-permisos {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.fila-permiso {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fila-permiso:last-child {
    border-bottom: none;
}

.icono-permiso {
    font-size: 1.15rem;
    text-align: center;
}

.texto-permiso {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.texto-permiso strong {
    font-size: var(--letra-pequena);
    color: var(--color-texto);
}

.porque-permiso {
    font-size: var(--letra-pequena);
    line-height: 1.4;
    color: var(--color-texto-secundario);
    overflow-wrap: break-word;
}

.estado-permiso {
    font-size: var(--letra-pequena);
    color: var(--color-tema);
    white-space: nowrap;
}

/* Acción pendiente: contorno del tema, sin rojo ni ámbar */
.btn-permiso {
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    font-size: var(--letra-pequena);
    white-space: nowrap;
    border-color: rgba(var(--color-tema-rgb), 0.5);
    color: var(--color-tema);
}

#btn-cerrar-permisos {
    width: 100%;
    min-height: 44px;
}

/* Pantallas estrechas: el botón baja bajo el texto en vez de apretarlo */
@media (max-width: 379.98px) {
    .fila-permiso {
        grid-template-columns: 1.6rem minmax(0, 1fr);
    }

    .btn-permiso,
    .estado-permiso {
        grid-column: 2;
        justify-self: start;
    }
}