/* ============================================================
 Performance Lab — Cold Mist
 Drop-in replacement for the original style.css
 Same class names + design tokens, redesigned visuals.
 Roberto Martínez · Identidad gráfica
 ============================================================ */

:root {
 /* Apple Fitness palette — dark + lime neon */
 --bg: #000000; /* negro puro page */
 --bg-2: #0A0A0A; /* sutil */
 --surface: #1C1C1E; /* cards (gris oscuro Apple) */
 --surface-2: #2C2C2E; /* segundo nivel cards (input bg, hover) */
 --surface-3: #3A3A3C; /* nivel terciario */

 /* Type */
 --text: #FFFFFF;
 --text-muted: #8E8E93; /* gris Apple secundario */
 --text-dim: #6C6C70; /* gris Apple terciario */

 /* Border */
 --border: rgba(255,255,255,0.08);
 --border-strong: rgba(255,255,255,0.16);

 /* Anchor (igualmente oscuros) */
 --anchor: #000000;
 --anchor-2: #1C1C1E;

 /* Brand — lime neón Apple Fitness */
 --accent: #C8FF00; /* lime neón — botones, anillos, números vivos */
 --accent-ink: #C8FF00; /* sobre dark, el accent también funciona como ink */
 --accent-soft: rgba(200,255,0,0.14);
 --accent-strong: #B6F500; /* variante más oscura para hovers/degradados */
 --accent-ink-on: #000000; /* texto que va SOBRE el acento (negro/blanco según contraste) */

 /* Apple Activity Rings */
 --ring-red: #FA114F; /* Moverse (kcal) */
 --ring-green: #B6FF00; /* Ejercicio (minutos) */
 --ring-blue: #00C6FF; /* Pararse (horas) */

 /* Semantic */
 --green: #30D158;
 --green-soft: rgba(48,209,88,0.14);
 --orange: #FF9F0A;
 --orange-soft: rgba(255,159,10,0.14);
 --red: #FF453A;
 --red-soft: rgba(255,69,58,0.14);

 /* System */
 --shadow-sm: 0 1px 2px rgba(15,19,17,0.04);
 --shadow: 0 1px 2px rgba(15,19,17,0.04), 0 8px 22px rgba(15,19,17,0.06);
 --shadow-lg: 0 4px 8px rgba(15,19,17,0.05), 0 20px 50px rgba(15,19,17,0.10);
 --radius: 12px;
 --radius-sm: 8px;
 --radius-lg: 16px;

 /* Fonts — SF Pro Display via system (auto en iOS/macOS), Inter fallback web */
 --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', "Segoe UI", Roboto, sans-serif;
 --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
 margin: 0;
 font-family: var(--font-sans);
 background: var(--bg);
 color: var(--text);
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 letter-spacing: -0.005em;
}

/* Dark mode total — sin texturas decorativas */
body::before { display: none; }

a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
a:hover { color: var(--text); }

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

/* ============================================================
 CONTAINER
 ============================================================ */
.container {
 position: relative;
 z-index: 1;
 max-width: 1080px;
 margin: 0 auto;
 padding: 32px 24px 96px;
}

/* ============================================================
 TOP HEADER
 ============================================================ */
header.top {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 16px;
 flex-wrap: wrap;
 margin-bottom: 24px;
 padding-bottom: 18px;
 border-bottom: 1px solid var(--border);
}
header.top h1 {
 margin: 0;
 font-size: 34px;
 font-weight: 700;
 letter-spacing: -0.024em;
 line-height: 1.05;
 color: var(--text);
}
header.top h1::before { display: none; }

.user-pill {
 display: inline-flex; align-items: center; gap: 10px;
 padding: 6px 6px 6px 14px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--surface);
 font-size: 13px; color: var(--text);
 font-weight: 600;
}
.user-pill button {
 background: var(--anchor); color: #FFFFFF;
 border: none; border-radius: 999px;
 padding: 6px 12px;
 font-family: var(--font-mono);
 font-size: 10px; letter-spacing: 0.16em; font-weight: 800;
 text-transform: uppercase;
 cursor: pointer;
 transition: background .15s;
}
.user-pill button:hover { background: var(--anchor-2); }

/* ============================================================
 MACROS CARD (página HOY)
 ============================================================ */
.macros-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 22px 24px;
 margin-bottom: 22px;
 box-shadow: var(--shadow);
}
.macros-card h2 {
 margin: 0 0 4px;
 font-size: 22px; font-weight: 900;
 letter-spacing: -0.025em;
 color: var(--text);
}
.macros-date {
 font-family: var(--font-mono);
 color: var(--text-muted);
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 font-weight: 600;
 margin-bottom: 22px;
}

.macros-grid {
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.macro-item label {
 display: block;
 font-family: var(--font-mono);
 font-size: 10px; letter-spacing: 0.18em;
 text-transform: uppercase; color: var(--text-dim);
 font-weight: 600;
 margin-bottom: 8px;
}
.macro-item .value {
 font-size: 22px; font-weight: 900;
 margin-bottom: 8px;
 letter-spacing: -0.025em;
 color: var(--text);
 font-family: var(--font-mono);
 line-height: 1;
}
.macro-item .value .target,
.macro-item .target {
 color: var(--text-dim); font-size: 12px;
 font-weight: 500;
 margin-left: 4px;
 letter-spacing: 0.02em;
}
.macro-item.over .value { color: var(--red); }
.macro-bar, .macro-item .bar {
 height: 5px;
 background: var(--bg-2);
 border-radius: 999px;
 overflow: hidden;
}
.macro-bar span, .macro-item .bar span {
 display: block; height: 100%;
 background: var(--anchor);
 transition: width .2s;
 border-radius: 999px;
}
/* Macro-specific bar colors */
.macro-item .bar.kcal span { background: var(--anchor); }
.macro-item .bar.protein span { background: var(--accent); }
.macro-item .bar.carbs span { background: var(--accent-ink); }
.macro-item .bar.fat span { background: #7077DC; }
.macro-bar.over span, .macro-item.over .bar span { background: var(--red); }

.macros-card .total-day {
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--text-muted);
 padding-top: 14px;
 margin-top: 16px;
 border-top: 1px dashed var(--border);
 letter-spacing: 0.06em;
}
.macros-card .total-day strong { color: var(--text); font-weight: 700; }

@media (max-width: 600px) {
 .macros-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 SLOT CARDS (meals)
 ============================================================ */
.slots { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.slot-card, .meal-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 18px 20px;
 box-shadow: var(--shadow-sm);
 transition: border-color .15s, box-shadow .15s, background .15s;
}
.slot-card:hover, .meal-card:hover {
 border-color: var(--border-strong);
 box-shadow: var(--shadow);
}
.slot-card.eaten, .meal-card.eaten {
 background: var(--accent-soft);
 border-color: rgba(94,106,210,0.25);
}

.slot-head {
 display: flex; align-items: center; justify-content: space-between;
 margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.slot-tag {
 display: inline-flex; align-items: center; gap: 8px;
 font-family: var(--font-mono);
 font-size: 10px; letter-spacing: 0.18em;
 color: var(--text-muted);
 text-transform: uppercase;
 background: var(--surface-2);
 padding: 5px 11px;
 border-radius: 999px;
 font-weight: 700;
 border: 1px solid var(--border);
}
.slot-card.eaten .slot-tag {
 background: var(--surface);
 color: var(--accent-ink);
 border-color: rgba(94,106,210,0.30);
}
.slot-card.eaten .slot-tag::before {
 content: "✓";
 color: var(--accent-ink);
 font-weight: 900;
}

.slot-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.slot-actions .btn { font-size: 12px; padding: 6px 12px; }

.meal-name {
 font-size: 18px; font-weight: 800;
 letter-spacing: -0.02em;
 margin: 6px 0 4px;
 color: var(--text);
}
.meal-desc {
 font-size: 13px;
 color: var(--text-muted);
 margin: 0 0 12px;
 line-height: 1.5;
}

.meal-macros {
 display: flex; gap: 16px; flex-wrap: wrap;
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--text-muted);
 margin-bottom: 12px;
 letter-spacing: 0.04em;
}
.meal-macros strong {
 color: var(--text);
 font-weight: 700;
}
.meal-macros .kcal-num.over { color: var(--red); font-weight: 800; }

/* Ingredient list */
.meal-items, .foods-list {
 margin-top: 10px;
 padding-top: 12px;
 border-top: 1px dashed var(--border);
 font-size: 13px;
}
.meal-items .ing, .foods-list .food {
 display: flex; align-items: center; justify-content: space-between;
 padding: 7px 8px;
 border-radius: 6px;
 transition: background .12s;
}
.meal-items .ing:hover { background: var(--surface-2); }
.meal-items .ing .name { color: var(--text); }
.meal-items .ing .brand {
 color: var(--text-dim);
 font-size: 11px; margin-left: 4px;
 font-family: var(--font-mono);
 letter-spacing: 0.05em;
}
.meal-items .ing .amt, .foods-list .food .amt {
 color: var(--text);
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 font-family: var(--font-mono);
 font-size: 12px;
 letter-spacing: 0.04em;
}

/* Ingredient detail */
.ing-detail {
 background: var(--surface-2);
 border-radius: 6px;
 padding: 8px 12px;
 margin: 4px 0;
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--text-muted);
 letter-spacing: 0.04em;
}

/* ============================================================
 ALTERNATIVES (pop)
 ============================================================ */
.alts-pop, .alt-list {
 margin-top: 12px;
 padding: 14px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
}
.alts-pop h4 {
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.22em;
 margin: 0 0 10px;
 color: var(--accent-ink);
 font-weight: 700;
 text-transform: uppercase;
}
.alts-pop .alt-row, .alt-row {
 display: flex; justify-content: space-between; align-items: center;
 padding: 10px 12px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 margin-bottom: 6px;
 font-size: 13px; gap: 10px;
 transition: border-color .12s;
}
.alts-pop .alt-row:hover, .alt-row:hover { border-color: var(--border-strong); }
.alts-pop .alt-row .info, .alt-row .info { flex: 1; min-width: 0; }
.alts-pop .alt-row .name, .alt-row .alt-name {
 font-weight: 700;
 color: var(--text);
 letter-spacing: -0.005em;
}
.alts-pop .alt-row .macros, .alt-row .alt-macros {
 color: var(--text-muted); font-size: 11.5px;
 margin-top: 3px;
 font-family: var(--font-mono);
 letter-spacing: 0.04em;
}

/* ============================================================
 BUTTONS — Apple liquid glass style
 ============================================================ */
.btn {
 display: inline-flex; align-items: center; gap: 6px;
 background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.14);
 border-radius: 999px;
 padding: 10px 18px;
 cursor: pointer;
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: -0.01em;
 color: var(--text);
 transition: background .18s, border-color .18s, transform .12s;
 box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.12),
 0 1px 2px rgba(0,0,0,0.20);
}
.btn:hover {
 background: rgba(255,255,255,0.14);
 border-color: rgba(255,255,255,0.22);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn.primary {
 background: var(--accent);
 color: var(--accent-ink-on);
 border-color: transparent;
 font-weight: 700;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30),
 inset 0 0.5px 0 rgba(255,255,255,0.30);
}
.btn.primary:hover {
 background: var(--accent-strong);
 border-color: transparent;
}

