/* ==========================================================================
   Gestión Hogar — hoja de estilos única (sin frameworks, sin compilación).
   Estructura: 1. Tokens · 2. Base · 3. Layout por dispositivo · 4. Componentes
               5. Gráficos · 6. Módulos · 7. Táctil / ratón · 8. Movimiento · 9. Utilidades
   Convención: BEM ligero (.bloque__elemento, .bloque--variante) + utilidades.

   COLOR POR ACCIÓN (docs/CONVENCIONES.md). Cada acción tiene un tono pastel; el tono se
   aplica con una clase .tone-* que define --t-soft / --t-line / --t-ink / --t-strong / --t-on:
     crear/guardar → menta · ver/navegar → cielo · pagar/liquidar → agua · compra → salvia
     editar/ajustes → lavanda · eliminar/salir → coral · avisos → sol
   Los botones de acción (.btn-create, .btn-view…) y las secciones del menú usan esos tonos.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
    --c-bg: #f1f7f4;
    --c-bg-2: #e9f2f6;
    --c-surface: #ffffff;
    --c-surface-2: #eef5f2;
    --c-text: #1a2b28;
    --c-muted: #5a6e6a;
    --c-border: #d8e6e1;
    --c-border-strong: #bcd3cc;
    --c-focus: #2d6aa8;

    /* Compatibilidad con estilos antiguos */
    --c-primary: #237a58;
    --c-primary-hover: #1d6649;
    --c-primary-soft: #dcf3e8;
    --c-danger: #b9442f;
    --c-danger-soft: #fde6e1;
    --c-success: #237a58;
    --c-success-soft: #dcf3e8;
    --c-warning: #6e4b00;
    --c-warning-soft: #fdf1d4;
    --c-info-soft: #dfecfa;

    /* Tonos pastel (soft = fondo, line = borde, ink = texto, strong = relleno sólido, on = texto sobre strong) */
    --mint-soft: #dcf3e8;  --mint-line: #a8dcc3;  --mint-ink: #135a41;  --mint-strong: #237a58;
    --sky-soft: #dfecfa;   --sky-line: #b0cdee;   --sky-ink: #1d4b7a;   --sky-strong: #2d6aa8;
    --aqua-soft: #d8f0f1;  --aqua-line: #9fd6d9;  --aqua-ink: #0f5459;  --aqua-strong: #1b7379;
    --sage-soft: #e6f2d9;  --sage-line: #c2dea2;  --sage-ink: #3a5719;  --sage-strong: #4a7323;
    --lav-soft: #e8e7f8;   --lav-line: #c9c6ee;   --lav-ink: #3d3a85;   --lav-strong: #5753ad;
    --coral-soft: #fde6e1; --coral-line: #f4bfb3; --coral-ink: #93301f; --coral-strong: #b9442f;
    --sun-soft: #fdf1d4;   --sun-line: #f0d48f;   --sun-ink: #6e4b00;   --sun-strong: #8a5f00;
    --on-strong: #ffffff;

    /* Gráficos (paleta validada para daltonismo: scripts/validate_palette.js) */
    --chart-1: #3d7fc4;
    --chart-1-dim: #a9c9ec;
    --chart-2: #2f9e78;
    --chart-grid: #e4ece9;
    --chart-axis: #c3d3ce;

    --radius-lg: 22px;
    --radius: 16px;
    --radius-sm: 11px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(22, 52, 45, .06);
    --shadow: 0 1px 2px rgba(22, 52, 45, .05), 0 6px 20px rgba(22, 52, 45, .06);
    --shadow-lg: 0 12px 40px rgba(22, 52, 45, .16);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --tap: 44px;            /* objetivo táctil mínimo (sube a 48px con puntero grueso) */
    --sidebar-w: 256px;
    --tabbar-h: 68px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
    --dur: .22s;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #0e1816;
        --c-bg-2: #0f1720;
        --c-surface: #162320;
        --c-surface-2: #1c2c29;
        --c-text: #e4efec;
        --c-muted: #9db3ad;
        --c-border: #263935;
        --c-border-strong: #355049;
        --c-focus: #8fbcec;

        --c-primary: #86d3b0;
        --c-primary-hover: #a6e3c6;
        --c-primary-soft: #16352b;
        --c-danger: #f09a86;
        --c-danger-soft: #3b1f1b;
        --c-success: #86d3b0;
        --c-success-soft: #16352b;
        --c-warning: #f3d48a;
        --c-warning-soft: #352b14;
        --c-info-soft: #182c42;

        --mint-soft: #16352b;  --mint-line: #24574a;  --mint-ink: #a6e3c6;  --mint-strong: #86d3b0;
        --sky-soft: #182c42;   --sky-line: #2a4a6e;   --sky-ink: #acd0f4;   --sky-strong: #8fbcec;
        --aqua-soft: #143639;  --aqua-line: #23585c;  --aqua-ink: #9fdfe2;  --aqua-strong: #7fcfd3;
        --sage-soft: #22321a;  --sage-line: #3b552a;  --sage-ink: #c5e2a3;  --sage-strong: #a9d27e;
        --lav-soft: #25243f;   --lav-line: #403d6e;   --lav-ink: #c9c6f3;   --lav-strong: #aeaaec;
        --coral-soft: #3b1f1b; --coral-line: #6a3429; --coral-ink: #f6b9ab; --coral-strong: #f09a86;
        --sun-soft: #352b14;   --sun-line: #5f4b1c;   --sun-ink: #f3d48a;   --sun-strong: #e9c06a;
        --on-strong: #10201c;

        --chart-1: #4a8ed6;
        --chart-1-dim: #2b4a6a;
        --chart-2: #2fa27b;
        --chart-grid: #22332f;
        --chart-axis: #355049;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .18);
        --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

