/* ============================================================================
 * ANBU · anbu.css — hoja única drop-in para Flask (servir estática).
 * Sistema de diseño nuevo: TOKENS + COMPONENTES por concepto. Modo claro único.
 * Sin pipeline de build. Editable a mano. Generado desde el design system ANBU.
 *
 * Orden: fonts · colors · typography · spacing · effects · componentes.
 * Reemplaza app.css (por fases) + phase02_5*.css. Ver MIGRATION.md.
 * ============================================================================ */


/* ====== tokens/fonts.css ====== */
/* ANBU — Webfonts.
   DM Sans (Google Fonts) is the single typeface in use across the app.
   Loaded from Google Fonts; no self-hosted binaries. Keep the weight set small
   (400/500/700 + 400 italic) to honour the "carga ligera" constraint. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap");


/* ====== tokens/colors.css ====== */
/* ANBU — Colour tokens. Light mode only. NEW SYSTEM (rediseño 2026).
   Model: a NEUTRAL base UI + ONE per-module accent that tints only the active/CTA
   surfaces. Amber is the global brand/Home accent. No gradients, no decorative colour. */
:root {
  /* ---- Neutral base (cool, near-white) ---- */
  --bg:            #f8f9fb;  /* app background (flat, no wash) */
  --surface:       #ffffff;  /* cards / sheets */
  --surface-2:     #f3f4f7;  /* secondary surface, inset fields */
  --surface-3:     #eceff3;  /* tracks / sunken wells */
  --border:        #e6e8ec;  /* hairline */
  --border-strong: #d4d8df;  /* input / emphasised edge */

  --ink:           #16181f;  /* primary text */
  --ink-2:         #5b6473;  /* secondary text */
  --ink-3:         #949bab;  /* tertiary / placeholder */

  /* ---- Brand (amber) — marca / Home / global accent ---- */
  --brand:         #d97706;
  --brand-2:       #b45309;
  --brand-soft:    #fdecd6;

  /* ---- Per-module accent palettes (1 = default, 2 = deep, soft = tint, ink = on-soft) ---- */
  --m-nutricion:   #2563eb; --m-nutricion-2: #1d4ed8; --m-nutricion-soft: #dde6fb; --m-nutricion-ink: #1e40af; /* azul */
  --m-entreno:     #ca8a04; --m-entreno-2:   #a16207; --m-entreno-soft:   #fbeec0; --m-entreno-ink:   #854d0e; /* amarillo/oro */
  --m-checklists:  #ea580c; --m-checklists-2:#c2410c; --m-checklists-soft:#fde4d1; --m-checklists-ink:#9a3412; /* naranja */
  --m-red:         #059669; --m-red-2:       #047857; --m-red-soft:       #d6f3e6; --m-red-ink:       #045c43; /* verde */
  --m-scripts:     #dc2626; --m-scripts-2:   #b91c1c; --m-scripts-soft:   #fbdcdc; --m-scripts-ink:   #991b1b; /* rojo */
  --m-todo:        #4f46e5; --m-todo-2:      #4338ca; --m-todo-soft:      #e2e0fb; --m-todo-ink:      #3730a3; /* índigo */

  /* Alias nombrados por el brief del módulo To Do (equivalen a --m-todo / --m-todo-2) */
  --accent-todo:      var(--m-todo);
  --accent-todo-deep: var(--m-todo-2);

  /* ---- Active accent (set per module via the .mod-* scopes below) ----
     Components reference var(--accent*) so the SAME markup re-tints per module.
     Default = brand amber (Home / neutral context). */
  --accent:      var(--brand);
  --accent-2:    var(--brand-2);
  --accent-soft: var(--brand-soft);
  --accent-ink:  var(--m-entreno-ink);
  --on-accent:   #ffffff;

  /* ---- Semantic ---- */
  --ok:      #059669; --ok-soft:     #d6f3e6;
  --danger:  #dc2626; --danger-soft: #fde4e4;
  --warn:    #d97706; --warn-soft:   #fdecd6;
  --info:    #2563eb; --info-soft:   #dde6fb;

  /* ---- Adherence (nutrición) ---- */
  --adh-verde:    #059669;
  --adh-amarillo: #d97706;
  --adh-rojo:     #dc2626;

  /* ---- Legacy aliases (kept so foundation cards / v1 components keep resolving) ---- */
  --energy: var(--brand); --gold: var(--brand-2);
  --text-1: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
  --text-on-accent: var(--on-accent);
  --surface-card: var(--surface); --surface-app: var(--bg);
  --surface-alt: var(--surface-2); --surface-sunken: var(--surface-3);
  --ink-muted: var(--ink-2); --ink-dim: var(--ink-3);
  --accent-1: var(--accent);
  --amber-50:#fff7ed; --amber-100:#fdecd6; --amber-200:#fad9ad; --amber-300:#f6bd6f;
  --amber-500:#d97706; --amber-600:#b45309; --amber-700:#92400e;
  --violet:#7c3aed; --success:var(--ok); --success-soft:var(--ok-soft);
  --warning:var(--warn); --warning-soft:var(--warn-soft); --info-soft:var(--info-soft);
  --mod-training-1:var(--m-entreno); --mod-training-2:var(--m-entreno-2);
  --mod-nutrition-1:var(--m-nutricion); --mod-nutrition-2:var(--m-nutricion-2);
  --mod-checklist-1:var(--m-checklists); --mod-checklist-2:var(--m-checklists-2);
  --mod-network-1:var(--m-red); --mod-network-2:var(--m-red-2);
  --mod-scripts-1:var(--m-scripts); --mod-scripts-2:var(--m-scripts-2);
  --mod-generic-1:#7c3aed; --mod-generic-2:#6d28d9;
  --link: var(--brand-2); --warning-soft:var(--warn-soft);
  --grad-energy: var(--brand); /* @kind color */
  --app-wash: transparent;     /* @kind color */
}

/* ---- Module accent scopes ----
   Put one of these on the module's root element (e.g. <body class="mod-nutricion">
   or a wrapper). Every var(--accent*) inside re-tints automatically. */
.mod-nutricion  { --accent: var(--m-nutricion);  --accent-2: var(--m-nutricion-2);  --accent-soft: var(--m-nutricion-soft);  --accent-ink: var(--m-nutricion-ink); }
.mod-entreno    { --accent: var(--m-entreno);    --accent-2: var(--m-entreno-2);    --accent-soft: var(--m-entreno-soft);    --accent-ink: var(--m-entreno-ink); }
.mod-checklists { --accent: var(--m-checklists); --accent-2: var(--m-checklists-2); --accent-soft: var(--m-checklists-soft); --accent-ink: var(--m-checklists-ink); }
.mod-red        { --accent: var(--m-red);        --accent-2: var(--m-red-2);        --accent-soft: var(--m-red-soft);        --accent-ink: var(--m-red-ink); }
.mod-scripts    { --accent: var(--m-scripts);    --accent-2: var(--m-scripts-2);    --accent-soft: var(--m-scripts-soft);    --accent-ink: var(--m-scripts-ink); }
.mod-todo       { --accent: var(--m-todo);       --accent-2: var(--m-todo-2);       --accent-soft: var(--m-todo-soft);       --accent-ink: var(--m-todo-ink); }
.mod-mas        { --accent: var(--brand);        --accent-2: var(--brand-2);        --accent-soft: var(--brand-soft);        --accent-ink: var(--m-entreno-ink); }
.mod-home       { --accent: var(--brand);        --accent-2: var(--brand-2);        --accent-soft: var(--brand-soft);        --accent-ink: var(--m-entreno-ink); }


