/* Estilos comunes a todas las páginas: paleta, reinicio, tipografía, cabecera, botones y avisos. */

/* ---------- Paleta (contraste texto/fondo >= 5:1) ---------- */
:root {
    /* Identidad VYDA (se recalculan en tema.js; estos valores evitan parpadeo al cargar) */
    --fondo: #FFE6D0;
    --panel: #8EC5FF;
    --panel-hover: #83b5eb;
    --texto: #1A1A1A;
    --borde: #FFFFFF;
    --activo-fondo: #2038E2;
    --activo-texto: #FFFFFF;
    --alta: #D14300;

    /* Escala de espacio (múltiplos de 4 px) y título de bloque: todo el espaciado sale de aquí para que el ritmo sea el mismo en cada página */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --titulo-bloque: 1.05rem;

    --fuente-titulo: "Montserrat", "Futura", "Century Gothic", sans-serif;
    --fuente-texto: "Inter", system-ui, "Segoe UI", sans-serif;
    --peligro: #B3261E;

    /* Estos los recalcula tema.js según los colores elegidos en el perfil */
    --alta-texto: #FFFFFF;
    --capa-1: #f2dbc6;
    --capa-2: #e6cfbb;
    --sombra-oscura: rgba(0, 0, 0, 0.2);
    --sombra-clara: rgba(255, 255, 255, 0.9);
    --brillo-panel: 0 0 15px 5px color-mix(in srgb, var(--activo-fondo) 50%, transparent); /* resplandor del acento alrededor de tarjetas y barra */
    --vidrio: rgba(142, 197, 255, 0.92);
    --vidrio-borde: rgba(255, 255, 255, 0.75);
    /* Vidrio (tarjetas y paneles): cuánto desenfoca lo que hay detrás y el brillo de la superficie */
    --vidrio-desenfoque: 3px;
    --vidrio-brillo-1: rgba(255, 255, 255, 0.10);
    --vidrio-brillo-2: rgba(255, 255, 255, 0.03);
    --vidrio-luz: rgba(255, 255, 255, 0.30);
    /* La superficie: un reflejo claro encima de una película del color del fondo del tema (oscura en los temas
       oscuros, clara en los claros), para que el texto se lea aunque detrás pase un anillo de color */
    --vidrio-superficie:
        linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.08) 100%),
        color-mix(in srgb, var(--fondo) 16%, transparent);
    --boton-vidrio: rgba(255, 255, 255, 0.55);
    --boton-vidrio-hover: rgba(255, 255, 255, 0.8);
    --hueco: rgba(255, 255, 255, 0.55);
    --papel-1: #e0cab7;
    --papel-2: #add5ff;
    --papel-3: #d2e8ff;
    --papel-4: #577ff1;
    --indicador-nav: rgba(255, 255, 255, 0.24);
    --indicador-nav-borde: rgba(255, 255, 255, 0.4);
    --indicador-nav-hover: rgba(255, 255, 255, 0.12);
    --fondo-imagen: none;
    --fondo-posicion: 50% 50%;
    --desenfoque: 0px;
    --velo: rgba(255, 230, 208, 0);

    color-scheme: light;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Sin esto, "display" de una clase pisa al atributo hidden. */
[hidden] {
    display: none !important;
}

html {
    font-size: 100%;
    scroll-padding-bottom: 6.5rem; /* lo enfocado no queda tapado por la barra inferior */
}

body {
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-weight: 400;
    font-size: 1.25rem;
    font-style: normal;

    background-color: var(--fondo);
    background-image:
        radial-gradient(52rem 34rem at 92% -8%, var(--luz-c1, color-mix(in srgb, var(--activo-fondo) 24%, transparent)), transparent 62%),
        radial-gradient(44rem 30rem at -6% 58%, var(--luz-c2, color-mix(in srgb, var(--activo-fondo) 18%, transparent)), transparent 66%),
        var(--degradado-fondo, none); /* el degradado de la paleta (tema.js: degradadoDeFondo) */
    background-attachment: fixed;
    padding-bottom: 6.5rem; /* espacio para la barra inferior */
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 0.8rem;
}

/* ---------- Cabecera ---------- */
/* Una sola fila: el logo con un leve resplandor, una raya de luz y el título al lado. Lo que haya a la derecha (volver, reloj)
   se va al extremo, y si no cabe baja a otra línea. Debajo corre una línea fina de luz. */
.cabecera {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    padding: 0.9rem 14px 0.8rem;
}

.cabecera > :nth-child(n + 3) {
    margin-left: auto;
}

.cabecera > .marca-vyda + * {
    flex: 1 1 8rem;
    min-width: 0;
    padding-left: 1.1rem;
    border-left: 1px solid;
    border-image: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--activo-fondo) 80%, var(--texto)), transparent) 1;
}

