/* Portal de Pedidos BTS 2026 — sistema de diseño compartido (cliente, proforma, admin)
   Estilo neutro (gris claro, texto casi negro, azul de acción), tipografía del sistema. */
/* Paleta neutra (referencia Apple/Uber): gris claro, texto casi negro, un azul de acción */
:root{
  --ground:#F5F5F7; --surface:#FFFFFF; --well:#F2F2F7; --well-2:#E8E8ED; --line:#E5E5EA; --line-strong:#D2D2D7;
  --ink:#1D1D1F; --ink-2:#424245; --ink-3:#6E6E73;
  --blue:#0071E3; --blue-hover:#0077ED; --on-blue:#FFFFFF; --blue-soft:#E8F1FD;
  --yellow:#1D1D1F; --on-yellow:#FFFFFF; --yellow-soft:#F2F2F7;
  --turq:#34C759; --turq-soft:#E9F9EE; --turq-ink:#1B7F3B;
  --coral:#FF3B30; --coral-soft:#FDECEB; --coral-ink:#C0281F;
  --lila:#AF52DE; --lila-soft:#F4E9FB;
  --photo-well:#F5F5F7; --photo-well-line:#E5E5EA;
  --shadow-1:0 1px 2px rgba(0,0,0,.05); --shadow-2:0 4px 16px rgba(0,0,0,.08); --shadow-3:0 16px 48px rgba(0,0,0,.16);
  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --t-fast:150ms; --t-base:220ms; --ease-out:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;touch-action:manipulation;letter-spacing:-.005em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.15}
.display{font-family:inherit;font-weight:700;letter-spacing:-.02em}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);font-weight:600;font-size:14px;white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.btn:hover{background:var(--well)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn.yellow{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.yellow:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--well)}
.btn.danger{color:var(--coral-ink);border-color:var(--coral)}
.btn.danger:hover{background:var(--coral-soft)}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn.icon{width:44px;padding:0}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn .spin{display:none}
.btn.loading .spin{display:inline-block}
.btn.loading .lbl{opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}

/* ---- campos ---- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field label .req{color:var(--coral);margin-left:2px}
.field input,.field select,.field textarea{min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface);font-size:16px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.field.invalid input,.field.invalid textarea{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)}
.field .help{font-size:12.5px;color:var(--ink-3)}
.field .err{display:none;font-size:12.5px;color:var(--coral-ink);font-weight:600;align-items:center;gap:5px}
.field.invalid .err{display:flex}

/* ---- píldoras / estado ---- */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;line-height:1.4}
.pill.pendiente{background:#FFF4DB;color:#8A5A00}
.pill.confirmada{background:var(--turq-soft);color:var(--turq-ink)}
.pill.cancelada{background:var(--coral-soft);color:var(--coral-ink)}
.pill.ok{background:var(--turq-soft);color:var(--turq-ink)}
.pill.warn{background:var(--coral-soft);color:var(--coral-ink)}
.pill.muted{background:var(--well);color:var(--ink-2)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);z-index:120;box-shadow:var(--shadow-3);max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- overlay / diálogos ---- */
.overlay{position:fixed;inset:0;background:rgba(16,26,58,.55);z-index:90;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.overlay.open{display:flex}
.dialog{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-3);max-height:calc(100dvh - 32px);overflow:hidden;display:flex;flex-direction:column;animation:pop var(--t-base) var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---- tablas ---- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:10px 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table .r{text-align:right}
.table tbody tr:hover{background:var(--well)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.thumb{width:44px;height:44px;border-radius:8px;background:var(--photo-well);display:grid;place-items:center;overflow:hidden;flex:none}
.thumb img{max-width:82%;max-height:82%;object-fit:contain}

/* ===== Tema "oscuro" (showroom): fondo carbón, producto resaltado, acento amarillo de marca ===== */
:root[data-theme="oscuro"]{
  --ground:#0E0E10; --surface:#18181B; --well:#232327; --well-2:#2E2E33; --line:#26262B; --line-strong:#3A3A40;
  --ink:#F5F5F7; --ink-2:#D4D4D9; --ink-3:#9A9AA3;
  --blue:#FFD21F; --blue-hover:#FFDC4F; --on-blue:#141414; --blue-soft:rgba(255,210,31,.16);
  --turq:#30D158; --turq-soft:#16321E; --turq-ink:#6EE08A;
  --coral:#FF453A; --coral-soft:#3A1A18; --coral-ink:#FF8A80;
  --photo-well:#1F1F23; --photo-well-line:#2A2A2F;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.45); --shadow-3:0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}
:root[data-theme="oscuro"] .btn{background:var(--well);border-color:var(--line-strong);color:var(--ink)}
:root[data-theme="oscuro"] .btn:hover{background:var(--well-2)}
:root[data-theme="oscuro"] .btn.primary,:root[data-theme="oscuro"] .btn.yellow{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
:root[data-theme="oscuro"] .field input,:root[data-theme="oscuro"] .field textarea,:root[data-theme="oscuro"] .field select{background:var(--well)}
:root[data-theme="oscuro"] .thumb{background:var(--well)}
:root[data-theme="oscuro"] .pill.pendiente{background:#3A2E08;color:#FFD86B}
:root[data-theme="oscuro"] .overlay{background:rgba(0,0,0,.7)}

/* ===== Tema "calido" (boutique): crema, sombras suaves, azul marino ===== */
:root[data-theme="calido"]{
  --ground:#F5F2EC; --surface:#FFFFFF; --well:#F1EDE5; --well-2:#E6E1D7; --line:#E8E3DA; --line-strong:#D5CFC3;
  --ink:#1B1A17; --ink-2:#4A4741; --ink-3:#7D786F;
  --blue:#1F3A93; --blue-hover:#2A4AB5; --on-blue:#FFFFFF; --blue-soft:#E4E9F7;
  --photo-well:#F4F0E8; --photo-well-line:#E8E3DA;
  --shadow-1:0 1px 2px rgba(60,40,10,.05); --shadow-2:0 10px 28px rgba(60,40,10,.10); --shadow-3:0 24px 60px rgba(60,40,10,.18);
  --r-sm:12px; --r-md:16px; --r-lg:22px;
}
:root[data-theme="calido"] .card{border-color:transparent;box-shadow:var(--shadow-2)}