/*
 * Tema oscuro moderno. Se activa con <html data-theme="oscuro">.
 * El diseño claro original sigue en app.css (y respaldado en respaldos/v1-diseno-claro).
 */
html[data-theme="oscuro"] {
  --bg: #090c12; --card: #121722; --card2: #171d2a; --card3: #1d2433;
  --ink: #e8ebf2; --muted: #8e98ab; --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.13);
  --brand: #0d1119; --brand2: #1a2130; --accent: #ffb020; --accent2: #ffc24d;
  --ok: #22c55e; --warn: #fbbf24; --late: #f43f5e; --wa: #22c55e;
  --radius: 18px; --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
html[data-theme="oscuro"] body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,176,32,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(59,130,246,.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  letter-spacing: .005em;
}
html[data-theme="oscuro"] a { color: #7cb4ff; }
html[data-theme="oscuro"] h1 { font-weight: 800; letter-spacing: -.02em; }
html[data-theme="oscuro"] .warn-txt { color: var(--warn); }

/* Barra superior: vidrio esmerilado */
html[data-theme="oscuro"] .topbar { background: rgba(13,17,25,.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); }
html[data-theme="oscuro"] .brand-logo { background: linear-gradient(135deg, #ffb020, #ff7a18); color: #1a1000; box-shadow: 0 0 20px rgba(255,150,30,.35); }
html[data-theme="oscuro"] .nav a, html[data-theme="oscuro"] .nav-settings { color: var(--muted); }
html[data-theme="oscuro"] .nav a:hover, html[data-theme="oscuro"] .nav-settings:hover { background: rgba(255,255,255,.06); color: var(--ink); }
html[data-theme="oscuro"] .nav a.active, html[data-theme="oscuro"] .nav-settings.active { background: rgba(255,176,32,.12); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,176,32,.25); }
html[data-theme="oscuro"] .nav a.nav-cta { color: var(--accent); }

/* Botones */
html[data-theme="oscuro"] .btn { background: var(--card2); border-color: var(--line2); color: var(--ink); }
html[data-theme="oscuro"] .btn:hover { background: var(--card3); border-color: rgba(255,255,255,.2); }
html[data-theme="oscuro"] .btn.primary { background: linear-gradient(135deg, #ffb020, #ff8a1f); border-color: transparent; color: #1a1000; box-shadow: 0 6px 20px rgba(255,140,30,.25); }
html[data-theme="oscuro"] .btn.primary:hover { filter: brightness(1.08); }
html[data-theme="oscuro"] .btn.wa { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: transparent; color: #04140a; box-shadow: 0 6px 20px rgba(34,197,94,.2); }
html[data-theme="oscuro"] .btn.danger-ghost { background: transparent; border-color: rgba(244,63,94,.35); color: #fb7185; }
html[data-theme="oscuro"] .btn.danger-ghost:hover { background: rgba(244,63,94,.1); }
html[data-theme="oscuro"] .icon-btn:hover { background: rgba(244,63,94,.15); color: #fb7185; }

/* Tarjetas y formularios */
html[data-theme="oscuro"] .card { background: linear-gradient(180deg, var(--card2), var(--card)); border-color: var(--line); }
html[data-theme="oscuro"] input, html[data-theme="oscuro"] select, html[data-theme="oscuro"] textarea { background: #0c1018; border-color: var(--line2); color: var(--ink); }
html[data-theme="oscuro"] input::placeholder, html[data-theme="oscuro"] textarea::placeholder { color: #5d6678; }
html[data-theme="oscuro"] input:focus, html[data-theme="oscuro"] select:focus, html[data-theme="oscuro"] textarea:focus { outline: 3px solid rgba(255,176,32,.25); border-color: var(--accent); }
html[data-theme="oscuro"] .step { background: rgba(255,176,32,.15); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,176,32,.35); }
html[data-theme="oscuro"] .info { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: #bcd5ff; }
html[data-theme="oscuro"] .info.ok { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #b6f2cb; }
html[data-theme="oscuro"] .seg { background: #0c1018; border-color: var(--line2); }
html[data-theme="oscuro"] .seg button { border-color: var(--line2); color: var(--muted); }
html[data-theme="oscuro"] .seg button.on { background: var(--accent); color: #1a1000; }
html[data-theme="oscuro"] .seg button.v-b.on { background: var(--ok); color: #04140a; }
html[data-theme="oscuro"] .seg button.v-r.on { background: var(--warn); color: #1a1000; }
html[data-theme="oscuro"] .seg button.v-m.on { background: var(--late); color: #fff; }
html[data-theme="oscuro"] .chk-row { border-color: var(--line); }
html[data-theme="oscuro"] .chk-tag.v-r { background: rgba(251,191,36,.15); color: #fcd34d; }
html[data-theme="oscuro"] .chk-tag.v-m { background: rgba(244,63,94,.15); color: #fda4af; }
html[data-theme="oscuro"] .chip { background: var(--card2); border-color: var(--line2); color: var(--ink); }
html[data-theme="oscuro"] .chip:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="oscuro"] .chip.on { background: var(--accent); border-color: var(--accent); color: #1a1000; }
html[data-theme="oscuro"] .chips.quick { background: rgba(255,255,255,.03); border: 1px solid var(--line); }
html[data-theme="oscuro"] .ph { background: #0c1018; }
html[data-theme="oscuro"] .firma { border-color: rgba(255,255,255,.2); } /* la firma sigue en blanco para que se imprima bien */
html[data-theme="oscuro"] .firma-view img { background: #fff; border-radius: 8px; padding: 4px; }
html[data-theme="oscuro"] .logo-prev { background: #fff; border-color: var(--line2); }
html[data-theme="oscuro"] .sticky-actions { background: linear-gradient(transparent, var(--bg) 35%); }

/* Placa: estilo placa real (clara) para que resalte */
html[data-theme="oscuro"] .placa { background: #f4f6fa; color: #0b0f17; border-color: #f4f6fa; box-shadow: inset 0 0 0 1.5px #0b0f17; }

/* Insignias */
html[data-theme="oscuro"] .badge { background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 55%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
html[data-theme="oscuro"] .cot-borrador { --c: #94a3b8; } html[data-theme="oscuro"] .cot-enviada { --c: #60a5fa; }
html[data-theme="oscuro"] .cot-aprobada { --c: #4ade80; } html[data-theme="oscuro"] .cot-rechazada { --c: #fb7185; }

/* Tablas */
html[data-theme="oscuro"] .table th { background: rgba(255,255,255,.03); border-color: var(--line); color: var(--muted); }
html[data-theme="oscuro"] .table td { border-color: var(--line); }
html[data-theme="oscuro"] .table.click tbody tr[data-id]:hover { background: rgba(255,176,32,.06); }
html[data-theme="oscuro"] .lvl-txt-warn { color: var(--warn); }
html[data-theme="oscuro"] .lvl-txt-late { color: #fb7185; }
html[data-theme="oscuro"] .tabs { background: rgba(255,255,255,.04); border: 1px solid var(--line); }
html[data-theme="oscuro"] .tab.on { background: var(--card3); color: var(--ink); box-shadow: none; }
html[data-theme="oscuro"] .list li { border-color: var(--line); }
html[data-theme="oscuro"] .timeline { border-color: var(--line2); }
html[data-theme="oscuro"] .timeline li::before { border-color: var(--card); box-shadow: 0 0 10px var(--c); }

/* Estado en la orden */
html[data-theme="oscuro"] .estado-card { border-left-width: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, var(--card)), var(--card) 60%); }
html[data-theme="oscuro"] .estado-big { color: color-mix(in srgb, var(--c) 65%, #fff); }
html[data-theme="oscuro"] .estado-card.lvl-late { background: linear-gradient(90deg, rgba(244,63,94,.18), var(--card) 60%); }
html[data-theme="oscuro"] .estado-card.lvl-warn { background: linear-gradient(90deg, rgba(251,191,36,.14), var(--card) 60%); }
html[data-theme="oscuro"] .estado-btn { background: color-mix(in srgb, var(--c) 8%, var(--card2)); border-color: color-mix(in srgb, var(--c) 35%, transparent); color: color-mix(in srgb, var(--c) 60%, #fff); }
html[data-theme="oscuro"] .estado-btn.on { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 0 20px color-mix(in srgb, var(--c) 45%, transparent); }

/* ---------- Tablero ---------- */
html[data-theme="oscuro"] .clock { color: var(--ink); }
html[data-theme="oscuro"] .kpi { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-left: 0; position: relative; overflow: hidden; padding-left: 18px; }
html[data-theme="oscuro"] .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--accent)); box-shadow: 0 0 16px var(--c, var(--accent)); }
html[data-theme="oscuro"] .kpi b { color: var(--ink); }
html[data-theme="oscuro"] .kpi.late b { color: #fb7185; }
html[data-theme="oscuro"] .kds-col { background: rgba(255,255,255,.025); border: 1px solid var(--line); }
html[data-theme="oscuro"] .kds-col header { background: transparent; color: var(--ink); border-bottom: 1px solid var(--line); position: relative; }
html[data-theme="oscuro"] .kds-col header::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--c); box-shadow: 0 0 14px var(--c); }
html[data-theme="oscuro"] .kds-col header span { display: flex; align-items: center; gap: 8px; }
html[data-theme="oscuro"] .kds-col header span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
html[data-theme="oscuro"] .kds-col header b { background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 50%, #fff); }
html[data-theme="oscuro"] .kds-col.is-empty { opacity: .55; }
html[data-theme="oscuro"] .kcard { background: var(--card2); border: 1px solid var(--line); border-left: 4px solid var(--ok); }
html[data-theme="oscuro"] .kcard:hover { background: var(--card3); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
html[data-theme="oscuro"] .kcard.lvl-warn { border-left-color: var(--warn); background: linear-gradient(90deg, rgba(251,191,36,.10), var(--card2) 55%); }
html[data-theme="oscuro"] .kcard.lvl-late { border-left-color: var(--late); background: linear-gradient(90deg, rgba(244,63,94,.16), var(--card2) 55%); animation: pulso-osc 2.4s ease-in-out infinite; }
@keyframes pulso-osc { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); } 50% { box-shadow: 0 0 0 3px rgba(244,63,94,.35), 0 0 24px rgba(244,63,94,.25); } }
html[data-theme="oscuro"] .lvl-warn .kc-timer { color: var(--warn); }
html[data-theme="oscuro"] .lvl-late .kc-timer { color: #fb7185; }
html[data-theme="oscuro"] .kc-nota { background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) 45%, #fff); }
html[data-theme="oscuro"] .kc-foot { border-color: var(--line); }
html[data-theme="oscuro"] .kc-alert { background: var(--late); box-shadow: 0 0 12px rgba(244,63,94,.6); }
html[data-theme="oscuro"] .kc-entregar { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: transparent; color: #04140a; }
html[data-theme="oscuro"] body.kds-mode { background: #05070b; }
html[data-theme="oscuro"] body.kds-mode .kpi { background: var(--card); }

/* Cotizador */
html[data-theme="oscuro"] .results { background: var(--card2); border-color: var(--line2); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
html[data-theme="oscuro"] .results button { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-theme="oscuro"] .results button:hover { background: rgba(255,176,32,.08); }
html[data-theme="oscuro"] .totals .tot-row { border-color: var(--line); }
html[data-theme="oscuro"] .totals .grand b { color: var(--accent); font-size: 26px; }
html[data-theme="oscuro"] .umbrales .f.row { border-color: var(--line); color: var(--ink); }

/* Modal y aviso */
html[data-theme="oscuro"] .modal { background: rgba(3,5,9,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-theme="oscuro"] .modal-box { background: var(--card2); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
html[data-theme="oscuro"] .toast { background: var(--card3); border: 1px solid var(--line2); color: var(--ink); }

/* Celular: barra inferior oscura con vidrio */
@media (max-width: 760px) {
  /* el desenfoque en la barra superior "atrapa" al menú inferior fijo; en celular se quita */
  html[data-theme="oscuro"] .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--brand); }
  html[data-theme="oscuro"] .nav { background: rgba(13,17,25,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  html[data-theme="oscuro"] .nav a.active { background: transparent; box-shadow: none; }
  html[data-theme="oscuro"] .table tr { border-color: var(--line); }
}

/* Impresión: siempre en blanco */
@media print {
  html[data-theme="oscuro"] body.printing { background: #fff; color: #111; }
}