.cabecera h1 {
    font-size: clamp(1.05rem, 4.8vw, 1.8rem);
    line-height: 1.15;
    color: var(--texto);
    /* El título se desvanece hacia el acento del tema; si el navegador no sabe recortar el fondo al texto se queda del color normal */
    background: linear-gradient(95deg, var(--texto) 55%, color-mix(in srgb, var(--texto) 45%, var(--activo-fondo)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Con saludo y fecha (Inicio) el bloque de texto pide más ancho: si no cabe junto al reloj, el reloj baja a su propia línea */
.cabecera:has(.fecha-hoy) > .marca-vyda + * {
    flex-basis: 12rem;
}

/* La línea de luz bajo la cabecera, con un destello que la recorre de vez en cuando */
.cabecera::after {
    content: '';
    flex: 0 0 100%;
    height: 1px;
    margin-top: 0.3rem;
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--texto) 80%, var(--activo-fondo)), transparent) -40% 0 / 28% 100% no-repeat,
        linear-gradient(90deg, color-mix(in srgb, var(--activo-fondo) 75%, transparent), color-mix(in srgb, var(--texto) 14%, transparent) 45%, transparent 90%);
    animation: cabecera-destello 9s var(--mov-inout, ease-in-out) 1.8s infinite;
}

@keyframes cabecera-destello {
    0%, 55% { background-position: -40% 0, 0 0; }
    100%    { background-position: 140% 0, 0 0; }
}

/* Tipografía principal VYDA: geométrica, en mayúsculas y con espaciado amplio */
h1, h2, h3 {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

h1 {
    font-size: clamp(1.3rem, 5.4vw, 1.8rem);
}

/* ---------- Logotipo VYDA ---------- */
/* El logo es una máscara: toma el color del texto del tema (blanco en oscuro, negro en claro) */
.marca-vyda {
    display: block;
    height: 0.95rem;
    aspect-ratio: 4.32 / 1;
    background-color: var(--texto);
    -webkit-mask: url("../Imagenes/logo-vyda.svg") left center / auto 100% no-repeat;
    mask: url("../Imagenes/logo-vyda.svg") left center / auto 100% no-repeat;
}

/* En la cabecera va a la izquierda del título, con el color del texto que se pierde hacia el acento y un resplandor suave */
.cabecera > .marca-vyda {
    flex: 0 0 auto;
    height: 1.15rem;
    background: linear-gradient(100deg, var(--texto) 55%, color-mix(in srgb, var(--texto) 40%, var(--activo-fondo)));
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--activo-fondo) 55%, transparent));
}

.marca-lockup {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.marca-vyda-grande {
    width: min(100%, 13rem);
    height: auto;
    -webkit-mask-position: center;
    mask-position: center;
}

.marca-raya {
    width: 2.2rem;
    height: 4px;
    background-color: var(--activo-fondo); /* verde acento VYDA */
    border-radius: 4px;
}

.marca-lema {
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* El reloj: la hora en grande con números de ancho fijo (no baila al cambiar), los segundos más chicos en el color del acento y la
   fecha en letras pequeñas debajo. Lleva la misma raya de luz que el logo, así la cabecera se equilibra: logo a la izquierda, hora a la derecha. */
.reloj {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
    padding-left: 1.1rem;
    border-left: 1px solid;
    border-image: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--activo-fondo) 80%, var(--texto)), transparent) 1;
    font-family: var(--fuente-titulo);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: end;
}

.reloj-hora {
    display: flex;
    align-items: baseline;
    font-size: clamp(1.45rem, 6vw, 2.15rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 0 22px color-mix(in srgb, var(--activo-fondo) 40%, transparent);
}

.reloj-dos {
    margin-inline: 0.05em;
    animation: reloj-pulso 2s ease-in-out infinite;
}

.reloj-seg {
    margin-left: 0.15em;
    font-size: 0.5em;
    font-weight: 600;
    color: color-mix(in srgb, var(--texto) 35%, var(--activo-fondo));
}

.reloj-fecha {
    font-family: var(--fuente-texto);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.72;
}

/* En el celular el reloj baja a su propia línea: ahí va centrado */
@media (max-width: 40rem) {
    .cabecera > .reloj {
        flex: 1 1 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        justify-items: center;
        text-align: center;
    }
}

/* En el Inicio la fecha ya está bajo el saludo */
.cabecera:has(.fecha-hoy) .reloj-fecha {
    display: none;
}

@keyframes reloj-pulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* ---------- Fondo: aurora, malla y luces ---------- */
/* Tres capas fijas detrás de todo, cada una con su propio ritmo. Solo se mueven con transform (la GPU lo hace sin volver a pintar)
   y se tiñen con los colores que tema.js ya calcula para que el texto se lea con cualquier paleta.
     1) aurora (html::before):  manchas grandes y suaves del acento que derivan y respiran
     2) malla  (body::before):  una cuadrícula fina que se desvanece hacia los bordes y avanza muy despacio
     3) luces  (html::after):   dos focos brillantes que flotan en otra dirección, para dar profundidad
   Con imagen de fondo en Perfil (.con-fondo) no se ven. Las posiciones (--ap1…4) las usa también el login para apartarlas de los titulares. */
html:not(.con-fondo)::before,
html:not(.con-fondo)::after,
html:not(.con-fondo) body::before {
    content: '';
    position: fixed;
    pointer-events: none;
    background-repeat: no-repeat;
    will-change: transform;
}

html:not(.con-fondo)::before {
    inset: -14vmax; /* margen de sobra: al moverse y girar no se ve el borde de la capa */
    z-index: -3;
    background-image:
        radial-gradient(ellipse 46vmax 32vmax at var(--ap1, 33% 33%), color-mix(in srgb, var(--anillo-c2, var(--activo-fondo)) 60%, transparent), transparent 70%),
        radial-gradient(ellipse 40vmax 30vmax at var(--ap3, 74% 14%), color-mix(in srgb, var(--anillo-c1, var(--activo-fondo)) 44%, transparent), transparent 70%),
        radial-gradient(ellipse 52vmax 34vmax at var(--ap2, 19% 84%), color-mix(in srgb, var(--anillo-c4, var(--activo-fondo)) 48%, transparent), transparent 72%),
        radial-gradient(ellipse 34vmax 26vmax at 62% 62%, color-mix(in srgb, var(--anillo-c3, var(--texto)) 20%, transparent), transparent 70%);
    animation: fondo-aurora 44s ease-in-out infinite alternate, fondo-aparece 1800ms ease-out backwards;
}

html:not(.con-fondo) body::before {
    inset: -60px; /* un paso de la malla (56 px) de sobra: al avanzar no queda un borde vacío */
    z-index: -2;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--texto) 8%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--texto) 8%, transparent) 1px, transparent 1px);
    background-repeat: repeat;
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 36%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 72% 62% at 50% 36%, #000 0%, transparent 78%);
    animation: fondo-malla 40s linear infinite, fondo-aparece 2200ms ease-out 300ms backwards;
}