/* Tonos: cualquier elemento puede llevar uno y sus hijos usan var(--t-*) */
.tone-mint     { --t-soft: var(--mint-soft);  --t-line: var(--mint-line);  --t-ink: var(--mint-ink);  --t-strong: var(--mint-strong); }
.tone-sky      { --t-soft: var(--sky-soft);   --t-line: var(--sky-line);   --t-ink: var(--sky-ink);   --t-strong: var(--sky-strong); }
.tone-aqua     { --t-soft: var(--aqua-soft);  --t-line: var(--aqua-line);  --t-ink: var(--aqua-ink);  --t-strong: var(--aqua-strong); }
.tone-sage     { --t-soft: var(--sage-soft);  --t-line: var(--sage-line);  --t-ink: var(--sage-ink);  --t-strong: var(--sage-strong); }
.tone-lavender { --t-soft: var(--lav-soft);   --t-line: var(--lav-line);   --t-ink: var(--lav-ink);   --t-strong: var(--lav-strong); }
.tone-coral    { --t-soft: var(--coral-soft); --t-line: var(--coral-line); --t-ink: var(--coral-ink); --t-strong: var(--coral-strong); }
.tone-sun      { --t-soft: var(--sun-soft);   --t-line: var(--sun-line);   --t-ink: var(--sun-ink);   --t-strong: var(--sun-strong); }

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
    margin: 0;
    font: 16px/1.5 var(--font);
    background: var(--c-bg);
    background-image: radial-gradient(1200px 500px at 100% -10%, var(--c-bg-2), transparent 70%);
    background-attachment: fixed;
    color: var(--c-text);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 750; }
h2 { font-size: 1.12rem; font-weight: 700; }
a { color: var(--sky-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
pre { font-family: var(--mono); white-space: pre-wrap; word-break: break-word; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--sky-soft); color: var(--sky-ink); }

.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.25em; }
.icon--text { width: auto; height: auto; font-style: normal; line-height: 1; vertical-align: baseline; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--c-surface); box-shadow: var(--shadow-lg); }
.skip-link:focus { top: 12px; }

/* 3. Layout por dispositivo ------------------------------------------------
   · Móvil y tableta (< 1024px): barra superior compacta + barra de pestañas inferior
     con botón central "+" (zona del pulgar) y hojas inferiores (bottom sheets).
   · Escritorio (≥ 1024px): barra lateral fija con menú, acciones rápidas y usuario.  */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.main { padding-top: 20px; padding-bottom: 32px; min-height: calc(100vh - 140px); }
.footer { color: var(--c-muted); font-size: .85rem; padding-top: 8px; padding-bottom: 24px; display: flex; align-items: center; gap: 6px; }
.footer .icon { color: var(--coral-strong); }

.topbar {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--c-surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--c-border);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .topbar { background: var(--c-surface); } }
.topbar__inner { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.topbar__menu { margin-left: auto; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; color: var(--c-text); font-size: 1.08rem; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, var(--mint-soft), var(--sky-soft)); color: var(--mint-ink); border: 1px solid var(--mint-line); }
.brand__logo .icon { width: 20px; height: 20px; }
.brand--center { display: flex; justify-content: center; margin-bottom: 24px; font-size: 1.35rem; }

.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 45vw; font-size: .82rem; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--lav-soft); color: var(--lav-ink); border: 1px solid var(--lav-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip:hover { text-decoration: none; filter: brightness(.98); }
.chip .icon { width: 1em; height: 1em; }

.icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 14px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; }
.icon-btn .icon { width: 22px; height: 22px; }

/* Barra de pestañas inferior (móvil y tableta) */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 6px var(--safe-b);
    background: color-mix(in srgb, var(--c-surface) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid var(--c-border);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .tabbar { background: var(--c-surface); } }
