/* ==========================================================
   Seguimiento de Pedidos — kit visual Unibot
   ========================================================== */

:root {
  /* Core — deep navy futurista */
  --bg:        #060a18;
  --bg-grid:   #0a1024;
  --panel:     #0d1428;
  --panel-2:   #121a33;
  --panel-3:   #172142;
  --ink:       #e6ecff;
  --ink-soft:  #c4cde5;
  --muted:     #7783a8;
  --muted-dim: #4a5578;
  --line:      rgba(120, 160, 255, 0.10);
  --line-2:    rgba(120, 160, 255, 0.18);

  /* Accents */
  --cyan:      #d4a017;
  --cyan-ink:  #1a1405;
  --cyan-soft: rgba(212, 160, 23, 0.16);
  --yellow:    #ffd23f;
  --yellow-ink:#2a2306;
  --yellow-soft:rgba(255, 210, 63, 0.15);
  --ok:        #22e3ff;
  --ok-ink:    #04222a;
  --ok-soft:   rgba(34, 227, 255, 0.14);
  --led:       #3ce6b2;
  --led-soft:  rgba(60, 230, 178, 0.18);
  --bad:       #ff6b8a;
  --bad-soft:  rgba(255, 107, 138, 0.14);

  --sans: "Roboto", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", "Roboto", ui-monospace, Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  font-size: 21px;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(212, 160, 23, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(90, 130, 255, 0.07), transparent 60%),
    linear-gradient(180deg, #060a18 0%, #050818 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(120, 160, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 160, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 0;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 85%);
}

#root { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 160, 255, 0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 160, 23, 0.35); }

/* ——— Light theme ——— */
[data-theme="light"] {
  --bg:        #f5f7fb;
  --bg-grid:   #eef1f8;
  --panel:     #ffffff;
  --panel-2:   #f1f4fb;
  --panel-3:   #e7ecf6;
  --ink:       #0a1430;
  --ink-soft:  #1c2748;
  --muted:     #5e6a8a;
  --muted-dim: #9aa3bd;
  --line:      rgba(10, 20, 48, 0.08);
  --line-2:    rgba(10, 20, 48, 0.14);
}
[data-theme="light"] body { background: #f5f7fb;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(34, 227, 255, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(212, 160, 23, 0.08), transparent 60%),
    linear-gradient(180deg, #f5f7fb 0%, #eef1f8 100%);
}
[data-theme="light"] body::before {
  background-image:
    linear-gradient(to right, rgba(10, 20, 48, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 20, 48, 0.04) 1px, transparent 1px);
}
[data-theme="light"] .hdr {
  background: linear-gradient(180deg, #f5c947 0%, #d4a017 100%);
  border-bottom: 1px solid rgba(10, 20, 48, 0.35);
}
[data-theme="light"] .hdr .brand-title { color: #0a1430; text-shadow: 0 1px 0 rgba(255,255,255,0.25); }
[data-theme="light"] .hdr .brand-sub { color: rgba(10, 20, 48, 0.75); }
[data-theme="light"] .card { background: #ffffff; box-shadow: 0 1px 3px rgba(10,20,48,.04), 0 4px 14px rgba(10,20,48,.06); }
[data-theme="light"] .tbl thead th { background: #ffffff; color: var(--muted); }
[data-theme="light"] textarea.inp, [data-theme="light"] .inp, [data-theme="light"] .sel { background: #ffffff; color: var(--ink); }
[data-theme="light"] .status-chip { background: rgba(10, 20, 48, 0.10); border-color: rgba(10, 20, 48, 0.35); color: #0a1430; }
[data-theme="light"] .theme-btn { background: rgba(10, 20, 48, 0.10); border-color: rgba(10, 20, 48, 0.35); color: #0a1430; }
[data-theme="light"] .theme-btn:hover { background: rgba(10, 20, 48, 0.20); }
[data-theme="light"] .filter-chip { background: #ffffff; color: var(--ink); border-color: rgba(10,20,48,0.18); }
[data-theme="light"] .filter-chip.on { background: rgba(212,160,23,0.18); border-color: var(--cyan); color: #0a1430; }
[data-theme="light"] .drawer { background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%); }
[data-theme="light"] .modal { background: linear-gradient(180deg, #ffffff, #f7f9ff); border-color: rgba(10, 20, 48, 0.18); }
[data-theme="light"] .modal-hdr { border-color: rgba(10, 20, 48, 0.10); }
[data-theme="light"] .modal-hdr-title { color: #0066a8; }
[data-theme="light"] .modal-body .modal-msg { color: #0a1430; }
[data-theme="light"] .modal-actions { background: rgba(10, 20, 48, 0.04); border-color: rgba(10, 20, 48, 0.10); }

/* ——— Plain theme (rojo corporativo Tomza, paleta del handoff unibot-dashboard) ——— */
[data-theme="plain"] {
  --bg:        #ffffff;
  --bg-grid:   #ffffff;
  --panel:     #ffffff;
  --panel-2:   #f8fafc;
  --panel-3:   #f1f5f9;
  --ink:       #0f172a;
  --ink-soft:  #1e293b;
  --muted:     #64748b;
  --muted-dim: #94a3b8;
  --line:      #e2e8f0;
  --line-2:    #cbd5e1;
  --cyan:      #cc2129;      /* accent primario = rojo corp */
  --cyan-ink:  #ffffff;
  --cyan-soft: rgba(204, 33, 41, 0.08);
  --yellow:    #a16207;
  --yellow-ink:#ffffff;
  --yellow-soft:rgba(234, 179, 8, 0.14);
  --ok:        #16a34a;
  --ok-ink:    #ffffff;
  --ok-soft:   rgba(34, 197, 94, 0.12);
  --led:       #22c55e;
  --led-soft:  rgba(34, 197, 94, 0.18);
  --bad:       #dc2626;
  --bad-soft:  rgba(239, 68, 68, 0.12);
  /* Tokens nuevos del handoff */
  --accent:        #cc2129;
  --accent-2:      #f87171;
  --accent-soft:   rgba(204, 33, 41, 0.08);
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --row-hover:     #fafbfd;
  --row-active:    #fef2f2;
  --header-bg:     #cc2129;
  --header-ink:    #ffffff;
  --card-shadow:       0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04);
  --card-hover-shadow: 0 6px 20px rgba(204,33,41,0.20), 0 2px 6px rgba(15,23,42,0.06);
  --status-info:    #0e7490;
  --status-info-bg: rgba(6,182,212,0.14);
  --sans: 'Roboto', -apple-system, BlinkMacSystemFont,
          "Segoe UI", system-ui, sans-serif;
  --mono: 'Roboto Mono', 'Roboto', ui-monospace, Menlo, Consolas, "Courier New", monospace;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
}
[data-theme="plain"] body {
  background: #ffffff;
  background-image: none;
  letter-spacing: normal;
}
[data-theme="plain"] body::before { display: none; }

/* Reset selectivo: dejamos vivir transition/animation para card-hover, live-dot,
   shimmer. Solo neutralizamos efectos decorativos (text-shadow, backdrop blur). */
[data-theme="plain"] *,
[data-theme="plain"] *::before,
[data-theme="plain"] *::after {
  text-shadow: none !important;
}
[data-theme="plain"] .modal,
[data-theme="plain"] .card,
[data-theme="plain"] .drawer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Header rojo (igual a THEMES.rojo.headerBg) */
[data-theme="plain"] .hdr {
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}
[data-theme="plain"] .hdr::after { display: none; }
[data-theme="plain"] .hdr .hdr-right > div:first-child { color: #ffffff; }
[data-theme="plain"] .brand-mark::before { display: none; }
[data-theme="plain"] .brand-mark img { filter: none; animation: none; }
[data-theme="plain"] .brand-title {
  color: #ffffff;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
  transform: none;
  text-shadow: none;
  text-transform: none;
}
[data-theme="plain"] .brand-sub {
  color: rgba(255, 255, 255, 0.80);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}
[data-theme="plain"] .hdr-sep { background: rgba(255, 255, 255, 0.22); }
[data-theme="plain"] .hdr { color: #ffffff; }
[data-theme="plain"] .hdr > div:not(.brand):not(.hdr-sep):not(.hdr-right) > div { color: #ffffff !important; }

/* Cards con sombra suave + hover lift (estilo handoff) */
[data-theme="plain"] .card,
[data-theme="plain"] .modal,
[data-theme="plain"] .drawer {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-theme="plain"] .card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
  border-color: rgba(204, 33, 41, 0.35);
}
[data-theme="plain"] .card::before,
[data-theme="plain"] .modal::before { display: none; }
[data-theme="plain"] .modal-backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-theme="plain"] .modal {
  box-shadow: 0 10px 40px rgba(15,23,42,0.15), 0 2px 6px rgba(15,23,42,0.06);
}
[data-theme="plain"] .modal:hover { transform: none; box-shadow: 0 10px 40px rgba(15,23,42,0.15), 0 2px 6px rgba(15,23,42,0.06); }
[data-theme="plain"] .modal-actions { background: var(--panel-2); border-top: 1px solid var(--border); }
[data-theme="plain"] .modal-hdr { border-bottom: 1px solid var(--border); }
[data-theme="plain"] .modal-hdr-title {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
[data-theme="plain"] .modal .corner-tick,
[data-theme="plain"] .corner-tick { display: none; }
[data-theme="plain"] .card-hdr-title .idx { color: var(--muted); font-family: var(--mono); }
[data-theme="plain"] .sec-hd {
  font-family: var(--sans);
  font-size: 16.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
[data-theme="plain"] .sec-hd::before {
  background: var(--accent);
  box-shadow: none;
}

/* Sidebar filter chips */
[data-theme="plain"] .filter-chip {
  background: var(--panel);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}
[data-theme="plain"] .filter-chip:hover {
  background: var(--panel-2);
  border-color: var(--border-strong);
}
[data-theme="plain"] .filter-chip.on {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(204,33,41,0.18);
  font-weight: 600;
}
[data-theme="plain"] .filter-chip .cnt {
  background: rgba(148,163,184,0.18);
  color: var(--muted);
  border-radius: 999px;
  font-family: var(--mono);
}
[data-theme="plain"] .filter-chip.on .cnt {
  background: var(--accent);
  color: #ffffff;
}

/* Chips del header (status, clock, user, db) */
[data-theme="plain"] .status-chip,
[data-theme="plain"] .clock-chip,
[data-theme="plain"] .user-chip {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow: none;
  padding: 4px 12px;
}
[data-theme="plain"] .clock-chip { font-family: var(--mono); }
[data-theme="plain"] .user-avatar {
  background: #ffffff;
  color: var(--accent);
  border-radius: 50%;
  font-weight: 700;
}
[data-theme="plain"] .hdr .db-chip,
[data-theme="plain"] .hdr .clock-chip { display: none; }
[data-theme="plain"] .theme-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-radius: 999px;
  transition: background .15s ease;
}
[data-theme="plain"] .theme-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
[data-theme="plain"] .user-logout,
[data-theme="plain"] .user-tool {
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0;
  letter-spacing: 0;
  text-transform: none;
  transition: background .15s ease, color .15s ease;
}
[data-theme="plain"] .user-logout:hover {
  color: #fecaca;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid transparent;
  transform: none;
}
[data-theme="plain"] .user-tool:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid transparent;
  transform: none;
}
[data-theme="plain"] .user-tool-text,
[data-theme="plain"] .user-logout-text { display: none; }
[data-theme="plain"] .hdr-sel {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
}
[data-theme="plain"] .hdr-sel:hover { background: rgba(255, 255, 255, 0.18); }
[data-theme="plain"] .hdr-sel option { color: var(--ink); }

/* Inputs */
[data-theme="plain"] .inp,
[data-theme="plain"] .sel,
[data-theme="plain"] textarea.inp {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-theme="plain"] .inp:focus,
[data-theme="plain"] .sel:focus,
[data-theme="plain"] textarea.inp:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(204, 33, 41, 0.12);
}
[data-theme="plain"] textarea.inp { font-family: var(--mono); }
[data-theme="plain"] .sel,
[data-theme="plain"] .hdr-sel,
[data-theme="plain"] select {
  padding-right: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
[data-theme="plain"] .date-field {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
[data-theme="plain"] .date-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(204, 33, 41, 0.12); }
[data-theme="plain"] .date-field .date-inp { color: var(--ink); }
[data-theme="plain"] .date-field .date-inp::-webkit-calendar-picker-indicator { filter: none; opacity: 0.7; }

/* Botones */
[data-theme="plain"] .btn {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
[data-theme="plain"] .btn:hover {
  background: var(--panel-2);
  border-color: var(--border-strong);
  box-shadow: none;
}
[data-theme="plain"] .btn.primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  font-weight: 600;
}
[data-theme="plain"] .btn.primary:hover {
  background: #a81b22;
  border-color: #a81b22;
  filter: none;
  box-shadow: 0 4px 12px rgba(204, 33, 41, 0.25);
}
/* En plain, .cyan se reasigna semánticamente a VERDE (porque --cyan ahora es rojo
   y choca con .primary; el handoff usa verde para acciones "ok / Resuelto"). */
[data-theme="plain"] .btn.cyan {
  background: var(--ok);
  color: #ffffff;
  border-color: var(--ok);
  box-shadow: none;
}
[data-theme="plain"] .btn.cyan:hover { background: #15803d; border-color: #15803d; filter: none; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.20); }
[data-theme="plain"] .btn.cherry {
  background: #ffffff;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
[data-theme="plain"] .btn.cherry:hover { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }
[data-theme="plain"] .btn.danger {
  background: transparent;
  color: var(--bad);
  border: 1px solid rgba(220, 38, 38, 0.4);
}
[data-theme="plain"] .btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
[data-theme="plain"] .btn.ghost { background: transparent; border-color: transparent; }
[data-theme="plain"] .btn.ghost:hover { background: var(--panel-2); border-color: transparent; }
[data-theme="plain"] .btn.btn-fecha {
  background: #f59e0b;
  color: #ffffff;
  border-color: #f59e0b;
  font-weight: 600;
  border-radius: var(--r-md);
  text-shadow: none;
}
[data-theme="plain"] .btn.btn-fecha:hover { background: #d97706; border-color: #d97706; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); }

/* Tags (estatus pedidos) */
[data-theme="plain"] .tag {
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.02em;
  text-transform: none;
  border: 1px solid transparent;
}
[data-theme="plain"] .tag.ok    { color: var(--ok);   background: var(--ok-soft); }
[data-theme="plain"] .tag.cyan  { color: var(--status-info); background: var(--status-info-bg); }
[data-theme="plain"] .tag.yellow{ color: var(--yellow); background: var(--yellow-soft); }
[data-theme="plain"] .tag.red   { color: var(--bad);  background: var(--bad-soft); }
[data-theme="plain"] .tag.mute  { color: var(--muted);background: rgba(148,163,184,0.12); }

/* Llamadas chips (resultado) */
[data-theme="plain"] .llam-chip { border: none; border-radius: var(--r-sm); font-family: var(--mono); font-weight: 600; padding: 3px 8px; font-size: 15px; }
[data-theme="plain"] .llam-chip.r-pedido   { background: var(--ok-soft);          color: var(--ok); }
[data-theme="plain"] .llam-chip.r-transfer { background: var(--status-info-bg);   color: var(--status-info); }
[data-theme="plain"] .llam-chip.r-colgo    { background: var(--yellow-soft);      color: var(--yellow); }
[data-theme="plain"] .llam-chip.r-error    { background: var(--bad-soft);         color: var(--bad); }
[data-theme="plain"] .llam-chip.r-human    { background: var(--accent-soft);      color: var(--accent); }
[data-theme="plain"] .llam-chip.r-inbound  { background: rgba(139,92,246,.12);    color: #7c3aed; }
[data-theme="plain"] .llam-chip.r-default  { background: var(--panel-2);          color: var(--muted); }

/* Tabla principal */
[data-theme="plain"] .tbl thead th {
  background: var(--panel);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}
[data-theme="plain"] .tbl tbody td {
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
[data-theme="plain"] .tbl tbody tr { transition: background .15s ease; }
[data-theme="plain"] .tbl tbody tr:hover { background: var(--row-hover); }
[data-theme="plain"] .tbl tbody tr.active { background: var(--row-active); box-shadow: inset 3px 0 0 var(--accent); }

[data-theme="plain"] .cell-folio { color: var(--accent); font-family: var(--mono); font-weight: 600; }
[data-theme="plain"] .cell-main  { color: var(--ink); }
[data-theme="plain"] .cell-sub   { color: var(--muted); }
[data-theme="plain"] .cell-total { color: var(--ink); font-family: var(--mono); }
[data-theme="plain"] .empty      { color: var(--muted); }

/* Drawer */
[data-theme="plain"] .drawer-folio   { color: var(--accent); font-family: var(--mono); font-weight: 700; }
[data-theme="plain"] .drawer-cliente { color: var(--ink); }
[data-theme="plain"] .kv-val .editable:hover { border: 1px dashed var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); }

/* Líneas de producto en drawer */
[data-theme="plain"] .line-row {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
[data-theme="plain"] .line-cant { color: var(--accent); font-family: var(--mono); font-weight: 700; }
[data-theme="plain"] .line-cant.editable:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}
[data-theme="plain"] .line-name { color: var(--ink); }

/* Transcripción */
[data-theme="plain"] .transcript {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink-soft);
}
[data-theme="plain"] .transcript .turn-row { border-bottom: 1px dashed var(--border); }
[data-theme="plain"] .transcript .who.agent  { color: var(--accent); font-weight: 600; }
[data-theme="plain"] .transcript .who.caller { color: var(--muted); }

/* Login */
[data-theme="plain"] .login-stage {
  background:
    radial-gradient(ellipse at top, rgba(204, 33, 41, 0.06), transparent 50%),
    var(--panel-2);
}
[data-theme="plain"] .login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
}
[data-theme="plain"] .login-card .corner-tick { display: none; }
[data-theme="plain"] .login-brand { border-bottom: 1px solid var(--border); }
[data-theme="plain"] .login-brand .brand-title {
  color: var(--ink);
  font-family: var(--sans);
  font-style: normal;
  letter-spacing: -0.02em;
  transform: none;
  text-transform: none;
  font-weight: 700;
}
[data-theme="plain"] .login-brand .brand-sub {
  color: var(--muted);
  font-family: var(--sans);
  text-transform: none;
}
[data-theme="plain"] .login-lbl {
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
[data-theme="plain"] .login-err {
  background: var(--bad-soft);
  color: var(--bad);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--sans);
}
[data-theme="plain"] .auth-loading {
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--sans);
}
[data-theme="plain"] .db-chip.online {
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.10);
}
[data-theme="plain"] .db-chip.online .dot {
  background: var(--led);
  box-shadow: 0 0 0 0 var(--led);
}
[data-theme="plain"] .db-chip.offline {
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="plain"] .db-chip.offline .dot { background: rgba(255, 255, 255, 0.4); }

/* Admin usuarios */
[data-theme="plain"] .usr-create {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
[data-theme="plain"] .usr-tbl-wrap { border: 1px solid var(--border); border-radius: var(--r-md); }
[data-theme="plain"] .usr-tbl thead th {
  background: var(--panel);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
[data-theme="plain"] .usr-tbl tbody td { border-bottom: 1px solid var(--border); }
[data-theme="plain"] .usr-tbl tbody tr:hover { background: var(--row-hover); }
[data-theme="plain"] .usr-me-tag {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-sm);
  font-weight: 600;
}

/* KPI pills */
[data-theme="plain"] .kpi-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
[data-theme="plain"] .kpi-pill b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
[data-theme="plain"] .kpi-pill i { color: var(--muted); }

/* Fecha tags */
[data-theme="plain"] .fecha-tag.fecha-hoy    { background: var(--ok); color: #ffffff; font-weight: 700; border: 1px solid transparent; }
[data-theme="plain"] .fecha-tag.fecha-manana { background: #facc15; color: #713f12; font-weight: 700; border: 1px solid transparent; }
[data-theme="plain"] .fecha-tag.fecha-otro   { background: var(--status-info-bg); color: var(--status-info); border: 1px solid transparent; }
[data-theme="plain"] .fecha-tag.fecha-pasada { background: var(--bad-soft); color: var(--bad); border: 1px solid transparent; }

/* Theme toggle */
.theme-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.theme-btn:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan-soft); }

/* ——— Modal ——— */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 9999; display: grid; place-items: center;
  animation: modal-fade 0.16s ease-out;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  min-width: 380px; max-width: 520px;
  background: linear-gradient(180deg, rgba(13, 20, 40, 0.98), rgba(11, 17, 36, 0.98));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,227,255,0.05);
  overflow: hidden;
  animation: modal-pop 0.18s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
@keyframes modal-pop { from { transform: translateY(8px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.modal::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.5;
}
.modal .corner-tick { position: absolute; width: 10px; height: 10px; border: 1px solid var(--cyan); }
.modal .corner-tick.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.modal .corner-tick.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.modal-hdr { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.modal-hdr-title { font-family: var(--mono); font-size: 16.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.modal-body { padding: 18px 20px; }
.modal-body .modal-msg { font-size: 21px; color: var(--ink); line-height: 1.5; margin-bottom: 14px; }
.modal-body .modal-sub { font-size: 17.25px; color: var(--muted); margin-top: -8px; margin-bottom: 14px; line-height: 1.45; }
.modal-body .modal-input-lbl { font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; margin-top: 10px; }
.modal-body input.inp { font-family: var(--mono); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid var(--line); background: var(--panel-2); }

/* ——— Header ——— */
.hdr {
  height: 101px; flex-shrink: 0;
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px;
  overflow: visible;
  background: linear-gradient(180deg, rgba(13, 20, 40, 0.85), rgba(13, 20, 40, 0.65));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  position: relative;
}
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan) 80%, transparent);
  opacity: 0.25;
}

.brand { display: flex; align-items: center; gap: 16px; flex-shrink: 0; min-width: 0; }
.brand-mark {
  width: 120px; height: 120px;
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  display: grid; place-items: center;
}
/* Glow tras el robot. Por default (tema oscuro) = AMARILLO canario.
   En tema claro pasa a CYAN (override mas abajo). */
.brand-mark::before {
  content: ""; position: absolute; inset: -13px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 245, 0, 0.55), transparent 65%);
  pointer-events: none; z-index: 0;
  transition: background 0.3s ease;
}
.brand-mark img {
  position: relative; z-index: 2; display: block;
  width: 115px !important; height: 115px !important;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255, 245, 0, 0.7))
          drop-shadow(0 0 28px rgba(255, 200, 0, 0.4));
  animation: levitate 3.2s ease-in-out infinite;
  transition: filter 0.3s ease;
}

/* Tema claro: glow CYAN */
[data-theme="light"] .brand-mark::before {
  background: radial-gradient(circle at 50% 50%, rgba(34, 227, 255, 0.55), transparent 65%);
}
[data-theme="light"] .brand-mark img {
  filter: drop-shadow(0 0 16px rgba(34, 227, 255, 0.75))
          drop-shadow(0 0 28px rgba(34, 200, 255, 0.45));
}
@keyframes levitate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.brand-textblock {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 0;
}

@font-face {
  font-family: 'Eurostile Bold Oblique Fallback';
  src: local('Eurostile Bold Oblique'), local('Eurostile-BoldOblique'),
       local('Bank Gothic Bold'), local('Microgramma Extended Bold');
  font-style: oblique; font-weight: 700;
}
.brand-title {
  font-family: 'Eurostile Bold Oblique Fallback', 'Saira Stencil One',
               'Eurostile', 'Bank Gothic', 'Microgramma',
               'Orbitron', 'Rajdhani', sans-serif;
  font-size: 42px; font-weight: 700; font-style: oblique;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); line-height: 1; transform: skewX(-8deg);
  text-shadow: 0 0 12px rgba(212, 160, 23, 0.35); white-space: nowrap;
}
.brand-sub {
  font-family: var(--mono); font-size: 16.5px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; white-space: nowrap;
}
[data-theme="light"] .brand-title { color: #0a1430; }
[data-theme="light"] .brand-sub { color: rgba(10,20,48,0.75); }

.hdr-sep { width: 1px; height: 40px; background: var(--line-2); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.status-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 16px; border-radius: 999px;
  background: rgba(34, 227, 255, 0.08);
  border: 1px solid rgba(34, 227, 255, 0.35);
  font-family: var(--mono); font-size: 18px; letter-spacing: 0.04em;
}
.status-chip .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 0 3px var(--led-soft), 0 0 12px var(--led);
  animation: pulse 2s ease-in-out infinite;
}
.status-chip .label { color: var(--ink); font-weight: 500; }
.status-chip .meta { color: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.clock-chip {
  font-family: var(--mono); font-size: 21px; letter-spacing: 0.04em;
  color: var(--ink-soft); padding: 8px 14px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 999px;
}
[data-theme="light"] .clock-chip { background: rgba(10,20,48,0.1); color: #0a1430; border-color: rgba(10,20,48,0.35); }

/* ——— Stage layout ——— */
.stage {
  flex: 1;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 12px; padding: 12px; min-height: 0;
}
.stage.has-drawer {
  grid-template-columns: 290px 1fr 460px;
}

.card {
  background: linear-gradient(180deg, rgba(13, 20, 40, 0.92), rgba(11, 17, 36, 0.92));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; min-height: 0;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.card-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.card-hdr-title { font-size: 16.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.card-hdr-title .idx { font-family: var(--mono); font-size: 15px; color: var(--cyan); font-weight: 500; letter-spacing: 0.05em; }
.card-hdr-meta { font-family: var(--mono); font-size: 15.75px; color: var(--muted); letter-spacing: 0.04em; }

/* Filtro inline en cabecera del card */
.hdr-filter-lbl {
  font-family: var(--mono); font-size: 14.25px; color: var(--muted);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.hdr-sel {
  width: auto; min-width: 160px;
  padding: 6px 28px 6px 10px;
  font-family: var(--mono); font-size: 17.25px;
  color: var(--cyan); border-color: rgba(212,160,23,0.35);
  background: var(--panel-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hdr-sel:hover { border-color: var(--cyan); }
[data-theme="light"] .hdr-sel { background: #ffffff; color: #0a1430; border-color: rgba(10,20,48,0.18); }
.card-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.card-body.flush { padding: 0; }

/* ——— Sidebar (filtros) ——— */
.sec { margin-bottom: 16px; }
.sec:last-child { margin-bottom: 0; }
.sec-hd { font-family: var(--mono); font-size: 15px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.sec-hd::before { content: ""; width: 4px; height: 4px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

.filter-chip {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 12px; margin-bottom: 6px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 18.75px; color: var(--ink-soft);
  transition: all 0.12s ease;
}
.filter-chip:hover { background: var(--panel-3); border-color: rgba(212, 160, 23, 0.35); }
.filter-chip.on {
  background: rgba(212, 160, 23, 0.12); color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), 0 0 12px rgba(212, 160, 23, 0.15);
}
.filter-chip .cnt { font-family: var(--mono); font-size: 15.75px; color: var(--muted); padding: 1px 7px; border-radius: 999px; background: rgba(120, 131, 168, 0.15); }
.filter-chip.on .cnt { background: var(--cyan-soft); color: var(--cyan); }

/* ——— Bandejas departamentales (sidebar) ———
   Chips de "¿a quién le toca el pedido?". Reusan .filter-chip y sólo agregan el
   punto de color, que replica el color del subestado que representa la bandeja
   (ver .sub-* más abajo) para que el ojo las ligue con la columna AVANCE.
   — Eduardo Luna · 2026 */
.bandeja-chip .bnd-lbl { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.bandeja-chip .bnd-dot {
  width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto;
  background: var(--bnd-c, #7883a8);
  box-shadow: 0 0 7px var(--bnd-c, #7883a8);
}
.bandeja-chip.bnd-todas .bnd-dot {
  background: transparent; box-shadow: none;
  border: 1px dashed rgba(120, 131, 168, 0.75);
}
.bandeja-chip.bnd-cc        { --bnd-c: #5aa9ff; }
.bandeja-chip.bnd-operador  { --bnd-c: #b98bff; }
.bandeja-chip.bnd-mesa      { --bnd-c: #34d0c4; }
.bandeja-chip.bnd-caja      { --bnd-c: #f5b83d; }
.bandeja-chip.bnd-finalizado { --bnd-c: #2fb56e; }
/* Al seleccionar, el borde toma el color de la bandeja (el fondo/tinta los sigue
   dando .filter-chip.on, que ya está resuelto por tema). */
.filter-chip.bandeja-chip.on { border-color: var(--bnd-c, var(--cyan)); }
/* Tema claro: los mismos matices bajados de luminosidad para que contrasten
   contra el chip blanco. El ámbar sobre blanco es el peor caso. */
[data-theme="light"] .bandeja-chip.bnd-cc        { --bnd-c: #1f7fd6; }
[data-theme="light"] .bandeja-chip.bnd-operador  { --bnd-c: #7c4dd6; }
[data-theme="light"] .bandeja-chip.bnd-mesa      { --bnd-c: #12968c; }
[data-theme="light"] .bandeja-chip.bnd-caja      { --bnd-c: #b07d06; }
[data-theme="light"] .bandeja-chip.bnd-finalizado { --bnd-c: #1c8f52; }
[data-theme="light"] .bandeja-chip .bnd-dot { box-shadow: none; }
/* Tema plain (rojo corporativo): sin glow, igual que el resto del tema. */
[data-theme="plain"] .bandeja-chip .bnd-dot { box-shadow: none; }
[data-theme="plain"] .bandeja-chip.bnd-cc        { --bnd-c: #1f7fd6; }
[data-theme="plain"] .bandeja-chip.bnd-operador  { --bnd-c: #7c4dd6; }
[data-theme="plain"] .bandeja-chip.bnd-mesa      { --bnd-c: #12968c; }
[data-theme="plain"] .bandeja-chip.bnd-caja      { --bnd-c: #b07d06; }
[data-theme="plain"] .bandeja-chip.bnd-finalizado { --bnd-c: #1c8f52; }

/* Inputs */
.inp, .sel, textarea.inp {
  font-family: var(--sans); font-size: 19.5px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 10px; width: 100%; outline: none; transition: border-color 0.15s;
}
.inp:focus, .sel:focus, textarea.inp:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
textarea.inp { font-family: var(--mono); font-size: 18px; resize: vertical; }
.sel {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4a017' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}

/* date-field (sidebar) */
/* Toggle CREACIÓN | SERVICIO: elige sobre qué columna aplica el rango de fecha.
   — Eduardo Luna · 2026 */
.fecha-toggle {
  display: flex; gap: 4px; margin-bottom: 8px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.fecha-toggle-btn {
  flex: 1; cursor: pointer; padding: 6px 4px;
  font-family: var(--mono); font-size: 14.25px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  background: transparent; border: 0; border-radius: var(--r-sm);
  transition: background 0.12s ease, color 0.12s ease;
}
.fecha-toggle-btn:hover { color: var(--ink-soft); background: var(--panel-2); }
.fecha-toggle-btn.on {
  background: var(--cyan-soft); color: var(--cyan); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--cyan);
}

.date-field {
  position: relative;
  display: flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0 6px 0 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.date-field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.date-field .date-lbl {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.16em;
  color: var(--muted); text-transform: uppercase; flex-shrink: 0; padding-right: 8px;
}
.date-field .date-inp {
  border: 0; padding: 8px 4px; background: transparent;
  font-family: var(--mono); font-size: 18px; color: var(--ink);
  flex: 1; min-width: 0; cursor: pointer;
}
.date-field .date-inp:focus { box-shadow: none; border-color: transparent; }
/* tinta el icono calendario nativo */
.date-field .date-inp::-webkit-calendar-picker-indicator {
  filter: invert(0.75) sepia(1) saturate(8) hue-rotate(2deg) brightness(0.95);
  cursor: pointer;
  opacity: 0.85;
}
.date-field .date-inp::-webkit-calendar-picker-indicator:hover { opacity: 1; }
[data-theme="light"] .date-field .date-inp::-webkit-calendar-picker-indicator {
  filter: invert(0.4) sepia(1) saturate(8) hue-rotate(355deg) brightness(0.85);
}
.date-clear {
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 18px;
  transition: all 0.12s ease;
}
.date-clear:hover { background: var(--bad-soft); color: var(--bad); }

/* datalist option (modal/sidebar autocomplete) — algunos navegadores las pintan
   con fondo blanco; aquí solo aseguramos consistencia de tipografía */
input[list]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) sepia(1) saturate(8) hue-rotate(2deg) brightness(0.95);
  opacity: 0.6;
}
[data-theme="light"] input[list]::-webkit-calendar-picker-indicator {
  filter: invert(0.4) sepia(1) saturate(8) hue-rotate(355deg) brightness(0.85);
}

/* Buttons */
.btn {
  font-family: var(--sans); font-size: 18.75px; font-weight: 500; letter-spacing: 0.01em;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: all 0.15s ease; white-space: nowrap;
}
.btn:hover { background: var(--panel-3); border-color: var(--line-2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: var(--cyan); color: var(--cyan-ink); border-color: var(--cyan);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.3), 0 4px 18px rgba(212, 160, 23, 0.2);
}
.btn.primary:hover { filter: brightness(1.1); box-shadow: 0 0 0 1px var(--cyan), 0 4px 24px rgba(212, 160, 23, 0.35); }
.btn.cyan { background: var(--ok); color: var(--ok-ink); border-color: var(--ok); font-weight: 600;
  box-shadow: 0 0 0 1px rgba(34, 227, 255, 0.3), 0 4px 18px rgba(34, 227, 255, 0.22); }
.btn.cyan:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px var(--ok), 0 4px 24px rgba(34, 227, 255, 0.35); }
.btn.danger { background: transparent; color: var(--bad); border-color: rgba(255, 107, 138, 0.4); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn.cherry {
  background: #c81e3a; color: #ffffff; border-color: #c81e3a; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(200, 30, 58, 0.3), 0 4px 18px rgba(200, 30, 58, 0.28);
}
.btn.cherry:hover { background: #d72744; border-color: #d72744; box-shadow: 0 0 0 1px #d72744, 0 4px 24px rgba(215, 39, 68, 0.4); }
.btn.assign-repart {
  background: #e6e6e6; color: #111111; border-color: #cfcfcf; font-weight: 600;
  box-shadow: none;
}
.btn.assign-repart:hover { background: #d8d8d8; border-color: #b8b8b8; box-shadow: none; filter: none; }
[data-theme="plain"] .btn.assign-repart {
  background: #e6e6e6; color: #111111; border-color: #cfcfcf;
}
[data-theme="plain"] .btn.assign-repart:hover { background: #d8d8d8; border-color: #b8b8b8; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 17.25px; }
.btn.xs { padding: 4px 8px; font-size: 15.75px; border-radius: 4px; font-weight: 500; }
.btn.block { width: 100%; }

.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }

/* Tags */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 15.75px; font-weight: 500; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
  text-transform: uppercase;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag.ok    { background: var(--ok-soft);    color: var(--ok);    border-color: rgba(34, 227, 255, 0.28); }
.tag.ok::before {
  background: var(--yellow);
  box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.65);
  animation: tag-pulse-yellow 1.6s ease-out infinite;
}
@keyframes tag-pulse-yellow {
  0%   { box-shadow: 0 0 0 0   rgba(255, 210, 63, 0.65); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 210, 63, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 210, 63, 0); }
}
[data-theme="plain"] .tag.ok::before { background: #d4a017; box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.65); }
[data-theme="plain"] .tag.ok::before { animation: tag-pulse-yellow-plain 1.6s ease-out infinite; }
@keyframes tag-pulse-yellow-plain {
  0%   { box-shadow: 0 0 0 0   rgba(212, 160, 23, 0.65); }
  70%  { box-shadow: 0 0 0 6px rgba(212, 160, 23, 0); }
  100% { box-shadow: 0 0 0 0   rgba(212, 160, 23, 0); }
}
.tag.cyan  { background: var(--cyan-soft);  color: var(--cyan);  border-color: rgba(212, 160, 23, 0.28); }
.tag.yellow{ background: var(--yellow-soft);color: var(--yellow);border-color: rgba(255, 210, 63, 0.3); }
.tag.red   { background: var(--bad-soft);   color: var(--bad);   border-color: rgba(255, 107, 138, 0.28); }
.tag.mute  { background: rgba(120, 131, 168, 0.1); color: var(--muted); border-color: rgba(120, 131, 168, 0.2); }

/* Subestado (checkpoint de flujo) — pill redondeada, distinta del tag de estatus.
   recibido -> validado -> liquidado -> confirmado. — Eduardo Luna · 2026 */
.subtag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 14.5px; font-weight: 600; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.subtag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sub-recibido   { color: #9aa3b8; background: rgba(120, 131, 168, 0.12); border-color: rgba(120, 131, 168, 0.28); }
.sub-validado   { color: #5aa9ff; background: rgba(90, 169, 255, 0.12);  border-color: rgba(90, 169, 255, 0.30); }
.sub-liquidado  { color: #f5b83d; background: rgba(245, 184, 61, 0.14);  border-color: rgba(245, 184, 61, 0.32); }
.sub-confirmado { color: #2fb56e; background: rgba(58, 208, 127, 0.14);  border-color: rgba(58, 208, 127, 0.32); }
.sub-transmitido{ color: #b98bff; background: rgba(158, 110, 255, 0.16); border-color: rgba(158, 110, 255, 0.34); }
.sub-entregado  { color: #34d0c4; background: rgba(52, 208, 196, 0.14);  border-color: rgba(52, 208, 196, 0.32); }
.sub-na         { color: var(--muted); background: rgba(120, 131, 168, 0.1); border-color: rgba(120, 131, 168, 0.2); }

/* Pestañas (Pedidos / Asignación) — Eduardo Luna · 2026 */
.tabs { display: flex; gap: 6px; padding: 14px 28px 0; }
.tab {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 18px; font-weight: 600;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 10px 18px; cursor: pointer;
}
.tab:hover { color: var(--ink); background: var(--row-hover, rgba(120,160,255,0.06)); }
.tab.on {
  color: var(--ink); background: var(--panel);
  border-color: var(--line); box-shadow: inset 0 3px 0 var(--cyan);
}
.tab-glyph { font-size: 16px; opacity: .8; }

/* Pestaña Asignación de Pedidos */
.asg-wrap { flex: 1; padding: 18px 28px 28px; min-height: 0; }
.asg-wrap .main-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.asg-hint { font-size: 15px; color: var(--muted); line-height: 1.5; }
.asg-hint b { color: var(--ink); font-weight: 600; }
.asg-warn { color: #f5b83d; }

/* Punteo en mapa (Leaflet) — Eduardo Luna · 2026 */
.mapa-punto { height: 380px; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.mapa-punto-info { margin-top: 8px; font-size: 14px; }
.mapa-punto-dir { margin-top: 4px; font-size: 13px; color: var(--muted); }
.mp-pin { font-size: 24px; line-height: 24px; text-align: center; background: none; border: none; }
.pin-set { color: #34d0c4; font-weight: 600; }
.conf-nota { font-size: 14px; color: var(--muted); font-style: italic; padding: 6px 2px; }

/* Tabla */
.tbl { width: 100%; border-collapse: collapse; font-size: 18.75px; }
.tbl thead th {
  position: sticky; top: 0; background: var(--panel);
  font-family: var(--mono); font-size: 14.25px; font-weight: 500; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--line); z-index: 2;
}
.tbl tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-soft); }
.tbl tbody tr { transition: background 0.12s; cursor: pointer; }
.tbl tbody tr:hover { background: rgba(212, 160, 23, 0.04); }
.tbl tbody tr.active { background: rgba(212, 160, 23, 0.10); box-shadow: inset 3px 0 0 var(--cyan); }
.tbl .mono { font-family: var(--mono); font-size: 17.25px; }
.tbl .mono.dim { color: var(--muted); }

.cell-folio { font-family: var(--mono); font-size: 18.75px; color: var(--cyan); font-weight: 600; letter-spacing: 0.04em; }
.cell-main { color: var(--ink); font-weight: 500; }
.cell-sub  { color: var(--muted); font-family: var(--mono); font-size: 15.75px; margin-top: 2px; }
.cell-dir {
  color: var(--ink-soft); font-size: 17.25px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; word-break: break-word;
  max-width: 280px;
}
.cell-total { font-family: var(--mono); font-size: 19.5px; color: var(--ink); font-weight: 600; text-align: right; }

/* Empty */
.empty { color: var(--muted); font-size: 18.75px; text-align: center; padding: 50px 20px; font-style: italic; }

/* Corner ticks */
.corner-tick { position: absolute; width: 10px; height: 10px; border: 1px solid var(--cyan); opacity: 0.5; }
.corner-tick.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.corner-tick.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.corner-tick.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.corner-tick.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* ——— Drawer detalle ——— */
.drawer { display: flex; flex-direction: column; min-height: 0; }
.drawer-section { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-section:last-child { border-bottom: 0; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.drawer-folio { font-family: var(--mono); font-size: 27px; font-weight: 600; color: var(--cyan); letter-spacing: 0.06em; }
.drawer-cliente { font-size: 16px; color: var(--ink); font-weight: 500; }
.drawer-tel { font-family: var(--mono); font-size: 18px; color: var(--muted); margin-top: 2px; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 18.75px; }
.kv-key { font-family: var(--mono); font-size: 15px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.kv-val { color: var(--ink-soft); line-height: 1.45; word-break: break-word; }
.kv-val.mono { font-family: var(--mono); font-size: 17.25px; }
.kv-val .editable { cursor: text; padding: 2px 6px; border-radius: 4px; border: 1px dashed transparent; transition: border-color .12s; }
.kv-val .editable:hover { border-color: var(--line-2); }

.line-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; background: var(--panel-2); border-radius: var(--r-sm);
  border: 1px solid var(--line); margin-bottom: 6px;
}
.line-cant {
  font-family: var(--mono); font-size: 19.5px; color: var(--cyan); font-weight: 600;
  width: 78px; flex-shrink: 0; padding: 2px 6px;
  border: 1px dashed transparent; border-radius: 4px;
  text-align: center;
  transition: all .12s ease;
}
.line-cant.editable { cursor: pointer; }
.line-cant.editable:hover {
  border-color: var(--cyan);
  background: var(--cyan-soft);
  box-shadow: 0 0 10px rgba(212,160,23,0.15);
}
.line-info { flex: 1; min-width: 0; }
.line-name { font-size: 19.5px; color: var(--ink); }
.line-price { font-family: var(--mono); font-size: 15.75px; color: var(--muted); margin-top: 2px; }
.line-sub { font-family: var(--mono); font-size: 18px; color: var(--ink-soft); flex-shrink: 0; padding-top: 2px; }

.transcript {
  font-family: var(--mono); font-size: 16.5px; line-height: 1.5;
  color: var(--ink-soft); background: #030613;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; max-height: 180px; overflow-y: auto;
  white-space: pre-wrap;
}
.transcript .turn-row { padding: 4px 0; border-bottom: 1px dashed rgba(120,160,255,0.06); }
.transcript .turn-row:last-child { border-bottom: 0; }
.transcript .who { font-family: var(--mono); font-size: 14.25px; letter-spacing: 0.12em; text-transform: uppercase; }
.transcript .who.caller { color: var(--muted); }
.transcript .who.agent { color: var(--cyan); }
.transcript .txt { color: var(--ink-soft); margin-top: 2px; font-family: var(--sans); font-size: 18px; line-height: 1.4; }

/* Action buttons stack */
.action-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-stack .btn { width: 100%; padding: 10px 12px; font-size: 18.75px; }

/* Chips de fecha de servicio */
.fecha-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 15.75px;
  letter-spacing: 0.4px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  font-family: var(--mono);
}
.fecha-tag.fecha-hoy    { color: var(--ok-ink);   background: var(--ok);   font-weight: 700; }
.fecha-tag.fecha-manana { color: #04221a;         background: var(--led);  font-weight: 700; }
.fecha-tag.fecha-otro {
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid rgba(34, 227, 255, 0.35);
}
.fecha-tag.fecha-pasada {
  color: var(--bad);
  background: var(--bad-soft);
  border: 1px solid rgba(255, 107, 138, 0.35);
}
.fecha-tag.muted { color: var(--muted-dim); background: transparent; }

/* Botón "Cambiar fecha"
   - dark : igual a .btn.cyan
   - light/plain: amarillo con letras blancas */
.btn.btn-fecha {
  background: var(--ok);
  color: var(--ok-ink);
  border-color: var(--ok);
  font-weight: 600;
}
.btn.btn-fecha:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px var(--ok), 0 4px 24px rgba(34, 227, 255, 0.35);
}
[data-theme="light"] .btn.btn-fecha,
[data-theme="plain"] .btn.btn-fecha {
  background: #f5c300;
  color: #ffffff;
  border-color: #f5c300;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .btn.btn-fecha:hover,
[data-theme="plain"] .btn.btn-fecha:hover {
  background: #e0b000;
  border-color: #e0b000;
  filter: none;
  box-shadow: none;
}

/* ============================================================
   Login screen + user chip
   ============================================================ */

.auth-loading {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--mono); font-size: 36px;
}

.login-stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at top, rgba(212, 160, 23, 0.10), transparent 50%),
              radial-gradient(ellipse at bottom, rgba(34, 227, 255, 0.06), transparent 50%),
              var(--bg);
  overflow: hidden;
}

.login-card {
  position: relative;
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 40px 40px 32px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(212, 160, 23, 0.08) inset;
}

.login-brand {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 22px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.login-brand .brand-mark img { width: 58px; height: 58px; }
/* Tamaño reducido + wrapping para que el título NO se desborde de la tarjeta.
   — Eduardo Luna · 2026 */
.login-brand .brand-title { font-family: var(--sans); font-size: 23px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--ink);
  white-space: normal; overflow-wrap: break-word; word-break: break-word;
  line-height: 1.14; transform: none; }
.login-brand .brand-sub { font-family: var(--mono); font-size: 15px; color: var(--muted);
  letter-spacing: 0.16em; margin-top: 4px; white-space: normal; }

.login-form { display: flex; flex-direction: column; gap: 6px; }

.login-lbl {
  font-family: var(--mono); font-size: 19.5px; letter-spacing: 0.18em;
  color: var(--muted); text-transform: uppercase;
  margin-top: 10px; margin-bottom: 6px;
}

.login-form .inp { width: 100%; padding: 14px 16px; font-size: 26.25px; }

.login-err {
  margin-top: 12px;
  padding: 10px 14px;
  font-family: var(--mono); font-size: 22.5px;
  color: var(--bad);
  background: var(--bad-soft);
  border: 1px solid rgba(255, 107, 138, 0.4);
  border-radius: var(--r-sm);
}

.login-btn {
  margin-top: 22px;
  padding: 15px 18px;
  font-size: 25.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-card .corner-tick {
  position: absolute; width: 14px; height: 14px;
  border-color: rgba(212, 160, 23, 0.65);
}
.login-card .corner-tick.tl { top: 8px;    left: 8px;  border-left: 2px solid; border-top: 2px solid; }
.login-card .corner-tick.tr { top: 8px;    right: 8px; border-right: 2px solid; border-top: 2px solid; }
.login-card .corner-tick.bl { bottom: 8px; left: 8px;  border-left: 2px solid; border-bottom: 2px solid; }
.login-card .corner-tick.br { bottom: 8px; right: 8px; border-right: 2px solid; border-bottom: 2px solid; }

/* User chip en el header */
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans); font-size: 18px;
  color: var(--ink-soft);
}
.user-avatar {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cyan), #b8861a);
  color: #0b0d18;
  font-family: var(--sans); font-weight: 700; font-size: 18.75px;
  border-radius: 50%;
}
.user-name { letter-spacing: 0.02em; max-width: 140px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.user-logout {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.user-logout:hover {
  color: var(--bad);
  border-color: var(--bad);
  background: var(--bad-soft);
  transform: rotate(-12deg);
}

/* ============================================================
   Olympus DB indicator (verde pulsante / gris) + tool icon
   ============================================================ */

.db-chip { transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.db-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  background: var(--muted-dim);
  box-shadow: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.db-chip.online {
  color: #44e2a4;
  border-color: rgba(68, 226, 164, 0.45);
  background: rgba(68, 226, 164, 0.08);
}
.db-chip.online .dot {
  background: #44e2a4;
  box-shadow: 0 0 0 0 rgba(68, 226, 164, 0.65);
  animation: db-pulse 1.6s ease-out infinite;
}
.db-chip.offline {
  color: var(--muted);
  border-color: var(--line);
  background: var(--panel-2);
}
.db-chip.offline .dot { background: var(--muted-dim); }

@keyframes db-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(68, 226, 164, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(68, 226, 164, 0); }
  100% { box-shadow: 0 0 0 0   rgba(68, 226, 164, 0); }
}

[data-theme="light"] .db-chip.online {
  color: #0a8a5c;
  border-color: rgba(10, 138, 92, 0.45);
  background: rgba(10, 138, 92, 0.10);
}
[data-theme="light"] .db-chip.offline {
  color: rgba(10, 20, 48, 0.6);
  border-color: rgba(10, 20, 48, 0.25);
  background: rgba(10, 20, 48, 0.06);
}

/* User chip — ícono de llave (admin) */
.user-tool {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.user-tool:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: var(--cyan-soft);
  transform: rotate(18deg);
}

/* ============================================================
   Modal de gestion de usuarios
   ============================================================ */

.usr-create {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.usr-create-title {
  font-family: var(--mono); font-size: 15.75px; letter-spacing: 0.16em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 8px;
}
.usr-create-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1.2fr 0.9fr auto;
  gap: 8px;
  align-items: center;
}
.usr-create-grid .inp,
.usr-create-grid .sel { padding: 8px 10px; font-size: 18.75px; }

.usr-tbl-wrap { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.usr-tbl { width: 100%; border-collapse: collapse; font-size: 18.75px; }
.usr-tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2);
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em;
  color: var(--muted); text-transform: uppercase;
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.usr-tbl tbody td {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.usr-tbl tbody tr:hover { background: var(--panel-2); }
.usr-tbl tr.row-muted { opacity: 0.55; }
.usr-tbl .empty { text-align: center; color: var(--muted); padding: 20px; }
.usr-me-tag {
  display: inline-block; margin-left: 6px;
  font-family: var(--mono); font-size: 14.25px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--cyan-soft); color: var(--cyan);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.sel-tight { padding: 4px 8px; font-size: 18px; }

/* ——— Main column (pedidos + llamadas apilados) ——— */
.main-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.main-col > .card { flex: 0 0 auto; height: 45vh; }

/* ——— Llamadas card ——— */
.llam-card { height: 50vh; flex: 0 0 auto; }
.llam-card .card-hdr { flex-wrap: wrap; gap: 10px; }
.llam-kpis {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
}
.kpi-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 6px);
  background: var(--panel-2);
  font-family: var(--mono);
  line-height: 1.1;
  min-width: 64px;
}
.kpi-pill b {
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-pill i {
  font-style: normal;
  font-size: 14.25px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

.llam-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  white-space: nowrap;
}
.llam-chip.r-pedido    { background: var(--ok-soft);    color: var(--ok);   border-color: var(--ok); }
.llam-chip.r-transfer  { background: var(--cyan-soft);  color: var(--cyan); border-color: var(--cyan); }
.llam-chip.r-colgo     { background: var(--yellow-soft);color: var(--yellow);border-color: var(--yellow); }
.llam-chip.r-error     { background: var(--bad-soft);   color: var(--bad);  border-color: var(--bad); }
.llam-chip.r-inbound   { background: rgba(139,92,246,.14); color: #a78bfa; border-color: #8b5cf6; }
.llam-chip.r-default   { background: var(--panel-2);    color: var(--muted);}

.llam-sent {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
}
.llam-sent.s-pos { background: var(--ok-soft);  color: var(--ok);  border-color: var(--ok); }
.llam-sent.s-neu { background: var(--panel-2);  color: var(--muted); }
.llam-sent.s-neg { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }

/* Plain theme overrides para llamadas — los colores reales viven en el bloque
   `[data-theme="plain"]` principal (más arriba). Aquí solo neutralizamos box-shadow
   en .llam-sent que vive fuera del bloque. */
[data-theme="plain"] .llam-sent { box-shadow: none; border-color: var(--border); }

/* ============================================================
   Modal de conversión llamada → pedido
   ============================================================ */
.modal.conv-modal {
  min-width: 760px;
  max-width: 960px;
}
.conv-grid { position: relative; }
.conv-form .sec { margin-top: 18px; }
.conv-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.conv-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 10px;
}
.conv-lbl {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

/* Buscador de cliente (clientesE1) en Registrar llamada */
.cli-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.cli-result-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.cli-result-item:last-child { border-bottom: none; }
.cli-result-item:hover { background: var(--cyan-soft); }
.cli-result-nom { font-size: 16px; font-weight: 600; color: var(--ink); }
.cli-result-dir { font-family: var(--mono); font-size: 14px; color: var(--muted); margin-top: 1px; }
.cli-result-tel { font-family: var(--mono); font-size: 14px; color: var(--cyan); margin-top: 1px; }
.cli-result-empty { padding: 10px; font-family: var(--mono); font-size: 14px; color: var(--muted); }

/* Pestaña CLIENTES (buscador + CRUD del padrón E1). — Eduardo Luna · 2026 */
.cli-page { padding: 18px 28px 40px; }
.cli-search { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cli-search .inp { flex: 1; font-size: 17px; padding: 12px 14px; }
.cli-search-busy { font-family: var(--mono); font-size: 14px; color: var(--muted); white-space: nowrap; }
.cli-tbl-wrap { overflow-x: auto; }
.cli-tbl { width: 100%; }
.cli-tbl td, .cli-tbl th { vertical-align: middle; }
.cli-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  margin-top: 6px;
}
.cli-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cli-fld.span2 { grid-column: span 2; }
.cli-fld-lbl {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--muted);
}
.cli-fld .inp { width: 100%; }
@media (max-width: 720px) {
  .cli-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli-fld.span2 { grid-column: span 2; }
}
.conv-sug {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--cyan-soft);
  border: 1px solid var(--cyan);
  border-radius: var(--r-md);
  margin: 6px 0 10px;
  font-size: 18.75px;
  color: var(--ink);
}
.conv-line {
  display: grid;
  grid-template-columns: 1.4fr 80px 100px 90px 30px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.conv-line .conv-prod { font-family: var(--sans); }
.conv-line .conv-num  { font-family: var(--mono); text-align: right; }
.conv-line .conv-sub  { text-align: right; font-size: 18.75px; color: var(--cyan); font-weight: 600; }
.conv-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.conv-trans {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  align-self: start;
}
.conv-trans-meta {
  font-size: 17.25px;
  color: var(--ink-soft);
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.conv-trans-meta .dim { color: var(--muted); }

/* En tema plain, el modal de conversión queda más cómodo */
[data-theme="plain"] .conv-sug {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}
[data-theme="plain"] .conv-line .conv-sub { color: var(--accent); }

/* Filas de llamadas: hover + lock visual */
.llam-row-conv { transition: background .15s ease; }
.llam-row-conv:hover { background: rgba(34, 227, 255, 0.05); }
.llam-row-locked { background: transparent; }
.llam-row-locked:hover { background: rgba(255, 255, 255, 0.025); }
[data-theme="plain"] .llam-row-conv:hover { background: var(--row-hover); }
[data-theme="plain"] .llam-row-locked:hover { background: var(--row-hover); }
.llam-conv-btn { font-size: 15.75px; padding: 3px 8px; }
.llam-obs-btn { font-size: 14px; padding: 3px 7px; }
/* Celda OBS editable (click abre el editor). — Eduardo Luna · 2026 */
.llam-obs-cell { cursor: pointer; }
.llam-obs-cell:hover { background: var(--cyan-soft); }
.llam-obs-empty { opacity: 0.6; }
.llam-obs-cell:hover .llam-obs-empty { opacity: 1; color: var(--cyan); }

/* Filas descartadas: visual atenuado y discreto */
.llam-row-discarded { background: rgba(120, 120, 120, 0.04); }
.llam-row-discarded td { font-style: italic; }
[data-theme="plain"] .llam-row-discarded { background: rgba(0, 0, 0, 0.025); }

/* ============================================================
   Chips de categoría de observación
   ============================================================ */
.llam-chip.c-pub     { background: var(--bad-soft);    color: var(--bad);    border-color: var(--bad); }
.llam-chip.c-promo   { background: var(--yellow-soft); color: var(--yellow); border-color: var(--yellow); }
.llam-chip.c-broma   { background: var(--yellow-soft); color: var(--yellow); border-color: var(--yellow); opacity: 0.85; }
.llam-chip.c-equiv   { background: var(--panel-2);     color: var(--muted);  border-color: var(--line); }
.llam-chip.c-prospec { background: var(--cyan-soft);   color: var(--cyan);   border-color: var(--cyan); }
.llam-chip.c-atend   { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok); }
.llam-chip.c-otra    { background: var(--panel-2);     color: var(--ink-soft); border-color: var(--line); }

[data-theme="plain"] .llam-chip.c-pub     { background: var(--bad-soft);    color: var(--bad); }
[data-theme="plain"] .llam-chip.c-promo   { background: var(--yellow-soft); color: var(--yellow); }
[data-theme="plain"] .llam-chip.c-broma   { background: var(--yellow-soft); color: var(--yellow); }
[data-theme="plain"] .llam-chip.c-equiv   { background: var(--panel-2);     color: var(--muted); }
[data-theme="plain"] .llam-chip.c-prospec { background: var(--accent-soft); color: var(--accent); }
[data-theme="plain"] .llam-chip.c-atend   { background: var(--ok-soft);     color: var(--ok); }
[data-theme="plain"] .llam-chip.c-otra    { background: var(--panel-2);     color: var(--muted); }

/* ============================================================
   Modal de observación de llamada
   ============================================================ */
.obs-modal-body { display: flex; flex-direction: column; gap: 14px; min-width: 480px; max-width: 640px; }
.obs-llam-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 16px;
}
.obs-llam-summary > div { display: flex; gap: 8px; align-items: baseline; }
.obs-llam-summary b { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.obs-transcript { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); padding: 4px 10px; }
.obs-transcript summary { cursor: pointer; padding: 4px 0; font-family: var(--mono); font-size: 14px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.obs-transcript-body { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; padding: 6px 0; }
.obs-trans-line { font-size: 15px; line-height: 1.4; }
.obs-trans-line b { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-right: 6px; }
.obs-trans-user b { color: var(--cyan); }
.obs-trans-bot  b { color: var(--accent, var(--ink-soft)); }

.obs-field { display: flex; flex-direction: column; gap: 6px; }
.obs-field > label { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }
.obs-field .ta {
  font-family: var(--sans);
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--r-sm);
  resize: vertical;
  min-height: 80px;
}
.obs-field .ta:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); outline: none; }
.obs-meta { font-size: 13px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* Pill PLANTA / marca del pedido (conmutador Unigas/Tomza) — Eduardo Luna · 2026 */
/* Conmutador de PLANTA en la cabecera: dropdown de las 14 plantas IGF agrupadas
   por zona. — Eduardo Luna · 2026 */
.planta-switch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 11px;
  background: var(--panel2, rgba(127, 127, 127, 0.14));
}
/* Rótulo PLANTA del header: blanco y bold para que destaque sobre la cabecera.
   En tema LIGHT la cabecera es amarilla, así que ahí se usa la tinta azul oscuro
   del propio header (blanco sobre amarillo no se lee). — Eduardo Luna · 2026 */
.planta-switch-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: #ffffff; font-weight: 700; text-transform: uppercase;
}
[data-theme="light"] .planta-switch-lbl { color: #0a1430; }
.planta-select {
  padding: 6px 10px; font-size: 12.5px; font-weight: 600;
  border-radius: 8px; min-width: 150px; cursor: pointer;
}

.pill-planta {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; border: 1px solid;
}
.pill-planta.planta-unigas { color: var(--cyan); border-color: var(--cyan); background: rgba(212, 160, 23, 0.16); }
.pill-planta.planta-tomza  { color: #ff6b6b; border-color: #ff6b6b; background: rgba(255, 107, 107, 0.14); }
[data-theme="plain"] .pill-planta { border-radius: 3px; }
[data-theme="plain"] .pill-planta.planta-unigas { background: #ffffff; color: #0050a0; border-color: #0050a0; }
[data-theme="plain"] .pill-planta.planta-tomza  { background: #ffffff; color: #b00020; border-color: #b00020; }

/* ===========================================================================
   Pestaña INFORME · Contact Center — Eduardo Luna · 2026
   Solo el "cromo" de la pestaña (barra de filtros, KPIs de apoyo y el visor).
   Las hojas del informe traen su propio <style> autocontenido (clases
   .icc-sheet/.icc-topbar/...) porque el MISMO HTML alimenta la vista previa y
   el PDF; no se les aplica el tema de la app a propósito: el informe siempre
   va en papel blanco.
   =========================================================================== */
.icc-view { padding: 0 14px 18px; }
.icc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icc-f {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
}
.icc-f input {
  font-family: var(--mono); font-size: 12.5px; padding: 5px 8px;
  border-radius: var(--r-sm); color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-2);
}
.icc-err {
  margin: 10px 14px 0; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--bad-soft); color: var(--bad); font-size: 13px;
  border: 1px solid var(--bad);
}
.icc-kpirow {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 14px 4px;
}
.icc-k {
  flex: 1 1 0; min-width: 108px; display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line);
}
.icc-k span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--muted);
}
.icc-k b { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--ink); }
.icc-k.on { border-color: var(--cyan); }
.icc-k.on b { color: var(--cyan); }

/* Visor: cada hoja se dibuja a tamaño real (1056x816) y se escala al ancho
   disponible. El contenedor exterior fija la altura ya escalada porque un
   transform NO reserva espacio en el flujo. */
.icc-prev { display: flex; flex-direction: column; gap: 16px; padding: 14px; }
.icc-page {
  width: 100%; overflow: hidden; border-radius: var(--r-sm);
  background: #ffffff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.icc-page-in { transform-origin: top left; }
.icc-empty {
  padding: 40px 14px; text-align: center; color: var(--muted);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
}
[data-theme="plain"] .icc-page,
[data-theme="light"] .icc-page { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14); }

/* Selector de planta del Informe (alcance del reporte) — Eduardo Luna · 2026 */
.icc-sel {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 5px 8px;
  border-radius: var(--r-sm); color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-2); cursor: pointer;
  min-width: 190px;
}

/* ——— Encabezados ORDENABLES de la tabla principal (ESTATUS · AVANCE · PLANTA) ———
   El indicador vive a la derecha del rótulo: ⇅ en reposo (tenue), ▲/▼ cuando la
   columna manda el orden. Ordena el backend sobre TODO el conjunto filtrado, no
   solo las filas visibles. — Eduardo Luna · 2026 */
.tbl thead th.th-ord {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease;
}
.tbl thead th.th-ord:hover { color: var(--ink-soft); background: var(--panel-2); }
.tbl thead th.th-ord.on    { color: var(--cyan); }
.th-ord-ico {
  margin-left: 6px;
  font-size: 0.82em;
  opacity: .35;
  transition: opacity .12s ease;
}
.tbl thead th.th-ord:hover .th-ord-ico { opacity: .7; }
.tbl thead th.th-ord.on .th-ord-ico { opacity: 1; }
/* En claro y en plain el encabezado activo se refuerza con peso, porque el
   acento dorado/rojo sobre panel blanco contrasta menos que en el tema oscuro. */
[data-theme="light"] .tbl thead th.th-ord.on,
[data-theme="plain"] .tbl thead th.th-ord.on { font-weight: 700; }