html:not(.con-fondo)::after {
    inset: -10vmax;
    z-index: -1;
    background-image:
        radial-gradient(circle 15vmax at 80% 24%, color-mix(in srgb, var(--anillo-c1, var(--activo-fondo)) 58%, transparent), color-mix(in srgb, var(--anillo-c2, var(--activo-fondo)) 14%, transparent) 55%, transparent 100%),
        radial-gradient(circle 12vmax at 16% 72%, color-mix(in srgb, var(--anillo-c1, var(--activo-fondo)) 46%, transparent), color-mix(in srgb, var(--anillo-c4, var(--activo-fondo)) 12%, transparent) 55%, transparent 100%);
    animation: fondo-luces 31s ease-in-out infinite alternate;
}

/* La aurora y la malla no aparecen de golpe: se encienden despacio. (Las luces ya respiran con su propia opacidad.) */
@keyframes fondo-aparece {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fondo-aurora {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(-3vmax, 2.5vmax, 0) rotate(2.2deg) scale(1.09); }
    100% { transform: translate3d(2.5vmax, -3vmax, 0) rotate(-2deg) scale(1.03); }
}

@keyframes fondo-malla {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(56px, 56px, 0); }
}

@keyframes fondo-luces {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
    50%  { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); opacity: 1; }
    100% { transform: translate3d(-3vmax, 5vmax, 0) scale(0.96); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.con-fondo)::before,
    html:not(.con-fondo)::after,
    html:not(.con-fondo) body::before,
    .cabecera::after,
    .reloj-dos {
        animation: none;
    }
}

/* ---------- Precarga (scripts/precarga.js, solo en el acceso) ---------- */
/* Mientras se cargan tipografías, estilos y logo, el contenido no se ve y todas las animaciones esperan quietas en su primer cuadro.
   Al estar todo listo, el script quita «preparando» y arrancan a la vez, sin tirones. Solo visibility: con opacity en el
   cuerpo el cristal (backdrop-filter) dejaría de ver las capas del fondo. */
html.preparando body {
    visibility: hidden;
}

html.preparando *,
html.preparando *::before,
html.preparando *::after {
    animation-play-state: paused !important;
}

/* ---------- Imagen de fondo (se carga en Perfil) ---------- */
/* Capa fija detrás de todo: la imagen difuminada y, encima, un velo del color del tema para que el texto se lea. */
.con-fondo body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--fondo-imagen);
    background-position: var(--fondo-posicion, center);
    background-size: cover;
    filter: blur(var(--desenfoque));
    transform: scale(1.12); /* el borde difuminado queda fuera de la pantalla */
}

.con-fondo body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--velo);
}

/* ---------- Paneles de vidrio ---------- */
/* Cristal ahumado: una película de luz casi transparente sobre lo que hay detrás (la luz ambiente del cuerpo o la
   imagen de fondo del perfil), con borde y reflejo finos. El desenfoque se cambia en --vidrio-desenfoque. */
.tarjeta,
.bloque,
.panel-calendario,
.panel-controles,
.contenido-formulario,
.temporizador {
    isolation: isolate;
    overflow: hidden;
    background: var(--vidrio-superficie);
    -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 20px;
    box-shadow: var(--brillo-panel);
}

.tarjeta h2,
.bloque h2 {
    font-size: var(--titulo-bloque);
    letter-spacing: 0.06em;
}
/* Cristal interior: lo que va dentro de una tarjeta (datos, filas de hábitos, títulos de columna, el reloj) lleva el mismo
   reflejo que las tarjetas y un desenfoque más suave; conserva su propio color de fondo. */
.dato,
.habito-fila,
.recordar-fila,
.pasos-detalle > summary,
.columna-dia-titulo {
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    -webkit-backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6)) saturate(1.6);
    backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6)) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
}

/* Lo que se repite muchas veces (los días del mes) solo lleva el reflejo, sin desenfoque propio */
.mes-dia {
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
}