/* ====== tokens/typography.css ====== */
/* ANBU — Typography tokens. NEW SYSTEM.
   DM Sans only + a mono stack for figures/codes. Hierarchy from SIZE + COLOUR.
   Weight is used sparingly — titles sit at 600, not 700; 700 is reserved for big
   figures. Mobile-tuned scale (denser h1 than v1). */
:root {
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — four, used with restraint */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */

  /* Type scale (rem, mobile-first) */
  --fs-eyebrow: .6875rem; /* 11 — uppercase kicker / micro-label */
  --fs-12: .75rem;        /* 12 — meta, captions */
  --fs-13: .8125rem;      /* 13 — dense secondary */
  --fs-14: .875rem;       /* 14 — labels, secondary body */
  --fs-15: .9375rem;      /* 15 — body */
  --fs-16: 1rem;          /* 16 — emphasised body / inputs */
  --fs-18: 1.125rem;      /* 18 — card title */
  --fs-20: 1.25rem;       /* 20 — section / screen title */
  --fs-24: 1.5rem;        /* 24 — page h1 (mobile) */
  --fs-28: 1.75rem;       /* 28 — KPI figure */
  --fs-34: 2.125rem;      /* 34 — hero KPI figure */

  /* Line heights */
  --lh-tight: 1.15; /* @kind other */
  --lh-snug:  1.3; /* @kind other */
  --lh-normal:1.5; /* @kind other */

  /* Tracking — minimal */
  --track-title:   -.01em;
  --track-tight:   -.005em;
  --track-eyebrow: .06em;
  --track-num:     .01em;

  /* ---- Legacy aliases (v1 components/cards) ---- */
  --text-eyebrow: var(--fs-eyebrow);
  --text-xs: var(--fs-12); --text-sm: var(--fs-14); --text-base: var(--fs-15);
  --text-md: var(--fs-16); --text-lg: var(--fs-18); --text-xl: var(--fs-20);
  --text-2xl: var(--fs-24); --text-3xl: var(--fs-28); --text-stat: var(--fs-34);
  --leading-tight: var(--lh-tight); --leading-snug: var(--lh-snug); --leading-normal: var(--lh-normal);
}


/* ====== tokens/spacing.css ====== */
/* ANBU — Spacing, radii & sizing tokens. NEW SYSTEM.
   One 4-based spacing scale. Radii canonised to 8/12/16/24. Touch targets ≥48px real. */
:root {
  /* Spacing scale (single source of truth) */
  --sp-1:  .25rem; /* 4 */
  --sp-2:  .5rem;  /* 8 */
  --sp-3:  .75rem; /* 12 */
  --sp-4:  1rem;   /* 16 */
  --sp-6:  1.5rem; /* 24 */
  --sp-8:  2rem;   /* 32 */
  --sp-12: 3rem;   /* 48 — major section breaks */

  /* Radii — canonised 8 / 12 / 16 / 24 */
  --r-sm:   .5rem;  /* 8  — chips, inputs, small controls */
  --r-md:   .75rem; /* 12 — buttons, list items */
  --r-lg:   1rem;   /* 16 — cards */
  --r-xl:   1.5rem; /* 24 — sheets / modal */
  --r-pill: 999px;

  /* Control & touch sizing (≥48px real targets) */
  --control-h:    3rem;    /* 48 — inputs, buttons */
  --control-h-sm: 2.25rem; /* 36 — compact chips */
  --row-h:        3.5rem;  /* 56 — interactive list rows */
  --tap:          3rem;    /* 48 — minimum hit target */

  /* Layout */
  --shell-max: 760px;
  --tabbar-h:  3.5rem;     /* 56 — bottom tab bar (+ safe area) */
  --topbar-h:  3rem;       /* 48 */
  --gutter:    var(--sp-4);

  /* Safe areas */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Legacy aliases (v1) ---- */
  --space-0:0; --space-1:var(--sp-1); --space-2:var(--sp-2); --space-3:var(--sp-3);
  --space-4:var(--sp-4); --space-5:1.25rem; --space-6:var(--sp-6); --space-8:var(--sp-8);
  --space-10:2.5rem; --space-12:var(--sp-12);
  --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg);
  --radius-xl:var(--r-xl); --radius-pill:var(--r-pill);
  --tap-min: var(--tap);
}


/* ====== tokens/effects.css ====== */
/* ANBU — Effects: shadows, borders, focus, z-index, motion. NEW SYSTEM.
   Subtle elevation only — no dramatic shadows, no coloured glows, no gradients. */
:root {
  /* Elevation — three subtle steps over a near-white app */
  --shadow-1: 0 1px 2px rgba(16,18,27,.06);                          /* resting lift (cards) */
  --shadow-2: 0 2px 8px rgba(16,18,27,.08);                          /* raised (sticky, menus, tab bar) */
  --shadow-3: 0 8px 24px rgba(16,18,27,.14);                         /* overlay / modal only */

  /* Borders */
  --hairline: 1px solid var(--border);
  --edge:     1px solid var(--border-strong);

  /* Focus — accent-aware, AA visible */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);

  /* Overlay (confirm modal / scanner) */
  --overlay-bg:   rgba(16,18,27,.5);
  --overlay-blur: blur(6px); /* @kind other */

  /* Z-index scale */
  --z-base:    0;  /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-nav:     200; /* @kind other */
  --z-overlay: 900; /* @kind other */
  --z-modal:   1000; /* @kind other */
  --z-toast:   1100; /* @kind other */

  /* Motion — restrained, micro-feedback only */
  --ease:   cubic-bezier(.2, .7, .3, 1); /* @kind other */
  --dur-1:  120ms; /* @kind other */
  --dur-2:  180ms; /* @kind other */
  --dur-3:  240ms; /* @kind other */

  /* ---- Legacy aliases (v1) ---- */
  --shadow-xs: var(--shadow-1); --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-2); --shadow-pop: var(--shadow-3);
  --shadow-amber: var(--shadow-2); --shadow-amber-sm: var(--shadow-1);
  --border-1: var(--hairline); --border-2: var(--edge);
  --dur-fast: var(--dur-1); --dur: var(--dur-2); --dur-slow: var(--dur-3);
}