.btn.lime {
 background: var(--accent);
 color: var(--accent-ink-on);
 border-color: transparent;
 font-weight: 700;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30);
}
.btn.lime:hover { background: var(--accent-strong); }

.btn.success {
 background: var(--accent);
 color: var(--accent-ink-on);
 border-color: transparent;
 font-weight: 700;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30);
}
.btn.success:hover { background: var(--accent-strong); }

.btn.muted {
 color: var(--text-muted);
 background: transparent;
 border-color: rgba(255,255,255,0.10);
 box-shadow: none;
}
.btn.muted:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
 LOGIN / SIGNUP CARDS
 ============================================================ */
.login-wrap {
 min-height: 100vh;
 display: flex; align-items: center; justify-content: center;
 padding: 24px;
 position: relative;
 z-index: 1;
}
.login-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 padding: 40px 36px 32px;
 max-width: 420px; width: 100%;
 box-shadow: var(--shadow-lg);
}
.login-card h1 {
 margin: 0 0 8px;
 font-size: 32px;
 font-weight: 900;
 letter-spacing: -0.035em;
 line-height: 1;
 color: var(--text);
}
.login-card .sub {
 color: var(--text-muted);
 font-size: 14px;
 margin-bottom: 28px;
 line-height: 1.55;
}
.login-card label {
 display: block;
 margin-bottom: 6px;
 margin-top: 18px;
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--text-muted);
 font-weight: 600;
}
.login-card input {
 width: 100%;
 padding: 12px 14px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 font-size: 14px;
 background: var(--surface);
 color: var(--text);
 font-weight: 500;
}
.login-card input:focus {
 outline: none;
 border-color: var(--text);
 box-shadow: 0 0 0 3px rgba(15,19,17,0.06);
}
.login-card button.primary {
 width: 100%;
 margin-top: 22px;
 background: var(--anchor);
 color: #FFFFFF;
 border: none;
 padding: 14px;
 border-radius: var(--radius-sm);
 font-size: 14px;
 font-weight: 800;
 letter-spacing: -0.005em;
 cursor: pointer;
 transition: background .15s;
}
.login-card button.primary:hover { background: var(--anchor-2); }
.login-card button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.login-card .switch {
 text-align: center;
 margin-top: 18px;
 font-size: 13px;
 color: var(--text-muted);
}
.login-card .err {
 background: var(--red-soft);
 color: var(--red);
 border: 1px solid rgba(197,58,33,0.20);
 padding: 10px 12px;
 border-radius: var(--radius-sm);
 font-size: 13px;
 margin-top: 14px;
}

/* ============================================================
 GENERIC STATES
 ============================================================ */
.loading {
 padding: 18px;
 text-align: center;
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: 12px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 font-weight: 600;
}
.error {
 color: var(--red);
 background: var(--red-soft);
 border: 1px solid rgba(197,58,33,0.20);
 padding: 12px 14px;
 border-radius: var(--radius-sm);
 font-size: 13px;
}

.over-banner {
 background: var(--red-soft);
 color: var(--red);
 padding: 10px 14px;
 border-radius: var(--radius-sm);
 font-size: 13px;
 margin-bottom: 14px;
 border: 1px solid rgba(197,58,33,0.20);
 font-weight: 500;
}

/* ============================================================
 LEGACY TABS (fallback)
 ============================================================ */
nav.tabs, .sub-tabs {
 display: flex;
 gap: 2px;
 margin-bottom: 22px;
 border-bottom: 1px solid var(--border);
 overflow-x: auto;
 scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar, .sub-tabs::-webkit-scrollbar { display: none; }
nav.tabs a, .sub-tabs a {
 padding: 12px 16px;
 text-decoration: none;
 color: var(--text-muted);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: -0.005em;
 border-bottom: 2px solid transparent;
 margin-bottom: -1px;
 white-space: nowrap;
 transition: color .15s, border-color .15s;
}
nav.tabs a:hover, .sub-tabs a:hover { color: var(--text); }
nav.tabs a.active, .sub-tabs a.active {
 color: var(--text);
 border-bottom-color: var(--text);
 font-weight: 700;
}

/* ============================================================
 APP NAV (sidebar / bottom bar)
 ============================================================ */
.app-nav {
 position: fixed;
 background: var(--surface);
 z-index: 100;
}
.app-nav a {
 text-decoration: none;
 color: var(--text-muted);
 transition: background .15s, color .15s, transform .15s, border-color .15s;
 display: flex;
 align-items: center;
}
.app-nav a:hover { color: var(--text); background: var(--surface-2); }
.app-nav a.active {
 color: var(--accent);
 background: var(--surface-2);
 font-weight: 700;
}
.app-nav a.active .nav-label { color: var(--accent); font-weight: 700; }
.app-nav a.active .nav-ico { color: var(--accent); }
.app-nav .nav-ico {
 font-size: 18px;
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 20px;
 height: 20px;
}
.app-nav .nav-ico svg {
 width: 20px;
 height: 20px;
 color: currentColor;
}
.app-nav .nav-label {
 font-weight: 600;
 font-size: 13px;
 letter-spacing: -0.005em;
}

/* Mobile: bottom nav pill flotante estilo Apple Fitness */
@media (max-width: 767px) {
 .app-nav {
 bottom: calc(14px + env(safe-area-inset-bottom, 0px));
 left: 14px; right: 14px;
 height: 72px;
 background: rgba(28,28,30,0.92);
 backdrop-filter: blur(28px) saturate(160%);
 -webkit-backdrop-filter: blur(28px) saturate(160%);
 border: 0.5px solid rgba(255,255,255,0.08);
 border-radius: 999px;
 display: flex;
 justify-content: space-around;
 align-items: center;
 padding: 8px 12px;
 box-shadow: 0 16px 40px rgba(0,0,0,0.50),
 0 4px 10px rgba(0,0,0,0.30);
 z-index: 200;
 }
 .app-nav a {
 flex: 1;
 flex-direction: column;
 gap: 4px;
 padding: 6px 8px;
 border-radius: 999px;
 align-items: center;
 justify-content: center;
 min-width: 0;
 color: var(--text-muted);
 background: transparent;
 transition: color .2s;
 }
 .app-nav a:hover { background: transparent; color: var(--text); }
 .app-nav a .nav-ico {
 width: 22px; height: 22px;
 display: inline-flex; align-items: center; justify-content: center;
 transition: transform .25s cubic-bezier(.34,1.56,.64,1);
 }
 .app-nav a .nav-ico svg { width: 22px; height: 22px; }
 .app-nav a .nav-label {
 font-size: 10.5px;
 font-weight: 600;
 letter-spacing: -0.005em;
 color: inherit;
 font-family: var(--font-sans);
 text-transform: none;
 }
 .app-nav a.active {
 background: transparent;
 color: var(--accent);
 }
 .app-nav a.active .nav-ico {
 background: var(--accent);
 color: #000000;
 width: 52px; height: 32px;
 border-radius: 999px;
 padding: 0 12px;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30);
 }
 .app-nav a.active .nav-ico svg { width: 20px; height: 20px; }
 .app-nav a.active .nav-label {
 color: var(--accent);
 font-weight: 700;
 }
 body { padding-bottom: 104px; }
}