/* Borde de luz: brilla en la esquina de arriba a la izquierda y se apaga hacia el centro, como el canto de un cristal */
.tarjeta::before,
.bloque::before,
.panel-calendario::before,
.panel-controles::before,
.contenido-formulario::before,
.temporizador::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.22));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* El diálogo del temporizador ya está posicionado por el navegador; el resto lo necesita para anclar las capas */
.tarjeta,
.bloque,
.panel-calendario,
.panel-controles,
.contenido-formulario {
    position: relative;
}

@media (prefers-reduced-transparency: reduce) {
    .tarjeta,
    .bloque,
    .panel-calendario,
.panel-controles,
    .contenido-formulario,
    .temporizador {
        background: var(--panel);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ---------- Transición entre páginas ---------- */
/* El navegador conserva la página anterior en pantalla hasta que la nueva está lista y las funde:
   se acaba el parpadeo de recarga. La barra inferior tiene nombre propio, así que no forma parte
   del fundido: se queda fija y solo se mueve su indicador. (Los navegadores que no lo soportan
   cargan la página como siempre.) */
@view-transition {
    navigation: auto;
}

.barra-nav {
    view-transition-name: barra-nav;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
}

/* La barra no se funde ni se mueve entre páginas: es la misma en las dos (está escrita en el HTML de cada una), así que solo se ve
   la de la página nueva y su indicador deslizándose */
::view-transition-group(barra-nav) {
    animation: none;
}

::view-transition-old(barra-nav) {
    display: none;
}

::view-transition-new(barra-nav) {
    animation: none;
}

body[data-pagina="inicio"] { --i-pagina: 0; }
body[data-pagina="calendario"] { --i-pagina: 1; }
body[data-pagina="nutricion"] { --i-pagina: 2; }
body[data-pagina="aprender"] { --i-pagina: 3; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ---------- Barra de navegación inferior (minimalista) ---------- */
/* Píldora flotante de cristal teñido con el acento (mismo destello y canto de luz que las tarjetas); el item activo lleva
   una pastilla de cristal más teñida y un punto debajo. */
.barra-nav {
    position: fixed;
    left: 50%;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 8;
    display: flex;
    gap: 0.25rem;
    width: min(94vw, 26rem);
    padding: 0.4rem;
    transform: translateX(-50%);
    /* Esmerilado, no transparente: lo que pasa por detrás (botones, textos) se difumina fuerte y queda tapado a medias,
       para que las etiquetas de la barra siempre se lean */
    background:
        var(--vidrio-superficie),
        var(--nav-tinte, color-mix(in srgb, var(--activo-fondo) 22%, transparent)),
        color-mix(in srgb, var(--fondo) 72%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
    box-shadow: var(--brillo-panel);
}

.nav-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 3.4rem;
    padding: 0.35rem 0.25rem 0.55rem;
    color: var(--texto);
    border-radius: 20px;
    font-size: 0.7rem;
    text-decoration: none;
}

.nav-item:hover {
    background-color: var(--boton-vidrio);
}

.nav-item[aria-current="page"] {
    font-weight: 700;
}

/* Las pestañas inactivas, discretas; la activa, plena. Al llegar a una página, lo de su pestaña se aviva (movimiento.css) */
.nav-item:not([aria-current="page"]) > .nav-icono,
.nav-item:not([aria-current="page"]) > span {
    opacity: 0.74;
}

.nav-item > .nav-icono,
.nav-item > span {
    transition: opacity 0.4s ease;
}

/* Fondo y punto de la pestaña activa: es un solo elemento que se desliza entre pestañas.
   --i es la posición (0, 1, 2); el ancho coincide con el de cada pestaña. */
.nav-indicador {
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.4rem;
    width: calc((100% - 0.8rem - 0.75rem) / 4); /* cuatro pestañas (tres separaciones de 0.25rem) */
    background:
        linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2)),
        var(--nav-pastilla, color-mix(in srgb, var(--activo-fondo) 40%, transparent));
    border: 1px solid var(--vidrio-borde);
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
    border-radius: 20px;
    /* Dónde está: navegacion-previa.js deja en --nav-i la pestaña de la página anterior; si no hay, nace en la de esta página.
       navegacion.js pone después --i en la actual y la transición lo desliza. */
    --i: var(--nav-i, var(--i-pagina, 0));
    transform: translateX(calc(var(--i, 0) * (100% + 0.25rem)));
    transition: transform 0.8s cubic-bezier(0.55, 0, 0.1, 1); /* sin rebote: arranca con suavidad, cruza con decisión y se posa despacio */
    pointer-events: none;
}

.nav-indicador::after {
    content: '';
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    width: 0.3rem;
    height: 0.3rem;
    margin-left: -0.15rem;
    background-color: var(--texto);
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .nav-indicador {
        transition: none;
    }
}

.nav-item:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: -3px;
}

.nav-icono {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------- Botones (sirven para <button> y para <a>) ---------- */
/* Píldoras de cristal: redondeadas, translúcidas y con aire alrededor del texto */
/* Los campos (texto, selector, hora, número): vidrio, con el mismo borde y brillo que los botones. Las páginas que ya tienen sus .control (recordatorio, acceso, comer) lo afinan encima. */
.control {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    color: var(--texto);
    font: inherit;
    font-family: var(--fuente-texto);
    font-size: 0.95rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6));
    backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6));
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.control::placeholder {
    color: color-mix(in srgb, var(--texto) 45%, transparent);
}

