/* Rediseño "oscuro cálido" (estilo Imperial 41): serif para títulos y cifras, mono para etiquetas.
   Se enlaza después del <style> de cada página para sobrescribir sus componentes. */
:root {
    --page: #171614; --bg: #1e1d1a; --surface: #252420; --surface-2: #2d2b27;
    --line: #36332e; --line-soft: #2b2925;
    --fg: #ece8e1; --muted: #9a948a; --faint: #6c675f;
    --accent: #e27b56; --accent-soft: #3a2a22; --accent-line: #5a3a2c; --on-accent: #1e1d1a;
    --good: #74c27a; --good-soft: #1f2d21; --warn: #d8b25e; --warn-soft: #332a1b;
    --prot: #8fb3c9; --carbs: #d8b25e; --fat: #e8b49a; --over: #d9534f;
    --cream: #efeae2; --on-cream: #1e1d1a; --scrim: rgba(10, 9, 8, .62);
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
    color-scheme: dark;
}

html { background: var(--bg); }
body {
    background: var(--bg) !important;
    color: var(--fg);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.tnum, .tabular-nums { font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
::selection { background: var(--accent-soft); color: var(--fg); }
::-webkit-scrollbar-thumb { background: var(--line); }

/* Iconos de línea */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.ic.sm { width: 15px; height: 15px; }
.ic.lg { width: 22px; height: 22px; }

/* Superficies */
.glass, .glass-card, .glass-dark, .calendario-glass {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.glass-card:hover { border-color: var(--accent-line) !important; }

.meal-card, .day-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.meal-card:active { background: var(--surface-2); }
.meal-card.has-food { border-left: 1px solid var(--line); }
.day-card.today { border-color: var(--accent-line); background: var(--accent-soft); }

/* Marca */
.brand-mark {
    width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent);
    display: inline-grid; place-items: center; flex: none;
}
.brand-mark .ic { width: 17px; height: 17px; stroke-width: 1.9; }
.brand-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1; }

/* Navegación inferior en píldora */
.bottom-nav {
    background: transparent !important;
    border-top: 0 !important;
    backdrop-filter: none !important;
    padding: 0 12px calc(env(safe-area-inset-bottom) + 10px) !important;
    pointer-events: none;
}
.bottom-nav > div {
    pointer-events: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px !important;
    gap: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.bottom-nav .nav-item {
    flex: 1;
    flex-direction: row !important;
    justify-content: center;
    gap: 6px;
    padding: 9px 4px !important;
    border-radius: 999px;
    color: var(--muted) !important;
}
.bottom-nav .nav-item svg { width: 18px !important; height: 18px !important; stroke-width: 1.7; }
.bottom-nav .nav-item span { margin-top: 0 !important; font-size: .78rem; }
.bottom-nav .nav-item.active { background: var(--cream); color: var(--on-cream) !important; }

/* Selector de días */
.day-chip {
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--muted);
}
.day-chip .text-lg, .day-chip .font-bold, .day-chip div:nth-child(2) { font-family: var(--serif); font-weight: 400; color: var(--fg); }
.day-chip.active { background: var(--cream); color: var(--on-cream); font-weight: 400; }
.day-chip.active * { color: var(--on-cream) !important; }
.day-chip.today:not(.active) { border: 0; }
.day-chip.today:not(.active) div:first-child { color: var(--accent); }

/* KPIs del día */
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kpi {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 9px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kpi .k { font-family: var(--mono); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-family: var(--serif); font-size: 1.32rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .v small { font-family: var(--sans); font-size: .66rem; color: var(--muted); margin-left: 1px; }
.kpi .s { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.hot { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.kpi.hot .k, .kpi.hot .v small { color: var(--on-accent); opacity: .78; }
.kpi.hot .s, .kpi.hot .s * { color: var(--on-accent) !important; opacity: .85; }
.kpi .macro-bar { margin-top: 4px; }
.kpi.hot .macro-bar { background: rgba(0, 0, 0, .18); }
.kpi.hot .macro-bar-fill { background: var(--on-accent) !important; }

.macro-bar, .progress-bar { background: var(--line) !important; }
.progress-fill { background: var(--accent) !important; }
.progress-fill.prot { background: var(--prot) !important; }
.progress-fill.carbs { background: var(--carbs) !important; }
.progress-fill.fat { background: var(--fat) !important; }
.progress-fill.danger { background: var(--over) !important; }

/* Tarjetas de momento */
.momento-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.momento-t { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; display: flex; align-items: center; gap: 8px; }
.momento-t .ic { color: var(--muted); }
.badge {
    font-family: var(--mono); font-size: .68rem; color: var(--muted); padding: 3px 8px;
    border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
}
.badge.acc { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.add-dashed {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    padding: 9px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: .82rem;
}
.mini-macros { font-family: var(--mono); font-size: .64rem; color: var(--faint); }

/* Modales, hojas y avisos */
.modal-fullscreen { background: var(--bg) !important; }
.toast {
    background: var(--cream) !important;
    color: var(--on-cream) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}
.spinner { border-color: var(--line) !important; border-top-color: var(--accent) !important; }

.dia-semana-btn.active, .dia-check.selected {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-line) !important;
    color: var(--accent);
}

/* Formularios */
input, select, textarea { color-scheme: dark; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Lista de la compra */
.fab { background: var(--accent) !important; color: var(--on-accent) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important; }
.checkbox-large { border-color: var(--line) !important; border-radius: 7px !important; }
.checkbox-large.checked { background: var(--good) !important; border-color: var(--good) !important; color: var(--bg) !important; }
.tab-active { background: var(--cream) !important; color: var(--on-cream) !important; border-color: transparent !important; }
.category-header { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint) !important; }
.ingredient-item, .item-row, .bd-item { border-color: var(--line-soft) !important; }
.item-row.selected { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }

/* Escritorio */
.comida-slot { background: var(--surface) !important; border: 1px solid var(--line) !important; }
.comida-slot:hover { border-color: var(--accent-line) !important; }
.alimento-chip { background: var(--surface-2) !important; border-color: var(--line) !important; }
.alimento-chip.selected { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }
#tooltip-custom { background: var(--surface) !important; border: 1px solid var(--line) !important; }
.calendario-dia.hoy { background: var(--accent) !important; color: var(--on-accent) !important; }
.calendario-dia.seleccionado:not(.hoy) { background: var(--cream) !important; color: var(--on-cream) !important; }
#resumen-macros:active { background: transparent !important; }
.kpi .s.text-red-400 { color: var(--over); }
.kpi .s.text-green-400, .kpi .s.text-green-300 { color: var(--good); }

/* Móvil: el header fijo queda por debajo de la barra de estado (iOS difumina esa franja) */
@media (hover: none) and (pointer: coarse) {
    body { padding-top: 0 !important; }
    header.sticky {
        background: var(--bg) !important;
        border-width: 0 0 1px !important;
        padding-top: calc(env(safe-area-inset-top) + 14px) !important;
    }
    header.sticky.px-4 { padding-top: calc(env(safe-area-inset-top) + 26px) !important; }
    .modal-fullscreen { padding-top: calc(env(safe-area-inset-top) + 14px) !important; }
}