/* Desktop: sidebar dark Apple-style */
@media (min-width: 768px) {
 .app-nav {
 top: 0; left: 0; bottom: 0;
 width: 248px;
 background: rgba(0,0,0,0.92);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-right: 0.5px solid var(--border);
 display: flex;
 flex-direction: column;
 padding: 24px 14px;
 gap: 4px;
 overflow-y: auto;
 }
 .app-nav .nav-brand {
 display: flex; align-items: center; gap: 10px;
 padding: 6px 12px 20px;
 border-bottom: 0.5px solid var(--border);
 margin-bottom: 14px;
 }
 .app-nav .nav-brand-mark {
 width: 32px; height: 32px;
 border-radius: 8px;
 background: var(--accent);
 color: #000000;
 display: flex; align-items: center; justify-content: center;
 font-weight: 800; font-size: 13px;
 letter-spacing: -0.02em;
 }
 .app-nav .nav-brand-name {
 font-weight: 700;
 font-size: 15px;
 letter-spacing: -0.02em;
 color: var(--text);
 }
 .app-nav a {
 padding: 11px 14px;
 gap: 12px;
 border-radius: 12px;
 font-size: 14px;
 color: var(--text-muted);
 }
 .app-nav a:hover { background: var(--surface); color: var(--text); }
 .app-nav a .nav-label { font-size: 14px; font-weight: 500; }
 .app-nav .nav-items { display: flex; flex-direction: column; gap: 4px; flex: 1; }
 .app-nav .nav-extras {
 margin-top: auto;
 padding-top: 14px;
 padding-bottom: 8px;
 border-top: 0.5px solid var(--border);
 display: flex;
 flex-direction: column;
 gap: 6px;
 }
 .app-nav .nav-extra-btn {
 background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.10);
 color: var(--text);
 padding: 10px 14px;
 border-radius: 12px;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 10px;
 font-family: var(--font-sans);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: -0.005em;
 transition: background .15s, transform .12s;
 text-align: left;
 }
 .app-nav .nav-extra-btn:hover { background: rgba(255,255,255,0.10); }
 .app-nav .nav-extra-btn:active { transform: scale(0.97); }
 .app-nav .nav-extra-btn.lime {
 background: var(--accent);
 color: #000000;
 border-color: transparent;
 font-weight: 700;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30);
 }
 .app-nav .nav-extra-btn.lime:hover { background: var(--accent-strong); }
 .app-nav .nav-extra-btn .nav-extra-ico {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 }

 .app-nav .nav-footer {
 margin-top: 0;
 padding-top: 14px;
 border-top: 0.5px solid var(--border);
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .app-nav .nav-footer-link {
 flex: 1;
 min-width: 0;
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 8px 10px;
 border-radius: 12px;
 text-decoration: none;
 color: var(--text);
 transition: background .15s;
 }
 .app-nav .nav-footer-link:hover { background: var(--surface); }
 .app-nav .nav-footer-avatar {
 width: 36px; height: 36px;
 border-radius: 50%;
 background: var(--accent);
 color: #000000;
 display: flex; align-items: center; justify-content: center;
 font-weight: 700; font-size: 14px;
 flex-shrink: 0;
 overflow: hidden;
 }
 .app-nav .nav-footer-avatar img { width:100%; height:100%; object-fit:cover; }
 .app-nav .nav-footer-meta { min-width: 0; flex: 1; }
 .app-nav .nav-footer-name {
 font-size: 14px;
 font-weight: 600;
 color: var(--text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .app-nav .nav-footer-sub {
 font-size: 11px;
 color: var(--text-muted);
 letter-spacing: 0.01em;
 }
 .app-nav .nav-footer-logout {
 background: transparent;
 border: 0.5px solid var(--border-strong);
 border-radius: 12px;
 width: 36px; height: 36px;
 cursor: pointer;
 color: var(--text-muted);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: background .15s, color .15s, transform .15s, border-color .15s;
 flex-shrink: 0;
 }
 .app-nav .nav-footer-logout:hover {
 background: var(--surface);
 color: var(--text);
 border-color: var(--text-muted);
 }
 body.has-sidebar .container {
 margin-left: 248px;
 padding-left: 32px;
 max-width: calc(100% - 248px);
 }
 body.has-sidebar .container > * {
 max-width: 1080px;
 margin-left: auto;
 margin-right: auto;
 }
}

/* Hide legacy nav mount */
#nav-mount { display: none; }

/* ============================================================
 TOOLBAR
 ============================================================ */
.toolbar {
 display: flex; gap: 8px; align-items: center;
 margin-bottom: 18px; flex-wrap: wrap;
}
/* Segmented control estilo Apple Fitness (liquid glass + lime active) */
.seg, .toolbar .seg {
 display: inline-flex;
 align-items: center;
 background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.10);
 border-radius: 999px;
 padding: 4px;
 gap: 2px;
 box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06);
}
.seg button, .toolbar .seg button {
 background: transparent;
 border: none;
 padding: 8px 16px;
 font-size: 13px;
 cursor: pointer;
 border-radius: 999px;
 color: var(--text-muted);
 font-family: var(--font-sans);
 font-weight: 600;
 letter-spacing: -0.005em;
 text-transform: none;
 transition: background .18s, color .18s, transform .12s;
 display: inline-flex;
 align-items: center;
 gap: 4px;
}
.seg button:hover, .toolbar .seg button:hover {
 color: var(--text);
 background: rgba(255,255,255,0.04);
}
.seg button:active, .toolbar .seg button:active { transform: scale(0.97); }
.seg button.active, .toolbar .seg button.active {
 background: var(--accent);
 color: #000000;
 font-weight: 700;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30),
 inset 0 0.5px 0 rgba(255,255,255,0.30);
}

/* ============================================================
 SHOPPING
 ============================================================ */
.shop-section, .cat-section {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 margin-bottom: 14px;
 padding: 18px 22px;
 box-shadow: var(--shadow-sm);
}
.shop-section h3, .cat-section h3 {
 margin: 0 0 12px;
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.22em;
 color: var(--accent-ink);
}

.shop-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shop-table th, .shop-table td {
 padding: 9px 6px;
 text-align: left;
 border-bottom: 1px solid var(--border);
}
.shop-table tbody tr:last-child td { border-bottom: none; }
.shop-table th {
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 700;
 color: var(--text-dim);
 text-transform: uppercase;
 letter-spacing: 0.18em;
}
.shop-table tbody tr.checked { opacity: 0.4; text-decoration: line-through; }
.shop-table input[type="checkbox"] { cursor: pointer; accent-color: var(--text); }
.shop-table .amt-col {
 text-align: right;
 font-variant-numeric: tabular-nums;
 font-family: var(--font-mono);
 font-weight: 600;
 color: var(--text);
}

/* ============================================================
 WEEK GRID
 ============================================================ */
.week-grid {
 display: grid;
 grid-template-columns: 56px repeat(7, 1fr);
 gap: 1px;
 background: var(--border);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
}
.week-grid > .head {
 background: var(--surface);
 padding: 10px 4px;
 text-align: center;
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 700;
 color: var(--text-dim);
 text-transform: uppercase;
 letter-spacing: 0.18em;
}
.week-grid > .head.today {
 background: var(--anchor);
 color: #FFFFFF;
 font-weight: 800;
}
.week-grid > .cell {
 background: var(--surface);
 padding: 8px 6px;
 min-height: 76px;
 font-size: 11px;
 position: relative;
}
.week-grid > .cell.today {
 background: rgba(15,19,17,0.04);
 box-shadow: inset 0 2px 0 var(--accent);
}
.week-grid > .cell.eaten {
 background: var(--accent-soft);
}
.week-grid .check-mini {
 color: var(--accent-ink);
 font-weight: 800;
 margin-right: 3px;
}
.week-grid .meal-mini {
 font-weight: 700;
 line-height: 1.2;
 margin-top: 3px;
 color: var(--text);
 letter-spacing: -0.005em;
}
.week-grid .macros-mini {
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: 10px;
 margin-top: 3px;
 letter-spacing: 0.04em;
}
.week-grid .slot-tag-cell {
 background: var(--surface-2);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 700;
 color: var(--accent-ink);
 letter-spacing: 0.14em;
}

/* ============================================================
 MODAL
 ============================================================ */
.modal-bg {
 position: fixed;
 inset: 0;
 background: rgba(15,19,17,0.50);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 display: flex; align-items: center; justify-content: center;
 z-index: 200;
 padding: 20px;
 animation: fadeIn .2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 padding: 28px 30px;
 max-width: 440px; width: 100%;
 box-shadow: var(--shadow-lg);
 max-height: 90vh;
 overflow-y: auto;
 animation: modalIn .25s ease-out;
}
@keyframes modalIn {
 from { opacity: 0; transform: translateY(8px) scale(0.98); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h3 {
 margin: 0 0 6px;
 font-size: 22px;
 font-weight: 900;
 letter-spacing: -0.025em;
 color: var(--text);
}
.modal .sub {
 color: var(--text-muted);
 font-size: 13px;
 margin-bottom: 18px;
 line-height: 1.5;
}
.modal .row {
 display: flex; align-items: center; gap: 10px;
 margin-bottom: 12px;
}
.modal .row label {
 flex: 0 0 130px;
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--text-muted);
 font-weight: 600;
}
.modal .row input {
 flex: 1;
 padding: 9px 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 font-size: 14px;
 background: var(--surface);
 color: var(--text);
}
.modal .row input:focus {
 outline: none;
 border-color: var(--text);
 box-shadow: 0 0 0 3px rgba(15,19,17,0.06);
}
.modal .row .unit {
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.06em;
}
.modal .actions {
 display: flex; gap: 8px; justify-content: flex-end;
 margin-top: 20px;
}

/* ============================================================
 KPI CARDS (stats)
 ============================================================ */
.kpi-grid, .kpi-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 margin-bottom: 22px;
}
.kpi-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 16px 18px;
 box-shadow: var(--shadow-sm);
 transition: border-color .15s, box-shadow .15s;
}
.kpi-card:hover {
 border-color: var(--border-strong);
 box-shadow: var(--shadow);
}
.kpi-card label {
 font-family: var(--font-mono);
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 0.20em;
 color: var(--text-dim);
 font-weight: 700;
 display: block;
 margin-bottom: 8px;
}
.kpi-card .num, .kpi-card .value {
 font-size: 26px;
 font-weight: 900;
 letter-spacing: -0.03em;
 line-height: 1;
 color: var(--text);
}
.kpi-card .delta, .kpi-card .sub {
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--text-muted);
 margin-top: 6px;
 letter-spacing: 0.06em;
}
.kpi-card .delta.pos { color: var(--accent-ink); }
.kpi-card .delta.neg { color: var(--red); }