.control:focus-visible {
    outline: none;
    border-color: var(--activo-fondo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--activo-fondo) 28%, transparent), inset 0 1px 0 var(--vidrio-luz);
}

.btn, .selector-fecha {
    cursor: pointer;
    color: var(--texto);
    background-color: var(--boton-vidrio);
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    -webkit-backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6)) saturate(1.6);
    backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6)) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--vidrio-luz);
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.selector-fecha {
    border-radius: 14px;
    padding: 0.45rem 0.8rem;
}

.btn {
    min-height: 2.5rem;
    font-size: 0.85rem; /* los <a> no heredan el tamaño que sí tienen los <button> */
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

/* :where() no suma especificidad: así los botones de color (primario, peligro, avisos)
   conservan su propio hover y no se quedan con texto oscuro sobre fondo oscuro. */
.btn:where(:not([aria-pressed="true"], [aria-current="page"], .btn-primario, .btn-peligro)):hover,
.selector-fecha:hover {
    background-color: var(--boton-vidrio-hover);
}

.btn[aria-pressed="true"],
.btn[aria-current="page"] {
    background-color: var(--activo-fondo);
    color: var(--activo-texto);
    border-color: transparent;
    font-weight: 700;
}

.btn:disabled {
    cursor: default;
    opacity: 0.85;
}

.btn.btn-primario {
    background-color: var(--activo-fondo);
    color: var(--activo-texto);
    border-color: transparent;
    font-weight: 700;
}

.btn.btn-primario:hover {
    background-color: var(--activo-fondo);
    filter: brightness(0.92);
}

.btn.btn-peligro {
    background-color: var(--peligro);
    color: #fff;
    border-color: transparent;
}

.btn.btn-peligro:hover {
    background-color: var(--peligro);
    filter: brightness(0.9);
}

/* Foco visible para quien navega con teclado. */
:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: 2px;
}

/* ---------- Temporizador flotante ("Comenzar") ---------- */
.temporizador {
    width: min(92vw, 30rem);
    margin: auto;
    padding: 1.5rem 1.25rem;
    color: var(--texto);
    text-align: center;
}

/* Fondo oscuro y borroso detrás de la ventana */
.temporizador::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.temporizador > * + * {
    margin-top: 0.75rem;
}

