/* ==========================================================================
   Mi Dieta · «Aurora»: sistema de diseño (claro por defecto, oscuro opcional)
   Capa de producto sobre Bootstrap 5.3 y sobre la paleta tokenizada (palette.css).
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --app-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --app-display: "Roboto Flex", "Plus Jakarta Sans", system-ui, sans-serif;
    --app-canvas: #f4f2ec;
    --app-aurora-1: rgba(255, 181, 159, .34);
    --app-aurora-2: rgba(190, 170, 255, .18);
    --app-aurora-3: rgba(251, 223, 166, .30);
    --app-aurora-4: rgba(160, 205, 235, .16);
    --app-surface: #ffffff;
    --app-surface-2: #f7f6f2;
    --app-surface-3: #eeece6;
    --app-glass: rgba(255, 255, 255, .66);
    --app-glass-strong: rgba(255, 255, 255, .84);
    --app-glass-border: rgba(255, 255, 255, .75);
    --app-ink: #0f1512;
    --app-ink-2: #36403a;
    --app-muted: #6b736d;
    --app-line: rgba(15, 21, 18, .08);
    --app-line-strong: rgba(15, 21, 18, .16);
    --app-primary: #0f1512;
    --app-on-primary: #ffffff;
    --app-lime: #ffdbd1;
    --app-tone: #8f4c38;
    --app-tone-container: #ffdbd1;
    --app-on-tone-container: #723523;
    --app-lime-ink: #723523;
    --app-lime-soft: rgba(143, 76, 56, .12);
    --app-focus: rgba(143, 76, 56, .32);
    --cat-food: #e2735a;
    --cat-water: #3f97cf;
    --cat-move: #8570d4;
    --cat-body: #3a9f86;
    --app-danger: #e5484d;
    --app-shadow-sm: 0 1px 2px rgba(15, 21, 18, .05);
    --app-shadow: 0 1px 1px rgba(15, 21, 18, .03), 0 18px 40px -22px rgba(33, 40, 20, .22);
    --app-shadow-lg: 0 40px 90px -30px rgba(20, 26, 12, .38);
    --app-radius: 1.6rem;
    --app-radius-sm: 1rem;
    --app-dock-height: 4.4rem;
    --app-ease: cubic-bezier(.2, .8, .2, 1);

    /* Variables heredadas de app.css reencaminadas al nuevo sistema. */
    --app-bg: var(--app-canvas);
    --ink: var(--app-ink);
    --muted: var(--app-muted);
    --border: var(--app-line);
    --accent: var(--app-ink);
    --sidebar: var(--app-glass);

    --bs-body-font-family: var(--app-font);
    --bs-body-bg: var(--app-canvas);
    --bs-body-color: var(--app-ink);
    --bs-emphasis-color: var(--app-ink);
    --bs-secondary-color: var(--app-muted);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-line-strong);
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: .75rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-xl: 1.6rem;
    --bs-link-color: var(--app-ink);
    --bs-link-color-rgb: 15, 21, 18;
    --bs-link-hover-color: #000;
    --bs-focus-ring-color: var(--app-focus);
}

[data-bs-theme="dark"] {
    --app-canvas: #070a09;
    --app-aurora-1: rgba(255, 181, 159, .12);
    --app-aurora-2: rgba(139, 104, 255, .22);
    --app-aurora-3: rgba(255, 122, 77, .12);
    --app-aurora-4: rgba(37, 169, 238, .14);
    --app-surface: #121715;
    --app-surface-2: #181e1b;
    --app-surface-3: #222a26;
    --app-glass: rgba(20, 26, 23, .62);
    --app-glass-strong: rgba(18, 23, 21, .86);
    --app-glass-border: rgba(255, 255, 255, .07);
    --app-ink: #eef3ec;
    --app-ink-2: #c8d0ca;
    --app-muted: #939d96;
    --app-line: rgba(238, 243, 236, .08);
    --app-line-strong: rgba(238, 243, 236, .16);
    --app-primary: #ffb59f;
    --app-lime: #ffb59f;
    --app-lime-ink: #561f0f;
    --app-tone: #ffb59f;
    --app-tone-container: #723523;
    --app-on-tone-container: #ffdbd1;
    --app-on-primary: #561f0f;
    --app-lime-soft: rgba(255, 181, 159, .14);
    --app-focus: rgba(255, 181, 159, .38);
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --app-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 22px 44px -24px rgba(0, 0, 0, .8);
    --app-shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);
    --bs-body-bg: var(--app-canvas);
    --bs-body-color: var(--app-ink);
    --bs-emphasis-color: var(--app-ink);
    --bs-secondary-color: var(--app-muted);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-line-strong);
    --bs-link-color: var(--app-tone);
    --bs-link-color-rgb: 255, 181, 159;
    --bs-link-hover-color: #ffdbd1;
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Lienzo: auroras difuminadas detrás de todo el contenido
   -------------------------------------------------------------------------- */
html { background: var(--app-canvas); }
body {
    background: transparent;
    color: var(--app-ink);
    font-family: var(--app-font);
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body::before {
    content: "";
    position: fixed;
    inset: -20vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38vmax 30vmax at 82% 8%, var(--app-aurora-1), transparent 70%),
        radial-gradient(34vmax 30vmax at 6% 22%, var(--app-aurora-2), transparent 70%),
        radial-gradient(36vmax 28vmax at 70% 88%, var(--app-aurora-3), transparent 70%),
        radial-gradient(30vmax 26vmax at 18% 96%, var(--app-aurora-4), transparent 70%);
    filter: blur(8px) saturate(1.1);
    animation: aurora-drift 28s var(--app-ease) infinite alternate;
}
body::after {
    /* Grano sutil para que los degradados no parezcan planos. */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes aurora-drift {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(2vmax, -1.5vmax, 0) rotate(4deg); }
    100% { transform: translate3d(-2vmax, 1.5vmax, 0) rotate(-3deg); }
}
::selection { background: var(--app-lime); color: var(--app-lime-ink); }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--app-display); font-variation-settings: "wdth" 112, "opsz" 48; letter-spacing: -.02em; color: var(--app-ink); }
.app-page-header h1, .header-title-row h1, .home-hero__headline, .auth-intro h1 { font-variation-settings: "wdth" 125, "opsz" 96; font-weight: 720; letter-spacing: -.025em; }
.home-ring__copy strong, .option-card__kcal strong, .plan-energy__total strong, .meal-target strong, .home-weekly__score strong, .kcal-num { font-family: var(--app-display); font-variation-settings: "wdth" 115, "opsz" 48; letter-spacing: -.02em; }
.text-secondary, .text-muted { color: var(--app-muted) !important; }
.display-serif, .app-page-header h1 em, .hero-serif { font-style: normal; color: var(--app-tone); }

/* --------------------------------------------------------------------------
   Estructura: raíl lateral flotante (escritorio) y dock inferior (móvil)
   -------------------------------------------------------------------------- */