.tabbar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); color: var(--c-muted); font-size: .72rem; font-weight: 600; position: relative; }
.tabbar__link:hover { text-decoration: none; }
.tabbar__icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--radius-pill); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.tabbar__icon .icon { width: 22px; height: 22px; }
.tabbar__link.is-active { color: var(--t-ink); }
.tabbar__link.is-active .tabbar__icon { background: var(--t-soft); color: var(--t-ink); }
.tabbar__fab-slot { display: flex; justify-content: center; height: var(--tabbar-h); }
.fab {
    display: grid; place-items: center; width: 58px; height: 58px; margin-top: -18px;
    border-radius: 20px; border: 0; cursor: pointer;
    background: linear-gradient(140deg, var(--mint-strong), var(--aqua-strong));
    color: var(--on-strong); box-shadow: 0 8px 22px color-mix(in srgb, var(--mint-strong) 40%, transparent), 0 0 0 5px var(--c-surface);
    transition: transform var(--dur) var(--ease-spring);
}
.fab .icon { width: 28px; height: 28px; stroke-width: 2.2; }
.fab:hover { text-decoration: none; }

.has-tabbar .main { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 28px); }
.has-tabbar .footer { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }

/* Barra lateral (escritorio) */
.sidebar { display: none; }

@media (min-width: 1024px) {
    body.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
    .topbar, .tabbar { display: none; }
    .has-tabbar .main { padding-bottom: 40px; }
    .has-tabbar .footer { padding-bottom: 24px; }
    .main { padding-top: 32px; }
    .container { padding: 0 32px; }
    .sidebar {
        display: flex; flex-direction: column; gap: 6px;
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
        padding: 22px 16px; border-right: 1px solid var(--c-border);
        background: color-mix(in srgb, var(--c-surface) 70%, transparent);
    }
    .sidebar .brand { padding: 0 8px 10px; }
    .sidebar .chip { max-width: 100%; margin: 0 8px 14px; align-self: flex-start; }
    .sidebar__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); font-weight: 700; padding: 14px 10px 4px; }
    .sidebar__spacer { flex: 1; }
    .sidebar__quick { display: grid; gap: 6px; }
}

.side-link {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-height: var(--tap);
    border-radius: 14px; color: var(--c-text); font-weight: 600; font-size: .95rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.side-link:hover { text-decoration: none; }
.side-link__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--t-soft); color: var(--t-ink); border: 1px solid var(--t-line); flex: none; }
.side-link__icon .icon { width: 19px; height: 19px; }
.side-link.is-active { background: var(--t-soft); color: var(--t-ink); }
.side-link.is-active .side-link__icon { background: var(--t-strong); color: var(--on-strong); border-color: transparent; }
button.side-link { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }

/* Hojas inferiores (bottom sheets con <dialog>) — en escritorio se muestran centradas */
.sheet {
    border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 88vh;
    background: var(--c-surface); color: var(--c-text);
    border-radius: 26px 26px 0 0; box-shadow: var(--shadow-lg);
    padding-bottom: var(--safe-b);
}
.sheet::backdrop { background: rgba(14, 30, 26, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet[open] { animation: sheet-up .32s var(--ease); }
.sheet__handle { display: block; width: 44px; height: 5px; margin: 10px auto 4px; border-radius: 9px; background: var(--c-border-strong); touch-action: none; cursor: grab; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 20px 8px; }
.sheet__title { margin: 0; font-size: 1.1rem; }
.sheet__body { padding: 4px 16px 20px; display: grid; gap: 10px; overflow-y: auto; }
.sheet__section { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); font-weight: 700; padding: 8px 6px 0; }
@media (min-width: 1024px) {
    .sheet { margin: auto; border-radius: var(--radius-lg); max-width: 480px; }
    .sheet[open] { animation: pop-in .22s var(--ease); }
    .sheet__handle { display: none; }
}

.guest { background-image: radial-gradient(700px 420px at 0% 0%, var(--mint-soft), transparent 70%), radial-gradient(700px 420px at 100% 100%, var(--sky-soft), transparent 70%); }
.guest .guest__wrap { width: 100%; max-width: 440px; margin: 0 auto; padding: 56px 16px 32px; }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-header h1 { margin: 0; }
.page-header__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--t-soft); color: var(--t-ink); border: 1px solid var(--t-line); flex: none; }
.page-icon .icon { width: 24px; height: 24px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-review { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grid-review { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Panel de inicio */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero__hello { margin: 0; font-size: clamp(1.45rem, 4vw, 2rem); }
.hero__date { margin: 0; color: var(--c-muted); font-weight: 600; }
.hero__date::first-letter { text-transform: uppercase; }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(46%, 170px), 1fr)); gap: 12px; margin-bottom: 20px; }
.quick {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px;
    border-radius: var(--radius); background: var(--t-soft); color: var(--t-ink); border: 1px solid var(--t-line);
    font-weight: 700; min-height: 104px; position: relative; overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quick:hover { text-decoration: none; }
.quick__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--c-surface); color: var(--t-ink); box-shadow: var(--shadow-sm); }
.quick__icon .icon { width: 22px; height: 22px; }
.quick__hint { font-weight: 500; font-size: .82rem; opacity: .85; margin-top: -6px; }
@media (max-width: 559px) {
    .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .quick { align-items: center; text-align: center; gap: 8px; padding: 12px 6px; min-height: 0; font-size: .84rem; line-height: 1.25; }
    .quick__hint { display: none; }
}