.tmp-tarea {
    font-size: 0.85rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tmp-numero {
    font-size: 0.8rem;
}

.tmp-numero:empty,
.tmp-nota:empty {
    display: none;
}

.tmp-titulo {
    font-size: 1.5rem;
    overflow-wrap: anywhere;
}

/* Descripción del paso actual (opcional) */
.tmp-descripcion {
    font-size: 0.85rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Ilustraciones del ejercicio: dos imágenes lado a lado (posición 1 y posición 2) y el crédito de RepDB */
.tmp-imagenes {
    display: grid;
    gap: 0.4rem;
}

.tmp-imagenes-fila {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

.tmp-imagen {
    flex: 0 1 11rem;
    min-width: 0;
    margin: 0;
}

.tmp-imagen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    background-color: #d5e8f7;
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
}

.tmp-imagen figcaption {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.tmp-credito {
    justify-self: center;
    color: inherit;
    font-size: 0.65rem;
    opacity: 0.75;
}

.tmp-descripcion:empty {
    display: none;
}

.tmp-tiempo {
    font-size: clamp(3.2rem, 17vw, 5.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tmp-siguiente {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* Pasos a la vez: una tarjeta por paso, lado a lado (una debajo de otra si no caben), cada una con su cronómetro */
.tmp-paralelos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.6rem;
}

.tmp-paralelo {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding: 0.75rem 0.6rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
}

.tmp-paralelo-texto {
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tmp-paralelo-descripcion {
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tmp-paralelo-tiempo {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/* Un paso del grupo ya terminó: queda tenue mientras los demás siguen */
.tmp-paralelo-listo {
    opacity: 0.7;
    border-style: dashed;
}

/* Paso de lista (check): en vez de la cuenta atrás, un aviso y el botón "Hecho" */
.tmp-aviso-check {
    padding: 0.8rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    background-color: var(--boton-vidrio);
    border: 1px dashed var(--vidrio-borde);
    border-radius: 14px;
}

/* Equipo e ingredientes dentro del temporizador (cocina): desplegable con "ya lo tengo" */
.tmp-extras {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    text-align: left;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
}

.tmp-extras > summary {
    cursor: pointer;
    font-weight: 700;
    min-height: 1.75rem;
}

.tmp-extras-titulo {
    margin-top: 0.5rem;
    font-weight: 700;
}

.tmp-lista-extras {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.25rem;
    list-style: none;
}

.tmp-item-extra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.tmp-nota {
    padding: 0.5rem 0.75rem;
    color: var(--alta);
    border: 2px solid var(--alta);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.tmp-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.tmp-acciones .btn {
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
}

.progreso {
    display: block;
    width: 100%;
    height: 0.7rem;
    appearance: none;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.35);
}

.progreso::-webkit-progress-bar {
    background-color: rgba(0, 0, 0, 0.35);
}

.progreso::-webkit-progress-value {
    background-color: var(--texto);
    border-radius: 999px;
}

.progreso::-moz-progress-bar {
    background-color: var(--texto);
    border-radius: 999px;
}

/* Cuando la ventana está minimizada, la sesión sigue visible abajo a la izquierda */
.pildora-sesion {
    position: fixed;
    left: 0.75rem;
    bottom: 6.25rem; /* por encima de la barra inferior */
    z-index: 9;
    max-width: calc(100vw - 1.5rem);
    min-height: 2.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.btn-comenzar {
    justify-self: start;
    min-height: 2.25rem;
}

/* ---------- Avisos dentro de la página ---------- */
.zona-avisos {
    position: fixed;
    right: 0.75rem;
    bottom: 6.25rem; /* por encima de la barra inferior */
    left: 0.75rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

.aviso {
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    max-width: 26rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--activo-fondo);
    color: var(--activo-texto);
    border-radius: 8px;
    font-size: 0.8rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.aviso > div {
    flex: 1 1 12rem;
}

.aviso-detalle {
    margin-top: 0.1rem;
}

.aviso .btn {
    color: var(--activo-texto);
    background-color: transparent;
    border-color: var(--activo-texto);
}

.aviso .btn:hover {
    background-color: rgba(15, 58, 77, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .btn, .selector-fecha, .btn-agregar {
        transition: none;
    }

    .btn:hover, .selector-fecha:hover {
        transform: none;
    }
}

/* ---------- Días de la semana (recordatorio/hábito y «Comenzar hábito» en Perfil) ---------- */
.dias-semana {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dias-todos {
    margin-top: 0.6rem;
}

.dia-opcion {
    position: relative;
    display: inline-flex;
}

.dia-casilla {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.dia-letra {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    background-color: var(--boton-vidrio);
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
    border: 1px solid var(--vidrio-borde);
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background-color 0.2s;
}

.dia-opcion:hover .dia-letra {
    background-color: var(--boton-vidrio-hover);
}

.dia-casilla:checked + .dia-letra {
    color: var(--activo-texto);
    background-color: var(--activo-fondo);
    border-color: transparent;
}

.dia-casilla:focus-visible + .dia-letra {
    outline: 3px solid var(--texto);
    outline-offset: 2px;
}

/* ---------- Selector de color circular (perfil y compromisos) ---------- */
/* Círculo de color limpio: se quita el cuadrado interior que dibuja el navegador */
.color-entrada {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: 3px solid var(--texto);
    border-radius: 50%;
    box-shadow: 3px 3px 8px var(--sombra-oscura), -2px -2px 6px var(--sombra-clara);
}

.color-entrada::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-entrada::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.color-entrada::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}

.color-entrada:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: 3px;
}

/* ---------- Listas desplegables ---------- */
/* La lista que abre un <select> la dibuja el navegador sobre fondo blanco aunque el campo sea de cristal;
   como el texto hereda el color del tema (claro en los temas oscuros), se leería blanco sobre blanco.
   Por eso las opciones llevan su propio fondo y texto, del tema. */
select option,
select optgroup {
    background-color: var(--panel);
    color: var(--texto);
}

select option:checked {
    background: var(--activo-fondo) linear-gradient(var(--activo-fondo), var(--activo-fondo));
    color: var(--activo-texto);
}

/* Casilla de cristal: transparente y, al marcarla, una palomita con los colores del tema (agenda y formulario) */
.casilla-cristal {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    margin-top: 0.05rem;
    background-color: var(--boton-vidrio);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 2px solid var(--borde);
    border-radius: 0.55rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.casilla-cristal::after {
    content: '✓';
    color: var(--activo-texto);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transform: scale(0);
    transition: transform 0.15s;
}

.casilla-cristal:hover {
    background-color: var(--boton-vidrio-hover);
}

.casilla-cristal:checked {
    background-color: var(--activo-fondo);
    border-color: transparent;
}

.casilla-cristal:checked::after {
    transform: scale(1);
}

.casilla-cristal:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: 2px;
}

.casilla-cristal:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Fecha escrita con el teclado o elegida en el calendario (scripts/fecha-teclado.js) ---------- */
.fecha-teclado {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

/* El <input type="date"> original sigue ahí (los scripts leen su .value) pero no se ve: solo sirve para abrir el calendario junto al botón */
.fecha-teclado > .fecha-teclado-real {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.6rem;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.fecha-teclado > .fecha-teclado-texto {
    width: 100%;
    padding-right: 2.9rem;
    font-variant-numeric: tabular-nums;
}

.fecha-teclado-boton {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--texto);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s;
}

.fecha-teclado-boton:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

.fecha-teclado-boton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.fecha-teclado-boton svg {
    width: 1.15rem;
    height: 1.15rem;
}

.fecha-teclado-texto[aria-invalid="true"] {
    outline: 2px solid #ff8a94;
    outline-offset: 1px;
}

/* El selector del calendario es una píldora pequeña, no un campo de formulario a todo el ancho */
.fecha-teclado.fecha-teclado-pastilla {
    display: inline-block;
    width: auto;
}

.fecha-teclado-pastilla > .fecha-teclado-texto {
    width: 10.5rem;
}

/* En Nutrición el contenedor se comporta como el campo que reemplaza dentro de la fila de navegación del día */
.dia-nav > .fecha-teclado {
    width: auto;
}

/* ---------- Frase motivadora del día, en la cabecera (scripts/frase-del-dia.js) ---------- */
.cabecera > .frase-dia {
    /* Va debajo del título, en la misma columna de su texto: ancho del logo (1.15rem x 4.32) + los dos espacios + la línea del título */
    --sangria-titulo: calc(4.968rem + 2.2rem + 1px);
    box-sizing: border-box;
    flex: 0 0 auto;
    width: calc(100% - var(--sangria-titulo));
    margin: -0.35rem 0 0 var(--sangria-titulo);
    padding: 0;
    max-width: 52rem;
    font-size: clamp(0.9rem, 2.8vw, 1.05rem);
    font-style: italic;
    line-height: 1.4;
    color: color-mix(in srgb, var(--texto) 88%, transparent);
    text-wrap: balance;
}

.cabecera > .frase-dia::before {
    content: '\201C';
    margin-right: 0.15rem;
    color: var(--activo-fondo);
    font-weight: 800;
}

.cabecera > .frase-dia::after {
    content: '\201D';
    margin-left: 0.1rem;
    color: var(--activo-fondo);
    font-weight: 800;
}

.cabecera > .frase-dia[hidden] {
    display: none;
}

/* En pantallas angostas no hay espacio para la sangría: la frase ocupa todo el ancho, debajo de la fila del título */
@media (max-width: 40rem) {
    .cabecera > .frase-dia {
        width: 100%;
        margin: 0;
    }
}

/* Aviso de «Personalizar con mi actividad» (perfil-datos.js): una sola vez, en Inicio */
.aviso-perfil {
    margin: auto; /* el reset global quita el centrado propio del diálogo */
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.4rem;
    color: var(--texto);
    background-color: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 18px;
}

.aviso-perfil::backdrop {
    background-color: rgba(0, 0, 0, 0.55);
}

.aviso-perfil h2 {
    margin: 0 0 0.8rem;
    font-size: 1.2rem;
}

.aviso-perfil p {
    margin: 0 0 0.7rem;
    line-height: 1.5;
}

.aviso-perfil-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.perfil-personalizar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Términos y condiciones (terminos.js): edad, casilla de aceptar y enlaces legales */
.terminos-controles {
    display: grid;
    gap: 0.8rem;
    margin: 0.4rem 0 0.2rem;
    text-align: left;
}

.terminos-edad {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.terminos-edad legend {
    padding: 0;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.terminos-opcion {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.45;
}

.terminos-opcion input {
    flex: none;
    margin-top: 0.2rem;
}

.terminos-opcion a,
.enlaces-legales a {
    color: inherit;
    text-underline-offset: 0.2em;
}

.terminos-nota {
    margin: 0;
    font-size: 0.82rem;
    opacity: 0.8;
}

/* Diseño «Aceptar términos» (diseño de paneles): la opción elegida se resalta, el cuadro lleva el acento y los botones van uno bajo el otro */
.terminos-edad .terminos-opcion {
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--texto) 22%, transparent);
    border-radius: 14px;
}

.terminos-edad .terminos-opcion:has(input:checked) {
    border: 1.5px solid var(--activo-fondo);
    background: color-mix(in srgb, var(--activo-fondo) 14%, transparent);
}

.terminos-opcion input {
    accent-color: var(--activo-fondo);
}

.terminos-version {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--activo-fondo);
}

.terminos-dialogo {
    border-color: var(--activo-fondo);
    box-shadow: 0 0 28px 4px color-mix(in srgb, var(--activo-fondo) 28%, transparent);
}

.terminos-dialogo .aviso-perfil-acciones {
    flex-direction: column;
    margin-top: 1.1rem;
}

.terminos-dialogo .aviso-perfil-acciones .btn {
    width: 100%;
    padding-block: 0.85rem;
    border-radius: 999px;
}

/* Al crear la cuenta, la edad y la casilla van juntas en un recuadro con el acento */
#terminos-registro .terminos-controles {
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--activo-fondo) 45%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--activo-fondo) 10%, transparent);
}

#terminos-registro .terminos-edad .terminos-opcion {
    padding: 0;
    border: 0;
    background: none;
}

.enlaces-legales {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    text-align: center;
    opacity: 0.85;
}

/* ---------- Comenzar una tarea (diseño «Comenzar»): cuatro formas según dialogo.dataset.modo ----------
   tiempo = una tarea con duración y sin pasos (el anillo) · lista = todos los pasos son checks · rutina = pasos uno tras otro · paralelo = pasos a la vez */
.temporizador {
    text-align: left;
}

.temporizador [hidden] {
    display: none !important;
}

.tmp-cabecera {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tmp-minimizar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: inherit;
    cursor: pointer;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 50%;
}

.tmp-minimizar svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tmp-en-marcha {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.85;
}

.tmp-cabecera-relleno {
    flex: none;
    width: 2.5rem;
}

.temporizador .tmp-tarea {
    font-family: var(--fuente-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.tmp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tmp-chips:empty {
    display: none;
}

.tmp-chip {
    padding: 0.2rem 0.75rem;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--texto) 28%, transparent);
    border-radius: 999px;
}

.tmp-chip-modo {
    font-weight: 700;
    color: var(--activo-fondo);
    border-color: var(--activo-fondo);
}

.tmp-avance {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4rem;
}

.temporizador .tmp-numero {
    font-size: 0.85rem;
    text-align: left;
}

.tmp-ahora-etiqueta {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--activo-fondo);
}

.tmp-ahora-etiqueta:empty {
    display: none;
}

/* El paso en curso (rutina y a la vez): una tarjeta con el borde del acento */
.tmp-paso {
    display: grid;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    text-align: left;
    border: 1.5px solid var(--activo-fondo);
    border-radius: 22px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--texto) 14%, transparent), color-mix(in srgb, var(--texto) 4%, transparent));
}

.tmp-paso > * + * {
    margin-top: 0;
}

/* El tiempo: dentro de la tarjeta de un paso es un número; en «tiempo» es un anillo que se va cerrando */
.tmp-anillo {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
}

.tmp-anillo-rotulo {
    display: none;
    font-size: 0.8rem;
    opacity: 0.8;
}

.temporizador[data-modo="tiempo"] .tmp-avance,
.temporizador[data-modo="tiempo"] .tmp-ahora-etiqueta,
.temporizador[data-modo="tiempo"] .tmp-titulo,
.temporizador[data-modo="tiempo"] .tmp-descripcion,
.temporizador[data-modo="tiempo"] .tmp-paso > .progreso,
.temporizador[data-modo="lista"] .tmp-paso {
    display: none;
}

.temporizador[data-modo="tiempo"] .tmp-paso {
    padding: 0;
    border: 0;
    background: none;
}

.temporizador[data-modo="tiempo"] .tmp-anillo {
    width: min(17.5rem, 72vw);
    aspect-ratio: 1;
    margin: 0.5rem auto;
}

.temporizador[data-modo="tiempo"] .tmp-anillo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--activo-fondo) var(--avance, 0%), color-mix(in srgb, var(--texto) 14%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}

.temporizador[data-modo="tiempo"] .tmp-tiempo {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.8rem, 16vw, 3.8rem);
}

