*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

/* ── Light mode tokens ────────────────────────────────────────── */
:root {
  --ink:        #1a1a1a;
  --ink-2:      #555;
  --ink-3:      #888;
  --border:     #e8e8e8;
  --bg:         #f0f0f0;
  --white:      #fff;
  --card-bg:    #fff;
  --accent:     #f9a825;
  --accent-bg:  #fff8e1;
  --green:      #2e7d32;
  --green-bg:   #e8f5e9;
  --red:        #c62828;
  --red-bg:     #ffebee;
  --blue:       #1565c0;
  --blue-bg:    #e3f2fd;
  --purple:     #4a148c;
  --purple-bg:  #f3e5f5;
  --r:          12px;
  --r-sm:       8px;
  --sh:         0 1px 4px rgba(0,0,0,.07),0 2px 8px rgba(0,0,0,.04);
  --sh-md:      0 4px 20px rgba(0,0,0,.10);
  --h-hdr:      58px;
  --h-nav:      60px;
}

/* ── Dark mode tokens ─────────────────────────────────────────── */
[data-theme="dark"] {
  --ink:        #e8e8e8;
  --ink-2:      #aaa;
  --ink-3:      #666;
  --border:     #2e2e2e;
  --bg:         #111111;
  --white:      #1c1c1e;
  --card-bg:    #1c1c1e;
  --accent-bg:  #2a2000;
  --green-bg:   #0d2010;
  --red-bg:     #2a0808;
  --blue-bg:    #091528;
  --purple-bg:  #1a0a2e;
  --sh:         0 1px 4px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --sh-md:      0 4px 20px rgba(0,0,0,.5);
}