/* ====== ui_kits/anbu/app.css ====== */
/* ============================================================================
   ANBU · app.css (NEW SYSTEM) — organised by component, not by phase.
   Plain hand-written CSS. Tokens come from the design-system styles.css.
   This file grows screen by screen and becomes the Flask drop-in (PASO 11).
   ============================================================================ */

/* ---- Reset (minimal) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; }
a { color: inherit; }

/* ============================================================================
   Screen shell
   ============================================================================ */
.screen {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.screen__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
/* When a bottom tab bar is present, reserve its height + safe area */
.screen--tabbed .screen__body { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4)); }
/* To Do: un poco más de holgura inferior para que agendas largas dejen ver bien
   las últimas filas por encima de la tabbar fija (sin tocar el shell estándar). */
.screen.mod-todo .screen__body { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-6)); }

/* ============================================================================
   Topbar
   ============================================================================ */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  height: var(--topbar-h);
  padding-top: var(--safe-top);
  padding-left: var(--sp-4); padding-right: var(--sp-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar__left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar__logo { display: flex; align-items: center; gap: var(--sp-2); background: none; border: none; padding: var(--sp-1) 0; cursor: pointer; text-decoration: none; }
.topbar__logo img { width: 26px; height: 26px; display: block; }
.topbar__word { font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--track-title); color: var(--ink); }
.topbar__sep { width: 1px; height: 18px; background: var(--border-strong); }
.topbar__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__actions { display: flex; gap: var(--sp-2); }

.ghost-btn {
  display: inline-flex; align-items: center; height: var(--control-h-sm);
  padding: 0 var(--sp-3); background: var(--surface-2); color: var(--ink-2);
  border: none; border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
  text-decoration: none;
}
.ghost-btn:hover { background: var(--surface-3); color: var(--ink); }

/* ============================================================================
   Bottom tab bar
   ============================================================================ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  display: flex; align-items: stretch;
  height: var(--tabbar-h); padding-bottom: var(--safe-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(16,18,27,.06);
}
.tabbar--static { position: static; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; cursor: pointer; text-decoration: none; min-width: 0; }
.tab__pill { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 26px; border-radius: var(--r-pill); color: var(--ink-3); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.tab__badge { position: absolute; top: -5px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tab__lbl { font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); color: var(--ink-3); letter-spacing: -.005em; }
.tab.is-active .tab__pill { background: var(--accent-soft); color: var(--accent); }
.tab.is-active .tab__lbl { color: var(--accent); font-weight: var(--fw-semibold); }
.tab--placeholder { opacity: .5; cursor: default; pointer-events: none; }
.tab--more:focus-visible, .more-item:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-md); }

/* ============================================================================
   Home dashboard
   ============================================================================ */
.home__head { padding: 0; }
.home__eyebrow { margin: 0; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--ink-3); }
.home__title { margin: 2px 0 0; font-size: var(--fs-20); font-weight: var(--fw-semibold); letter-spacing: var(--track-title); }

.home__grid { display: grid; gap: var(--sp-3); }
.home__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* KPI card (one per module). .mod-* sets --accent locally. */
.kpi {
  display: grid; gap: var(--sp-2); align-content: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: var(--sp-4); text-decoration: none; color: inherit;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.kpi:hover { border-color: var(--accent); }
.kpi:active { transform: translateY(1px); }
.kpi__head { display: flex; align-items: center; gap: var(--sp-2); }
.kpi__icon { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.kpi__icon svg { width: 18px; height: 18px; }
.kpi__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.kpi__chev { margin-left: auto; color: var(--ink-3); display: flex; }
.kpi__figure { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--track-title); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__figure small { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ink-3); letter-spacing: 0; }
.kpi__meta { font-size: var(--fs-12); color: var(--ink-2); }

.kpi--feature { gap: var(--sp-3); }
.kpi--feature .kpi__figure { font-size: var(--fs-34); }
.kpi--feature .kpi__macros { display: flex; gap: var(--sp-4); }
.kpi--feature .kpi__macros span { font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi--feature .kpi__macros strong { color: var(--ink); font-weight: var(--fw-semibold); }

/* Accesos compactos (Checklists, Scripts): icono + nombre, sin KPI. */
.home__mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mini {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: var(--sp-2) var(--sp-3); text-decoration: none; color: inherit;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.mini:hover { border-color: var(--accent); }
.mini:active { transform: translateY(1px); }
.mini__name { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink-2); }
.mini__badge { margin-left: auto; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--accent); background: var(--accent-soft); border-radius: var(--r-pill); padding: 1px var(--sp-2); font-variant-numeric: tabular-nums; }

/* Progress */
.progress { height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }

/* Status dot */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--danger { background: var(--danger); }

/* ============================================================================
   Internal module tabs (underline style — continuous baseline, accent active)
   ============================================================================ */
.itabs {
  display: flex; justify-content: flex-start; gap: var(--sp-6);
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-1) var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.itabs::-webkit-scrollbar { display: none; }
.itab {
  flex: 0 0 auto; padding: var(--sp-3) 2px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-2); font-size: var(--fs-14); font-weight: var(--fw-medium);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.itab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--fw-semibold); }

/* ============================================================================
   Nutrición · summary (legible at a glance)
   ============================================================================ */