@media (max-width: 700px) {
 .kpi-grid, .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 CHART
 ============================================================ */
.chart-wrap {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 22px 24px;
 margin-bottom: 22px;
 box-shadow: var(--shadow-sm);
}
.chart-wrap h3 {
 margin: 0 0 14px;
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--accent-ink);
 font-weight: 700;
}

/* ============================================================
 PROFILE FORM
 ============================================================ */
.profile-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 26px 28px;
 box-shadow: var(--shadow);
 margin-bottom: 18px;
}
.profile-card h2 {
 margin: 0 0 8px;
 font-size: 22px;
 font-weight: 900;
 letter-spacing: -0.025em;
 color: var(--text);
}
.profile-card .lead {
 color: var(--text-muted);
 font-size: 14px;
 margin-bottom: 22px;
 line-height: 1.55;
 max-width: 60ch;
}
.profile-card .lead strong { color: var(--text); font-weight: 600; }

.form-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px 20px;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
 font-family: var(--font-mono);
 font-size: 10px;
 text-transform: uppercase;
 color: var(--text-muted);
 letter-spacing: 0.16em;
 font-weight: 600;
 margin-bottom: 6px;
}
.form-field input, .form-field select, .form-field textarea {
 padding: 11px 14px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--surface);
 font-size: 14px;
 color: var(--text);
 font-weight: 500;
 transition: border-color .15s, box-shadow .15s;
}
.form-field input[type="number"] {
 font-family: var(--font-mono);
 font-weight: 600;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
 outline: none;
 border-color: var(--text);
 box-shadow: 0 0 0 3px rgba(15,19,17,0.06);
}
.form-field select {
 cursor: pointer;
 appearance: none;
 padding-right: 36px;
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%230F1311' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 background-repeat: no-repeat;
 background-position: right 12px center;
 background-size: 12px 12px;
}

@media (max-width: 700px) {
 .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
 .form-grid { grid-template-columns: 1fr; }
}

.profile-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 24px;
 padding-top: 18px;
 border-top: 1px solid var(--border);
 gap: 14px;
 flex-wrap: wrap;
}
.profile-actions .target-summary {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--text-muted);
 letter-spacing: 0.04em;
}
.profile-actions .target-summary strong {
 color: var(--text);
 font-weight: 700;
}

/* ============================================================
 WIZARD STEP
 ============================================================ */
.wizard-step { margin-bottom: 20px; }
.wizard-step h3 {
 margin: 0 0 6px;
 font-size: 18px;
 font-weight: 900;
 letter-spacing: -0.025em;
 color: var(--text);
}
.wizard-step .lead {
 color: var(--text-muted);
 font-size: 13px;
 margin-bottom: 16px;
 line-height: 1.55;
}

/* ============================================================
 ADJUST ITEMS (modal interior)
 ============================================================ */
.adjust-item {
 display: flex; gap: 10px; align-items: center;
 padding: 10px 0;
 border-bottom: 1px solid var(--border);
 font-size: 13px;
}
.adjust-item:last-child { border-bottom: none; }
.adjust-item .name {
 flex: 1;
 color: var(--text);
 font-weight: 600;
 letter-spacing: -0.005em;
}
.adjust-item input[type="number"] {
 width: 90px;
 padding: 6px 10px;
 border: 1px solid var(--border);
 border-radius: 6px;
 font-family: var(--font-mono);
 font-size: 13px;
 font-weight: 600;
 text-align: right;
 color: var(--text);
}

/* ============================================================
 TOAST + UNDO
 ============================================================ */
#toast-stack {
 position: fixed;
 bottom: 26px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 9999;
 display: flex;
 flex-direction: column-reverse;
 gap: 8px;
 pointer-events: none;
}
.toast-item {
 pointer-events: auto;
 background: var(--anchor);
 color: #F5F7F4;
 padding: 14px 20px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 16px;
 box-shadow: 0 12px 32px rgba(15,19,17,0.30);
 animation: toastIn .25s ease-out;
 max-width: 90vw;
 border: 1px solid var(--anchor-2);
}
.toast-item.toast-error {
 background: var(--red);
 border-color: var(--red);
}
.toast-item.toast-success {
 background: var(--accent-ink);
 border-color: var(--accent-ink);
}
.toast-item .undo-btn {
 background: transparent;
 border: 1px solid rgba(255,255,255,0.30);
 color: var(--accent);
 border-radius: 999px;
 padding: 5px 14px;
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 cursor: pointer;
}
.toast-item .undo-btn:hover { background: rgba(255,255,255,0.10); }
.toast-item.fade-out { animation: toastOut .2s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(20px); } }

/* ============================================================
 SWIPE GESTURES
 ============================================================ */
.swipeable {
 touch-action: pan-y;
 transition: transform .25s ease, background .25s ease;
 position: relative;
 overflow: hidden;
}
.swipeable.dragging { transition: none; }
.swipeable.swiped-right { background: var(--accent-soft); }
.swipeable.swipe-action-right::before {
 content: "✓";
 position: absolute;
 left: -40px;
 top: 50%;
 transform: translateY(-50%);
 color: #FFFFFF;
 background: var(--accent);
 width: 34px;
 height: 34px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 900;
 font-size: 16px;
 opacity: 0;
 transition: opacity .15s;
}
.swipeable.swipe-active.swipe-action-right::before { opacity: 1; left: 12px; }

/* ============================================================
 STREAK BADGE + FOCUS CARD
 ============================================================ */
.streak-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: var(--anchor);
 border: 1px solid var(--anchor);
 color: var(--accent);
 padding: 7px 14px;
 border-radius: 999px;
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}
.streak-badge .num {
 font-family: var(--font-sans);
 font-size: 16px;
 font-weight: 900;
 color: var(--accent);
 letter-spacing: -0.02em;
 text-transform: none;
}

.focus-card {
 background: var(--anchor);
 color: #F5F7F4;
 border: 1px solid var(--anchor);
 border-radius: var(--radius);
 padding: 18px 22px;
 margin-bottom: 20px;
 display: flex;
 align-items: center;
 gap: 18px;
 position: relative;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.focus-card::after {
 content: "";
 position: absolute;
 right: -30px; bottom: -50px;
 width: 180px; height: 180px;
 background: var(--accent);
 border-radius: 50%;
 filter: blur(80px);
 opacity: 0.10;
 pointer-events: none;
}
.focus-card .icon {
 font-size: 28px;
 flex-shrink: 0;
 position: relative;
 z-index: 1;
}
.focus-card .label {
 font-family: var(--font-mono);
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 0.22em;
 color: var(--accent);
 font-weight: 700;
 position: relative; z-index: 1;
}
.focus-card .text {
 font-size: 16px;
 font-weight: 800;
 color: #F5F7F4;
 letter-spacing: -0.02em;
 margin-top: 4px;
 position: relative; z-index: 1;
}
.focus-card .sub {
 font-size: 12px;
 color: rgba(245,247,244,0.65);
 margin-top: 4px;
 position: relative; z-index: 1;
}

/* ============================================================
 COACH — NEEDS ATTENTION
 ============================================================ */
.needs-attention {
 background: var(--surface);
 border: 1px solid var(--border);
 border-left: 3px solid var(--accent);
 border-radius: var(--radius);
 padding: 18px 22px;
 margin-bottom: 22px;
 box-shadow: var(--shadow-sm);
}
.needs-attention h3 {
 margin: 0 0 12px;
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--accent-ink);
 text-transform: uppercase;
 letter-spacing: 0.22em;
 font-weight: 800;
}
.attention-row {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 0;
 border-bottom: 1px solid var(--border);
 font-size: 13px;
}
.attention-row:last-child { border-bottom: none; }
.attention-row .name {
 font-weight: 700;
 flex: 1;
 color: var(--text);
 letter-spacing: -0.01em;
}
.attention-row .reason {
 color: var(--text-muted);
 font-size: 12px;
 margin-top: 2px;
 font-family: var(--font-mono);
 letter-spacing: 0.04em;
}
.attention-row .qr-pill {
 background: var(--accent-ink);
 color: white;
 border: none;
 padding: 6px 12px;
 border-radius: 999px;
 font-family: var(--font-mono);
 font-size: 10px;
 cursor: pointer;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 transition: background .15s;
}
.attention-row .qr-pill:hover { background: #2E3486; }

/* ============================================================
 EMPTY STATES (genérico)
 ============================================================ */
.empty-state {
 background: var(--surface);
 border: 1px dashed var(--border-strong);
 border-radius: var(--radius);
 padding: 44px 24px;
 text-align: center;
 color: var(--text-muted);
}
.empty-state h3 {
 color: var(--text);
 margin: 0 0 8px;
 font-size: 18px;
 font-weight: 900;
 letter-spacing: -0.025em;
}
.empty-state p {
 font-size: 13px;
 line-height: 1.55;
 margin: 0;
}

/* ============================================================
 WELCOME MODAL (estudiante primer login)
 ============================================================ */
.welcome-modal {
 max-width: 540px !important;
 padding: 32px 32px 24px !important;
}
.welcome-head {
 display: flex; gap: 14px; align-items: center;
 margin-bottom: 20px;
 padding-bottom: 18px;
 border-bottom: 1px solid var(--border);
}
.welcome-avatar {
 width: 56px; height: 56px;
 border-radius: 999px;
 background: linear-gradient(135deg, var(--accent), #7CC814);
 color: var(--text);
 display: flex; align-items: center; justify-content: center;
 font-weight: 900; font-size: 22px;
 flex-shrink: 0;
 border: 2px solid var(--accent);
 letter-spacing: -0.02em;
 overflow: hidden;
}
.welcome-section { margin-bottom: 18px; }
.welcome-section h4 {
 margin: 0 0 10px;
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--accent-ink);
 font-weight: 700;
}
.welcome-rules, .welcome-app {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.welcome-rules li, .welcome-app li {
 font-size: 13px;
 line-height: 1.5;
 color: var(--text);
 padding: 8px 0;
 display: flex;
 gap: 10px;
 align-items: flex-start;
}
.welcome-rules .num {
 flex-shrink: 0;
 width: 22px; height: 22px;
 border-radius: 6px;
 background: var(--anchor);
 color: var(--accent);
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 800;
 display: flex; align-items: center; justify-content: center;
 margin-top: -1px;
}
.welcome-rules b, .welcome-app b {
 color: var(--text);
 font-weight: 700;
}
.welcome-rule-gold {
 display: flex; gap: 12px; align-items: flex-start;
 background: var(--anchor);
 color: #F5F7F4;
 padding: 14px 18px;
 border-radius: var(--radius-sm);
 margin-top: 6px;
}
.welcome-rule-gold span { font-size: 22px; flex-shrink: 0; }
.welcome-rule-gold b { color: var(--accent); font-weight: 800; }

/* ============================================================
 UTIL CLASSES
 ============================================================ */
.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.eyebrow {
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--text-dim);
 font-weight: 700;
}
.eyebrow.accent { color: var(--accent-ink); }
.text-anchor { color: var(--text); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-ink); }