.temporizador[data-modo="tiempo"] .tmp-anillo-rotulo {
    display: block;
}

.temporizador[data-modo="tiempo"] .tmp-tarea,
.temporizador[data-modo="tiempo"] .tmp-chips {
    text-align: center;
    justify-content: center;
}

/* Las horas de inicio y de fin (solo en «tiempo») */
.tmp-horas {
    display: none;
    justify-content: space-between;
    padding: 0 0.4rem;
    font-size: 0.85rem;
}

.temporizador[data-modo="tiempo"] .tmp-horas {
    display: flex;
}

/* La rutina entera, con el paso actual resaltado */
.tmp-pasos,
.tmp-checks {
    display: none;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
}

.temporizador[data-modo="rutina"] .tmp-pasos,
.temporizador[data-modo="paralelo"] .tmp-pasos,
.temporizador[data-modo="lista"] .tmp-checks {
    display: grid;
}

.tmp-pasos-fila {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--texto) 4%, transparent);
}

.tmp-pasos-fila.hecho {
    opacity: 0.65;
    text-decoration: line-through;
}

.tmp-pasos-fila.actual {
    font-weight: 700;
    border-color: var(--activo-fondo);
    background-color: color-mix(in srgb, var(--activo-fondo) 12%, transparent);
}

.tmp-pasos-marca {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1.5px solid color-mix(in srgb, var(--texto) 40%, transparent);
    border-radius: 50%;
}