.nut-summary {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: var(--sp-4); display: grid; gap: var(--sp-3);
}
.nut-summary__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.nut-kcal { font-size: var(--fs-34); font-weight: var(--fw-bold); letter-spacing: var(--track-title); line-height: 1; font-variant-numeric: tabular-nums; }
.nut-kcal small { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink-3); letter-spacing: 0; }
.nut-remain { text-align: right; }
.nut-remain b { display: block; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--accent); font-variant-numeric: tabular-nums; }
.nut-remain span { font-size: var(--fs-12); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
.nut-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.nut-macro { display: grid; gap: 5px; }
.nut-macro__lbl { display: flex; justify-content: space-between; font-size: var(--fs-12); }
.nut-macro__lbl b { font-weight: var(--fw-semibold); }
.nut-macro__lbl span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nut-macro__bar { height: 5px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.nut-macro__bar > i { display: block; height: 100%; border-radius: var(--r-pill); }
.bar-p > i { background: #2563eb; }
.bar-c > i { background: #d97706; }
.bar-g > i { background: #7c3aed; }
.agua-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.agua-total { min-width: 64px; font-size: var(--fs-16); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ============================================================================
   Nutrición · meals
   ============================================================================ */
.meal { }
.meal__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.meal__name { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.meal__head-right { display: flex; align-items: center; gap: var(--sp-2); }
.meal__kcal { font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meal__add { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); border: none; background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.meal__add:active { filter: brightness(.95); }
.meal__add:focus-visible { outline: none; box-shadow: var(--ring); }
.meal__plan { flex: none; height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--accent); background: none; color: var(--accent); font-family: var(--font-sans); font-size: var(--fs-12); font-weight: var(--fw-semibold); cursor: pointer; }
.meal__plan:active { background: var(--accent-soft); }
.meal__plan:focus-visible { outline: none; box-shadow: var(--ring); }
.diary-actions { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.diary-actions .btn { flex: 1; }
.meal__list { display: grid; gap: var(--sp-2); }

/* Food row — whole row is the target; tap opens a contextual sheet (no tiny icons) */
.food-row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer; width: 100%; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.food-row:active { background: var(--surface-2); }
.food-row__main { flex: 1; min-width: 0; }
.food-row__name { display: block; font-size: var(--fs-15); font-weight: var(--fw-medium); }
.food-row__sub { font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.food-row__kcal { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.food-row__grip { color: var(--ink-3); display: flex; }
.meal__empty { font-size: var(--fs-13); color: var(--ink-3); padding: var(--sp-2) var(--sp-3); }
.meal__add { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--accent); background: none; border: none; cursor: pointer; padding: 6px 0; }

/* ============================================================================
   Sticky thumb-zone action bar (sits above the tab bar)
   ============================================================================ */
.thumbbar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: var(--overlay-blur); -webkit-backdrop-filter: var(--overlay-blur);
  border-top: 1px solid var(--border);
}
.daynav { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; }
.daynav__btn { width: 38px; height: 38px; border: none; background: none; border-radius: var(--r-pill); font-size: var(--fs-18); color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.daynav__btn:active { background: var(--surface-3); }
.daynav__date { min-width: 78px; text-align: center; font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: 1.1; }
.daynav__date small { display: block; font-size: 10px; font-weight: var(--fw-medium); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.icon-btn {
  width: 48px; height: 48px; flex: none; border: 1px solid var(--border-strong);
  background: var(--surface); border-radius: var(--r-md); color: var(--ink-1, var(--ink));
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:active { background: var(--surface-2); }
.add-btn {
  flex: 1; height: 48px; border: none; border-radius: var(--r-md);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-15); font-weight: var(--fw-semibold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.add-btn:active { filter: brightness(.95); }

/* ============================================================================
   Bottom sheet (contextual edit / add) + scrim
   ============================================================================ */
.scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay-bg); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom));
  box-shadow: var(--shadow-3);
  transform: translateY(100%); transition: transform var(--dur-3) var(--ease);
  max-height: 80vh; overflow-y: auto;
}
.sheet.is-open { transform: translateY(0); }
/* Sheet a pantalla completa (añadir alimento): cabecera fija + cuerpo scroll +
   pie con el botón. La altura se ajusta por JS al viewport visible (visualViewport)
   para que el teclado no tape el pie. */
.sheet--add {
  top: 0; bottom: 0; max-height: none;
  border-radius: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
/* Bloqueo del scroll de fondo mientras hay un sheet abierto (el fondo
   difuminado no debe moverse). */
html.sheet-locked, html.sheet-locked body { overflow: hidden; height: 100%; }
/* El cuerpo del sheet es el único que desplaza; aísla su scroll del fondo. */
.sheet__body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet--add .sheet__head { flex: none; padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.sheet--add .sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-3); }
.sheet--add .sheet__foot { flex: none; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom)); border-top: 1px solid var(--border); background: var(--surface); margin: 0; border-radius: 0; }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--sp-3); }
.sheet__title { font-size: var(--fs-18); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1); }
.sheet__sub { font-size: var(--fs-13); color: var(--ink-2); margin: 0 0 var(--sp-3); }
.sheet__actions { display: grid; gap: var(--sp-2); }
.sheet-action { display: flex; align-items: center; gap: var(--sp-3); height: 52px; padding: 0 var(--sp-3); border: none; background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--ink); cursor: pointer; text-align: left; }
.sheet-action svg { width: 20px; height: 20px; color: var(--ink-2); }
.sheet-action.is-danger { color: var(--danger); }
.sheet-action.is-danger svg { color: var(--danger); }
/* Grid de módulos secundarios del slot "Más" (escala a N items sin rediseño) */
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.more-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-1); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.more-item__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.more-item__lbl { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ink-2); }

/* ============================================================================
   Módulo To Do (prefijo .todo-*)
   ============================================================================ */
/* Botón-engranaje compacto en la topbar (icono, altura de los demás ghost-btn) */
.ghost-btn--icon { padding: 0; width: var(--control-h-sm); justify-content: center; }
/* Segmented control de navegación bajo la topbar (Inbox | Día | Lista) */
.seg--nav { margin: 0 0 var(--sp-4); }
/* Placeholder estructural de las vistas (se sustituye en pasos posteriores) */
.todo-placeholder__eyebrow { margin: 0 0 2px; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--accent); }
.todo-placeholder__title { margin: 0 0 var(--sp-2); font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--ink); }
.todo-placeholder__text { margin: 0; font-size: var(--fs-14); color: var(--ink-2); line-height: var(--lh-snug); }
/* Configuración del módulo */
.mod-todo .panel + .panel { margin-top: var(--sp-4); }
.todo-config__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.todo-config__row--actions { align-items: center; margin-top: var(--sp-3); }
.todo-config__state { margin: 0 0 var(--sp-2); font-size: var(--fs-15); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: var(--sp-2); }
.todo-config__state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.todo-config__state--on { color: var(--ok); }
.todo-config__state--on::before { background: var(--ok); }
.todo-config__state--off { color: var(--ink-2); }
.todo-config__state--off::before { background: var(--ink-3); }
/* Captura rápida (Inbox) */
.todo-capture { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.todo-capture__input { flex: 1; }
/* Lista de tareas */
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.todo-item { display: flex; }
.todo-item__main { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); cursor: pointer; min-height: 52px; }
.todo-item__main:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.todo-item__title { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--ink); }
.todo-item__notes { font-size: var(--fs-13); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.todo-empty { margin: var(--sp-6) 0; text-align: center; font-size: var(--fs-14); color: var(--ink-2); }
/* Filtros de la Lista */
.todo-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.todo-filters .input { flex: 1 1 45%; min-width: 0; }
.todo-filters .btn { flex: 1 1 100%; }
/* Fila de Lista con acciones */
.todo-item--row .todo-item__main { border-radius: var(--r-md) 0 0 var(--r-md); border-right: none; }
.todo-item__title.is-done { text-decoration: line-through; color: var(--ink-3); }
.todo-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.todo-badge { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--accent); background: var(--accent-soft); border-radius: var(--r-pill); padding: 1px var(--sp-2); }
.todo-badge--due { color: var(--warn); background: var(--warn-soft); }
.todo-badge--dur { color: var(--ink-2); background: var(--surface-3); }
.todo-badge--state { color: var(--ink-2); background: var(--surface-3); }
.todo-row__actions { display: flex; }
.todo-row__actions form { display: flex; }
.todo-act { display: flex; align-items: center; justify-content: center; width: 44px;
  background: var(--surface); border: 1px solid var(--border); border-left: none; color: var(--ink-2); cursor: pointer; }