/* ============================================================
 RESPONSIVE — page padding adjustments
 ============================================================ */
@media (max-width: 600px) {
 .container { padding: 24px 18px 96px; }
 header.top h1 { font-size: 28px; }
 .macros-card { padding: 18px 18px; }
 .slot-card, .meal-card { padding: 16px; }
 .modal { padding: 22px 22px; }
 .login-card { padding: 28px 22px; }
}

/* ============================================================
 COACH RD1 — page header con CTA primaria
 ============================================================ */
.page-head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 16px;
 margin: 0 0 28px;
 flex-wrap: wrap;
}
.page-head .titles h1 {
 font-size: 30px;
 font-weight: 800;
 letter-spacing: -0.025em;
 margin: 0 0 6px;
 color: var(--text);
 display: inline-flex;
 align-items: center;
 gap: 12px;
}
.page-head .titles h1 .dot {
 width: 10px; height: 10px;
 border-radius: 50%;
 background: var(--accent);
 display: inline-block;
}
.page-head .titles .sub {
 font-size: 13px;
 color: var(--text-muted);
}
.page-head .cta {
 background: var(--accent);
 color: #FFFFFF;
 border: none;
 padding: 12px 22px;
 border-radius: 999px;
 font-weight: 800;
 font-size: 13px;
 letter-spacing: -0.005em;
 cursor: pointer;
 transition: transform .12s ease, background .15s;
}
.page-head .cta:hover { background: #7077DC; transform: translateY(-1px); }

/* KPIs hero (3 columnas, número dominante) */
.kpi-hero-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
 margin: 0 0 32px;
}
.kpi-hero {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 22px 24px;
 box-shadow: var(--shadow-sm);
}
.kpi-hero .label {
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.18em;
 font-weight: 700;
 margin: 0 0 14px;
}
.kpi-hero .num {
 font-family: var(--font-mono);
 font-size: 38px;
 font-weight: 600;
 color: var(--text);
 letter-spacing: -0.03em;
 line-height: 1;
}
.kpi-hero .num .unit {
 font-size: 18px;
 color: var(--text-muted);
 font-weight: 500;
 margin-left: 2px;
}
.kpi-hero .sub {
 font-size: 12px;
 color: var(--text-muted);
 margin-top: 10px;
}
.kpi-hero .bar {
 height: 5px;
 background: rgba(15,19,17,0.08);
 border-radius: 3px;
 margin-top: 12px;
 overflow: hidden;
}
.kpi-hero .bar > span {
 display: block;
 height: 100%;
 background: var(--accent);
 border-radius: 3px;
}
@media (max-width: 760px) {
 .kpi-hero-row { grid-template-columns: 1fr; }
 .page-head { flex-direction: column; align-items: flex-start; }
 .page-head .cta { width: 100%; text-align: center; }
}

/* Atención requerida — hero con severidad */
.attention-hero {
 margin: 0 0 32px;
}
.attention-hero .head {
 display: flex; align-items: baseline; justify-content: space-between;
 margin: 0 0 14px;
}
.attention-hero .head h3 {
 margin: 0;
 font-size: 18px;
 font-weight: 700;
 color: var(--text);
 letter-spacing: -0.02em;
}
.attention-hero .head .sub {
 font-size: 12px;
 color: var(--text-muted);
}
.attention-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 16px 18px 16px 22px;
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 gap: 16px;
 position: relative;
 overflow: hidden;
}
.attention-card::before {
 content: '';
 position: absolute;
 left: 0; top: 0; bottom: 0;
 width: 4px;
 background: var(--text-muted);
}
.attention-card.sev-red::before { background: var(--red); }
.attention-card.sev-amber::before { background: #BA7517; }
.attention-card.sev-green::before { background: var(--accent-ink); }
.attention-card .avatar {
 width: 38px; height: 38px;
 border-radius: 50%;
 background: var(--surface-2);
 color: var(--text);
 font-weight: 700;
 font-size: 14px;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0;
 overflow: hidden;
}
.attention-card .avatar img { width:100%; height:100%; object-fit:cover; }
.attention-card .body { flex: 1; min-width: 0; }
.attention-card .body .name {
 font-weight: 700;
 color: var(--text);
 font-size: 14px;
 margin: 0 0 3px;
}
.attention-card .body .reason {
 font-size: 12px;
 color: var(--text-muted);
}
.attention-card .actions-mini {
 display: flex; gap: 8px;
 flex-shrink: 0;
}
.attention-card .btn-wa {
 background: var(--accent);
 color: #000000;
 border: none;
 padding: 10px 18px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
 transition: background .18s, transform .12s;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30),
 inset 0 0.5px 0 rgba(255,255,255,0.30);
 letter-spacing: -0.01em;
}
.attention-card .btn-wa:hover { background: var(--accent-strong); transform: translateY(-1px); }
.attention-card .btn-ghost {
 background: rgba(255,255,255,0.08); color: var(--text);
 border: 0.5px solid rgba(255,255,255,0.18);
 padding: 10px 18px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: background .18s;
 box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.10);
 letter-spacing: -0.01em;
}
.attention-card .btn-ghost:hover { background: rgba(255,255,255,0.14); }
@media (max-width: 600px) {
 .attention-card { flex-wrap: wrap; }
 .attention-card .actions-mini { width: 100%; }
 .attention-card .btn-wa, .attention-card .btn-ghost { flex: 1; }
}