.dash-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; }
@media (min-width: 760px) {
    .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .widget--wide { grid-column: 1 / -1; }
}
@media (min-width: 1400px) {
    .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .widget--wide { grid-column: span 2; }
}

/* 4. Componentes ---------------------------------------------------------- */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.main > .card, .main > section { margin-bottom: 16px; }
.card--narrow { max-width: 440px; margin: 0 auto; }
.card--danger { border-color: var(--coral-line); background: linear-gradient(var(--c-surface), var(--c-surface)) padding-box; }
.card--danger .card__title { color: var(--coral-ink); }
.card__title { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; margin-bottom: 12px; }
.card__title > .icon { color: var(--t-ink, var(--c-muted)); }
.card__subtitle { font-size: .95rem; margin: 22px 0 10px; color: var(--c-muted); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.card__header .card__title { margin: 0; }
.card__footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--t-soft); color: var(--t-ink); border: 1px solid var(--t-line); flex: none; }
.card-icon .icon { width: 19px; height: 19px; }

.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--t-ink, var(--sky-ink)); border-radius: 8px; padding: 6px 0; }
.link-more .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur) var(--ease); }

/* Botones: base neutra + variantes por acción. Pastel por defecto; .btn-solid (o .btn-primary) = acción principal. */
:where(.btn) { --t-soft: var(--c-surface); --t-line: var(--c-border); --t-ink: var(--c-text); --t-strong: var(--c-text); }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); padding: 10px 18px;
    border-radius: 14px; border: 1px solid var(--t-line);
    background: var(--t-soft); color: var(--t-ink);
    font: inherit; font-weight: 650; line-height: 1.2; cursor: pointer; text-decoration: none;
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .12s var(--ease), filter var(--dur);
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-create, .btn-primary { --t-soft: var(--mint-soft);  --t-line: var(--mint-line);  --t-ink: var(--mint-ink);  --t-strong: var(--mint-strong); }
.btn-view, .btn-secondary { --t-soft: var(--sky-soft);   --t-line: var(--sky-line);   --t-ink: var(--sky-ink);   --t-strong: var(--sky-strong); }
.btn-pay                  { --t-soft: var(--aqua-soft);  --t-line: var(--aqua-line);  --t-ink: var(--aqua-ink);  --t-strong: var(--aqua-strong); }
.btn-shop                 { --t-soft: var(--sage-soft);  --t-line: var(--sage-line);  --t-ink: var(--sage-ink);  --t-strong: var(--sage-strong); }
.btn-edit                 { --t-soft: var(--lav-soft);   --t-line: var(--lav-line);   --t-ink: var(--lav-ink);   --t-strong: var(--lav-strong); }
.btn-danger               { --t-soft: var(--coral-soft); --t-line: var(--coral-line); --t-ink: var(--coral-ink); --t-strong: var(--coral-strong); }
.btn-solid, .btn-primary { background: var(--t-strong); color: var(--on-strong); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--t-strong) 28%, transparent); }
.btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.btn-danger-text { color: var(--coral-ink); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .875rem; border-radius: 11px; }
.btn-lg { min-height: 56px; padding: 14px 22px; font-size: 1.05rem; border-radius: 18px; }
.btn-block { width: 100%; }
.btn-start { justify-content: flex-start; }
.btn-icon { padding: 0; width: var(--tap); }
.btn-icon.btn-sm { width: 36px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--sky-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-group form { margin: 0; }
.btn-group--center { justify-content: center; }

/* Fila de acción grande dentro de hojas inferiores */
.action-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px;
    border-radius: 18px; border: 1px solid var(--t-line); background: var(--t-soft); color: var(--t-ink);
    font: inherit; font-weight: 700; text-align: left; cursor: pointer;
    transition: transform .12s var(--ease), filter var(--dur);
}
.action-row:hover { text-decoration: none; }
.action-row__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-surface); flex: none; }
.action-row__icon .icon { width: 22px; height: 22px; }
.action-row__text { display: flex; flex-direction: column; min-width: 0; }
.action-row__hint { font-weight: 500; font-size: .84rem; opacity: .85; }
.action-row--plain { --t-soft: transparent; --t-line: transparent; --t-ink: var(--c-text); }
.action-row--plain .action-row__icon { background: var(--c-surface-2); }

.form { display: flex; flex-direction: column; gap: 14px; }
.form-inline { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
.form-inline .form-group { flex: 1; min-width: 160px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.form-group label { font-weight: 650; font-size: .9rem; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
    width: 100%; min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--c-border-strong); border-radius: 12px;
    background: var(--c-surface); color: var(--c-text); font: inherit; min-width: 0;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sky-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky-strong) 22%, transparent); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--mint-strong); }
.field-error { color: var(--coral-ink); font-size: .85rem; margin: 0; }
.input-money, .input-pct, .input-qty { text-align: right; font-variant-numeric: tabular-nums; }
.input-pct { width: 96px !important; display: inline-block; }
.input-lg { font-size: 1.3rem; }
.input-code { text-transform: uppercase; letter-spacing: .15em; font-family: var(--mono); }