.todo-row__actions form:last-child .todo-act { border-radius: 0 var(--r-md) var(--r-md) 0; }
.todo-act:active { background: var(--surface-2); }
.todo-act:focus-visible { outline: none; box-shadow: var(--ring); }
/* Vista Día */
.todo-day__age { font-size: var(--fs-12); }
.todo-day__note { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-13); color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-md); }
.todo-timeline { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.todo-block { border-radius: var(--r-md); }
.todo-block__time { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--ink-2); flex: none; min-width: 92px; }
.todo-block__label { font-size: var(--fs-14); color: var(--ink); }
.todo-block--event { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface-3); border: 1px solid var(--border); color: var(--ink-2); }
.todo-block--event .todo-block__label { color: var(--ink-2); }
.todo-block__btn { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: var(--r-md); cursor: pointer; text-align: left; }
.todo-block--free .todo-block__time { color: var(--accent-ink); }
.todo-block--free .todo-block__label { color: var(--accent-ink); font-weight: var(--fw-medium); }
.todo-block__plus { margin-left: auto; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--accent); }
.todo-block__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.todo-block--task { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-md); }
.todo-block--task .todo-block__time { color: var(--accent-ink); }
.todo-block--task .todo-block__label { flex: 1; min-width: 0; color: var(--ink); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-block--task form { margin-left: auto; flex: none; }
.todo-block--task .todo-act { border: none; width: 36px; }
.todo-badge--rec { color: var(--ink-2); background: var(--surface-3); }
/* Oleada 3: agrupar, detalle, snackbar (swipe+deshacer) */
.todo-group { margin-bottom: var(--sp-4); }
.todo-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--ink-3); }
.todo-group__count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.todo-detalle__notas { min-height: 120px; resize: vertical; font-family: var(--font-sans); line-height: var(--lh-snug); }
.todo-detalle__check { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); color: var(--ink); }
.todo-detalle__check input { width: auto; flex: none; }
.todo-item--row { transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.snackbar { position: fixed; left: 50%; transform: translateX(-50%) translateY(150%); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3)); z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--sp-3); max-width: 92%; padding: var(--sp-2) var(--sp-3);
  background: var(--ink); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-3); transition: transform var(--dur-2) var(--ease); }
.snackbar[hidden] { display: none; }
.snackbar.is-open { transform: translateX(-50%) translateY(0); }
.snackbar__msg { font-size: var(--fs-14); }
.snackbar__action { background: none; border: none; color: var(--m-todo); font-weight: var(--fw-bold); font-size: var(--fs-14); cursor: pointer; padding: 4px 6px; }
/* Día rediseñado: agenda, tiempo libre, huecos */
.todo-agenda__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); }
.todo-agenda__item--event { background: var(--surface-3); }
.todo-agenda__item--task { background: var(--accent-soft); border: 1px solid var(--accent); }
.todo-agenda__time { flex: none; min-width: 88px; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--ink-2); }
.todo-agenda__item--task .todo-agenda__time { color: var(--accent-ink); }
.todo-agenda__label { flex: 1; min-width: 0; font-size: var(--fs-14); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-agenda__item--event .todo-agenda__label { color: var(--ink-2); }
.todo-agenda__item.is-declined { opacity: .6; }
.todo-agenda__item.is-declined .todo-agenda__label { text-decoration: line-through; }
.todo-agenda__tag { margin-left: 4px; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--danger); text-decoration: none; }
.todo-agenda__item--task form { margin-left: auto; flex: none; }
.todo-agenda__item--task .todo-act { border: none; width: 36px; }
/* Bloque de tiempo reservado: franja con cabecera + tareas encajadas dentro. */
.todo-agenda__item--block { flex-direction: column; align-items: stretch; gap: var(--sp-2);
  background: var(--surface-2); border: 1px dashed var(--border-strong); }
.todo-block__head { display: flex; align-items: center; gap: var(--sp-3); }
.todo-block__head .todo-agenda__label { font-weight: var(--fw-semibold); }
.todo-block__free { flex: none; font-size: var(--fs-12); color: var(--ink-3); white-space: nowrap; }
.todo-block__rec { color: var(--accent); font-weight: var(--fw-semibold); }
.todo-block__del { flex: none; margin: 0; }
.todo-block__tasks { list-style: none; margin: 0; padding: 0 0 0 var(--sp-3); display: grid; gap: 4px;
  border-left: 2px solid var(--border-strong); }
.todo-block__task { border-radius: var(--r-sm); }
.todo-block__open { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2);
  background: var(--accent-soft); border: none; border-radius: var(--r-sm); cursor: pointer; text-align: left; }