/* Tabla densa de clientes */
.client-table-wrap {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
}
.client-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 13px;
}
.client-table thead th {
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.16em;
 font-weight: 700;
 text-align: left;
 padding: 16px 18px;
 border-bottom: 1px solid var(--border);
 background: var(--surface-2);
}
.client-table thead th.num-col,
.client-table tbody td.num-col {
 text-align: right;
 font-family: var(--font-mono);
}
.client-table tbody tr {
 border-bottom: 1px solid var(--border);
 transition: background .12s;
 cursor: pointer;
}
.client-table tbody tr:last-child { border-bottom: none; }
.client-table tbody tr:hover { background: var(--surface-2); }
.client-table tbody td {
 padding: 16px 18px;
 color: var(--text);
 vertical-align: middle;
}
.client-table .cli-name {
 display: flex; align-items: center; gap: 12px;
 font-weight: 600;
 min-width: 160px;
}
.client-table .cli-avatar {
 width: 32px; height: 32px;
 border-radius: 50%;
 background: var(--surface-2);
 color: var(--text);
 font-weight: 700;
 font-size: 12px;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0;
 overflow: hidden;
 border: 1px solid var(--border);
}
.client-table .cli-avatar img { width:100%; height:100%; object-fit:cover; }
.client-table .adh-cell {
 font-weight: 600;
}
.client-table .adh-cell.lo { color: var(--red); }
.client-table .adh-cell.mid { color: #BA7517; }
.client-table .adh-cell.hi { color: var(--accent-ink); }
.client-table .goal-tag {
 display: inline-block;
 padding: 3px 10px;
 border-radius: 999px;
 font-size: 11px;
 background: var(--surface-2);
 color: var(--text);
 font-weight: 500;
 border: 1px solid var(--border);
}
.client-table .notes-btn {
 background: transparent;
 border: 1px solid var(--border);
 border-radius: 6px;
 width: 28px; height: 28px;
 cursor: pointer;
 color: var(--text-muted);
 display: inline-flex; align-items: center; justify-content: center;
 transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.client-table .notes-btn:hover {
 background: var(--surface-2); color: var(--text); border-color: var(--border-strong);
}
.client-table .notes-btn.has-notes {
 background: var(--accent);
 border-color: var(--accent);
 color: #FFFFFF;
}

/* Invitaciones — fila compacta */
.invite-row-2 {
 display: flex; align-items: center; gap: 12px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 padding: 12px 16px;
 margin-bottom: 8px;
 font-size: 13px;
}
.invite-row-2 .code-pill {
 font-family: var(--font-mono);
 font-weight: 700;
 background: var(--surface-2);
 color: var(--text);
 padding: 5px 12px;
 border-radius: 6px;
 font-size: 12px;
 letter-spacing: 0.06em;
}
.invite-row-2 .meta { color: var(--text-muted); font-size: 12px; flex: 1; }
.invite-row-2 .copy-btn-2 {
 background: transparent;
 border: 1px solid var(--border-strong);
 color: var(--text);
 border-radius: 6px;
 padding: 6px 12px;
 font-size: 12px;
 font-weight: 600;
 cursor: pointer;
 transition: background .15s;
}
.invite-row-2 .copy-btn-2:hover { background: var(--surface-2); }

/* Sección con título grande */
.section-head-2 {
 display: flex; align-items: baseline; justify-content: space-between;
 margin: 0 0 14px;
}
.section-head-2 h3 {
 margin: 0;
 font-size: 16px;
 font-weight: 700;
 color: var(--text);
 letter-spacing: -0.015em;
}
.section-head-2 .sub { font-size: 12px; color: var(--text-muted); }
.section-block { margin: 0 0 32px; }

/* ============================================================
 COMPONENTES DESCONTINUADOS — quedan stubs vacíos por seguridad
 ============================================================ */
.page-badge, .hero-dark, .kpi-top, .day-strip, .day-strip-head,
.macros-pl, .coach-note, .pl-seg, .meal-pill { display: none !important; }

/* Card hero negra estilo "SESIÓN A · PECHO + TRÍCEPS" — DESACTIVADA */
/* ============================================================
 CALENDARIO 3D STRIP — 7 cards compactas, HOY gigante
 ============================================================ */
.cal-strip-wrap {
 perspective: 1400px;
 perspective-origin: 50% 30%;
 padding: 22px 0 30px;
 overflow: visible;
}
.cal-strip {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px;
 transform: rotateX(6deg) rotateY(-2deg);
 transform-style: preserve-3d;
 transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cal-strip-wrap:hover .cal-strip {
 transform: rotateX(3deg) rotateY(-1deg);
}
.cal-card {
 width: 80px;
 min-height: 108px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 12px 10px 10px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px;
 cursor: pointer;
 transition: transform .35s cubic-bezier(.4,0,.2,1),
 box-shadow .35s cubic-bezier(.4,0,.2,1),
 background .2s, border-color .2s;
 box-shadow:
 0 1px 2px rgba(10,10,10,0.04),
 0 12px 24px rgba(10,10,10,0.06);
 transform: translateZ(2px);
}
.cal-card .cal-day {
 font-size: 10px;
 color: var(--text-dim);
 font-family: var(--font-mono);
 font-weight: 700;
 letter-spacing: 0.10em;
 text-transform: uppercase;
}
.cal-card .cal-num {
 font-size: 28px;
 font-weight: 800;
 color: var(--text);
 line-height: 1;
 letter-spacing: -0.02em;
 margin-top: 2px;
}
.cal-card .cal-dots {
 display: flex;
 gap: 3px;
 margin-top: auto;
 padding-top: 38px;
 flex-wrap: wrap;
}
.cal-card .cal-dot {
 width: 14px;
 height: 3px;
 background: var(--accent);
 border-radius: 2px;
}
.cal-card .cal-dot.group { background: var(--orange); }

.cal-card:hover {
 transform: translateZ(14px) translateY(-2px);
 box-shadow:
 0 4px 8px rgba(10,10,10,0.06),
 0 22px 44px rgba(10,10,10,0.14);
 z-index: 2;
}
.cal-card.is-past {
 opacity: 0.85;
}
.cal-card.is-past .cal-num { color: var(--text-muted); }
.cal-card.is-future {
 border-style: dashed;
 background: transparent;
 box-shadow: none;
 transform: translateZ(0);
 opacity: 0.7;
}
.cal-card.is-future .cal-num { color: var(--text-dim); }
.cal-card.is-future .cal-dot { background: var(--border-strong); }

.cal-card.is-today {
 width: 90px;
 min-height: 122px;
 background: var(--anchor);
 border-color: var(--accent);
 color: #FFFFFF;
 transform: translateZ(28px) translateY(-8px) scale(1.04);
 box-shadow:
 0 10px 22px rgba(94,106,210,0.42),
 0 26px 56px rgba(10,10,10,0.20);
 z-index: 3;
 opacity: 1;
}
.cal-card.is-today .cal-day {
 color: var(--accent);
 font-weight: 800;
}
.cal-card.is-today .cal-num {
 color: #FFFFFF;
 font-size: 36px;
}
.cal-card.is-today .cal-dot { background: var(--accent); }

.cal-card.is-selected:not(.is-today) {
 border-color: var(--accent);
 border-width: 2px;
 transform: translateZ(20px) translateY(-4px);
 box-shadow:
 0 8px 16px rgba(94,106,210,0.22),
 0 22px 44px rgba(10,10,10,0.14);
}

/* Panel de eventos del día seleccionado */
.cal-events {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 20px 22px;
 margin-top: 14px;
 box-shadow: var(--shadow-sm);
}
.cal-events .ce-head {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 margin-bottom: 14px;
 padding-bottom: 12px;
 border-bottom: 1px solid var(--border);
}
.cal-events .ce-head .ce-title {
 font-size: 17px;
 font-weight: 800;
 color: var(--text);
 letter-spacing: -0.02em;
}
.cal-events .ce-head .ce-meta {
 font-size: 12px;
 color: var(--text-muted);
 font-family: var(--font-mono);
 letter-spacing: 0.06em;
}
.cal-events .ce-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.cal-events .ce-evt {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 12px 14px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-left: 3px solid var(--accent);
 border-radius: 10px;
 cursor: pointer;
 transition: transform .12s, box-shadow .15s;
}
.cal-events .ce-evt:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(10,10,10,0.06);
}
.cal-events .ce-evt.group { border-left-color: var(--orange); }
.cal-events .ce-evt .ce-time {
 font-family: var(--font-mono);
 font-size: 12px;
 font-weight: 700;
 color: var(--accent-ink);
 letter-spacing: 0.06em;
 flex: 0 0 56px;
}
.cal-events .ce-evt .ce-body { flex: 1; min-width: 0; }
.cal-events .ce-evt .ce-body .ce-name {
 font-size: 13px;
 font-weight: 600;
 color: var(--text);
}
.cal-events .ce-evt .ce-body .ce-sub {
 font-size: 11px;
 color: var(--text-muted);
 margin-top: 2px;
}
.cal-events .ce-empty {
 padding: 22px 14px;
 text-align: center;
 font-size: 13px;
 color: var(--text-muted);
}
.cal-events .ce-add {
 width: 100%;
 margin-top: 10px;
 padding: 11px;
 background: transparent;
 border: 1px dashed var(--border-strong);
 border-radius: 10px;
 cursor: pointer;
 color: var(--text-muted);
 font-weight: 600;
 font-size: 13px;
 transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.cal-events .ce-add:hover {
 background: var(--accent-soft);
 color: var(--accent-ink);
 border-color: var(--accent);
}

@media (max-width: 800px) {
 .cal-strip-wrap { perspective: none; padding: 12px 0 18px; overflow-x: auto; }
 .cal-strip { transform: none; justify-content: flex-start; padding: 0 8px; }
 .cal-card,
 .cal-card:hover,
 .cal-card.is-today,
 .cal-card.is-selected {
 transform: none !important;
 flex-shrink: 0;
 }
 .cal-card.is-today { box-shadow: 0 4px 14px rgba(94,106,210,0.30); }
}

/* ============================================================
 APPLE FITNESS — componentes nuevos
 ============================================================ */

/* Page header Apple-style: H1 huge + subtitle + acción a la derecha */
.af-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 14px;
 margin: 8px 0 22px;
 padding: 0;
}
.af-head .af-titles h1 {
 font-size: 34px;
 font-weight: 700;
 letter-spacing: -0.024em;
 line-height: 1.05;
 margin: 0;
 color: var(--text);
}
.af-head .af-titles .af-sub {
 font-size: 14px;
 color: var(--text-muted);
 margin-top: 4px;
 letter-spacing: -0.005em;
}
.af-head .af-act {
 width: 44px; height: 44px;
 border-radius: 50%;
 background: var(--surface);
 border: 0.5px solid var(--border);
 color: var(--text);
 display: inline-flex; align-items: center; justify-content: center;
 cursor: pointer;
 transition: background .15s;
}
.af-head .af-act:hover { background: var(--surface-2); }
.af-head .af-act svg { width: 18px; height: 18px; }
.af-head .af-act.lime {
 background: var(--accent);
 color: #000000;
 border-color: transparent;
}
.af-head .af-act.lime:hover { background: var(--accent-strong); }

/* Card Apple Fitness — surface oscuro, radius 22, padding generoso */
.af-card {
 background: var(--surface);
 border-radius: 22px;
 padding: 22px 24px;
 color: var(--text);
 margin-bottom: 14px;
}
.af-card .af-card-title {
 font-size: 20px;
 font-weight: 700;
 letter-spacing: -0.02em;
 margin: 0 0 18px;
 color: var(--text);
}
.af-card .af-card-eyebrow {
 font-size: 12px;
 color: var(--text-muted);
 margin-bottom: 4px;
 font-weight: 500;
}

/* Anillos hero (estilo Activity Rings) */
.af-rings {
 display: flex;
 align-items: center;
 gap: 24px;
}
.af-rings-svg {
 flex-shrink: 0;
 width: 140px;
 height: 140px;
}
.af-rings-legend {
 display: flex;
 flex-direction: column;
 gap: 8px;
 flex: 1;
}
.af-rings-legend .leg {
 display: flex;
 align-items: center;
 gap: 12px;
}
.af-rings-legend .leg .arrow {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 14px;
 width: 22px;
 color: var(--text);
}
.af-rings-legend .leg .lbl {
 font-size: 18px;
 font-weight: 600;
 color: var(--text);
 letter-spacing: -0.01em;
}
.af-rings-legend .leg .val {
 font-size: 13px;
 color: var(--text-muted);
 margin-left: auto;
 font-variant-numeric: tabular-nums;
}
.af-rings-legend .leg.red .arrow { color: var(--ring-red); }
.af-rings-legend .leg.green .arrow { color: var(--ring-green); }
.af-rings-legend .leg.blue .arrow { color: var(--ring-blue); }

/* Bento grid 2x2 (Apple Fitness summary) */
.af-bento {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 margin-bottom: 14px;
}
.af-bento .af-tile {
 background: var(--surface);
 border-radius: 22px;
 padding: 18px 20px;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 transition: background .15s, transform .15s;
}
.af-bento .af-tile:hover { background: var(--surface-2); transform: translateY(-1px); }
.af-bento .af-tile .tile-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 10px;
}
.af-bento .af-tile .tile-name {
 font-size: 16px;
 font-weight: 600;
 color: var(--text);
}
.af-bento .af-tile .tile-chev {
 color: var(--text-dim);
 width: 18px; height: 18px;
}
.af-bento .af-tile .tile-meta {
 font-size: 13px;
 color: var(--text-muted);
 margin-top: 6px;
}
.af-bento .af-tile .tile-num {
 font-size: 30px;
 font-weight: 700;
 color: var(--accent);
 letter-spacing: -0.02em;
 line-height: 1;
 margin-top: 4px;
}
.af-bento .af-tile .tile-num .tile-unit {
 font-size: 14px;
 font-weight: 600;
 color: var(--text-muted);
 margin-left: 4px;
}
.af-bento .af-tile .tile-num.muted { color: var(--text-dim); }
.af-bento .af-tile .tile-num.red { color: var(--ring-red); }
.af-bento .af-tile .tile-num.blue { color: var(--ring-blue); }
.af-bento .af-tile .tile-spark {
 display: flex;
 gap: 2px;
 align-items: flex-end;
 height: 36px;
 margin-top: 12px;
}
.af-bento .af-tile .tile-spark .bar {
 flex: 1;
 background: var(--surface-3);
 border-radius: 1px;
 min-height: 2px;
}
.af-bento .af-tile .tile-spark .bar.lit { background: var(--accent); }
.af-bento .af-tile .tile-axis {
 display: flex; justify-content: space-between;
 font-size: 10px; color: var(--text-dim);
 margin-top: 4px;
 font-variant-numeric: tabular-nums;
}

/* CTA huge pill (Comenzar / Empezar sesión) */
.af-cta {
 display: block;
 width: 100%;
 background: var(--accent);
 color: #000000;
 border: none;
 padding: 18px 22px;
 border-radius: 999px;
 font-size: 17px;
 font-weight: 700;
 cursor: pointer;
 text-align: center;
 letter-spacing: -0.01em;
 transition: background .15s, transform .12s;
 margin: 8px 0;
}
.af-cta:hover { background: var(--accent-strong); transform: translateY(-1px); }
.af-cta.subtle {
 background: var(--surface);
 color: var(--text);
}
.af-cta.subtle:hover { background: var(--surface-2); }

/* Icon-led card (estilo "Caminata al aire libre" con icono lima + play) */
.af-ico-card {
 background: var(--accent);
 color: #000000;
 border-radius: 24px;
 padding: 22px 22px 24px;
 position: relative;
 margin-bottom: 12px;
 overflow: hidden;
}
.af-ico-card.dark {
 background: var(--surface);
 color: var(--text);
}
.af-ico-card.dark .ico-icon { color: var(--accent); }
.af-ico-card .ico-icon {
 width: 44px; height: 44px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #000000;
}
.af-ico-card .ico-icon svg { width: 100%; height: 100%; }
.af-ico-card .ico-title {
 font-size: 22px;
 font-weight: 700;
 margin-top: 14px;
 letter-spacing: -0.02em;
}
.af-ico-card .ico-meta {
 font-size: 13px;
 margin-top: 4px;
 opacity: 0.75;
}
.af-ico-card .ico-play {
 position: absolute;
 top: 22px; right: 22px;
 width: 52px; height: 52px;
 border-radius: 50%;
 background: var(--accent);
 color: #000000;
 border: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 box-shadow: 0 4px 14px rgba(200,255,0,0.30);
 transition: transform .12s;
}
.af-ico-card .ico-play:hover { transform: scale(1.05); }
.af-ico-card.dark .ico-play { background: var(--accent); color: #000000; }
.af-ico-card .ico-play svg { width: 22px; height: 22px; margin-left: 2px; }
.af-ico-card .ico-row {
 display: flex; gap: 10px;
 margin-top: 18px;
}
.af-ico-card .ico-row .pill {
 flex: 1;
 background: rgba(0,0,0,0.10);
 border-radius: 12px;
 padding: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: rgba(0,0,0,0.55);
}
.af-ico-card.dark .ico-row .pill { background: var(--surface-2); color: var(--text-muted); }
.af-ico-card .ico-row .pill svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
 .af-head .af-titles h1 { font-size: 30px; }
 .af-bento { gap: 10px; }
 .af-card { padding: 18px 20px; border-radius: 20px; }
 .af-rings-svg { width: 120px; height: 120px; }
}

/* ============================================================
   MINI CALENDARIO Apple Health (4 semanas — usado en /semana y ficha cliente)
   ============================================================ */
.mini-cal-head { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-bottom:10px; }
.mini-cal-head div { text-align:center; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:0.08em; }
.mini-cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
.mini-cal-day { aspect-ratio:1; background:var(--surface-2); border-radius:12px; padding:8px 6px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; position:relative; transition:transform .15s, background .15s; }
.mini-cal-day:hover { background:var(--surface-3); transform:scale(1.04); }
.mini-cal-day.clickable { cursor:pointer; }
.mini-cal-day.clickable:hover { background:rgba(200,255,0,0.10); outline:1px solid rgba(200,255,0,0.30); }
.mini-cal-day .d-num { font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--text); letter-spacing:-0.01em; }
.mini-cal-day .d-dots { display:flex; gap:3px; align-items:center; min-height:6px; flex-wrap:wrap; justify-content:center; }
.mini-cal-day .dot { width:5px; height:5px; border-radius:50%; display:block; }
.mini-cal-day .dot-meal { background:var(--accent); }
.mini-cal-day .dot-workout { background:var(--ring-blue); }
.mini-cal-day.is-today { background:transparent; border:2px solid var(--accent); }
.mini-cal-day.is-today .d-num { color:var(--accent); }
@media (max-width: 500px) {
    .mini-cal-day { padding:4px 2px; border-radius:10px; }
    .mini-cal-day .d-num { font-size:13px; }
    .mini-cal-head { gap:4px; }
    .mini-cal-grid { gap:4px; }
}