[data-theme="dark"] .app-header  { background:#0a0a0a; }
[data-theme="dark"] .app-nav     { background:#1c1c1e; border-top-color:#2e2e2e; }
[data-theme="dark"] .login-card  { background:#1c1c1e; }
[data-theme="dark"] .tog         { background:#2a2a2a; }
[data-theme="dark"] table.met tr:nth-child(even) td { background:#222; }
[data-theme="dark"] .costo-card  { background:#222; }

/* ── Base ─────────────────────────────────────────────────────── */
html, body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.5;
  background:var(--bg);color:var(--ink);
  min-height:100vh;overflow-x:hidden;
  transition:background .2s,color .2s;
}

.hidden  { display:none !important; }
.muted   { color:var(--ink-2);font-size:14px; }
.mt-8    { margin-top:8px; }
.mt-16   { margin-top:16px; }
.flex-1  { flex:1; }

/* ── Screens ──────────────────────────────────────────────────── */
.screen { min-height:100vh;padding:32px 20px; }
.screen-center { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px; }
h2 { font-size:20px;font-weight:700; }

.spinner { width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--ink);border-radius:50%;animation:spin .75s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
.mini-spin { display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px; }

/* ── Login ────────────────────────────────────────────────────── */
.login-card { background:var(--card-bg);border-radius:var(--r);padding:40px 32px;max-width:360px;width:100%;box-shadow:var(--sh-md);display:flex;flex-direction:column;align-items:center;gap:8px; }
.login-logo  { width:120px;height:auto;margin-bottom:4px; }
.login-brand { font-size:20px;font-weight:800;color:var(--ink); }
.login-app   { font-size:12px;color:var(--ink-3);text-align:center; }
.login-divider { width:40px;height:2px;background:var(--border);margin:8px 0;border-radius:2px; }
.login-desc  { font-size:13px;color:var(--ink-2);text-align:center;margin-bottom:8px; }
.btn-google  { display:flex;align-items:center;justify-content:center;gap:10px; }

/* ── App layout ───────────────────────────────────────────────── */
.app-header { position:fixed;top:0;left:0;right:0;height:var(--h-hdr);background:var(--ink);color:#fff;z-index:200;display:flex;align-items:center;padding:0 14px;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:background .2s; }
.header-inner { width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px; }
.header-brand { display:flex;align-items:center;gap:10px;min-width:0; }
.header-logo  { height:30px;width:auto;flex-shrink:0;filter:brightness(0) invert(1); }
.header-title { font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap; }
.header-sub   { font-size:10px;color:rgba(255,255,255,.5);margin-top:1px; }
.header-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.header-user  { font-size:11px;color:rgba(255,255,255,.5);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.btn-icon-header { background:none;border:none;cursor:pointer;color:rgba(255,255,255,.5);display:flex;align-items:center;padding:4px;text-decoration:none;transition:color .15s; }
.btn-icon-header:hover { color:#fff; }
.btn-icon-header svg { width:17px;height:17px; }

.app-main { padding-top:calc(var(--h-hdr) + 20px);padding-bottom:160px;padding-left:12px;padding-right:12px;max-width:600px;margin:0 auto; }
.app-nav  { position:fixed;bottom:0;left:0;right:0;height:auto;min-height:var(--h-nav);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--white);border-top:1px solid var(--border);display:flex;z-index:200;box-shadow:0 -2px 10px rgba(0,0,0,.05);transition:background .2s; }

.nav-btn { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;cursor:pointer;color:var(--ink-3);font-family:inherit;transition:color .15s;padding:0; }
.nav-btn svg { width:19px;height:19px;stroke-width:2; }
.nav-btn.active { color:var(--ink); }
.nav-label { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px; }

/* ── Views ────────────────────────────────────────────────────── */
.view { animation:fadeUp .18s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }
.cards-row { display:flex;flex-direction:column;gap:12px;margin-bottom:12px; }
@media(min-width:560px){ .cards-row{flex-direction:row;} }

/* ── Cards ────────────────────────────────────────────────────── */
.card { background:var(--card-bg);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--sh);transition:background .2s; }
.card-title { font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-3);margin-bottom:12px; }
.card-title-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.card-title-row .card-title { margin-bottom:0; }
.card-sub { font-size:13px;color:var(--ink-2);margin-top:-6px;margin-bottom:14px; }

/* ── Banner ───────────────────────────────────────────────────── */
.banner { border-radius:var(--r-sm);padding:11px 14px;font-size:13px;font-weight:500;line-height:1.4;margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.banner svg { width:16px;height:16px;flex-shrink:0; }
.banner-open   { background:var(--green-bg);color:var(--green);border-left:4px solid var(--green); }
.banner-closed { background:var(--red-bg);  color:var(--red);  border-left:4px solid var(--red); }

/* ── Menú ─────────────────────────────────────────────────────── */
.menu-row { display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
.menu-row:last-child { border-bottom:none; }
.menu-dname { font-size:10px;font-weight:800;text-transform:uppercase;color:var(--ink-3);width:32px;flex-shrink:0;padding-top:2px; }
.menu-col  { flex:1; }
.menu-dish { font-size:14px;color:var(--ink); }
.menu-nota { font-size:11px;color:var(--ink-2);margin-top:2px; }
.badge { font-size:10px;font-weight:600;border-radius:4px;padding:2px 7px;background:var(--accent-bg);color:#e65100;flex-shrink:0; }

/* ── Registro ─────────────────────────────────────────────────── */
.reg-row { padding:12px 0;border-bottom:1px solid var(--border); }
.reg-row:last-child { border-bottom:none; }
.reg-row-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px; }
.reg-day  { font-size:13px;font-weight:700;text-transform:uppercase; }
.reg-dish { font-size:12px;color:var(--ink-2);margin-top:2px; }

.toggle-group { display:flex;gap:6px; }
.tog { flex:1;padding:9px 4px;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--white);font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-3);transition:all .12s;font-family:inherit; }
.tog:active { transform:scale(.97); }
.tog.on-alm  { border-color:var(--blue);  background:var(--blue-bg);  color:var(--blue); }
.tog.on-cena { border-color:var(--purple);background:var(--purple-bg);color:var(--purple); }
.tog.on-nada { border-color:var(--border);background:var(--bg);color:var(--ink-2); }

.chip     { display:inline-flex;align-items:center;border-radius:20px;padding:3px 10px;font-size:12px; }
.chip-alm { background:var(--blue-bg);  color:var(--blue); }
.chip-cen { background:var(--purple-bg);color:var(--purple); }

.nota-input { width:100%;margin-top:6px;padding:6px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:12px;font-family:inherit;color:var(--ink);resize:none;outline:none;background:var(--bg);transition:background .2s; }
.nota-input:focus { border-color:var(--ink);background:var(--white); }
.btn-cancel-dia { padding:4px;border:none;background:none;cursor:pointer;color:var(--ink-3);display:flex;align-items:center; }
.btn-cancel-dia:hover { color:var(--red); }
.btn-cancel-dia svg { width:14px;height:14px; }

/* ── Editor menú ──────────────────────────────────────────────── */
.editor-row { padding:12px 0;border-bottom:1px solid var(--border); }
.editor-row:last-child { border-bottom:none; }
.editor-head { display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.editor-dname { font-size:10px;font-weight:800;text-transform:uppercase;color:var(--ink-3);width:36px;flex-shrink:0; }
.editor-note  { font-size:10px;color:var(--ink-3); }
.editor-inputs { display:flex;flex-direction:column;gap:6px; }
.editor-row-cost { display:flex;gap:8px;align-items:center; }
.cost-label { font-size:11px;color:var(--ink-2);width:90px;flex-shrink:0; }
.cost-input { width:110px !important; }

/* ── Cocina ───────────────────────────────────────────────────── */
.cocina-dia { margin-bottom:18px; }
.cocina-dia-head { background:var(--ink);color:#fff;border-radius:var(--r-sm) var(--r-sm) 0 0;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;transition:background .2s; }
.cocina-dia-title { font-size:14px;font-weight:700; }
.cocina-totales { display:flex;border-bottom:1px solid var(--border); }
.cocina-total { font-size:24px;font-weight:800;text-align:center;padding:12px;flex:1;color:var(--ink); }
.cocina-total-label { font-size:10px;color:var(--ink-3);margin-top:2px; }
.cocina-lista { padding:10px 14px; }
.cocina-lista-title { font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px; }

/* Asistencia */
.cocina-persona { display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bg); }
.cocina-persona:last-child { border-bottom:none; }
.cocina-persona-info { flex:1;min-width:0; }
.cocina-persona-nombre { font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cocina-persona-nota   { font-size:11px;color:var(--ink-2); }
.asist-btns { display:flex;gap:4px; }
.btn-asist { padding:5px 8px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:none;cursor:pointer;font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px;transition:all .12s;font-family:inherit; }
.btn-asist svg { width:12px;height:12px; }
.btn-asist.activo-recibio    { background:var(--green-bg);border-color:var(--green);color:var(--green); }
.btn-asist.activo-no_recibio { background:var(--red-bg);  border-color:var(--red);  color:var(--red); }

/* ── Registros ────────────────────────────────────────────────── */
.res-day { border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:10px; }
.res-day-head { background:var(--ink);color:#fff;padding:9px 14px;display:flex;justify-content:space-between;align-items:center;transition:background .2s; }
.res-day-title { font-size:13px;font-weight:700; }
.res-day-count { font-size:12px;color:rgba(255,255,255,.6); }
.res-tiempo       { padding:10px 14px; }
.res-tiempo + .res-tiempo { border-top:1px solid var(--border); }
.res-tiempo-label { font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px; }
.chip-group { display:flex;flex-wrap:wrap;gap:6px; }

/* ── Costos ───────────────────────────────────────────────────── */
.costos-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px; }
.costo-card  { background:var(--bg);border-radius:var(--r-sm);padding:14px;text-align:center; }
.costo-val   { font-size:22px;font-weight:800; }
.costo-lbl   { font-size:11px;color:var(--ink-2);margin-top:4px; }

/* ── Perfil ───────────────────────────────────────────────────── */
.perfil-section { margin-bottom:16px; }
.perfil-label   { font-size:11px;font-weight:700;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px; }
.perfil-rol     { display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:600; }
.hist-semana    { padding:10px 0;border-bottom:1px solid var(--border); }
.hist-semana:last-child { border-bottom:none; }
.hist-label     { font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px; }
.hist-chips     { display:flex;flex-wrap:wrap;gap:6px; }

/* ── Métricas / Charts ────────────────────────────────────────── */
.stats-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px; }
.stat     { background:var(--card-bg);border-radius:var(--r-sm);padding:14px 10px;text-align:center;box-shadow:var(--sh);transition:background .2s; }
.stat-val { font-size:26px;font-weight:800;line-height:1; }
.stat-lbl { font-size:11px;color:var(--ink-2);margin-top:5px;line-height:1.2; }

.chart-wrap      { position:relative;height:220px;margin-bottom:4px; }
.chart-wrap.chart-sm   { height:170px; }
.chart-wrap.chart-tall { height:260px; }

table.met { width:100%;border-collapse:collapse;font-size:13px; }
table.met th { background:var(--ink);color:#fff;padding:8px 10px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;transition:background .2s; }
table.met td { padding:8px 10px;border-bottom:1px solid var(--border); }
table.met tr:last-child td { border-bottom:none; }
table.met tr:nth-child(even) td { background:var(--bg); }

/* ── Config ───────────────────────────────────────────────────── */
.config-row { display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--border); }
.config-row:last-child { border-bottom:none; }
.config-info { flex:1;min-width:0; }
.config-key  { font-size:12px;font-weight:700;font-family:monospace;color:var(--ink); }
.config-desc { font-size:11px;color:var(--ink-2);margin-top:2px; }
.config-val  { font-size:13px;color:var(--ink-2);margin-top:4px;word-break:break-all; }
.config-input-wrap { display:none;margin-top:8px;gap:6px; }
.config-editing .config-val { display:none; }
.config-editing .config-input-wrap { display:flex; }

/* ── Usuarios ─────────────────────────────────────────────────── */
.add-user-form { display:flex;gap:8px;margin-bottom:14px;padding-bottom:14px;border-bottom:2px solid var(--border);flex-wrap:wrap; }
.add-user-form input { flex:1;min-width:160px; }
.add-user-form select { padding:10px 8px;border:2px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-family:inherit;background:var(--white);color:var(--ink); }
.user-row { display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
.user-row:last-child { border-bottom:none; }
.user-info { flex:1;min-width:0; }
.user-name  { font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.user-email { font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.user-inactive { opacity:.5; }
select.rol-select { padding:6px 8px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:12px;font-family:inherit;background:var(--white);color:var(--ink); }

/* ── Inputs ───────────────────────────────────────────────────── */
input[type="text"],input[type="number"],textarea {
  width:100%;padding:10px 12px;border:2px solid var(--border);border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;color:var(--ink);outline:none;
  background:var(--white);transition:border-color .15s,background .2s;
}
input:focus,textarea:focus { border-color:var(--ink); }
textarea { resize:vertical;min-height:72px; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:var(--r-sm);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;border:none;text-decoration:none;text-align:center;transition:opacity .15s,transform .1s; }
.btn:active  { transform:scale(.98);opacity:.9; }
.btn:disabled { opacity:.5;cursor:not-allowed;transform:none; }
.btn svg { width:14px;height:14px; }
.btn-primary   { background:var(--ink);color:#fff; }
.btn-secondary { background:var(--bg);color:var(--ink-2);border:2px solid var(--border); }
.btn-danger    { background:var(--red-bg);color:var(--red);border:2px solid var(--red-bg); }
.btn-full { width:100%; }
.btn-sm   { padding:7px 12px;font-size:12px; }
.btn-icon { background:none;border:none;cursor:pointer;color:var(--ink-2);display:flex;align-items:center;padding:4px; }
.btn-icon svg { width:18px;height:18px; }
.btn-row  { display:flex;gap:8px; }
.btn-row .btn { flex:1; }

.empty { text-align:center;color:var(--ink-2);font-size:13px;padding:24px 0; }

/* ── Toast ────────────────────────────────────────────────────── */
.toast { position:fixed;bottom:calc(var(--h-nav)+16px);left:12px;right:12px;max-width:400px;margin:0 auto;padding:12px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:600;z-index:300;box-shadow:var(--sh-md);animation:fadeUp .2s ease; }
.toast-ok  { background:var(--ink);color:#fff; }
.toast-err { background:var(--red);color:#fff; }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .app-header,.app-nav,.btn,.btn-row,.asist-btns { display:none !important; }
  .app-main { padding:0 !important;margin:0 !important; }
  .card { box-shadow:none !important;border:1px solid #ccc; }
  .view { display:none !important; }
  .view.printing { display:block !important; }
}