.todo-block__open .todo-agenda__time { color: var(--accent-ink); min-width: 88px; }
.todo-hueco--block { border-style: dashed; }
/* Gestión de bloques de tiempo (Configuración) */
.todo-blk-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.todo-blk { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
.todo-blk__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-blk__title { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink); }
.todo-blk__meta { font-size: var(--fs-12); color: var(--ink-3); }
.todo-blk .todo-act { flex: none; border: 1px solid var(--border); border-radius: var(--r-md); }
.todo-blk form { margin: 0; flex: none; }
.todo-day__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.todo-day__actions .btn { flex: 1 1 auto; }
.todo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.todo-free { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
.todo-free__txt { font-size: var(--fs-14); color: var(--ink-2); }
.todo-free .btn { flex: none; }
.todo-budget { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-13); color: var(--ink-3); }
.todo-budget strong { color: var(--ink-1); font-weight: var(--fw-semibold); }
.todo-budget__queda strong, .todo-budget__queda { color: var(--accent-todo); }
.todo-budget__queda.is-over, .todo-budget__queda.is-over strong { color: var(--danger); }
.todo-huecos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.todo-hueco { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-13); cursor: pointer; }
.todo-hueco.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.todo-day__h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.todo-day__agenda-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.todo-day__agenda-head .todo-day__h2 { margin: 0; }
.todo-day__h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-3); }
.todo-item__main--static { cursor: default; }
.todo-day__done { opacity: .85; }
/* Gestión de contextos (Configuración) */
.todo-ctx-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.todo-ctx { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.todo-ctx--off { opacity: .6; }
.todo-ctx__edit { flex: 1; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; min-width: 0; }
.todo-ctx__edit .input { flex: 1 1 120px; min-width: 0; }
.todo-ctx__toggle { font-size: var(--fs-13); color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.todo-ctx .todo-act { border: 1px solid var(--border); border-radius: var(--r-md); }
.todo-ctx__new { display: flex; gap: var(--sp-2); }
.todo-ctx__new .input { flex: 1; }
/* Widget To Do del Home (ocupa el espacio sobrante) */
.home-todo { display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-4); text-decoration: none; color: var(--ink); }
.home-todo__head { display: flex; align-items: center; gap: var(--sp-2); }
.home-todo__stat { margin-left: auto; font-size: var(--fs-13); color: var(--ink-2); }
.home-todo__list { list-style: none; margin: 0; padding: 0; max-height: 38vh; overflow-y: auto; display: grid; gap: 6px; align-content: start; }
.home-todo__item { display: flex; gap: var(--sp-3); font-size: var(--fs-14); align-items: baseline; }
.home-todo__when { flex: none; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--accent); white-space: nowrap; }
.home-todo__title { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-todo__empty { color: var(--ink-3); font-size: var(--fs-14); }
.home-todo__head { text-decoration: none; color: var(--ink); }
.home-todo__capture { display: flex; gap: var(--sp-2); }
.home-todo__capture .input { flex: 1; }
.home-todo__capture .btn { flex: none; padding: 0 var(--sp-3); }

/* === To Do · Oleada 1 (buscar, importante, vencidas, colores, siguiente) === */
.todo-filters__search { flex: 1 1 100% !important; }
.todo-star { display: none; color: var(--accent); flex: none; margin-right: 4px; vertical-align: -1px; }
.todo-item.is-important .todo-star { display: inline-block; }
.todo-ctx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.todo-badge--overdue { color: #fff; background: var(--danger); }
.todo-act.is-on { color: var(--accent); background: var(--accent-soft); }
/* "Hoy" (reservar) usa el ámbar para distinguirlo de Importante (acento). */
.todo-row__actions form[data-quick="reservar_hoy"] .todo-act.is-on { color: var(--warn); background: var(--warn-soft); }

/* Agenda (Día): zona abrible (hora + etiqueta) como botón transparente. */
.todo-agenda__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.todo-agenda__open:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* Sheet de acciones rápidas */
.quick-verbs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.quick-verbs .quick-chip { flex: 1; justify-content: center; }
.quick-group { margin-bottom: var(--sp-3); }
.quick-group__lbl { display: block; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--ink-3); margin-bottom: var(--sp-2); }
.quick-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.quick-chip { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-14); font-weight: var(--fw-medium);
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer; }
.quick-chip:active { transform: translateY(1px); }
.quick-chip.is-on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.quick-chip[data-quick-state="reservar_hoy"].is-on { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }
.quick-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.quick-foot .btn { flex: 1; }
.ghost-btn--danger { color: var(--danger); }
.ghost-btn--danger:hover { background: var(--danger-soft, var(--surface-3)); color: var(--danger); }
/* Siguiente acción (Día) */
.todo-now { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-4);
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-md); }
.todo-now__lbl { flex: none; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--accent-ink); }
.todo-now__title { flex: 1; min-width: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Color de contexto en config */
.todo-ctx__color { flex: none; width: 40px; height: 40px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }

/* Search field (add sheet) */
.field { display: grid; gap: var(--sp-2); }
.field__lbl { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink-2); }
.input {
  width: 100%; min-height: var(--control-h); box-sizing: border-box;
  padding: 0 var(--sp-3); font-family: var(--font-sans); font-size: var(--fs-16);
  color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: var(--ring); }
/* Selects con estética propia (chevron) en vez del control nativo de Android. */
select.input, .training-status-select select, .todo-filters select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23949bab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center;
  padding-right: calc(var(--sp-3) * 2 + 14px);
}
.food-result { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3); background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; }
.food-result:last-child { border-bottom: none; }
.food-result:hover, .food-result:active { background: var(--surface-2); }
.food-result:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.food-result__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.food-result__main b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--ink); }
.food-result__main span { font-size: var(--fs-12); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-result__star { flex: none; color: var(--accent); }
.food-result__add { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-pill); border: none; background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.food-result.is-off .food-result__add { background: var(--info-soft); color: var(--info); }

/* ============================================================================
   Stats / lists / measures / plan (Nutrición secondary tabs)
   ============================================================================ */
/* Stat grid */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-3) var(--sp-4); display: grid; gap: 4px;
}
.stat__lbl { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--ink-3); }
.stat__val { font-size: var(--fs-28); font-weight: var(--fw-bold); letter-spacing: var(--track-title); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__val small { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ink-3); }
.stat__val.accent { color: var(--accent); }
.stat__sub { font-size: var(--fs-12); color: var(--ink-2); }
.stat__sub.down { color: var(--ok); }

/* Card with section title */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-4); }
.panel__title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.panel__title h2 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.panel__title .eyebrow { margin: 0 0 2px; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--accent); }

/* Generic list rows */
.list { display: grid; }
.list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.list__row:last-child { border-bottom: 0; }
.list__lhs { flex: 1; min-width: 0; }
.list__lhs strong { display: block; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.list__lhs small { font-size: var(--fs-12); color: var(--ink-3); }
.list__rhs { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Plain segmented (día entreno/descanso) */
.seg { display: flex; gap: var(--sp-1); padding: 3px; background: var(--surface-3); border-radius: var(--r-md); }
.seg button, .seg a { flex: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink-2); cursor: pointer; text-decoration: none; text-align: center; }
.seg button.is-on, .seg a.is-on { background: var(--surface); color: var(--ink); font-weight: var(--fw-semibold); box-shadow: var(--shadow-1); }

/* Measure chips with delta */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 12px; }
.chip b { font-weight: var(--fw-bold); }
.chip em { font-style: normal; font-weight: var(--fw-bold); font-size: var(--fs-12); }
.chip em.down { color: var(--ok); }
.chip em.up { color: var(--danger); }

/* Filtros tipo chip-toggle (Red · Búsqueda) — link/botón que filtra por GET */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.chip-toggle { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-4); border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ink-2); cursor: pointer; text-decoration: none; white-space: nowrap; }
.chip-toggle.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Top search bar (Alimentos) */
.searchbar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.searchbar .input { flex: 1; }
.fav { width: 30px; height: 30px; flex: none; border: none; background: none; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fav.is-on { color: var(--accent); }
.target-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ============================================================================
   Buttons (generic) + action bar
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-h); padding: 0 var(--sp-4); border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-15); font-weight: var(--fw-semibold);
  border: none; cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:active { filter: brightness(.95); }
.btn--secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); }
.btn--secondary:active { background: var(--surface-2); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:active { filter: brightness(.95); }
.btn--block { width: 100%; }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: var(--overlay-blur); -webkit-backdrop-filter: var(--overlay-blur);
  border-top: 1px solid var(--border);
}
.actionbar__hint { flex: 1; font-size: var(--fs-12); color: var(--ink-3); }

/* ============================================================================
   Entreno · session / exercises / sets
   ============================================================================ */
.session-head { padding: var(--sp-3) 0 var(--sp-2); }
.session-head h1 { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: var(--track-title); }
.session-head p { margin: 2px 0 0; font-size: var(--fs-13); color: var(--ink-2); }

.block-label { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: var(--fw-bold); color: var(--accent); }

.exercise {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-4); margin-top: var(--sp-3);
}
.exercise__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.exercise__head h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.exercise__head p { margin: 2px 0 0; font-size: var(--fs-12); color: var(--ink-3); }
.set-count { display: flex; gap: var(--sp-2); flex: none; }
.set-count button { height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--ink-2); cursor: pointer; }
.set-count button:active { background: var(--surface-2); }