/* ============================================================
 CALENDARIO MES — grid Apple Calendar style
 ============================================================ */
.month-wrap {
 background: var(--surface);
 border-radius: 22px;
 padding: 22px 24px 26px;
 margin-bottom: 14px;
}
.month-head {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 8px;
 margin-bottom: 10px;
}
.month-head div {
 text-align: center;
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 700;
 color: var(--text-muted);
 letter-spacing: 0.10em;
 padding: 6px 0;
}
.month-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 8px;
}
.month-cell {
 aspect-ratio: 1;
 background: var(--surface-2);
 border-radius: 12px;
 padding: 8px 10px;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 justify-content: space-between;
 position: relative;
 cursor: pointer;
 transition: transform .15s, background .15s, border-color .15s;
 border: 0.5px solid transparent;
 min-height: 64px;
}
.month-cell:hover { background: var(--surface-3); transform: scale(1.02); }
.month-cell .mc-num {
 font-family: var(--font-mono);
 font-size: 14px;
 font-weight: 700;
 color: var(--text);
 letter-spacing: -0.01em;
}
.month-cell .mc-dots {
 display: flex;
 gap: 3px;
 flex-wrap: wrap;
 align-items: flex-end;
}
.month-cell .mc-dot {
 width: 5px; height: 5px;
 border-radius: 50%;
 background: var(--accent);
}
.month-cell .mc-dot.group { background: var(--orange); }
.month-cell.is-other-month { opacity: 0.30; }
.month-cell.is-other-month .mc-num { color: var(--text-dim); }
.month-cell.is-today {
 background: transparent;
 border-color: var(--accent);
}
.month-cell.is-today .mc-num { color: var(--accent); }
.month-cell.is-selected {
 background: var(--accent);
}
.month-cell.is-selected .mc-num { color: #000000; }
.month-cell.is-selected .mc-dot { background: #000000; }
.month-cell.has-events::after {
 content: "";
 position: absolute;
 top: 8px; right: 8px;
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--accent);
 box-shadow: 0 0 0 2px var(--surface-2);
}
.month-cell.is-today.has-events::after { box-shadow: none; }
.month-cell.is-selected.has-events::after { background: #000000; box-shadow: none; }

@media (max-width: 600px) {
 .month-wrap { padding: 16px 14px 20px; border-radius: 18px; }
 .month-cell { padding: 6px 6px; min-height: 52px; border-radius: 10px; }
 .month-cell .mc-num { font-size: 12px; }
 .month-head div { font-size: 10px; }
}

/* Day view — lista grande de eventos del día */
.day-view-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 4px;
 margin-bottom: 18px;
}
.day-view-head .dv-title {
 font-size: 24px;
 font-weight: 700;
 color: var(--text);
 letter-spacing: -0.02em;
}
.day-view-head .dv-nav {
 display: flex;
 gap: 8px;
 align-items: center;
}
.day-view-head .dv-nav button {
 width: 36px; height: 36px;
 border-radius: 50%;
 background: var(--surface);
 border: 0.5px solid var(--border);
 color: var(--text);
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: background .15s;
 font-size: 14px;
 font-weight: 600;
}
.day-view-head .dv-nav button:hover { background: var(--surface-2); }
.day-view-timeline {
 background: var(--surface);
 border-radius: 22px;
 padding: 20px 22px 24px;
}
.day-view-slot {
 display: grid;
 grid-template-columns: 64px 1fr;
 gap: 14px;
 padding: 14px 0;
 border-bottom: 0.5px solid var(--border);
 align-items: start;
}
.day-view-slot:last-child { border-bottom: none; }
.day-view-slot .dv-hour {
 font-family: var(--font-mono);
 font-size: 13px;
 font-weight: 600;
 color: var(--text-muted);
 letter-spacing: 0.04em;
 text-align: right;
 padding-top: 2px;
}
.day-view-slot .dv-events {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.day-view-slot .dv-event {
 background: var(--accent-soft);
 border-left: 3px solid var(--accent);
 border-radius: 10px;
 padding: 10px 14px;
 cursor: pointer;
 transition: transform .12s, box-shadow .15s;
}
.day-view-slot .dv-event:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.30); }
.day-view-slot .dv-event.group { border-left-color: var(--orange); background: rgba(255,159,10,0.10); }
.day-view-slot .dv-event .dv-name {
 font-size: 14px;
 font-weight: 600;
 color: var(--text);
}
.day-view-slot .dv-event .dv-sub {
 font-size: 12px;
 color: var(--text-muted);
 margin-top: 2px;
}
.day-view-empty {
 text-align: center;
 color: var(--text-muted);
 padding: 40px 20px;
 font-size: 14px;
}