.alert { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 14px; margin-bottom: 16px; border: 1px solid transparent; animation: rise .3s var(--ease); }
.alert-success { background: var(--mint-soft); color: var(--mint-ink); border-color: var(--mint-line); }
.alert-error { background: var(--coral-soft); color: var(--coral-ink); border-color: var(--coral-line); }
.alert-warning { background: var(--sun-soft); color: var(--sun-ink); border-color: var(--sun-line); }
.alert-info { background: var(--sky-soft); color: var(--sky-ink); border-color: var(--sky-line); }
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.alert__close { background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: inherit; min-width: 32px; min-height: 32px; border-radius: 8px; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 650; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); vertical-align: middle; }
.badge-success { background: var(--mint-soft); color: var(--mint-ink); border-color: var(--mint-line); }
.badge-warning { background: var(--sun-soft); color: var(--sun-ink); border-color: var(--sun-line); }

.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 11px 8px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; }
.table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); font-weight: 700; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot th { font-size: .95rem; text-transform: none; color: var(--c-text); }
.table-hover tbody tr[data-href] { cursor: pointer; }
.table-hover tbody tr { transition: background var(--dur) var(--ease); }
.table tr.is-me td { font-weight: 700; }
.table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--sky-strong); }
.table tr.is-personal td { color: var(--c-muted); }

/* Paneles de estadísticas */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-bottom: 16px; }
.stats--compact { margin: 4px 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 10px; }
.stat { background: var(--t-soft, var(--c-surface)); border: 1px solid var(--t-line, var(--c-border)); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stats--compact .stat { padding: 12px 14px; }
.stat__label { color: var(--t-ink, var(--c-muted)); font-size: .8rem; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.stat__label .icon { width: 1.05em; height: 1.05em; }
.stat__value { font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; color: var(--c-text); overflow-wrap: anywhere; }
.stat__hint { font-size: .78rem; color: var(--c-muted); }

.meter { display: grid; gap: 6px; margin: 4px 0 2px; }
.meter__track { height: 10px; border-radius: var(--radius-pill); background: var(--c-surface-2); overflow: hidden; border: 1px solid var(--c-border); }
.meter__fill { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--chart-2); transition: width .8s var(--ease); }
.meter__legend { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--c-muted); }

.list { list-style: none; margin: 0; padding: 0; }
.list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.list__item:last-child { border-bottom: 0; }
.list__item form { margin: 0; }
.plain-list { margin: 0; padding-left: 18px; }

.empty { text-align: center; padding: 32px 16px; }
.empty__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--t-soft, var(--c-surface-2)); color: var(--t-ink, var(--c-muted)); margin-bottom: 10px; }
.empty__icon .icon { width: 30px; height: 30px; }
.progress { height: 8px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--mint-strong); transition: width .2s; }

.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; }
.details dt { color: var(--c-muted); font-size: .8rem; }
.details dd { margin: 0; }
.summary { display: grid; gap: 4px; margin: 12px 0 0; }
.summary div { display: flex; justify-content: space-between; }
.summary dt { color: var(--c-muted); }
.summary dd { margin: 0; font-variant-numeric: tabular-nums; }

.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); max-width: 100%; overflow-x: auto; }
.segmented__btn { border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 650; color: var(--c-muted); padding: 6px 12px; min-height: 34px; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.segmented__btn[aria-selected="true"] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-sm); }

/* 5. Gráficos (assets/js/charts.js pinta SVG dentro de [data-chart]) ------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart__tick { fill: var(--c-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart__tick.is-strong { fill: var(--c-text); font-weight: 700; }
.chart__label { fill: var(--c-text); font-size: 12.5px; }
.chart__value { fill: var(--c-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart__value.is-strong { fill: var(--c-text); }
.chart__mark { fill: var(--chart-1); transition: opacity var(--dur) var(--ease), fill var(--dur) var(--ease); }
.chart__mark--dim { fill: var(--chart-1-dim); }
.chart__mark--s2 { fill: var(--chart-2); }
.chart__hit { fill: transparent; cursor: pointer; }
.chart__hit:focus { outline: none; }
.chart__hit:focus-visible { stroke: var(--c-focus); stroke-width: 2; rx: 6; }
.chart.is-hovering .chart__mark:not(.is-hot) { opacity: .45; }
.chart .grow { transform-box: fill-box; transform-origin: 0 100%; animation: grow-y .7s var(--ease) both; }
.chart .grow-x { transform-box: fill-box; transform-origin: 0 0; animation: grow-x .7s var(--ease) both; }
.chart__tooltip {
    position: absolute; z-index: 5; pointer-events: none; min-width: 120px; max-width: 240px;
    padding: 8px 12px; border-radius: 12px; background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-border); box-shadow: var(--shadow-lg); font-size: .85rem;
    opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(.96); transition: opacity .15s, transform .15s var(--ease);
}
.chart__tooltip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) scale(1); }
.chart__tooltip strong { display: block; font-size: .98rem; font-variant-numeric: tabular-nums; }
.chart__tooltip-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .84rem; color: var(--c-muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--chart-1); flex: none; }
.swatch--s2 { background: var(--chart-2); }
.chart-table { margin-top: 10px; font-size: .9rem; }
.chart-table summary { cursor: pointer; color: var(--c-muted); font-size: .84rem; font-weight: 600; padding: 6px 0; width: max-content; }
.chart-panel[hidden] { display: none; }
.chart-empty { display: grid; place-items: center; min-height: 160px; color: var(--c-muted); text-align: center; }

/* 6. Módulos --------------------------------------------------------------- */
.month-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.month-nav strong { min-width: 150px; text-align: center; font-size: 1.05rem; }
.month-nav .btn { width: var(--tap); padding: 0; }