.sets { display: grid; gap: var(--sp-2); }
.set-head, .set-row { display: grid; grid-template-columns: 30px 1fr 1fr 1fr 30px; gap: var(--sp-2); align-items: center; }
.set-head { font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-3); font-weight: var(--fw-bold); padding: 0 2px; }
.set-head span:first-child, .set-num { text-align: center; }
.set-num { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--ink-2); }
.set-input {
  width: 100%; min-height: 46px; box-sizing: border-box; padding: 0 var(--sp-2);
  text-align: center; font-family: var(--font-sans); font-size: var(--fs-16);
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); outline: none;
}
.set-input::placeholder { color: var(--ink-3); font-size: var(--fs-13); }
.set-input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.set-del { width: 30px; height: 30px; border: none; background: none; color: var(--ink-3); font-size: var(--fs-18); cursor: pointer; border-radius: var(--r-sm); }
.set-del:active { background: var(--danger-soft); color: var(--danger); }

/* Status tag (histórico) */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-pill); font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; }
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--open { background: var(--accent-soft); color: var(--accent-ink); }
.tag--muted { background: var(--surface-2); color: var(--ink-3); }

/* ============================================================================
   Checklists · runs + toggleable items
   ============================================================================ */
.run { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; }
.run__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.run__top b { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.run__top span { font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.check-item { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 0 var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; width: 100%; text-align: left; margin-bottom: var(--sp-2); }
.check-box { width: 26px; height: 26px; flex: none; border-radius: 7px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; }
.check-box svg { display: none; }
.check-label { flex: 1; font-size: var(--fs-15); font-weight: var(--fw-medium); }
.check-item.is-done { background: var(--accent-soft); border-color: transparent; }
.check-item.is-done .check-box { background: var(--accent); border-color: var(--accent); }
.check-item.is-done .check-box svg { display: block; }
.check-item.is-done .check-label { color: var(--ink-2); text-decoration: line-through; }

/* ============================================================================
   Red · device rows
   ============================================================================ */
.net { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.net__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.net__main { flex: 1; min-width: 0; }
.net__name { font-size: var(--fs-15); font-weight: var(--fw-medium); }
.net__ip { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-2); }
.net__sub { font-size: var(--fs-12); color: var(--ink-3); }

/* ============================================================================
   Scripts · option cards + preview
   ============================================================================ */
.opt { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; margin-bottom: var(--sp-2); }
.opt__check { width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 6px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; }
.opt__check svg { display: none; }
.opt b { display: block; font-size: var(--fs-15); font-weight: var(--fw-medium); }
.opt small { font-size: var(--fs-12); color: var(--ink-3); }
.opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.opt.is-on .opt__check { background: var(--accent); border-color: var(--accent); }
.opt.is-on .opt__check svg { display: block; }
.code { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); border-radius: var(--r-md); padding: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.6; overflow-x: auto; white-space: pre; margin: 0; }
.code .c { color: var(--ink-3); }
.code .k { color: var(--accent-ink); font-weight: var(--fw-semibold); }

/* Aviso de validación bajo un campo (p. ej. clave pública adicional). */
.field__hint { font-size: var(--fs-12); color: var(--danger); }

/* Bloque revisable de claves SSH que se instalarán antes de aplicar. */
.keys-review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.keys-review > summary { cursor: pointer; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink); }
.keys-review > summary code { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-2); }
.keys-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.keys-list li { display: flex; gap: var(--sp-2); align-items: baseline; }
.keys-list code { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink); word-break: break-all; }
.keys-list__tag { flex: none; font-size: var(--fs-11); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 var(--sp-2); }
.keys-list__tag--extra { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================================
   Auth (Login / 2FA) — independent, no tab bar. Accent = brand amber via .mod-home
   ============================================================================ */
.auth { min-height: 100%; display: grid; place-items: center; padding: var(--sp-6); }
.auth-card {
  width: min(100%, 360px); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  padding: var(--sp-8) var(--sp-6); text-align: center;
}
.auth-mark { width: 56px; height: 56px; margin: 0 auto var(--sp-4); display: block; }
.auth-card .eyebrow { color: var(--accent); }
.auth-card h1 { margin: var(--sp-2) 0; font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: var(--track-title); }
.auth-card .sub { margin: 0 0 var(--sp-5); font-size: var(--fs-14); color: var(--ink-2); }
.auth-form { display: grid; gap: var(--sp-3); text-align: left; }
.auth-form .field__lbl { font-size: var(--fs-13); }
.remember { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-1) 0 var(--sp-2); }
.remember input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.remember b { display: block; font-size: var(--fs-14); }
.remember small { font-size: var(--fs-12); color: var(--ink-3); }

/* OTP */
.otp-input {
  width: 100%; box-sizing: border-box; height: 60px; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-28); font-variant-numeric: tabular-nums;
  letter-spacing: .5em; text-indent: .5em; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); outline: none;
}
.otp-input:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }
.auth-back { display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-13); color: var(--ink-2); text-decoration: none; }

/* ============================================================================
   Confirm modal (global, centred) — overlay + blur via .scrim
   ============================================================================ */
.confirm {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.96);
  width: min(100%, 320px); z-index: var(--z-modal);
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  padding: var(--sp-6); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.confirm.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.confirm__icon { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--sp-3); display: flex; align-items: center; justify-content: center; background: var(--danger-soft); color: var(--danger); }
.confirm h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.confirm p { margin: 0 0 var(--sp-5); font-size: var(--fs-14); color: var(--ink-2); line-height: var(--lh-snug); }
.confirm__actions { display: flex; gap: var(--sp-2); }
.confirm__actions .btn { flex: 1; }

/* ============================================================================
   Datepicker propio (global) — calendario mensual, semana en lunes
   ============================================================================ */
:root { --dp-today: #1a73e8; }
/* Campo: display dd/mm/aaaa (+ hora nativa en datetime-local) */
.dp-field { display: flex; gap: var(--sp-2); min-width: 0; }
.dp-display { flex: 1 1 0; min-width: 0; text-align: left; cursor: pointer; }
.dp-display.is-empty { color: var(--ink-3); }
.dp-time { flex: 0 0 auto; width: 7.5em; }

.dp-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay-bg);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
.dp-scrim.is-open { opacity: 1; pointer-events: auto; }
.dp-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97);
  width: min(340px, 92vw); z-index: calc(var(--z-modal) + 1);
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  padding: var(--sp-4);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.dp-pop.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dp-title { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer;
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--ink); padding: 4px 2px; }
.dp-title svg { color: var(--ink-3); }
.dp-nav { display: flex; gap: 4px; }
.dp-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: none; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.dp-arrow:hover { background: var(--surface-3); color: var(--ink); }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-dow span { text-align: center; font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink-3);
  text-transform: uppercase; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 50%; cursor: pointer;
  font-size: var(--fs-14); color: var(--ink); }
