:root { --bg:#f5f5f7; --card:#fff; --ink:#151517; --muted:#6b6b72; --line:#e4e4e8; --accent:#fe2c55;
  --red:#d92d20; --red-bg:#fdecea; --amber:#b54708; --ok:#067647; --ok-bg:#e7f6ec; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f0f11; --card:#1a1a1d; --ink:#f2f2f3; --muted:#a1a1a8;
  --line:#2c2c31; --red-bg:#3a1714; --ok-bg:#0f2a1b; } }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; }
.top { background:var(--card); border-bottom:1px solid var(--line); }
.top .in { max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.marca { font-weight:700; display:flex; align-items:center; gap:8px; text-decoration:none; }
.marca::before { content:""; width:5px; height:20px; background:var(--accent); border-radius:2px; }
.top nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.top nav a { text-decoration:none; padding:6px 10px; border-radius:8px; color:var(--muted); }
.top nav a.on, .top nav a:hover { background:var(--bg); color:var(--ink); }
.yo { color:var(--muted); font-size:14px; display:flex; gap:10px; align-items:center; }
main { max-width:1100px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:22px; margin:0 0 4px; }
h2 { font-size:17px; margin:0 0 12px; }
.muted { color:var(--muted); font-size:13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:8px 14px; border-radius:10px; font:inherit; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { border-color:var(--muted); }
.btn.pri { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.sm { padding:5px 10px; font-size:13px; }
input, select { font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); width:100%; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
.aviso { padding:10px 14px; border-radius:10px; margin-bottom:16px; background:var(--ok-bg); color:var(--ok); }
.aviso.error { background:var(--red-bg); color:var(--red); }
.fila { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.espacio { flex:1; }

/* Pestañas */
.tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.tab { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-decoration:none; position:relative; }
.tab b { display:block; font-size:26px; font-variant-numeric:tabular-nums; }
.tab span { font-size:13px; color:var(--muted); }
.tab.on { border-color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); }
.tab .alerta { position:absolute; top:10px; right:10px; background:var(--red); color:#fff; font-size:12px; font-weight:700; border-radius:99px; padding:2px 8px; }
@media (max-width:700px) { .tabs { grid-template-columns:repeat(2,1fr); } }

/* Lista de pedidos */
.pedidos { display:flex; flex-direction:column; gap:10px; }
.pedido { display:grid; grid-template-columns:1fr auto; gap:12px; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--line); border-radius:12px; padding:14px 16px; }
.pedido.urgente { border-left-color:var(--red); background:var(--red-bg); }
.pedido.vencido { border-left-color:var(--red); background:var(--red-bg); }
.pedido .id { font-weight:700; text-decoration:none; }
.pedido ul { margin:6px 0 0; padding:0; list-style:none; }
.pedido li { font-size:14px; }
.pedido .der { text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.reloj { font-weight:700; font-variant-numeric:tabular-nums; }
.urgente .reloj, .vencido .reloj { color:var(--red); }
.pill { font-size:12px; padding:2px 8px; border-radius:99px; background:var(--bg); color:var(--muted); border:1px solid var(--line); }
.pill.ok { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.pill.rojo { background:var(--red); color:#fff; border-color:transparent; }
@media (max-width:600px) { .pedido { grid-template-columns:1fr; } .pedido .der { text-align:left; align-items:flex-start; } }

/* Cuenta regresiva grande */
.cuenta { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 8px; text-align:center; }
.cuenta div { background:var(--bg); border-radius:12px; padding:12px 0; }
.cuenta b { display:block; font-size:32px; font-variant-numeric:tabular-nums; }
.cuenta span { font-size:12px; color:var(--muted); }
.estado-grande { font-size:20px; font-weight:700; }
.estado-grande.rojo { color:var(--red); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px) { .grid2 { grid-template-columns:1fr; } }
.login { max-width:360px; margin:12vh auto; }
.angosto { max-width:480px; margin:0 auto; }