.app-main { overflow-x: clip; background: transparent !important; }
.app-sidebar {
    background: var(--app-glass);
    border: 1px solid var(--app-glass-border);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    padding: 1.25rem .9rem 1rem;
    gap: 1.25rem;
}
.app-brand { gap: .7rem; font-weight: 800; font-size: 1.12rem; letter-spacing: -.04em; color: var(--app-ink); }
.app-brand .brand-word em { font-style: normal; color: var(--app-tone); }
.brand-mark {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .95rem;
    color: var(--app-lime);
    background: radial-gradient(120% 120% at 20% 10%, #5a3327 0%, #0f1512 60%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 20px -10px rgba(15, 21, 18, .6);
    font-size: 1.15rem;
}
[data-bs-theme="dark"] .brand-mark { background: radial-gradient(120% 120% at 20% 10%, #7a4435 0%, #2a1712 70%); }
.app-sidebar .nav-link {
    position: relative;
    gap: .75rem;
    padding: .66rem .8rem;
    border-radius: 999px;
    color: var(--app-ink-2);
    font-weight: 600;
    font-size: .94rem;
    transition: background-color .2s ease, color .2s ease, transform .2s var(--app-ease);
}
.app-sidebar .nav-link i { font-size: 1.08rem; color: var(--app-muted); transition: color .2s ease; }
.app-sidebar .nav-link:hover { color: var(--app-ink); background: var(--app-surface-3); }
.app-sidebar .nav-link.active { color: var(--app-on-primary); background: var(--app-primary); box-shadow: 0 10px 24px -14px rgba(15, 21, 18, .7); }
.app-sidebar .nav-link.active i { color: var(--app-lime); }
[data-bs-theme="dark"] .app-sidebar .nav-link.active i { color: var(--app-on-primary); }
.sidebar-section-label { margin: .4rem .8rem -.2rem; color: var(--app-muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-user {
    border: 1px solid var(--app-line);
    border-radius: 1.25rem;
    background: var(--app-glass-strong);
    padding: .6rem .6rem .6rem .7rem;
}
.sidebar-avatar {
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--app-lime-ink);
    background: conic-gradient(from 200deg, var(--app-lime), #9fe0ff, #b9a4ff, var(--app-lime));
    font-weight: 800;
    font-size: .85rem;
}
.sidebar-user-actions .btn, .app-icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--app-muted);
    background: transparent;
}
.sidebar-user-actions .btn:hover, .app-icon-btn:hover { color: var(--app-ink); background: var(--app-surface-3); }
.theme-toggle .bi-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }

@media (min-width: 992px) {
    .app-sidebar { inset: .9rem auto .9rem .9rem; width: 252px; height: auto; border-radius: 1.9rem; }
    .app-main { margin-left: calc(252px + .9rem); }
    body.sidebar-collapsed .app-main { margin-left: 0; }
    .app-dock, .app-dock-spacer { display: none !important; }
}

.app-dock { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar, .app-menu-fab, body.sidebar-open::after { display: none !important; }
    .app-main { margin-left: 0 !important; padding-bottom: calc(var(--app-dock-height) + env(safe-area-inset-bottom, 0px) + 2rem); }
    .app-dock {
        position: fixed;
        left: 50%;
        bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        width: min(28rem, calc(100vw - 1.5rem));
        height: var(--app-dock-height);
        padding: .35rem;
        transform: translateX(-50%);
        border: 1px solid var(--app-glass-border);
        border-radius: 1.6rem;
        background: var(--app-glass-strong);
        box-shadow: var(--app-shadow-lg);
        backdrop-filter: blur(26px) saturate(1.8);
        -webkit-backdrop-filter: blur(26px) saturate(1.8);
    }
    .app-dock__item {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        min-width: 0;
        border-radius: 1.25rem;
        color: var(--app-muted);
        font-size: .66rem;
        font-weight: 650;
        text-decoration: none;
        transition: color .2s ease, background-color .2s ease;
    }
    .app-dock__item i { font-size: 1.22rem; line-height: 1; transition: transform .25s var(--app-ease); }
    .app-dock__item.active { color: var(--app-ink); background: var(--app-surface-3); }
    .app-dock__item.active i { transform: translateY(-1px); }
    .app-dock__item.active::after {
        content: "";
        position: absolute;
        top: .35rem;
        right: calc(50% - 1rem);
        width: .38rem;
        height: .38rem;
        border-radius: 50%;
        background: var(--app-lime);
        box-shadow: 0 0 0 2px var(--app-glass-strong);
    }
    .app-dock__orb {
        justify-self: center;
        width: 3.5rem;
        height: 3.5rem;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 1.3rem;
        color: var(--app-lime);
        background: radial-gradient(120% 120% at 25% 15%, #5a3327 0%, #0f1512 62%);
        box-shadow: 0 14px 28px -12px rgba(15, 21, 18, .7), inset 0 0 0 1px rgba(255, 255, 255, .1);
        font-size: 1.45rem;
        transition: transform .25s var(--app-ease);
    }
    [data-bs-theme="dark"] .app-dock__orb { color: var(--app-lime-ink); background: radial-gradient(120% 120% at 25% 15%, #ffe7df 0%, var(--app-lime) 60%); }
    .app-dock__orb:active { transform: scale(.94); }
    .app-dock__orb:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 3px; }
}

/* --------------------------------------------------------------------------
   Cabeceras de pantalla
   -------------------------------------------------------------------------- */
.app-page-header {
    min-height: 0;
    padding: 2.4rem 2.25rem .9rem;
    background: transparent;
    border: 0;
    align-items: flex-end;
}
.app-page-header h1, .header-title-row h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -.05em;
    text-wrap: balance;
}
.header-title-row p:not(.eyebrow) { color: var(--app-muted); font-size: 1rem; margin-top: .45rem; max-width: 46rem; }
.eyebrow, .hero-kicker, .dashboard-domain-title small {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
    color: var(--app-ink-2) !important;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: 1;
}
.eyebrow::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--app-lime);
    box-shadow: 0 0 0 3px var(--app-lime-soft);
}
.app-main[data-page="plan"] .eyebrow::before { background: var(--cat-food); box-shadow: 0 0 0 3px rgba(255, 122, 77, .2); }
.app-main[data-page="deporte"] .eyebrow::before { background: var(--cat-move); box-shadow: 0 0 0 3px rgba(139, 104, 255, .2); }
.app-main[data-page="progreso"] .eyebrow::before, .app-main[data-page="peso"] .eyebrow::before, .app-main[data-page="medicion"] .eyebrow::before { background: var(--cat-body); box-shadow: 0 0 0 3px rgba(16, 183, 149, .2); }
.app-content { padding: 1.25rem 2.25rem 2.5rem; max-width: 1320px; }
.section-heading h2, .today-agenda-heading h2 { font-size: 1.35rem; font-weight: 750; letter-spacing: -.035em; }
.section-heading p { color: var(--app-muted); }
@media (max-width: 991.98px) {
    .app-page-header { padding: calc(1.4rem + env(safe-area-inset-top, 0px)) 1.1rem .6rem; flex-direction: column; align-items: stretch; }
    .app-content { padding: .9rem 1.1rem 1.5rem; }
    body.sidebar-collapsed .app-page-header { padding-left: 1.1rem; }
    .app-header-actions { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Superficies: tarjetas de cristal
   -------------------------------------------------------------------------- */
.card, .modal-content, .accordion-item, .list-group-item, .dropdown-menu, .popover {
    --bs-card-bg: var(--app-glass);
    --bs-card-border-color: var(--app-glass-border);
    color: var(--app-ink);
}
.card {
    background: var(--app-glass);
    border: 1px solid var(--app-glass-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.card-header, .card-footer { background: transparent; border-color: var(--app-line); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--app-line); --bs-accordion-active-bg: var(--app-lime-soft); --bs-accordion-active-color: var(--app-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--app-focus); }
.accordion-item { background: var(--app-glass); }
.bg-white, .bg-light, .bg-body { background-color: var(--app-surface) !important; }
.bg-body-tertiary { background-color: var(--app-surface-2) !important; }
.text-dark { color: var(--app-ink) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--app-line) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-ink); --bs-table-border-color: var(--app-line); }

/* Titular destacado: tinta con auroras propias (cumplimiento, héroes de pantalla). */
.hero-card, .dashboard-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #f4f7f0;
    background: #0f1512;
    border: 0;
    border-radius: 1.9rem;
    box-shadow: var(--app-shadow-lg);
}
.hero-card::before, .dashboard-hero::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background:
        radial-gradient(30% 40% at 85% 20%, rgba(255, 181, 159, .5), transparent 70%),
        radial-gradient(35% 45% at 10% 90%, rgba(139, 104, 255, .45), transparent 70%),
        radial-gradient(25% 35% at 55% 110%, rgba(37, 169, 238, .35), transparent 70%);
    filter: blur(30px);
    animation: aurora-drift 22s var(--app-ease) infinite alternate;
}
.hero-card h2, .dashboard-hero h2 { color: #fff; font-weight: 750; letter-spacing: -.045em; }
.hero-card .hero-kicker, .dashboard-hero .hero-kicker { color: rgba(244, 247, 240, .7) !important; }
[data-bs-theme="dark"] .hero-card, [data-bs-theme="dark"] .dashboard-hero { background: #0c110e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--app-shadow-lg); }

/* Héroes de pantalla (predicción, semana deportiva, cumplimiento): la misma tinta con aurora por categoría. */
.prediction-card, .sport-week-hero, .dashboard-domain-diet .dashboard-hero, .app-main[data-page] .sport-week-hero.pending, .app-main[data-page] .sport-week-hero.completed {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #f4f7f0;
    background: #0f1512 !important;
    border-radius: 1.9rem;
    box-shadow: var(--app-shadow-lg) !important;
}
.prediction-card { --tone: var(--cat-body); }
.sport-week-hero { --tone: var(--cat-move); }
.dashboard-domain-diet .dashboard-hero { --tone: var(--cat-food); }
.prediction-card::before, .sport-week-hero::before, .dashboard-domain-diet .dashboard-hero::before {
    content: "";
    position: absolute;
    inset: -50% -20% -50% 35%;
    z-index: -1;
    background: radial-gradient(45% 55% at 70% 40%, color-mix(in srgb, var(--tone) 65%, transparent), transparent 70%), radial-gradient(30% 40% at 15% 85%, rgba(255, 219, 209, .22), transparent 70%);
    filter: blur(30px);
    animation: aurora-drift 20s var(--app-ease) infinite alternate;
}
[data-bs-theme="dark"] :is(.prediction-card, .sport-week-hero, .dashboard-hero, .hero-card, .today-focus) { background-color: #0c110e !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--app-shadow-lg) !important; }
.prediction-card .progress-bar, .sport-week-hero .progress-bar { background: var(--tone) !important; }

/* Acciones de cabecera: píldoras en fila (en móvil, deslizables). */
.app-page-header .app-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.app-page-header .app-header-actions .btn { width: auto; min-width: 0; min-height: 2.6rem; flex: 0 0 auto; flex-direction: row; gap: .45rem; padding: .55rem 1rem; font-size: .86rem; font-weight: 650; white-space: nowrap; }
.app-page-header .app-header-actions .btn > .bi { display: inline-block; font-size: 1rem; }
@media (max-width: 991.98px) {
    /* Sin desplazamiento lateral: los botones se reparten en filas a lo ancho. */
    .app-page-header .app-header-actions { flex-wrap: wrap; gap: .4rem; margin: 0; padding: .2rem 0 0; }
    .app-page-header .app-header-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 2.5rem; padding: .5rem .8rem; font-size: .82rem; }
}

/* «Siguiente acción» de Hoy: tinta con una aurora del color de la categoría. */
.today-focus { --tone: var(--app-lime); position: relative; isolation: isolate; overflow: hidden; color: #f4f7f0; background: #0f1512 !important; border-radius: 1.9rem; box-shadow: var(--app-shadow-lg); padding: 1.5rem 1.6rem; }
.today-focus::before { content: ""; position: absolute; inset: -60% -20% -60% 30%; z-index: -1; background: radial-gradient(45% 55% at 70% 45%, color-mix(in srgb, var(--tone) 70%, transparent), transparent 70%), radial-gradient(35% 40% at 20% 80%, rgba(139, 104, 255, .35), transparent 70%); filter: blur(28px); animation: aurora-drift 18s var(--app-ease) infinite alternate; }
.today-focus-diet { --tone: var(--cat-food); }
.today-focus-water, .today-focus-health { --tone: var(--cat-water); }
.today-focus-sport { --tone: var(--cat-move); }
.today-focus-care, .today-focus-done { --tone: var(--app-lime); }
.today-focus span { color: rgba(244, 247, 240, .7); opacity: 1; }
.today-focus h2 { color: #fff; font-weight: 750; letter-spacing: -.045em; }
.today-focus-icon { border-radius: 1.2rem; color: var(--tone); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.today-focus-actions .btn-light, .today-focus-actions .btn-outline-light { --bs-btn-bg: #fff; --bs-btn-color: #0f1512; --bs-btn-hover-bg: var(--app-lime); --bs-btn-hover-color: var(--app-lime-ink); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
[data-bs-theme="dark"] .today-focus { background: #0c110e !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--app-shadow-lg); }
.today-summary-chip { gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--app-glass-border); border-radius: 999px; color: var(--app-ink) !important; background: var(--app-glass-strong) !important; box-shadow: var(--app-shadow-sm); font-weight: 700; backdrop-filter: blur(14px); }
.today-summary-chip i { color: var(--tone, var(--app-ink)); }
.today-summary-chip.diet { --tone: var(--cat-food); }
.today-summary-chip.sport { --tone: var(--cat-move); }
.today-summary-chip.health { --tone: var(--cat-water); }

/* --------------------------------------------------------------------------
   Botones en píldora
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 650;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-focus-box-shadow: 0 0 0 .22rem var(--app-focus);
    letter-spacing: -.01em;
    transition: transform .18s var(--app-ease), box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-sm { --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .38rem; --bs-btn-border-radius: 999px; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .85rem; --bs-btn-border-radius: 999px; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-success, .btn-primary, .btn-dark {
    --bs-btn-color: var(--app-on-primary);
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
    --bs-btn-disabled-color: var(--app-on-primary);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
    box-shadow: 0 10px 22px -14px rgba(15, 21, 18, .8);
}
.btn-success:hover, .btn-primary:hover, .btn-dark:hover { box-shadow: 0 0 0 4px var(--app-lime-soft), 0 14px 26px -14px rgba(15, 21, 18, .8); transform: translateY(-1px); }
.btn-outline-success, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary {
    --bs-btn-color: var(--app-ink);
    --bs-btn-bg: var(--app-glass);
    --bs-btn-border-color: var(--app-line-strong);
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-surface);
    --bs-btn-hover-border-color: var(--app-ink);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
    backdrop-filter: blur(10px);
}
.btn-light, .btn-outline-light {
    --bs-btn-color: var(--app-ink);
    --bs-btn-bg: var(--app-surface-3);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-surface);
    --bs-btn-hover-border-color: var(--app-line-strong);
    --bs-btn-active-bg: var(--app-surface);
    --bs-btn-active-color: var(--app-ink);
}
.btn-lime {
    --bs-btn-color: var(--app-lime-ink);
    --bs-btn-bg: var(--app-lime);
    --bs-btn-border-color: var(--app-lime);
    --bs-btn-hover-color: var(--app-lime-ink);
    --bs-btn-hover-bg: #ffc9b8;
    --bs-btn-hover-border-color: #ffc9b8;
    --bs-btn-active-bg: #f5a58d;
    --bs-btn-active-color: var(--app-lime-ink);
}
/* app.css pinta algunos botones sin variables: se devuelven al sistema de Bootstrap. */
.btn-success, .btn-primary, .btn-dark, .btn-outline-success, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-lime { background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color); }
:is(.btn-success, .btn-primary, .btn-dark, .btn-outline-success, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-lime):is(:hover, :focus-visible) { background: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: var(--bs-btn-hover-color); }
:is(.btn-success, .btn-primary, .btn-dark, .btn-outline-success, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-lime):is(:active, .active) { background: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); color: var(--bs-btn-active-color); }
.btn-link { --bs-btn-color: var(--app-ink-2); --bs-btn-hover-color: var(--app-ink); text-decoration: none; }
.btn-close { border-radius: 50%; padding: .6rem; background-color: var(--app-surface-3); background-size: .7rem; opacity: .8; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); background-color: rgba(0, 0, 0, .6); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 1rem;
    border-color: var(--app-line-strong);
    background-color: var(--app-glass-strong);
    color: var(--app-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:focus, .form-select:focus { border-color: var(--app-ink); background-color: var(--app-surface); box-shadow: 0 0 0 .25rem var(--app-focus); color: var(--app-ink); }
.form-control::placeholder { color: var(--app-muted); }
.form-floating > label { color: var(--app-muted); }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--app-ink-2); }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after { background: transparent; }
.form-check-input { border-color: var(--app-line-strong); background-color: var(--app-surface); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .22rem var(--app-focus); border-color: var(--app-ink); }
.form-switch .form-check-input { width: 2.6em; height: 1.45em; margin-top: .05em; }
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2310160a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-range { accent-color: var(--app-ink); }
.form-range::-webkit-slider-thumb { background: var(--app-primary); box-shadow: 0 0 0 4px var(--app-lime-soft); }
.form-range::-moz-range-thumb { background: var(--app-primary); box-shadow: 0 0 0 4px var(--app-lime-soft); }
.form-range::-webkit-slider-runnable-track { background: var(--app-surface-3); }
.input-group-text { border-radius: 1rem; background: var(--app-surface-3); border-color: var(--app-line-strong); color: var(--app-ink-2); }

/* Controles segmentados (pestañas y píldoras). */
.nav-pills, .nav-tabs {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: var(--app-primary);
    --bs-nav-pills-link-active-color: var(--app-on-primary);
    --bs-nav-link-color: var(--app-ink-2);
    --bs-nav-link-hover-color: var(--app-ink);
    gap: .25rem;
}
.nav-pills { padding: .3rem; border-radius: 999px; background: var(--app-surface-3); display: inline-flex; flex-wrap: wrap; }
.nav-pills .nav-link { font-weight: 650; padding: .5rem 1rem; }
.nav-tabs { border: 0; padding: .3rem; border-radius: 999px; background: var(--app-surface-3); display: inline-flex; }
.nav-tabs .nav-link { border: 0 !important; border-radius: 999px; font-weight: 650; }
.nav-tabs .nav-link.active { background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow-sm); }

/* Insignias, alertas y progreso. */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; padding: .42em .75em; }
.alert { border-radius: 1.25rem; border: 1px solid var(--app-line); backdrop-filter: blur(12px); }
.progress, .progress-stacked { --bs-progress-bg: var(--app-surface-3); --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--app-ink); height: .6rem; }
.progress-bar { background: linear-gradient(90deg, var(--app-ink), #5a3a30); border-radius: 999px; }
[data-bs-theme="dark"] .progress-bar { background: linear-gradient(90deg, #e8957c, var(--app-lime)); }

/* --------------------------------------------------------------------------
   Modales: cristal flotante; hoja inferior en móvil
   -------------------------------------------------------------------------- */
.modal { --bs-modal-bg: var(--app-glass-strong); --bs-modal-border-color: var(--app-glass-border); --bs-modal-border-radius: 1.9rem; --bs-modal-inner-border-radius: 1.9rem; --bs-modal-header-border-color: transparent; --bs-modal-footer-border-color: transparent; --bs-modal-color: var(--app-ink); }
.modal-content { backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: var(--app-shadow-lg); }
.modal-header { padding: 1.4rem 1.5rem .4rem; }
.modal-title { font-weight: 750; letter-spacing: -.035em; }
.modal-body { padding: 1rem 1.5rem; }
.modal-footer { padding: .5rem 1.5rem 1.4rem; gap: .5rem; }
.modal-backdrop { --bs-backdrop-bg: #0b100d; --bs-backdrop-opacity: .38; backdrop-filter: blur(6px); }
.modal-backdrop.show { backdrop-filter: blur(6px); }
@media (max-width: 575.98px) {
    .modal-dialog { min-height: 100%; margin: 0; display: flex; align-items: flex-end; }
    .modal-dialog.modal-fullscreen-sm-down { align-items: stretch; }
    .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .38s var(--app-ease); }
    .modal.show .modal-dialog { transform: none; }
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-content { max-height: 92dvh; border-radius: 1.9rem 1.9rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-content::before { content: ""; width: 2.6rem; height: .3rem; margin: .65rem auto 0; border-radius: 999px; background: var(--app-line-strong); }
    .modal-footer > .btn { flex: 1 1 0; }
}
.offcanvas { --bs-offcanvas-bg: var(--app-glass-strong); --bs-offcanvas-color: var(--app-ink); --bs-offcanvas-border-color: var(--app-glass-border); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); }

/* El personaje (el Forzudo) vive en css/buddy.css. */

/* Acceso al asistente en el raíl lateral (escritorio). */
.sidebar-assistant {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--app-line);
    border-radius: 1.25rem;
    color: var(--app-ink);
    background: var(--app-glass-strong);
    text-align: left;
    transition: box-shadow .2s ease, transform .2s var(--app-ease);
}
.sidebar-assistant:hover { box-shadow: 0 0 0 4px var(--app-lime-soft); transform: translateY(-1px); }
.sidebar-assistant strong, .sidebar-assistant small { display: block; line-height: 1.2; }
.sidebar-assistant strong { font-size: .92rem; }
.sidebar-assistant small { color: var(--app-muted); font-size: .74rem; }
.sidebar-assistant kbd { margin-left: auto; padding: .1rem .4rem; border-radius: .4rem; color: var(--app-muted); background: var(--app-surface-3); font-family: var(--app-font); font-size: .72rem; }

/* --------------------------------------------------------------------------
   Hoja del asistente
   -------------------------------------------------------------------------- */
.assistant-sheet.offcanvas-bottom { height: auto; max-height: 90dvh; border-radius: 2rem 2rem 0 0; padding-bottom: env(safe-area-inset-bottom); display: flex; flex-direction: column; }
@media (min-width: 992px) {
    .assistant-sheet.offcanvas-bottom { left: calc(50% + 126px); right: auto; bottom: 1rem; width: 38rem; max-height: calc(100dvh - 2rem); border-radius: 2rem; border: 1px solid var(--app-glass-border); transform: translate(-50%, 110%); }
    .assistant-sheet.offcanvas-bottom.showing, .assistant-sheet.offcanvas-bottom.show:not(.hiding) { transform: translate(-50%, 0); }
}
.assistant-sheet__grip { position: absolute; top: .6rem; left: 50%; width: 2.6rem; height: .3rem; margin-left: -1.3rem; border-radius: 999px; background: var(--app-line-strong); }
.assistant-sheet__head { display: flex; align-items: center; gap: .9rem; padding: 1.5rem 1.4rem .6rem; }
.assistant-sheet__title { min-width: 0; flex: 1 1 auto; }
.assistant-sheet__title h2 { margin: 0; font-size: 1.45rem; font-weight: 750; letter-spacing: -.045em; }
.assistant-sheet__title h2 em { font-style: normal; color: var(--app-tone); }
.assistant-sheet__title p { margin: .1rem 0 0; color: var(--app-muted); font-size: .86rem; }
.assistant-log { display: flex; flex-direction: column; gap: .9rem; padding: 0 1.4rem; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.assistant-log:empty { display: none; }
.assistant-turn { display: flex; flex-direction: column; gap: .55rem; animation: toast-in .3s var(--app-ease); }
.assistant-msg { max-width: 88%; margin: 0; padding: .7rem .95rem; border-radius: 1.2rem; font-size: .95rem; line-height: 1.45; }
.assistant-msg p { margin: 0; }
.assistant-msg--user { align-self: flex-end; color: var(--app-on-primary); background: var(--app-primary); border-bottom-right-radius: .35rem; }
.assistant-msg--bot { align-self: flex-start; color: var(--app-ink); background: var(--app-surface); border: 1px solid var(--app-line); border-bottom-left-radius: .35rem; box-shadow: var(--app-shadow-sm); }
.assistant-msg--bot strong { font-weight: 750; background: linear-gradient(transparent 62%, var(--app-lime-soft) 0); }
.assistant-msg__actions, .assistant-msg__choices { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.assistant-done { display: flex; gap: .4rem; align-items: baseline; margin: .6rem 0 0; color: var(--app-ink-2); font-size: .88rem; }
.assistant-done i { color: #8f4c38; }
[data-bs-theme="dark"] .assistant-done i { color: var(--app-lime); }
/* Varios pasos propuestos de una vez («Apuntar todo»). */
.assistant-items { display: grid; gap: 3px; margin: .6rem 0 0; padding: 0; list-style: none; }
.assistant-items li { display: flex; gap: .5rem; align-items: baseline; padding: .5rem .7rem; border-radius: .45rem; background: var(--app-surface-2); font-size: .9rem; }
.assistant-items li:first-child { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.assistant-items li:last-child { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.assistant-items i { color: var(--app-tone); }
.assistant-thinking { display: inline-flex; gap: .3rem; padding: .85rem 1rem; }
.assistant-thinking span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--app-muted); animation: thinking-dot 1s infinite ease-in-out; }
.assistant-thinking span:nth-child(2) { animation-delay: .15s; }
.assistant-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes thinking-dot { 40% { transform: translateY(-4px); opacity: .5; } }
.assistant-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem 1.4rem .2rem; }
.assistant-chips::-webkit-scrollbar { display: none; }
.assistant-chip, .home-chip {
    flex: 0 0 auto;
    padding: .45rem .85rem;
    border: 1px solid var(--app-line-strong);
    border-radius: 999px;
    color: var(--app-ink);
    background: var(--app-glass-strong);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease;
}
/* Nunca más anchos que su contenedor: si el texto es largo, parte en dos líneas. */
.assistant-chip { flex-shrink: 1; max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; overflow-wrap: anywhere; }
.assistant-chip:not(:only-child) { border-radius: 1.2rem; }
.assistant-chip:hover, .home-chip:hover { border-color: var(--app-ink); background: var(--app-surface); }
.assistant-composer { display: flex; align-items: center; gap: .4rem; margin: .7rem 1.4rem .9rem; padding: .35rem .35rem .35rem 1.1rem; border: 1px solid var(--app-line-strong); border-radius: 999px; background: var(--app-surface); box-shadow: var(--app-shadow-sm); transition: box-shadow .2s ease, border-color .2s ease; }
.assistant-composer:focus-within { border-color: var(--app-ink); box-shadow: 0 0 0 4px var(--app-focus); }
.assistant-composer__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--app-ink); font-size: 1rem; }
/* El foco ya lo marca la píldora entera (:focus-within); sin el recuadro genérico de accesibilidad dentro. */
.assistant-composer .assistant-composer__input:focus-visible { outline: 0 !important; box-shadow: none !important; }
.assistant-composer__input::placeholder { color: var(--app-muted); }
.assistant-composer__mic, .assistant-composer__send { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; font-size: 1.1rem; }
.assistant-composer__mic { color: var(--app-ink-2); background: var(--app-surface-3); }
.assistant-composer__mic.is-listening { color: #fff; background: var(--app-danger); animation: buddy-listen 1s infinite; }
.assistant-composer__send { color: var(--app-on-primary); background: var(--app-primary); }
.assistant-manual { margin: 0 1.4rem 1rem; border-top: 1px solid var(--app-line); }
.assistant-manual summary { padding: .8rem 0 .4rem; color: var(--app-ink-2); font-size: .86rem; font-weight: 650; cursor: pointer; list-style: none; }
.assistant-manual summary::-webkit-details-marker { display: none; }
.assistant-manual .quick-grid, .assistant-manual .quick-links { padding-left: 0; padding-right: 0; }
.assistant-manual .quick-grid { padding-top: .4rem; }
.assistant-spark { display: block; width: 100%; height: 4rem; margin-top: .6rem; }
.assistant-spark__line { fill: none; stroke: var(--app-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.assistant-spark__area { fill: var(--app-lime-soft); }
.assistant-spark__goal { stroke: var(--cat-body); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.assistant-spark__dot { fill: var(--app-lime); stroke: var(--app-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
[data-bs-theme="dark"] .assistant-spark__line { stroke: var(--app-lime); }

/* --------------------------------------------------------------------------
   Hoy: la portada del asistente
   -------------------------------------------------------------------------- */
.home { padding-top: 2.2rem; }
.home-hero { margin-bottom: 1.4rem; }
.home-hero__buddy { padding-top: .6rem; }
.home-day { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.home-day .eyebrow { margin: 0; text-transform: none; letter-spacing: .02em; font-size: .82rem; font-weight: 650; color: var(--app-muted) !important; }
.home-day .eyebrow::first-letter { text-transform: uppercase; }
.home-day__nav { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--app-line); border-radius: 50%; color: var(--app-ink-2); background: var(--app-glass-strong); }
.home-day__nav:disabled { opacity: .35; }
.home-hero__greeting { margin: 0 0 .3rem; color: var(--app-ink-2); font-size: 1.15rem; font-weight: 600; }
.home-hero__headline { margin: 0; max-width: 40rem; font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 750; line-height: 1.06; letter-spacing: -.05em; text-wrap: balance; }
.home-hero__headline em { font-style: normal; color: var(--app-tone); }
.home-hero__subline { margin: .7rem 0 0; color: var(--app-ink-2); font-size: 1.05rem; }
.home-hero__subline em { font-style: normal; font-weight: 700; color: var(--app-ink); }
.home-hero__subline:empty { display: none; }
.home-ask {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: min(100%, 34rem);
    margin-top: 1.2rem;
    padding: .8rem 1rem;
    border: 1px solid var(--app-line-strong);
    border-radius: 999px;
    color: var(--app-muted);
    background: var(--app-glass-strong);
    box-shadow: var(--app-shadow);
    font-size: .95rem;
    text-align: left;
    backdrop-filter: blur(14px);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.home-ask span { flex: 1 1 auto; }
.home-ask i { color: var(--app-ink); font-size: 1.1rem; }
.home-ask:hover { border-color: var(--app-ink); box-shadow: 0 0 0 4px var(--app-lime-soft), var(--app-shadow); }
.home-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.home-main, .home-side { display: grid; gap: 1.25rem; min-width: 0; }
.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.home-section-head h2 { margin: 0; font-size: 1.15rem; font-weight: 750; letter-spacing: -.03em; }
.home-link { border: 0; padding: 0; background: none; color: var(--app-ink-2); font-size: .84rem; font-weight: 650; text-decoration: none; }
.home-link:hover { color: var(--app-ink); }

.home-focus__card {
    --tone: var(--app-lime);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.1rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: 1.9rem;
    color: #f4f7f0;
    background: #0f1512;
    box-shadow: var(--app-shadow-lg);
    animation: toast-in .4s var(--app-ease);
}
.home-focus__card::before { content: ""; position: absolute; inset: -60% -25% -60% 35%; z-index: -1; background: radial-gradient(45% 55% at 70% 45%, color-mix(in srgb, var(--tone) 70%, transparent), transparent 70%), radial-gradient(30% 40% at 15% 90%, rgba(139, 104, 255, .35), transparent 70%); filter: blur(28px); animation: aurora-drift 18s var(--app-ease) infinite alternate; }
.home-focus__card[data-tone="food"] { --tone: var(--cat-food); }
.home-focus__card[data-tone="water"] { --tone: var(--cat-water); }
.home-focus__card[data-tone="move"] { --tone: var(--cat-move); }
[data-bs-theme="dark"] .home-focus__card { background: #0c110e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--app-shadow-lg); }
.home-focus__icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 1.15rem; color: var(--tone); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 1.4rem; }
.home-focus__copy small { display: block; color: rgba(244, 247, 240, .65); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-focus__copy h2 { margin: .2rem 0 .25rem; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 750; letter-spacing: -.045em; }
.home-focus__copy p { margin: 0; color: rgba(244, 247, 240, .78); line-height: 1.4; }
.home-focus__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.home-focus__actions .btn-success { --bs-btn-bg: var(--app-lime); --bs-btn-color: var(--app-lime-ink); --bs-btn-border-color: var(--app-lime); --bs-btn-hover-bg: #ffc9b8; --bs-btn-hover-color: var(--app-lime-ink); --bs-btn-hover-border-color: #ffc9b8; --bs-btn-active-bg: #f5a58d; --bs-btn-active-color: var(--app-lime-ink); }
.home-focus__actions .btn-light { --bs-btn-bg: rgba(255, 255, 255, .1); --bs-btn-color: #f4f7f0; --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .22); --bs-btn-active-color: #fff; }
.home-focus__actions .btn { display: inline-flex; align-items: center; gap: .4rem; }

.home-alerts { display: grid; gap: .6rem; }
.home-alerts:empty { display: none; }
.home-alert {
    --tone: var(--app-ink);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .4rem .8rem;
    align-items: center;
    padding: .9rem 2.6rem .9rem .9rem;
    border: 1px solid var(--app-glass-border);
    border-radius: 1.35rem;
    background: var(--app-glass-strong);
    box-shadow: var(--app-shadow-sm);
    backdrop-filter: blur(16px);
    animation: toast-in .35s var(--app-ease);
}
.home-alert[data-tone="food"] { --tone: var(--cat-food); }
.home-alert[data-tone="water"] { --tone: var(--cat-water); }
.home-alert[data-tone="move"] { --tone: var(--cat-move); }
.home-alert[data-tone="body"] { --tone: var(--cat-body); }
.home-alert__icon { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .85rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); font-size: 1.1rem; }
.home-alert p { margin: 0; font-size: .95rem; line-height: 1.35; }
.home-alert__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; }
.home-alert__close { position: absolute; top: .55rem; right: .55rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--app-muted); background: transparent; }
.home-alert__close:hover { background: var(--app-surface-3); color: var(--app-ink); }

.home-timeline__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.home-meal { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .55rem .4rem; border-radius: 1.1rem; transition: background-color .2s ease; }
.home-meal:hover { background: var(--app-surface-2); }
.home-meal:not(:last-child)::after { content: ""; position: absolute; left: calc(.4rem + 1.2rem); top: 3.05rem; bottom: -.7rem; width: 2px; background: var(--app-line); }
.home-meal__check { position: relative; z-index: 1; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 2px solid var(--app-line-strong); border-radius: 50%; color: var(--app-on-primary); background: var(--app-surface); font-size: 1.05rem; transition: transform .2s var(--app-ease), background-color .2s ease, border-color .2s ease; }
.home-meal__check:hover { transform: scale(1.06); border-color: var(--app-ink); }
.home-meal.is-completed .home-meal__check { border-color: var(--app-primary); background: var(--app-primary); }
.home-meal.is-skipped .home-meal__check { color: var(--app-muted); border-style: dashed; }
.home-meal.is-next .home-meal__check { border-color: var(--cat-food); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-food) 18%, transparent); }
.home-meal__copy { min-width: 0; }
.home-meal__time { display: block; color: var(--app-muted); font-size: .76rem; font-weight: 650; }
.home-meal__time b { color: var(--cat-food); }
.home-meal__copy strong { display: block; font-size: .98rem; }
.home-meal__copy small { display: block; overflow: hidden; color: var(--app-muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.home-meal__custom { margin-right: .3rem; color: var(--app-tone); }
.home-meal.is-completed .home-meal__copy strong { text-decoration: line-through; text-decoration-color: var(--app-line-strong); color: var(--app-ink-2); }
.home-meal__more { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--app-muted); background: transparent; }
.home-meal__more:hover { background: var(--app-surface-3); color: var(--app-ink); }
.home-empty { color: var(--app-muted); padding: .5rem 0; }

.home-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.home-ring { --tone: var(--app-ink); position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.home-ring[data-tone="food"] { --tone: var(--cat-food); }
.home-ring[data-tone="water"] { --tone: var(--cat-water); }
.home-ring[data-tone="move"] { --tone: var(--cat-move); }
.home-ring svg { width: 100%; height: 100%; overflow: visible; }
.home-ring__track { fill: none; stroke: color-mix(in srgb, var(--tone) 16%, transparent); stroke-width: 7; }
.home-ring__value { fill: none; stroke: var(--tone); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: ring-draw 1.1s var(--app-ease) both; }
@keyframes ring-draw { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: reduce) { .home-ring__value { animation: none; } }
.home-ring__copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.home-ring__copy strong { font-size: .95rem; font-weight: 750; letter-spacing: -.03em; }
.home-ring__copy span { color: var(--app-muted); font-size: .68rem; font-weight: 650; }
.home-note__text { margin: 0; color: var(--app-ink); white-space: pre-line; }
.home-note__text.is-empty { color: var(--app-muted); font-size: .9rem; }

/* Racha en la cabecera. */
.home-streak { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; margin-left: .35rem; padding: .25rem .65rem .25rem .5rem; border: 0; border-radius: 999px; color: #7a2e00; background: linear-gradient(135deg, #ffd9a8, #ffb37a); font-size: .8rem; font-weight: 750; box-shadow: 0 6px 16px -10px rgba(255, 122, 77, .9); }
.home-streak i { color: #ff5a1f; }
.home-streak.is-pending { color: var(--app-ink-2); background: var(--app-surface-3); box-shadow: none; }
.home-streak.is-pending i { color: var(--app-muted); }
[data-bs-theme="dark"] .home-streak:not(.is-pending) { color: #ffd2b0; background: linear-gradient(135deg, rgba(255, 122, 77, .35), rgba(255, 90, 31, .25)); }

/* Cierre del día: pregunta de un toque. */
.home-closing { padding: 1.2rem 1.3rem; border: 1px solid var(--app-glass-border); border-radius: 1.6rem; background: linear-gradient(135deg, color-mix(in srgb, var(--cat-move) 12%, var(--app-glass-strong)), var(--app-glass-strong)); box-shadow: var(--app-shadow); animation: toast-in .35s var(--app-ease); }
.home-closing__question { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-size: 1.15rem; font-weight: 750; letter-spacing: -.03em; }
.home-closing__question i { color: var(--cat-move); }
.home-closing__options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin-bottom: .7rem; }
.home-closing__option { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .3rem; border: 1px solid var(--app-line); border-radius: 1.1rem; color: var(--app-ink); background: var(--app-surface); font-size: .78rem; font-weight: 650; transition: transform .2s var(--app-ease), border-color .2s ease; }
.home-closing__option i { font-size: 1.5rem; }
.home-closing__option:hover { transform: translateY(-2px); border-color: var(--app-ink); }
@media (max-width: 575.98px) { .home-closing__options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Repaso semanal. */
.home-weekly__card { position: relative; padding: 1.3rem 1.3rem 1.1rem; border: 1px solid var(--app-glass-border); border-radius: 1.6rem; background: var(--app-glass-strong); box-shadow: var(--app-shadow); animation: toast-in .35s var(--app-ease); }
.home-weekly__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-right: 1.6rem; }
.home-weekly__head small { color: var(--app-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home-weekly__head h2 { margin: .25rem 0 0; font-size: 1.3rem; font-weight: 750; letter-spacing: -.04em; }
.home-weekly__head h2 em { font-style: normal; color: var(--app-tone); }
.home-weekly__score { text-align: right; }
.home-weekly__score strong { display: block; font-size: 2rem; font-weight: 780; line-height: 1; letter-spacing: -.05em; }
.home-weekly__score span { color: var(--app-muted); font-size: .74rem; }
.home-weekly__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.home-weekly__stats > div { --tone: var(--app-ink); padding: .7rem; border-radius: 1rem; background: color-mix(in srgb, var(--tone) 10%, transparent); }
.home-weekly__stats > div[data-tone="food"] { --tone: var(--cat-food); }
.home-weekly__stats > div[data-tone="water"] { --tone: var(--cat-water); }
.home-weekly__stats > div[data-tone="move"] { --tone: var(--cat-move); }
.home-weekly__stats > div[data-tone="body"] { --tone: var(--cat-body); }
.home-weekly__stats strong { display: block; font-size: 1.05rem; font-weight: 750; }
.home-weekly__stats span { color: var(--app-muted); font-size: .72rem; font-weight: 600; }
@media (max-width: 575.98px) { .home-weekly__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lo que viene. */
.home-upcoming__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.home-upcoming__item { --tone: var(--app-ink); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.home-upcoming__item[data-tone="move"] { --tone: var(--cat-move); }
.home-upcoming__item[data-tone="body"] { --tone: var(--cat-body); }
.home-upcoming__item[data-tone="food"] { --tone: var(--cat-food); }
.home-upcoming__icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: .8rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.home-upcoming__item small { display: block; color: var(--app-muted); font-size: .72rem; font-weight: 650; }
.home-upcoming__item strong { display: block; overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.home-upcoming__detail { color: var(--app-muted); font-size: .78rem; font-weight: 600; }

/* Confeti de celebración. */
.confetti { position: fixed; inset: 0; z-index: 1100; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -2vh; left: var(--x); width: .55rem; height: .8rem; border-radius: .15rem; animation: confetti-fall 2.6s var(--delay) cubic-bezier(.25, .6, .4, 1) forwards; opacity: 0; }
@keyframes confetti-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--drift), 105vh) rotate(var(--spin)); } }

@media (max-width: 991.98px) {
    .home { padding-top: calc(1.2rem + env(safe-area-inset-top, 0px)); }
    .home-hero__greeting { margin: .2rem 0 0; font-size: 1rem; }
    .home-hero__headline { margin-top: .6rem; }

    /* Una sola columna ordenada por importancia. */
    .home-grid { display: flex; flex-direction: column; gap: 1rem; }
    .home-main, .home-side { display: contents; }
    .home-focus { order: 1; }
    .home-closing { order: 2; }
    .home-rings-card { order: 3; }
    .home-alerts { order: 4; }
    .home-weekly { order: 5; }
    .home-timeline { order: 6; }
    .home-upcoming { order: 7; }
    .home-note { order: 8; }
}
@media (max-width: 575.98px) {
    .home-focus__actions .btn { flex: 1 1 auto; justify-content: center; }

}
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: 1rem 1.5rem 1.4rem; }
.quick-action {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 6.4rem;
    padding: .9rem;
    border: 1px solid var(--app-line);
    border-radius: 1.35rem;
    color: var(--app-ink);
    background: var(--app-surface);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.2;
    transition: transform .2s var(--app-ease), box-shadow .2s ease, border-color .2s ease;
}
.quick-action:hover { transform: translateY(-2px); border-color: var(--app-line-strong); box-shadow: var(--app-shadow); color: var(--app-ink); }
.quick-action i { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .85rem; font-size: 1.1rem; color: var(--tone, var(--app-ink)); background: color-mix(in srgb, var(--tone, var(--app-ink)) 14%, transparent); }
.quick-action small { color: var(--app-muted); font-weight: 500; font-size: .74rem; }
.quick-action[data-tone="food"] { --tone: var(--cat-food); }
.quick-action[data-tone="water"] { --tone: var(--cat-water); }
.quick-action[data-tone="move"] { --tone: var(--cat-move); }
.quick-action[data-tone="body"] { --tone: var(--cat-body); }
.quick-links { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.5rem 1.4rem; }
.quick-links a, .quick-links button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-ink-2); background: transparent; font-size: .84rem; font-weight: 600; text-decoration: none; }
.quick-links a:hover, .quick-links button:hover { color: var(--app-ink); background: var(--app-surface-3); }
@media (max-width: 380px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Avisos flotantes (toasts) con acción opcional
   -------------------------------------------------------------------------- */
.app-toast-region { position: fixed; left: 50%; bottom: calc(var(--app-dock-height) + env(safe-area-inset-bottom, 0px) + 1.5rem); z-index: 1090; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }
@media (min-width: 992px) { .app-toast-region { bottom: 1.5rem; left: calc(50% + 126px); } }
.app-toast {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .7rem .7rem 1rem;
    border-radius: 1.2rem;
    color: #f2f6ee;
    background: rgba(15, 21, 18, .92);
    box-shadow: var(--app-shadow-lg);
    backdrop-filter: blur(16px);
    font-size: .92rem;
    font-weight: 550;
    pointer-events: auto;
    animation: toast-in .35s var(--app-ease);
}
[data-bs-theme="dark"] .app-toast { background: rgba(236, 242, 232, .95); color: #0f1512; }
.app-toast > i { color: var(--app-lime); font-size: 1.1rem; }
[data-bs-theme="dark"] .app-toast > i { color: #8f4c38; }
.app-toast[data-tone="error"] > i { color: #ff8a8a; }
[data-bs-theme="dark"] .app-toast[data-tone="error"] > i { color: var(--app-danger); }
.app-toast span { flex: 1 1 auto; min-width: 0; }
.app-toast button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: .4rem .8rem; color: var(--app-lime-ink); background: var(--app-lime); font-weight: 750; font-size: .84rem; }
.app-toast.is-leaving { animation: toast-out .25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Diálogo de confirmación propio (sustituye confirm()). */
.app-dialog .modal-content { text-align: center; }
.app-dialog .modal-body { padding: 1.8rem 1.6rem 1rem; }
.app-dialog__icon { width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 1.2rem; font-size: 1.5rem; color: var(--app-ink); background: var(--app-surface-3); }
.app-dialog.is-danger .app-dialog__icon { color: var(--app-danger); background: rgba(229, 72, 77, .12); }
.app-dialog h2 { font-size: 1.3rem; font-weight: 750; margin: 0 0 .4rem; }
.app-dialog p { color: var(--app-muted); margin: 0; }
.app-dialog .modal-footer { justify-content: center; }
.app-dialog.is-danger .btn-success { --bs-btn-bg: var(--app-danger); --bs-btn-border-color: var(--app-danger); --bs-btn-hover-bg: #cc3a3f; --bs-btn-hover-border-color: #cc3a3f; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }

/* Esqueletos de carga. */
.skeleton { position: relative; overflow: hidden; border-radius: 1rem; background: var(--app-surface-3); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: skeleton-sweep 1.4s infinite; }
[data-bs-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   Acceso: portada con claim editorial
   -------------------------------------------------------------------------- */
.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.1rem; background: transparent; }
.auth-panel { width: min(64rem, 100%); display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; background: transparent; box-shadow: none; border: 0; }
.auth-intro { color: var(--app-ink); background: transparent; padding: 0; }
.auth-intro h1 { font-size: clamp(2.8rem, 6.5vw, 4.8rem); font-weight: 780; line-height: .95; letter-spacing: -.06em; margin: 1.2rem 0 1rem; color: var(--app-ink); }
.auth-intro h1 em { font-style: normal; color: var(--app-tone); }
.auth-intro > p { font-size: 1.15rem; color: var(--app-ink-2); max-width: 28rem; opacity: 1; }
.auth-feature-list { display: grid; gap: .6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.auth-feature-list li { display: flex; align-items: center; gap: .7rem; color: var(--app-ink-2); font-weight: 550; }
.auth-feature-list i { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .8rem; background: var(--app-glass-strong); border: 1px solid var(--app-line); color: var(--app-ink); }
.auth-card { border-radius: 2rem; background: var(--app-glass-strong); }
.auth-card .nav-pills { display: flex; width: 100%; }
.auth-card .nav-pills .nav-link.active { background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow-sm); }
.auth-guide-link { border-radius: 1.25rem; border: 1px solid var(--app-line); background: var(--app-surface); color: var(--app-ink); }
.auth-shell .brand-mark { width: 3rem; height: 3rem; font-size: 1.35rem; border-radius: 1.05rem; }
.auth-feature { display: none; }
@media (max-width: 767.98px) {
    .auth-panel { grid-template-columns: 1fr; gap: 1.6rem; }
    .auth-intro h1 { font-size: 3rem; }
}

/* --------------------------------------------------------------------------
   Accesibilidad y movimiento reducido
   -------------------------------------------------------------------------- */
:focus-visible { outline-color: var(--app-ink); }
@media (prefers-reduced-motion: reduce) {
    body::before, .hero-card::before, .dashboard-hero::before { animation: none; }
    .app-toast, .app-toast.is-leaving { animation: none; }
    .modal.fade .modal-dialog { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .card, .app-sidebar, .app-dock, .modal-content, .offcanvas { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--app-surface); }
}

/* Resumen: las barras de 14 días siempre caben, sin desplazamiento lateral. */
.adherence-days { display: grid !important; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: .25rem; overflow: visible !important; }
.adherence-days > * { min-width: 0 !important; }
.adherence-day small, .adherence-day strong { overflow: hidden; max-width: 100%; text-overflow: clip; }
@media (max-width: 767.98px) { .adherence-days { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 1rem; min-height: 0 !important; } .adherence-days .adherence-bar { height: 90px; width: 18px; } .adherence-day small { font-size: .6rem; letter-spacing: -.02em; } .adherence-day strong { font-size: .66rem; } }

/* --------------------------------------------------------------------------
   Estructura común: herramientas de cabecera (⋯ y perfil) y hoja de acciones
   -------------------------------------------------------------------------- */
.app-page-header { position: relative; }
.app-page-header .eyebrow { display: none; }
.app-page-header .app-header-actions .is-in-menu { display: none !important; }
.app-page-header .app-header-actions.is-empty { display: none; }
.page-tools { position: absolute; top: 1.4rem; right: 2.25rem; display: flex; gap: .4rem; z-index: 2; }
.page-tool { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--app-line-strong); border-radius: 50%; color: var(--app-ink); background: var(--app-glass-strong); font-size: 1.15rem; backdrop-filter: blur(12px); transition: border-color .2s ease, transform .2s var(--app-ease); }
.page-tool:hover { border-color: var(--app-ink); }
.page-tool--avatar { border-color: transparent; color: var(--app-on-tone-container); background: var(--app-tone-container); font-family: var(--app-display); font-size: 1rem; font-weight: 800; }
.app-page-header .header-title-row { padding-right: 6.4rem; }
@media (min-width: 992px) { .page-tool--avatar { display: none; } .app-page-header .header-title-row { padding-right: 3.4rem; } }
@media (max-width: 991.98px) { .page-tools { top: calc(1.2rem + env(safe-area-inset-top, 0px)); right: 1.1rem; } }
.home-day { position: relative; }
.home-avatar { margin-left: auto; width: 2.4rem; height: 2.4rem; }
@media (min-width: 992px) { .home-avatar { display: none; } }

.app-sheet.offcanvas-bottom { height: auto; max-height: 85dvh; border-radius: 2rem 2rem 0 0; padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
@media (min-width: 992px) {
    .app-sheet.offcanvas-bottom { left: calc(50% + 126px); right: auto; bottom: 1rem; width: 30rem; border-radius: 2rem; border: 1px solid var(--app-glass-border); transform: translate(-50%, 110%); }
    .app-sheet.offcanvas-bottom.showing, .app-sheet.offcanvas-bottom.show:not(.hiding) { transform: translate(-50%, 0); }
}
.app-sheet__grip { position: absolute; top: .6rem; left: 50%; width: 2.6rem; height: .3rem; margin-left: -1.3rem; border-radius: 999px; background: var(--app-line-strong); }
.app-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.4rem .6rem; }
.app-sheet__head h2 { margin: 0; font-size: 1.4rem; font-weight: 750; }
.app-sheet__head p { margin: .1rem 0 0; color: var(--app-muted); font-size: .88rem; }
.app-sheet__list { display: grid; gap: 3px; padding: .3rem 1rem 0; overflow-y: auto; }
.app-sheet__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 1rem; border: 0; border-radius: .5rem; color: var(--app-ink); background: var(--app-surface); text-align: left; text-decoration: none; font: inherit; transition: background-color .15s ease; }
.app-sheet__item:first-child { border-top-left-radius: 1.4rem; border-top-right-radius: 1.4rem; }
.app-sheet__item:last-child { border-bottom-left-radius: 1.4rem; border-bottom-right-radius: 1.4rem; }
.app-sheet__item:hover { color: var(--app-ink); background: var(--app-surface-2); }
.app-sheet__item > .bi:first-child { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .9rem; color: var(--app-on-tone-container); background: var(--app-tone-container); font-size: 1.05rem; }
.app-sheet__item strong { display: block; font-weight: 650; }
.app-sheet__item small { display: block; color: var(--app-muted); font-size: .8rem; }
.app-sheet__chevron { color: var(--app-muted); }
.app-sheet__item.is-danger { color: var(--app-danger); }
.app-sheet__item.is-danger > .bi:first-child { color: var(--app-danger); background: rgba(229, 72, 77, .1); }
/* --------------------------------------------------------------------------
   Progreso: objetivo (con fecha estimada) y constancia
   -------------------------------------------------------------------------- */
#predictionReadiness, #progressMetrics { display: none !important; }
.progress-section-title { margin: 0 0 .8rem; font-size: 1.3rem; font-weight: 750; }
.goal-card { display: grid; gap: 1rem; padding: 1.5rem; border-radius: 2rem; color: var(--app-on-tone-container); background: var(--app-tone-container); }
.goal-card__copy small, .consistency-card small, .consistency-days small { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.goal-card__copy h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .3rem 0 .4rem; color: inherit; font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; line-height: 1; }
.goal-card__copy h2 .bi { font-size: .6em; opacity: .6; }
.goal-card__target { opacity: .7; }
.goal-card__copy p { margin: 0; font-size: 1rem; }
.goal-wave { display: block; width: 100%; height: 18px; overflow: visible; }
.goal-wave__value { fill: none; stroke: var(--app-tone); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.goal-wave__track { stroke: color-mix(in srgb, var(--app-tone) 22%, transparent); stroke-width: 5; stroke-linecap: round; }
.goal-card__scale { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .78rem; font-weight: 650; opacity: .8; }
.goal-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.goal-card__stats div { padding: .7rem .8rem; border-radius: 1rem; background: rgba(255, 255, 255, .45); }
[data-bs-theme="dark"] .goal-card__stats div { background: rgba(0, 0, 0, .18); }
.goal-card__stats dt { font-size: .72rem; font-weight: 650; opacity: .75; }
.goal-card__stats dd { margin: 0; font-weight: 750; font-size: .92rem; }
.goal-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.goal-card__actions .btn-light { --bs-btn-bg: rgba(255, 255, 255, .55); }
.consistency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.consistency-card { padding: 1rem; border-radius: 1.4rem; background: var(--app-surface); }
.consistency-card small { color: var(--app-muted); opacity: 1; }
.consistency-card strong { display: block; margin: .2rem 0; font-family: var(--app-display); font-size: 1.9rem; font-weight: 800; font-variation-settings: "wdth" 115; line-height: 1.05; }
.consistency-card strong span { margin-left: .2rem; color: var(--app-muted); font-size: .9rem; font-weight: 650; }
.consistency-card p { margin: 0; color: var(--app-muted); font-size: .8rem; }
.consistency-days { padding: 1rem 1.1rem; border-radius: 1.4rem; background: var(--app-surface); }
.consistency-days header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.consistency-days header small { color: var(--app-muted); opacity: 1; }
.consistency-days header span { display: flex; align-items: center; gap: .35rem; color: var(--app-muted); font-size: .74rem; }
.consistency-days header i { width: .55rem; height: .55rem; border-radius: 50%; }
.consistency-days ol { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: .3rem; height: 5.5rem; margin: 0; padding: 0; list-style: none; }
.consistency-days li { display: grid; grid-template-rows: 1fr auto; gap: .25rem; min-width: 0; }
.consistency-days li span { align-self: end; height: var(--h); border-radius: .35rem; background: var(--app-surface-3); }
.consistency-days li small { text-align: center; font-size: .66rem; letter-spacing: 0; text-transform: uppercase; color: var(--app-muted); opacity: 1; }
.consistency-days .is-good span, .consistency-days header .is-good { background: var(--app-tone); }
.consistency-days .is-mid span, .consistency-days header .is-mid { background: color-mix(in srgb, var(--app-tone) 40%, transparent); }
@media (max-width: 575.98px) {
    .goal-card { padding: 1.25rem; border-radius: 1.7rem; }
    .goal-card__stats dd { font-size: .82rem; }
    .consistency-grid { gap: .4rem; }
    .consistency-card { padding: .8rem; }
    .consistency-card strong { font-size: 1.5rem; }
    .consistency-card p { font-size: .72rem; }
}
/* Dentro de las superficies de tinta, títulos y rótulos siempre claros. */
:is(.sport-week-hero, .prediction-card, .dashboard-hero, .hero-card, .today-focus, .home-focus__card) :is(h1, h2, h3, h4) { color: #fff; }
:is(.sport-week-hero, .prediction-card, .dashboard-hero, .hero-card, .today-focus) :is(.hero-kicker, .eyebrow) { color: rgba(244, 247, 240, .72) !important; }
:is(.sport-week-hero, .prediction-card, .dashboard-hero, .hero-card) p { color: rgba(244, 247, 240, .8); }
/* Con una hoja o un modal abierto, los avisos salen arriba para no tapar el contenido. */
.app-toast-region.is-top { top: calc(1rem + env(safe-area-inset-top, 0px)); bottom: auto; z-index: 1100; }
@media (min-width: 992px) { .app-toast-region.is-top { left: 50%; } }

/* Hoy: agua rápida bajo los anillos. */
.home-water:empty { display: none; }
.home-water { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .6rem .6rem .6rem .7rem; border-radius: 1.2rem; background: color-mix(in srgb, var(--cat-water) 10%, var(--app-surface-2)); }
.home-water__icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: .8rem; color: var(--cat-water); background: color-mix(in srgb, var(--cat-water) 16%, transparent); font-size: 1.1rem; }
.home-water__copy { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.home-water__copy strong { display: block; font-size: .92rem; }
.home-water__copy small { color: var(--app-muted); font-size: .78rem; }
.home-water__add { flex: 0 0 auto; padding: .5rem .75rem; border: 0; border-radius: .9rem; color: #fff; background: var(--cat-water); font-size: .85rem; font-weight: 750; transition: transform .15s var(--app-ease); }
.home-water__add:active { transform: scale(.95); }

/* Hoy: pesaje rápido con capturas de la báscula. */
.home-weight { margin-top: .5rem; background: color-mix(in srgb, var(--cat-body) 10%, var(--app-surface-2)); }
.home-weight__icon { color: var(--cat-body); background: color-mix(in srgb, var(--cat-body) 16%, transparent); }
.home-weight__capture { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; padding: .5rem .8rem; border: 0; border-radius: .9rem; color: #fff; background: var(--cat-body); font-size: .85rem; font-weight: 750; }
.home-weight__write { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: .9rem; color: var(--cat-body); background: color-mix(in srgb, var(--cat-body) 14%, transparent); }