.tmp-pasos-fila.hecho .tmp-pasos-marca {
    color: var(--activo-texto);
    background-color: var(--activo-fondo);
    border-color: var(--activo-fondo);
}

.tmp-pasos-fila.actual .tmp-pasos-marca {
    border-color: var(--activo-fondo);
}

.tmp-pasos-texto {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tmp-pasos-duracion {
    flex: none;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* La lista de checks: cada punto es una fila grande que se marca con un toque */
.tmp-check {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.85rem 1rem;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--texto) 5%, transparent);
}

.tmp-check.marcado {
    border-color: color-mix(in srgb, var(--activo-fondo) 60%, transparent);
    background-color: color-mix(in srgb, var(--activo-fondo) 14%, transparent);
}

.tmp-check.marcado .tmp-check-texto {
    text-decoration: line-through;
    opacity: 0.65;
}

.tmp-check-caja {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--activo-texto);
    font-weight: 800;
    border: 2px solid var(--activo-fondo);
    border-radius: 8px;
}

.tmp-check.marcado .tmp-check-caja {
    background-color: var(--activo-fondo);
}

.tmp-check-texto {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Los botones de abajo: en una fila, el principal más ancho; «Detener» queda como un enlace discreto */
.temporizador .tmp-acciones {
    flex-wrap: nowrap;
}

.temporizador .tmp-acciones .btn {
    flex: 1;
    padding-inline: 0.6rem;
    border-radius: 999px;
}

.temporizador .tmp-acciones .btn-primario {
    flex: 1.4;
}

.temporizador .tmp-acciones .btn:disabled {
    opacity: 0.5;
}

.tmp-secundarios {
    display: flex;
    justify-content: center;
}

.tmp-detener {
    padding: 0.25rem 0.5rem;
    color: var(--alta);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    background: none;
    border: 0;
}

.temporizador .tmp-siguiente {
    text-align: center;
}

.tmp-paralelo-etiqueta {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    opacity: 0.75;
}