/* Página de inicio. Lo común (paleta, botones, cabecera, menú...) está en base.css. */

.fecha-hoy {
    font-size: 0.9rem;
}

.fecha-hoy::first-letter {
    text-transform: uppercase;
}

/* ---------- Distribución ---------- */
/* Lo primero que se ve es «Ahora» y, justo debajo, la agenda de hoy (en el teléfono van en ese orden). Entre tarjetas hay más espacio
   que dentro de cada una (proximidad: lo que va junto, junto). En pantalla ancha son tres columnas: «Ahora» ocupa dos (el foco, arriba a
   la izquierda), la agenda queda en el tercio derecho y las otras cuatro tarjetas se reparten debajo en parejas. */
.inicio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "ahora"
        "agenda"
        "racha"
        "resumen"
        "recordar"
        "manana";
    gap: var(--e-5);
    padding: var(--e-4) 14px var(--e-6);
}

.area-ahora   { grid-area: ahora; }
.area-racha   { grid-area: racha; }
.area-resumen { grid-area: resumen; }
.area-recordar { grid-area: recordar; }
.area-agenda  { grid-area: agenda; }
.area-manana  { grid-area: manana; }

@media (min-width: 56rem) {
    .inicio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        grid-template-areas:
            "ahora   agenda"
            "racha   agenda"
            "resumen agenda"
            "recordar agenda"
            "manana  agenda";
        grid-template-rows: auto auto auto auto 1fr; /* la altura sobrante de la agenda no separa las tarjetas de la izquierda */
        align-items: start;
    }
}

@media (min-width: 72rem) {
    .inicio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-areas:
            "ahora    ahora   agenda"
            "racha    resumen agenda"
            "recordar manana  agenda";
        grid-template-rows: auto auto 1fr;
        align-items: stretch; /* las tarjetas de una misma fila miden lo mismo y la agenda llega hasta abajo: bordes alineados */
    }

    .area-agenda,
    .inicio > .tarjeta {
        align-content: start;
    }
}

/* ---------- Tarjetas ---------- */
.tarjeta {
    display: grid;
    gap: var(--e-3);
    padding: 1.25rem 1.35rem;
    line-height: 1.5;
}

/* Al pasar el cursor la tarjeta se agranda un poco (movimiento.css) y su borde toma el color del acento: guía la mirada sin gritar */
@media (hover: hover) {
    .inicio > .tarjeta:hover {
        border-color: color-mix(in srgb, var(--activo-fondo) 45%, var(--vidrio-borde));
    }
}

/* «Ahora» es el foco de la página: más aire, el título en grande y un borde con el acento y un resplandor suave. Un punto late
   para decir «esto es en vivo». */
.area-ahora {
    gap: var(--e-4);
    padding: var(--e-5) var(--e-6);
    border-color: color-mix(in srgb, var(--activo-fondo) 55%, var(--vidrio-borde));
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6), 0 0 64px -20px color-mix(in srgb, var(--activo-fondo) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.14), inset 0 0 24px rgba(255, 255, 255, 0.06);
}

.area-ahora h2 {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--texto) 55%, var(--activo-fondo));
}

.area-ahora h2::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--activo-fondo);
    animation: ahora-pulso 2.4s ease-out infinite;
}

@keyframes ahora-pulso {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--activo-fondo) 70%, transparent); }
    70%  { box-shadow: 0 0 0 0.6rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .area-ahora h2::before {
        animation: none;
    }
}

.tarjeta h2 {
    font-size: var(--titulo-bloque);
}

/* El contenido de cada tarjeta: cada línea con su espacio */
#contenido-ahora,
#contenido-resumen,
#contenido-manana {
    display: grid;
    justify-items: start;
    gap: 0.6rem;
}

/* Los botones de una tarjeta van juntos pero sin pegarse */
.tarjeta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.tarjeta-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tarjeta-cabecera .btn {
    min-height: 2.4rem;
}