/* ============================================================
 APPLE — inputs, search, tabs internas, settings (overrides finales)
 ============================================================ */

/* Checkbox Apple iOS-style — círculo grande con check lima cuando activo */
input[type="checkbox"] {
 appearance: none;
 -webkit-appearance: none;
 width: 24px; height: 24px;
 border: 2px solid var(--surface-3);
 border-radius: 50%;
 background: transparent;
 cursor: pointer;
 position: relative;
 flex-shrink: 0;
 transition: background .15s, border-color .15s, transform .15s cubic-bezier(.34,1.56,.64,1);
 vertical-align: middle;
 margin: 0;
}
input[type="checkbox"]:hover { border-color: var(--text-muted); }
input[type="checkbox"]:checked {
 background: var(--accent);
 border-color: var(--accent);
 transform: scale(1.05);
}
input[type="checkbox"]:checked::after {
 content: "";
 position: absolute;
 left: 6px; top: 2px;
 width: 6px; height: 11px;
 border: solid #000000;
 border-width: 0 2.5px 2.5px 0;
 transform: rotate(45deg);
}
input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(200,255,0,0.20); }

/* Shopping table — fila tipo iOS settings */
.shop-table tbody tr {
 transition: opacity .2s, background .15s;
}
.shop-table tbody tr.checked { opacity: 0.45; }
.shop-table tbody tr.checked td { text-decoration: line-through; color: var(--text-muted); }
.shop-table input[type="checkbox"] { accent-color: var(--accent); }

/* Inputs globales dark Apple-style */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="datetime-local"],
input[type="date"],
input[type="tel"],
input[type="url"],
select,
textarea {
 background: var(--surface);
 border: 0.5px solid rgba(255,255,255,0.10);
 border-radius: 14px;
 padding: 14px 16px;
 font-size: 15px;
 color: var(--text);
 font-family: var(--font-sans);
 transition: border-color .18s, background .18s, box-shadow .18s;
 width: 100%;
 box-sizing: border-box;
 outline: none;
 appearance: none;
 -webkit-appearance: none;
}
input::placeholder, textarea::placeholder {
 color: var(--text-dim);
}
input:focus,
select:focus,
textarea:focus {
 background: var(--surface-2);
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(200,255,0,0.18);
}
input:disabled, textarea:disabled, select:disabled {
 opacity: 0.55;
 background: var(--surface);
}
select {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 14px center;
 background-size: 18px;
 padding-right: 42px;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

/* Label estilo Apple (encima del input) */
label {
 color: var(--text-muted);
 font-size: 13px;
 font-weight: 500;
}

/* Search input — pill con icono lupa */
.af-search {
 position: relative;
 display: block;
 margin-bottom: 14px;
}
.af-search input {
 padding-left: 44px;
 border-radius: 999px;
 background: var(--surface);
 height: 44px;
 padding-top: 0; padding-bottom: 0;
 font-size: 15px;
}
.af-search::before {
 content: "";
 position: absolute;
 left: 16px; top: 50%;
 width: 16px; height: 16px;
 transform: translateY(-50%);
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E") no-repeat center;
 background-size: contain;
 pointer-events: none;
 z-index: 1;
}

/* Inner tabs Apple (sub-pill segmented dentro de páginas) */
.inner-tabs {
 display: inline-flex;
 background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.10);
 border-radius: 999px;
 padding: 4px;
 gap: 2px;
 margin: 0 0 18px;
 box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06);
}
.inner-tabs button {
 background: transparent;
 border: none;
 padding: 9px 18px;
 font-size: 13px;
 cursor: pointer;
 border-radius: 999px;
 color: var(--text-muted);
 font-family: var(--font-sans);
 font-weight: 600;
 letter-spacing: -0.005em;
 transition: background .18s, color .18s, transform .12s;
 display: inline-flex;
 align-items: center;
 gap: 6px;
}
.inner-tabs button:hover {
 color: var(--text);
 background: rgba(255,255,255,0.04);
}
.inner-tabs button:active { transform: scale(0.97); }
.inner-tabs button.active {
 background: var(--accent);
 color: #000000;
 font-weight: 700;
 box-shadow: 0 2px 8px rgba(200,255,0,0.30),
 inset 0 0.5px 0 rgba(255,255,255,0.30);
}

/* Detail tabs (tabs del detalle cliente: General/Métricas/Fotos…) */
.detail-tabs {
 display: flex;
 gap: 4px;
 margin-bottom: 18px;
 border-bottom: 0.5px solid var(--border);
 overflow-x: auto;
 padding-bottom: 0;
 -webkit-overflow-scrolling: touch;
}
.detail-tabs button {
 background: transparent;
 border: none;
 padding: 12px 16px;
 font-size: 14px;
 color: var(--text-muted);
 border-bottom: 2px solid transparent;
 cursor: pointer;
 white-space: nowrap;
 font-family: var(--font-sans);
 font-weight: 600;
 transition: color .18s, border-color .18s;
}
.detail-tabs button.active {
 color: var(--accent);
 border-bottom-color: var(--accent);
 font-weight: 700;
}
.detail-tabs button:hover { color: var(--text); }

/* Brand form Apple (Mi marca) */
.brand-form {
 background: var(--surface) !important;
 border: none !important;
 border-radius: 22px !important;
 padding: 24px 26px !important;
 box-shadow: none !important;
}
.brand-form h3 { font-size: 18px; font-weight: 700; margin: 0 0 18px; color: var(--text); letter-spacing: -0.015em; }
.brand-form .field { margin-bottom: 18px; }
.brand-form label {
 text-transform: none !important;
 letter-spacing: -0.005em !important;
 font-size: 13px !important;
 font-weight: 600 !important;
 color: var(--text) !important;
 margin-bottom: 8px !important;
}
.brand-form input,
.brand-form textarea {
 background: var(--surface-2) !important;
 border: 0.5px solid rgba(255,255,255,0.10) !important;
 border-radius: 12px !important;
 padding: 12px 14px !important;
 font-size: 15px !important;
 color: var(--text) !important;
}
.brand-form .help {
 font-size: 12px;
 color: var(--text-muted);
 margin-top: 6px;
}

/* Settings nav (sidebar dentro de Ajustes) */
.settings-nav button,
.settings-nav .nav-btn {
 background: transparent;
 border: none;
 padding: 12px 16px;
 font-size: 14px;
 color: var(--text-muted);
 cursor: pointer;
 border-radius: 12px;
 text-align: left;
 display: flex;
 align-items: center;
 gap: 10px;
 font-family: var(--font-sans);
 font-weight: 600;
 width: 100%;
 transition: background .18s, color .18s;
}
.settings-nav button:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.settings-nav button.active,
.settings-nav .nav-btn.active {
 background: var(--surface);
 color: var(--accent);
 font-weight: 700;
}

/* Theme picker (botones claro/oscuro/sistema) */
.theme-picker {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}
.theme-picker button {
 background: var(--surface);
 border: 0.5px solid rgba(255,255,255,0.10);
 padding: 12px 18px;
 border-radius: 14px;
 color: var(--text);
 font-size: 14px;
 cursor: pointer;
 transition: background .18s, color .18s, transform .18s, border-color .18s;
 font-family: var(--font-sans);
 font-weight: 600;
}
.theme-picker button:hover { background: var(--surface-2); }
.theme-picker button.on {
 background: var(--accent);
 color: #000000;
 border-color: transparent;
 font-weight: 700;
}

/* Cards de stat con superficie dark (fix backgrounds invisibles) */
.stat-grid .stat {
 background: var(--surface-2) !important;
 border: 0.5px solid rgba(255,255,255,0.08) !important;
 border-radius: 14px !important;
 padding: 14px 16px !important;
}
.stat-grid .stat .v { color: var(--text) !important; font-weight: 700 !important; font-size: 22px !important; }
.stat-grid .stat label {
 color: var(--text-muted) !important;
 font-weight: 500 !important;
 text-transform: none !important;
 letter-spacing: -0.005em !important;
 font-size: 12px !important;
}

/* Welcome modal y otros modales: fondo dark */
.modal {
 background: var(--surface) !important;
 border-radius: 22px !important;
 border: 0.5px solid rgba(255,255,255,0.10) !important;
 color: var(--text) !important;
}
.modal-bg {
 background: rgba(0,0,0,0.72) !important;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}
.modal h3 { color: var(--text); font-weight: 700; letter-spacing: -0.015em; }

/* ============================================================
 PRINT — clean output
 ============================================================ */
@media print {
 body::before { display: none; }
 .app-nav, .toolbar, .actions, .btn { display: none !important; }
 .container { padding: 0; max-width: 100%; }
}

/* GPU layer + containment para cards repetidas (perf) */
.af-tile, .af-card, .cal-card, .meal-card, .ex-card, .wkout-card,
.attention-card, .month-cell, .mini-cal-day, .day-view-slot {
    contain: layout style;
    transform: translateZ(0);
}