.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--mint-line); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; min-height: 190px; background: var(--mint-soft); color: var(--mint-ink); transition: border-color var(--dur), background var(--dur); }
.dropzone:hover, .dropzone.is-over { border-color: var(--mint-strong); }
.dropzone input[type=file] { max-width: 100%; }
.dropzone img { max-height: 320px; border-radius: var(--radius-sm); }

.receipt-preview img { width: 100%; border-radius: var(--radius-sm); }
.raw-text { max-height: 260px; overflow: auto; font-size: .75rem; background: var(--c-surface-2); padding: 8px; border-radius: var(--radius-sm); }

.items-table input { padding: 6px 8px; min-height: 40px; }
.items-table .col-qty { width: 72px; }
.items-table .col-money { width: 104px; }
.items-table .col-check { width: 64px; text-align: center; }
.items-table .col-remove { width: 48px; }
.items-table td { padding: 4px; }
@media (max-width: 640px) {
    .items-table thead { display: none; }
    .items-table tr { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--c-border); }
    .items-table td { border: 0; padding: 0; }
    .items-table td:first-child { grid-column: 1 / -1; }
}

.invite-code { font-family: var(--mono); font-size: 1.8rem; letter-spacing: .2em; font-weight: 700; text-align: center; padding: 14px; background: var(--lav-soft); color: var(--lav-ink); border: 1px dashed var(--lav-line); border-radius: var(--radius); cursor: copy; user-select: all; }

.transfers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.transfer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); }
.transfer.is-me { background: var(--aqua-soft); border-color: var(--aqua-line); }
.transfer__amount { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.transfer__actions { display: flex; align-items: center; gap: 10px; }
.transfer__actions form { margin: 0; }
.payment-form { margin-top: 12px; }
.payment-form summary { cursor: pointer; color: var(--aqua-ink); font-weight: 650; font-size: .92rem; margin-bottom: 8px; min-height: 36px; display: flex; align-items: center; }

.bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; gap: 8px; align-items: center; font-size: .9rem; }
.bars__track { height: 8px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.bars__fill { display: block; height: 100%; background: var(--chart-1); }
.bars__value { font-variant-numeric: tabular-nums; white-space: nowrap; }

.balance-hero { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--t-soft); border: 1px solid var(--t-line); color: var(--t-ink); margin-bottom: 14px; }
.balance-hero__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--c-surface); flex: none; }
.balance-hero__icon .icon { width: 24px; height: 24px; }
.balance-hero__label { font-size: .85rem; font-weight: 650; }
.balance-hero__amount { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--c-text); }

.member-avatars { display: flex; padding-left: 8px; margin: 6px 0 12px; }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: .85rem; font-weight: 750; background: var(--t-soft); color: var(--t-ink); border: 2px solid var(--c-surface); margin-left: -8px; }

.error-page { text-align: center; max-width: 640px; margin: 0 auto; }
.error-page__code { font-size: 3.2rem; font-weight: 800; color: var(--sky-strong); margin: 0; }
.error-page__trace { text-align: left; font-size: .75rem; max-height: 50vh; overflow: auto; background: var(--c-surface-2); padding: 12px; border-radius: var(--radius-sm); }

/* Lista de la compra */
.shopping-add { display: flex; gap: 8px; align-items: flex-start; }
.shopping-add textarea { flex: 1; min-height: var(--tap); resize: vertical; }
.shopping-add--widget { margin: 12px 0; align-items: center; }
.shopping-add--widget input { flex: 1; }
.shopping-item { justify-content: flex-start; padding: 8px 0; }
.shopping-item__check {
    flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
    border-radius: 50%; border: 2px solid var(--sage-line); background: var(--c-surface); color: var(--on-strong);
    font-weight: 700; line-height: 1; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .2s var(--ease-spring);
}
.shopping-item__check .icon { width: 22px; height: 22px; stroke-width: 2.6; opacity: 0; }
.shopping-item.is-checked .shopping-item__check .icon { opacity: 1; }
.shopping-item.is-checked .shopping-item__check { background: var(--sage-strong); border-color: var(--sage-strong); animation: pop .35s var(--ease-spring); }
.shopping-item__body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.shopping-item__name { font-weight: 650; overflow-wrap: anywhere; }
.shopping-item__meta { flex-basis: 100%; }
.shopping-item.is-checked .shopping-item__name { text-decoration: line-through; color: var(--c-muted); font-weight: 400; }
.shopping-widget-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.shopping-widget-list li { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--sage-soft); color: var(--sage-ink); border: 1px solid var(--sage-line); font-weight: 600; font-size: .9rem; }