/* ---------- "Ahora" ---------- */
.ahora-titulo {
    font-size: clamp(1.4rem, 2.6vw, 2.05rem);
    line-height: 1.15;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ahora-paso {
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ahora-detalle {
    opacity: 0.82; /* el detalle queda un escalón por debajo del título */
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ahora-enlace {
    justify-self: start;
}

/* ---------- Resumen ---------- */
.datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.7rem;
    width: 100%;
}

/* Casillas de cristal, redondeadas */
.dato {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 0.5rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 18px;
    text-align: center;
}

.dato-valor {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.dato-etiqueta {
    font-size: 0.75rem;
}

/* ---------- Agenda ---------- */
/* ---------- Agenda: tarjetas con relieve suave y capas apiladas ---------- */
/* Tarjetas de cristal con dos capas de papel que asoman por debajo, como un mazo de cartas. */
.lista-agenda {
    isolation: isolate; /* las capas de atrás se pintan detrás de cada tarjeta, no detrás de toda la sección */
    display: grid;
    gap: 2.4rem;        /* deja sitio a las capas que asoman bajo cada tarjeta */
    padding-bottom: 1.25rem;
    list-style: none;
}

.agenda-vacia {
    font-size: 0.85rem;
}

.item-agenda {
    --acento: var(--c, var(--texto)); /* franja con el color del compromiso */

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1.1rem 1.3rem;
    /* Cristal (igual que las tarjetas, ver base.css): se ve lo que hay detrás */
    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: 18px;
    /* Franja de importancia a la izquierda y una sombra suave */
    box-shadow:
        inset 5px 0 0 var(--acento),
        0 18px 40px -14px rgba(0, 0, 0, 0.65);
}

.item-agenda.estado-en-curso {
    outline: 2px solid var(--texto);
    outline-offset: 3px;
}

/* Una tarea hecha se "hunde": sin capas y con relieve hacia adentro */
.item-agenda.hecho {
    box-shadow:
        inset 5px 0 0 var(--acento),
        inset 4px 4px 12px var(--sombra-oscura);
}

/* Botones dentro de las tarjetas: píldoras con relieve */
.item-agenda .btn {
    border: 0;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    box-shadow: 3px 3px 8px var(--sombra-oscura), -2px -2px 6px var(--sombra-clara);
}

.item-agenda .btn:active {
    box-shadow: inset 2px 2px 5px var(--sombra-oscura), inset -2px -2px 5px var(--sombra-clara);
}

/* Marca no interactiva de las rutinas con pasos (misma medida que la casilla) */
.item-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.1rem;
    border: 2px dashed var(--borde);
    border-radius: 50%; /* redonda y punteada: se distingue de la casilla cuadrada que sí se puede pulsar */
    font-size: 0.9rem;
    font-weight: 700;
}

.item-marca-hecha {
    background-color: var(--activo-fondo);
    border-style: solid;
    border-color: var(--activo-fondo);
    color: var(--activo-texto);
}

.item-cuerpo {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.item-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.item-enlace {
    color: var(--texto);
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Cada tarea: lápiz (editar) · nombre (comenzar) */
.item-lapiz {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    color: var(--texto);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--vidrio-borde);
    border-radius: 50%;
    cursor: pointer;
}

.item-lapiz svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.item-lapiz:hover,
.item-lapiz:focus-visible {
    color: var(--activo-texto);
    background-color: var(--activo-fondo);
    border-color: transparent;
}

.item-nombre {
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
}

.item-nombre:hover,
.item-nombre:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.item-notas {
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-agenda.hecho .item-enlace {
    text-decoration: line-through;
}

.item-meta {
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Etiqueta "hundida" (como la píldora de la referencia) */
.chip {
    padding: 0.1rem 0.7rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.07);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Etiquetas de estado: de color y con relieve hacia afuera */
.chip-alta,
.chip-hecho,
.chip-ahora {
    color: var(--activo-texto);
    font-weight: 700;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.1);
}

.chip-alta {
    background-color: var(--alta);
    color: var(--alta-texto);
}

.chip-hecho,
.chip-ahora {
    background-color: var(--activo-fondo);
}

/* Pasos de una rutina (desplegable) */
.pasos-detalle {
    font-size: 0.75rem;
}

.pasos-detalle summary {
    cursor: pointer;
    font-weight: 700;
    min-height: 1.75rem;
    display: flex;
    align-items: center;
}

/* Los pasos van en un hueco con relieve hacia adentro, como la imagen de la referencia */
.lista-pasos-inicio {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.4rem;
    padding: 0.5rem;
    list-style: none;
    background-color: rgba(0, 0, 0, 0.14);
    border-radius: 14px;
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.35), inset -3px -3px 8px rgba(255, 255, 255, 0.06);
}

.paso-linea {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
}

.paso-actual {
    background-color: var(--activo-fondo);
    color: var(--activo-texto);
}

.paso-hora-inicio {
    font-weight: 700;
}

.paso-nombre {
    overflow-wrap: anywhere;
}

/* Pasos que se hacen a la vez: una barra al lado y la etiqueta "a la vez" */
.paso-en-grupo {
    border-left: 3px solid currentColor;
}

.paso-etiqueta-juntos {
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: 0.8;
}

/* Paso de lista (check) ya hecho */
.paso-linea-hecha .paso-nombre {
    text-decoration: line-through;
    opacity: 0.75;
}

/* Equipo e ingredientes de una rutina de cocina */
.cocina-titulo {
    margin-top: 0.5rem;
    font-weight: 700;
}

.lista-cocina-inicio {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.25rem;
    padding: 0.4rem 0.5rem;
    list-style: none;
    background-color: rgba(0, 0, 0, 0.14);
    border-radius: 14px;
}

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

/* Descripción del paso: segunda línea bajo el nombre */
.paso-descripcion-linea {
    grid-column: 2 / -1;
    font-size: 0.7rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ---------- Mañana ---------- */
.lista-manana {
    display: grid;
    gap: 0.35rem;
    list-style: none;
}

.lista-manana li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.manana-hora {
    min-width: 3rem;
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---------- El botón «Rachas» (las rachas están en rachas.html; su estilo, en rachas.css) ---------- */
.enlace-rachas {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--texto);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.enlace-rachas-llama {
    flex: none;
    display: grid;
    place-items: center;
}

.enlace-rachas-llama .racha-llama {
    width: 2.8rem;
    height: 2.8rem;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--activo-fondo) 55%, transparent)) !important;
}

/* En el botón de Inicio la llama usa el color de acentos del tema (en Rachas cada hábito conserva el color de su racha) */
.enlace-rachas-llama .racha-llama > path:not(.racha-llama-interior) {
    fill: var(--activo-fondo) !important;
    stroke: none;
}

.enlace-rachas-texto {
    display: grid;
    flex: 1;
    gap: 0.2rem;
    min-width: 0;
}

.enlace-rachas-texto strong {
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.enlace-rachas-flecha {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid var(--activo-fondo);
    border-right: 2px solid var(--activo-fondo);
    rotate: 45deg;
    transition: translate 0.25s var(--mov-expo, ease-out);
}

@media (hover: hover) {
    .enlace-rachas:hover .enlace-rachas-flecha {
        translate: 4px 0;
    }
}

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

/* Lista de hábitos, con el botón para eliminarlos */
/* "Mis hábitos" y "N pasos": botones de cristal que abren y cierran la lista (con flecha) */
.pasos-detalle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 2.6rem;
    padding: 0.5rem 1.15rem;
    color: var(--texto);
    background-color: var(--boton-vidrio);
    -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;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    font-size: 0.85rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pasos-detalle > summary::-webkit-details-marker {
    display: none;
}

.pasos-detalle > summary::after {
    content: '';
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
}

.pasos-detalle[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.pasos-detalle > summary:hover {
    background-color: var(--boton-vidrio-hover);
}

.pasos-detalle > summary:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: 2px;
}

/* ---------- Recordatorios periódicos ---------- */
#contenido-recordar {
    display: grid;
    gap: 0.7rem;
}

.lista-recordar {
    display: grid;
    gap: 0.6rem;
    list-style: none;
}

.recordar-fila {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.9rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 16px;
}

.recordar-fila.pausado {
    opacity: 0.6;
}

.recordar-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.recordar-punto {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--c, var(--texto));
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.recordar-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.recordar-acciones .btn {
    min-height: 2.1rem;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
}