.dp-cell:hover { background: var(--surface-2); }
.dp-cell.is-other { color: #c7ccd6; }
.dp-cell.is-sel { box-shadow: inset 0 0 0 2px var(--dp-today); }
.dp-cell.is-today { background: var(--dp-today); color: #fff; font-weight: var(--fw-bold); }
.dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); }
.dp-txt { background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--dp-today); }
.dp-txt:hover { text-decoration: underline; }
/* Selección rápida mes/año (dropdown del título ▼) */
.dp-quick { margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.dp-qyear { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-2);
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--ink); }
.dp-qmonths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dp-qm { padding: var(--sp-2) 0; border: none; border-radius: var(--r-md); background: var(--surface-2);
  color: var(--ink); font-size: var(--fs-13); cursor: pointer; }
.dp-qm:hover { background: var(--surface-3); }
.dp-qm.is-on { background: var(--dp-today); color: #fff; font-weight: var(--fw-semibold); }
/* Reloj (hora) — comparte la tarjeta .dp-pop/.dp-scrim */
.dp-display--time { text-align: center; }
/* Parte de hora dentro de un datetime-local: ancho fijo, junto a la fecha. */
.dp-display--inline { flex: 0 0 6.5em; width: 6.5em; }
.tp-display { text-align: center; font-family: var(--font-mono); font-size: var(--fs-28);
  font-variant-numeric: tabular-nums; color: var(--ink); margin-bottom: var(--sp-3); }
.tp-lbl { font-size: var(--fs-11); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--ink-3); margin: var(--sp-2) 0 4px; }
.tp-grid { display: grid; gap: 4px; }
.tp-grid--h { grid-template-columns: repeat(6, 1fr); }
.tp-grid--m { grid-template-columns: repeat(4, 1fr); }
.tp-cell { padding: var(--sp-2) 0; border: none; border-radius: var(--r-md); background: var(--surface-2);
  color: var(--ink); font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: pointer; }
.tp-cell:hover { background: var(--surface-3); }
.tp-cell.is-on { background: var(--dp-today); color: #fff; font-weight: var(--fw-semibold); }
.dp-txt--ok { font-weight: var(--fw-bold); }


/* ===========================================================================
   To Do — Bloques: check "hecho" en el Día + pestaña de hábitos (muro)
   =========================================================================== */
/* Check de "hecho hoy" en el bloque del Día (sustituye al editar/borrar). */
.todo-block__check-form { flex: none; margin: 0; }
.todo-block__check { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1.5px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: var(--ink-3); cursor: pointer; transition: all var(--dur-1) var(--ease); }
.todo-block__check:active { transform: scale(.92); }
.todo-block__check.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.todo-agenda__item--block.is-done { border-style: solid; border-color: var(--ok); }
.todo-agenda__item--block.is-done .todo-block__head .todo-agenda__label { color: var(--ink-3); text-decoration: line-through; }

/* Pestaña Bloques */
.todo-bloques__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.todo-bloques__intro { margin: 0; font-size: var(--fs-13); color: var(--ink-2); line-height: var(--lh-snug); }
.todo-bloques__head .btn { flex: none; }
.blk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-3); margin-bottom: var(--sp-3); box-shadow: var(--shadow-1); }
.blk-card--done { border-color: var(--ok); }
.blk-card__head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.blk-card__title { flex: 1; min-width: 0; }
.blk-card__title h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.blk-card__title p { margin: 2px 0 0; font-size: var(--fs-12); color: var(--ink-3); }
.blk-card__acts { flex: none; display: flex; gap: var(--sp-1); }
.blk-card__acts .todo-act { border: 1px solid var(--border); border-radius: var(--r-md); }
.blk-card__acts form { margin: 0; }

/* Visualización de hábito */
.habit { margin-top: var(--sp-3); }
.habit__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2); }
.habit__milestone { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-1); }
.habit__icon { font-size: var(--fs-18); }
.habit__metric { font-size: var(--fs-13); color: var(--ink-2); }
.habit__metric b { color: var(--ink-1); }
.habit__streak { opacity: .55; }
.habit__streak.is-hot { opacity: 1; }
.habit__last7 { display: flex; gap: 5px; margin-bottom: var(--sp-2); }
.habit__dot { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--border); }
.habit__dot.is-on { background: var(--ok); border-color: var(--ok); }
/* El muro: cada ladrillo = un día hecho; las filas se escalonan como una pared. */
.wall { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: var(--r-md);
  background: linear-gradient(#efe9e2, #e7ddd2); overflow: hidden; }
.wall__row { display: flex; gap: 3px; }
.wall__row:nth-child(even) { margin-left: 11px; }
.brick { width: 19px; height: 11px; border-radius: 2px;
  background: linear-gradient(#c8694d, #b1543b); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 1px rgba(0,0,0,.12); }
.wall--empty { align-items: center; justify-content: center; min-height: 56px; background: repeating-linear-gradient(45deg, #ece6df, #ece6df 8px, #e3dad0 8px, #e3dad0 16px); }
.wall__hint { font-size: var(--fs-12); color: var(--ink-3); text-align: center; }
.habit__more { margin: 4px 0 0; font-size: var(--fs-12); color: var(--ink-3); }
.habit__next { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--ink-2); }
.habit__next b { color: var(--accent); }
.habit__today { margin: var(--sp-3) 0 0; }
.habit__pastday { margin: var(--sp-2) 0 0; }
.habit__pastday > summary { cursor: pointer; font-size: .82rem; color: var(--muted); padding: var(--sp-1) 0; }
.habit__pastday-form { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); flex-wrap: wrap; }
.habit__pastday-form input[type=date] { flex: 1 1 8rem; min-width: 0; }
.habit__pastday-hint { font-size: .75rem; color: var(--muted); margin: var(--sp-1) 0 0; }

/* To Do — estados del muro y progreso semanal */
.habit__warn { font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.habit--agrietado .habit__warn { color: var(--warn, #b8860b); }
.habit--ruinas .habit__warn { color: var(--danger); }
.habit--ruinas .wall { filter: grayscale(.4) opacity(.85); }
.habit__week { margin: 0 0 var(--sp-2); font-size: var(--fs-13); color: var(--ink-2); }
.habit__week b { color: var(--accent); }
.habit__foot { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--ink-3); }
.habit__foot b { color: var(--ink-2); }

/* To Do — gestión de recurrencias (Config) */
.todo-rec-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.todo-rec { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
.todo-rec--off { opacity: .55; }
.todo-rec__form { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.todo-rec__name { flex: 1 1 120px; min-width: 100px; }
.todo-rec__tipo { flex: 0 0 auto; }
.todo-rec__dias { display: flex; flex-wrap: wrap; gap: 4px; }
.todo-rec__day { display: inline-flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--ink-3); cursor: pointer; }
.todo-rec__day input { margin: 0; }
.todo-rec__veces { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--ink-2); }
.todo-rec__veces input { width: 56px; }
.todo-rec__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--ink-2); }
.todo-rec__new { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.todo-rec__new .input[type="text"] { flex: 1 1 140px; }