/* Budgets (presupuestos) — barras de límite y gráfico SVG del servidor (.bchart, sin JS; no confundir con .chart de charts.js) */
.budget-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.budget-item { padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.budget-item:last-child { border-bottom: 0; padding-bottom: 0; }
.budget-item--total .budget__label { font-size: 1.05rem; }
.budget { --budget-fill: var(--mint-strong); --budget-ink: var(--mint-ink); display: flex; flex-direction: column; gap: 6px; }
.budget--warning { --budget-fill: var(--sun-strong); --budget-ink: var(--sun-ink); }
.budget--over { --budget-fill: var(--coral-strong); --budget-ink: var(--coral-ink); }
.budget__head, .budget__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.budget__amounts { font-variant-numeric: tabular-nums; }
.budget__track { height: 10px; border-radius: var(--radius-pill); background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.budget__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--budget-fill); }
.budget__status { color: var(--budget-ink); font-weight: 650; }
.budget-edit { margin-top: 8px; }
.budget-edit summary { cursor: pointer; color: var(--lav-ink); font-weight: 650; font-size: .88rem; width: max-content; }
.budget-edit__forms { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.budget-edit__forms form { margin: 0; }
.budget-edit__form { display: flex; gap: 8px; align-items: center; }
.budget-edit__form input { width: 130px; }
.bchart { margin: 0; color: var(--c-text); }
.bchart__svg { display: block; width: 100%; height: auto; max-height: 440px; overflow: visible; }
.bchart__grid line { stroke: var(--chart-grid); stroke-width: 1; }
.bchart__baseline { stroke: var(--chart-axis); stroke-width: 1.5; }
.bchart__axis { fill: currentColor; fill-opacity: .7; font-size: 11px; font-variant-numeric: tabular-nums; }
.bchart__year { font-size: 10px; fill-opacity: .5; }
.bchart__value { fill: currentColor; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bchart__limit line { stroke: var(--coral-strong); stroke-width: 1.5; stroke-dasharray: 6 4; }
.bchart__limit text { fill: var(--coral-ink); font-size: 11px; font-weight: 650; }
.bchart__s1 { fill: var(--chart-1); background: var(--chart-1); }
.bchart__s2 { fill: var(--chart-2); background: var(--chart-2); }  /* 3-5: tonos fuertes (la paleta --chart-* solo trae 2 tonos) */
.bchart__s3 { fill: var(--sun-strong); background: var(--sun-strong); }
.bchart__s4 { fill: var(--lav-strong); background: var(--lav-strong); }
.bchart__s5 { fill: var(--coral-strong); background: var(--coral-strong); }
.bchart__other { fill: var(--c-muted); background: var(--c-muted); }
.bchart rect { stroke: var(--c-surface); stroke-width: 1; }
.bchart figcaption .legend { margin: 12px 0 0; }
@media (hover: hover) and (pointer: fine) { .bchart__col:hover rect { opacity: .8; } }
@media (forced-colors: active) { .bchart rect { fill: CanvasText; stroke: Canvas; } .budget__fill { background: CanvasText; } }

/* Tasks (tareas) — tablero, widget de inicio y formulario de turnos */
.task-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.task-item { justify-content: flex-start; padding: 8px 0; }
.task-item__check {
    flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
    border-radius: 50%; border: 2px solid var(--lav-line); background: var(--c-surface); color: var(--on-strong);
    font-weight: 700; line-height: 1; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
button.task-item__check:hover { border-color: var(--mint-strong); background: var(--mint-soft); }
.task-item.is-done .task-item__check { background: var(--mint-strong); border-color: var(--mint-strong); cursor: default; }
.task-item__check .icon { width: 20px; height: 20px; }
.task-item.is-skipped .task-item__check { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-muted); }
.task-item__body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.task-item__title { font-weight: 650; overflow-wrap: anywhere; }
.task-item__meta, .task-item__notes { flex-basis: 100%; }
.task-item.is-done .task-item__title, .task-item.is-skipped .task-item__title { text-decoration: line-through; color: var(--c-muted); font-weight: 400; }
.task-item.is-overdue .task-item__check { border-color: var(--coral-line); }
.task-badge--overdue { background: var(--coral-soft); color: var(--coral-ink); border-color: var(--coral-line); }
.task-badge--today { background: var(--sun-soft); color: var(--sun-ink); border-color: var(--sun-line); }
.task-list--compact .task-item { padding: 6px 0; }
.task-def { flex-wrap: wrap; }
.task-def__body { flex: 1; min-width: 0; }
.task-def.is-paused .task-def__body strong { color: var(--c-muted); }
.task-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.task-choice { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.task-interval { display: flex; align-items: center; gap: 8px; }
.task-interval input { width: 96px; }
.task-mode-block { margin-top: 14px; }
.task-label { font-weight: 650; font-size: .9rem; }
.task-rotation { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.task-rotation__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.task-rotation__pos { display: inline-flex; align-items: center; gap: 6px; }
.task-rotation__pos input { width: 80px; }
.bars li.is-me { font-weight: 700; }

/* Expenses: reparto avanzado (selector "Para" de productos y bloque "¿Cómo se reparte?") */
.items-table .col-for { width: 140px; }
.items-table .col-for select { padding: 6px 8px; min-height: 40px; }
@media (max-width: 640px) {
    .items-table td.col-for { grid-column: 1 / 4; }
}
.split-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.split-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; }
.split-option input { margin-top: 4px; flex: none; }
.split-option:has(input:checked) { border-color: var(--t-line, var(--c-border)); background: var(--t-soft, var(--c-surface-2)); }
.split-panel { margin-top: 4px; }
.split-panel .list__item { padding: 8px 0; }
.split-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.split-amount { max-width: 140px; }
.split-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 7. Táctil / ratón ----------------------------------------------------------
   Puntero grueso (dedo): objetivos de 48px, sin efectos hover, feedback al pulsar.
   Puntero fino (ratón): hover con elevación sutil, densidad algo mayor. */
@media (pointer: coarse) {
    :root { --tap: 48px; }
    .btn-sm { min-height: 44px; padding: 8px 14px; }
    .btn-icon.btn-sm { width: 44px; }
    .segmented__btn { min-height: 40px; padding: 8px 14px; }
    input, select, textarea { font-size: 16px; } /* evita el zoom automático de iOS */
    .btn:active, .quick:active, .action-row:active, .fab:active, .side-link:active, .tabbar__link:active .tabbar__icon, .shopping-item__check:active { transform: scale(.96); }
    .table-hover tbody tr:active { background: var(--c-surface-2); }
    .alert__close { min-width: 44px; min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled) { filter: brightness(.97); box-shadow: var(--shadow-sm); }
    .btn-solid:hover:not(:disabled), .btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 6px 18px color-mix(in srgb, var(--t-strong) 34%, transparent); transform: translateY(-1px); }
    .btn-ghost:hover { background: var(--c-surface-2); }
    .btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
    .quick:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .quick:hover .quick__icon { transform: rotate(-6deg) scale(1.06); }
    .quick__icon { transition: transform var(--dur) var(--ease-spring); }
    .action-row:hover { filter: brightness(.97); }
    .side-link:not(.is-active):hover { background: var(--c-surface-2); }
    .side-link:hover .side-link__icon { transform: scale(1.06); }
    .side-link__icon { transition: transform var(--dur) var(--ease-spring); }
    .link-more:hover .icon { transform: translateX(3px); }
    .table-hover tbody tr:hover { background: var(--c-surface-2); }
    .card--hover { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
    .card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .shopping-item__check:hover { border-color: var(--sage-strong); background: var(--sage-soft); }
    .shopping-item.is-checked .shopping-item__check:hover { background: var(--sage-strong); }
    .fab:hover { transform: translateY(-2px) rotate(90deg); }
    .icon-btn:hover { background: var(--c-surface-2); }
}

/* 8. Movimiento ----------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.main > * { animation: rise .42s var(--ease) both; }
.main > *:nth-child(2) { animation-delay: .04s; }
.main > *:nth-child(3) { animation-delay: .08s; }
.main > *:nth-child(4) { animation-delay: .12s; }
.main > *:nth-child(n+5) { animation-delay: .16s; }
.dash-grid > * { animation: rise .45s var(--ease) both; }
.dash-grid > *:nth-child(2) { animation-delay: .06s; }
.dash-grid > *:nth-child(3) { animation-delay: .12s; }
.dash-grid > *:nth-child(n+4) { animation-delay: .18s; }
.is-leaving { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 9. Utilidades ------------------------------------------------------------ */
.muted { color: var(--c-muted); }
.small { font-size: .85rem; }
.strong { font-weight: 700; }
.text-right { text-align: right !important; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.positive { color: var(--mint-ink); }
.negative { color: var(--coral-ink); }
.notes { white-space: normal; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--c-border); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-0 { margin-top: 0; }
[hidden] { display: none !important; }
@media (max-width: 640px) { .hide-sm { display: none; } }
@media (forced-colors: active) {
    .btn, .quick, .action-row, .stat, .chip, .badge { border: 1px solid CanvasText; }
    .chart__mark { fill: CanvasText; }
}
@media print {
    .topbar, .tabbar, .sidebar, .sheet, .btn, .fab { display: none !important; }
    body { background: #fff; display: block !important; }
    .card { box-shadow: none; }
}