/* ============================================================
   styles.css — Titan Tech Repair System
   DJI-inspired dark UI with clean, minimal aesthetics
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ── */
:root {
  color-scheme: dark;   /* controles nativos (select, date) acordes al tema oscuro */
  /* Familia ÚNICA del sistema (DESIGN.md §4): títulos, cuerpo y números.
     Se usa por token, no hardcodeando 'Inter' en cada regla. */
  --font: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --bg-primary:    #000000;
  --bg-secondary:  #111111;
  --bg-card:       #181818;
  --bg-card-hover: #222222;
  --bg-input:      #111111;

  --border:        #333333;
  --border-focus:  #0071ce;

  --text-primary:  #ffffff;
  --text-secondary:#cccccc;
  --text-muted:    #a0a8b4;

  --accent:        #0071ce;
  --accent-hover:  #005bb5;
  --accent-glow:   rgba(0, 113, 206, 0.15);

  --success:       #22c55e;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --error:         #ef4444;

  --damage-low:    #22c55e;
  --damage-medium: #f59e0b;
  --damage-severe: #ef4444;

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow:0 0 24px rgba(0,113,206,0.2);

  --transition: all 0.2s ease;
  --transition-slow: all 0.35s ease;
}

/* ══════════════════════════════════════════════════════════════════════
   MODO CLARO — [data-theme="light"]
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;   /* el desplegable nativo (select) sale claro, no gris del SO */
  --bg-primary:    #eceff4;   /* fondo off-white (no tan blanco) — las cards blancas resaltan */
  --bg-secondary:  #e4e9f1;
  --bg-card:       #ffffff;
  --bg-card-hover: #f3f6fa;
  --bg-input:      #ffffff;

  --border:        #e2e8f0;
  --border-focus:  var(--accent);

  --text-primary:  #0f172a;
  --text-secondary:#334155;
  --text-muted:    #475569;

  /* Colores semánticos recalibrados para fondo CLARO (más oscuros = legibles).
     Solo afectan texto/bordes/íconos que usan la variable; los fondos con
     rgba(...) literal no cambian. Sube el contraste de estados verde/ámbar/rojo. */
  --success:       #15803d;
  --warning:       #b45309;
  --danger:        #dc2626;
  --error:         #dc2626;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow:   0 0 24px rgba(0,113,206,0.15);
}

/* Scrollbar en modo claro */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); }

/* ── Topbar en modo claro: frosted white ── */
[data-theme="light"] .topbar {
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--border);
}
[data-theme="light"] .nav-link:hover {
  background: rgba(0,0,0,.04);
  color: var(--text-primary);
}
[data-theme="light"] .nav-link.active {
  background: rgba(0,113,206,.08);
  color: var(--accent);
}

/* Botones secundarios en modo claro */
[data-theme="light"] .btn-secondary:hover:not(:disabled) {
  background: rgba(0,0,0,.04);
  border-color: var(--text-muted);
  color: var(--text-primary);
}
[data-theme="light"] .btn-outline-accent { background: rgba(0,113,206,.06); }
[data-theme="light"] .btn-success { background: rgba(34,197,94,.08); }

/* Modal close en modo claro */
[data-theme="light"] .modal-close:hover { background: rgba(0,0,0,.05); color: var(--text-primary); }

/* Tablas en modo claro */
[data-theme="light"] thead { background: rgba(0,113,206,.04); border-bottom: 2px solid var(--border); }
[data-theme="light"] th { color: var(--text-muted); }
[data-theme="light"] td { border-bottom-color: var(--border); }
[data-theme="light"] tbody tr:hover { background: #f0f4f8; }
[data-theme="light"] tbody tr.selected td { background: rgba(0,113,206,.05) !important; }

/* Badges de daño en modo claro — mayor contraste */
[data-theme="light"] .badge-low    { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.3); }
[data-theme="light"] .badge-medium { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }
[data-theme="light"] .badge-severe { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3); }

/* Toast en modo claro */
[data-theme="light"] .toast {
  background: rgba(255,255,255,.97);
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
}
[data-theme="light"] .toast.success { border-color: rgba(34,197,94,.5); }
[data-theme="light"] .toast.error   { border-color: rgba(239,68,68,.5); }
[data-theme="light"] .toast.warning { border-color: color-mix(in srgb, var(--warning) 50%, transparent); }

/* Modal en modo claro */
[data-theme="light"] .modal-overlay { background: rgba(15,23,42,.45); }
[data-theme="light"] .modal {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 24px 64px rgba(0,0,0,.14);
}

/* Loading overlay */
[data-theme="light"] .loading-overlay { background: rgba(248,250,252,.82); color: var(--text-secondary); }
[data-theme="light"] .loading-spinner { border-color: var(--border); border-top-color: var(--accent); }

/* Spinner en modo claro */
[data-theme="light"] .spinner {
  border-color: rgba(0,0,0,.15);
  border-top-color: var(--accent);
}

/* Section cards en modo claro: elevación con sombra */
[data-theme="light"] .section-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .section-card:hover {
  border-color: rgba(0,113,206,.3);
  box-shadow: var(--shadow-md);
}

/* Damage selector en modo claro */
[data-theme="light"] .damage-option {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="light"] .damage-option:hover {
  background: var(--bg-secondary);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

/* Generated panel */
[data-theme="light"] .generated-panel { background: var(--bg-secondary); border-color: var(--border); }
[data-theme="light"] .generated-panel-header { background: rgba(0,113,206,.04); }
[data-theme="light"] .generated-textarea { color: var(--text-primary); }

/* Search input */
[data-theme="light"] .search-input {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="light"] .search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,206,.12);
}

/* Copy btn en modo claro */
[data-theme="light"] .copy-btn:hover { background: rgba(0,113,206,.06); }

/* Tabla wrapper con separación visual en modo claro */
[data-theme="light"] .table-wrapper {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;      /* fallback navegadores viejos */
  min-height: 100dvh;     /* DESIGN.md §11: respeta la barra dinámica móvil */
  -webkit-font-smoothing: antialiased;
}

/* Títulos: Inter (semibold/bold) con números tabulares */
h1, h2, h3, .page-title, .stat-value, .topbar-title {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
/* Cuerpo de tarjetas y labels: Inter */
.stat-label, .field-label, .badge, .nav-label, td, th, .btn {
  font-family: var(--font);
}
/* Valores numéricos críticos (precios, totales): Inter con números tabulares */
.stat-value, .price-tag, .inv-stat-value, code, pre {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* ── Topbar ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,13,15,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.topbar-logo {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.topbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.topbar-subtitle {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar-nav {
  display: flex;
  gap: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
}

.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--accent); background: var(--accent-glow); }

/* ── Page Layout ── */
.page-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.page-header {
  margin-bottom: 2.5rem;
}
.page-header:has(> div + div) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.page-header > div:first-child { min-width: 0; }

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.page-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ── Section Cards ── */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin-bottom: 1.25rem;
  transition: var(--transition);
}

.section-card:hover {
  border-color: rgba(0,113,206,0.25);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.section-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-glow);
  border: 1px solid rgba(0,113,206,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.section-num {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Form Grid ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid.cols-1 { grid-template-columns: 1fr; }

.field-full { grid-column: 1 / -1; }

/* ── Form Fields ── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-label .required {
  color: var(--accent);
  margin-left: 2px;
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 14px;
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;  /* Safari iOS/macOS < 15.4: sin prefijo no resetea el control nativo y duplica el chevron */
  -moz-appearance: none;
  appearance: none;
}

.field-input::placeholder,
.field-textarea::placeholder { color: var(--text-muted); }

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.field-input.error,
.field-select.error,
.field-textarea.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

.field-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2388888a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
/* Chevron adaptado en modo claro */
[data-theme="light"] .field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.field-select option { background: var(--bg-card); color: var(--text-primary); }

/* ── Badge de estado del caso (intake) — colores canónicos (DESIGN.md §8) ──
   Centralizado aquí para no repetir hex en los componentes (Clean UI / DRY). */
.cstatus {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: .72rem; font-weight: 700; border: 1px solid; white-space: nowrap;
}
.cstatus.draft             { color:#64748b; background:rgba(100,116,139,.12); border-color:rgba(100,116,139,.30); }
.cstatus.received          { color:#0071ce; background:rgba(0,113,206,.12);   border-color:rgba(0,113,206,.30); }
.cstatus.pending_diagnosis { color:#f59e0b; background:rgba(245,158,11,.12);  border-color:rgba(245,158,11,.30); }
.cstatus.in_diagnosis      { color:#8b5cf6; background:rgba(139,92,246,.12);  border-color:rgba(139,92,246,.30); }
.cstatus.quoted            { color:#a855f7; background:rgba(168,85,247,.12);  border-color:rgba(168,85,247,.30); }
.cstatus.waiting_approval  { color:#ef4444; background:rgba(239,68,68,.12);   border-color:rgba(239,68,68,.30); }
.cstatus.approved          { color:#22c55e; background:rgba(34,197,94,.12);   border-color:rgba(34,197,94,.30); }
.cstatus.pending_payment   { color:#a16207; background:rgba(234,179,8,.14);   border-color:rgba(234,179,8,.40); }
.cstatus.receipt_review    { color:#0071ce; background:rgba(0,113,206,.12);   border-color:rgba(0,113,206,.30); }
.cstatus.paid              { color:#10b981; background:rgba(16,185,129,.12);  border-color:rgba(16,185,129,.30); }
.cstatus.in_repair         { color:#f97316; background:rgba(249,115,22,.12);  border-color:rgba(249,115,22,.30); }
.cstatus.in_testing        { color:#06b6d4; background:rgba(6,182,212,.12);   border-color:rgba(6,182,212,.30); }
.cstatus.ready_delivery    { color:#10b981; background:rgba(16,185,129,.12);  border-color:rgba(16,185,129,.30); }
.cstatus.delivered         { color:#6b7280; background:rgba(107,114,128,.12); border-color:rgba(107,114,128,.30); }
.cstatus.closed            { color:#334155; background:rgba(51,65,85,.14);    border-color:rgba(51,65,85,.30); }
.cstatus.rejected          { color:#dc2626; background:rgba(220,38,38,.12);   border-color:rgba(220,38,38,.30); }
/* Prioridad (DESIGN.md §8) — color + texto */
.cprio.normal { color: var(--text-muted); font-weight: 500; }
.cprio.high   { color:#f59e0b; font-weight: 700; }
.cprio.urgent { color:#ef4444; font-weight: 700; }

/* ── Selector de país con banderas (country_picker.js) ── */
.flag-select { position: relative; width: 130px; flex-shrink: 0; }

.flag-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 12px;
  cursor: pointer;
  transition: var(--transition);
  outline: none;
}
.flag-select-btn:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); }
.flag-select-flag { width: 20px; height: 15px; border-radius: 2px; flex-shrink: 0; }
.flag-select-dial { flex: 1; text-align: left; }
.flag-select-chevron { color: var(--text-muted); flex-shrink: 0; }

.flag-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  z-index: 1100;
}
.flag-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.88rem;
}
.flag-select-option .fi { width: 22px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.flag-select-option:hover { background: var(--accent-glow); }
.flag-select-option.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.flag-select-name { flex: 1; }
.flag-select-code { color: var(--text-muted); font-size: 0.82rem; }

.field-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

.field-error {
  font-size: 0.75rem;
  color: var(--danger);
  display: none;
}

.field-error.visible { display: block; }

/* ── Damage Badge Select ── */
.damage-selector {
  display: flex;
  gap: 10px;
}

.damage-option {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.damage-option:hover { border-color: var(--text-muted); color: var(--text-primary); }
.damage-option[data-level="low"].selected    { border-color: var(--damage-low);    background: rgba(34,197,94,0.12);  color: var(--damage-low); }
.damage-option[data-level="medium"].selected { border-color: var(--damage-medium); background: rgba(245,158,11,0.12); color: var(--damage-medium); }
.damage-option[data-level="severe"].selected { border-color: var(--damage-severe); background: rgba(239,68,68,0.12);  color: var(--damage-severe); }

/* ── Cost Row ── */
.cost-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  align-items: end;
}

.total-cost-display {
  background: var(--accent-glow);
  border: 1px solid rgba(0,113,206,0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  letter-spacing: -0.02em;
}

/* ── Generated Panel ── */
.generated-panel {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: none;
}

.generated-panel.visible { display: block; }

.generated-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,113,206,0.05);
}

.generated-panel-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.copy-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.copy-btn.copied { border-color: var(--success); color: var(--success); background: rgba(34,197,94,0.1); }

.generated-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.82rem;
  line-height: 1.7;
  padding: 16px;
  resize: vertical;
  min-height: 200px;
  outline: none;
}

/* ── Global button color reset (for Lucide SVG currentColor) ── */
button { color: inherit; }

/* ── Lucide SVG — visibilidad en todos los temas ── */
svg.lucide { display: inline-block; }

/* Dark mode (default): iconos blancos/grises */
:root svg.lucide:not([class*="color-"]) { stroke: currentColor; }

/* Light mode: iconos oscuros — SOLO sobre superficies claras. Dentro de un .btn
   el ícono debe seguir el color del TEXTO del botón (blanco en .btn-primary,
   semántico en success/danger), y el sidebar se mantiene OSCURO en modo claro
   (layout.css): forzar gris pizarra ahí dejaba los íconos casi invisibles. */
[data-theme="light"] svg.lucide { color: var(--text-secondary); }
[data-theme="light"] .btn svg.lucide,
[data-theme="light"] .sidebar svg.lucide,
/* chips/badges de estado: el ícono sigue el color semántico del chip */
[data-theme="light"] .payment-status-chip svg.lucide,
[data-theme="light"] .cs-chip svg.lucide,
[data-theme="light"] .chip svg.lucide,
[data-theme="light"] .badge svg.lucide,
[data-theme="light"] .so-badge svg.lucide,
/* círculos/marcas de estado con color semántico propio (diálogos, respaldos).
   La clase vive en el CONTENEDOR, no en el svg: van como descendientes. */
[data-theme="light"] .uidlg-icon svg.lucide,
[data-theme="light"] .bk-stat-icon svg.lucide,
[data-theme="light"] .ok-icon svg.lucide,
[data-theme="light"] .err-icon svg.lucide,
/* .toast-icon: layout.css le da el color por TIPO (.toast-success/.toast-error);
   sin esta excepción los 4 tipos de toast salían del mismo gris en tema claro. */
[data-theme="light"] .toast-icon svg.lucide { color: inherit; }

/* Enlaces del panel de alertas del topbar (sidebar.js): el azul claro es para
   el panel oscuro; en tema claro caen al accent — mismo patrón que .btn-portal. */
.alert-panel-link { color: #60a5fa; }
[data-theme="light"] .alert-panel-link { color: var(--accent); }

/* ── Buttons ── */
.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* Botón "Portal Cliente" — fuente única (antes: estilo inline repetido en 5 fases).
   El azul claro #60a5fa es para fondo OSCURO; en tema claro cae al accent. */
.btn.btn-portal {
  background: rgba(0,113,206,.15);
  border-color: rgba(0,113,206,.4);
  color: #60a5fa;
}
[data-theme="light"] .btn.btn-portal {
  background: rgba(0,113,206,.08);
  color: var(--accent);
}

.btn-outline-accent {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(0,113,206,0.35);
}
.btn-outline-accent:hover:not(:disabled) {
  background: rgba(0,113,206,0.2);
  box-shadow: var(--shadow-glow);
}

.btn-success {
  background: rgba(34,197,94,0.15);
  color: var(--success);
  border: 1px solid rgba(34,197,94,0.35);
}
.btn-success:hover:not(:disabled) {
  background: rgba(34,197,94,0.25);
  box-shadow: 0 0 20px rgba(34,197,94,0.2);
}

.btn-sm { padding: 7px 14px; font-size: 0.8rem; }

/* ── Spinner ── */
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
#toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  /* Solo animación de ENTRADA. El cierre lo controla el JS (showToast) según el
     tipo (errores/advertencias 8s, resto 5s). Antes un fadeOut a los 3s ocultaba
     el toast aunque el JS lo mantuviera más tiempo → no se alcanzaba a leer. */
  animation: slideIn 0.25s ease;
  transition: opacity 0.3s ease;
  max-width: 360px;
}
/* Cierre suave opcional: el JS puede añadir .toast-hide antes de remover */
.toast.toast-hide { opacity: 0; }

.toast.success { border-color: rgba(34,197,94,0.4); }
.toast.error   { border-color: rgba(239,68,68,0.4); }
/* var(--warning) vía color-mix (precedente en equipment.css): así el borde sigue al
   token en cada tema (#f59e0b oscuro / #b45309 claro) con la misma opacidad que
   success/error definen arriba. */
.toast.warning { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.toast-icon { font-size: 1rem; }

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ── History Table ── */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.search-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 14px;
  outline: none;
  transition: var(--transition);
}

.search-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-input::placeholder { color: var(--text-muted); }

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead { background: rgba(0,113,206,0.07); }

th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 13px 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(42,42,56,0.6);
  vertical-align: middle;
}

td:first-child { color: var(--text-primary); font-weight: 500; }

tr:last-child td { border-bottom: none; }

tbody tr {
  transition: var(--transition);
  cursor: pointer;
}

tbody tr:hover { background: var(--bg-card-hover); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-low    { background: rgba(34,197,94,0.12);  color: var(--damage-low);    border: 1px solid rgba(34,197,94,0.3);  }
.badge-medium { background: rgba(245,158,11,0.12); color: var(--damage-medium); border: 1px solid rgba(245,158,11,0.3); }
.badge-severe { background: rgba(239,68,68,0.12);  color: var(--damage-severe); border: 1px solid rgba(239,68,68,0.3);  }
.badge-none   { background: var(--bg-input);       color: var(--text-muted);    border: 1px solid var(--border); }

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state p { font-size: 0.9rem; }

/* ── Loading Overlay ── */
.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,13,15,0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.loading-overlay.visible { display: flex; }

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Modal ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  /* Por ENCIMA del sidebar (1000; 1001 en móvil) y de su panel de avisos (1000): con 300 el
     menú lateral quedaba pintado sobre el fondo del modal. Por DEBAJO de las listas de
     autocompletado (1100, deben verse dentro del modal), del drawer de caso (3000), los
     toasts (9999) y ui_dialogs (10500). */
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-overlay.visible { display: flex; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.25s ease;
}

@keyframes modalIn {
  from { transform: scale(0.96) translateY(10px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--border);
}

.modal-title { font-weight: 700; font-size: 1rem; }

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
  line-height: 1;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.modal-body { padding: 1.75rem; }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.detail-item label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.detail-item p {
  font-size: 0.875rem;
  color: var(--text-primary);
  word-break: break-word;
}

.detail-item.full { grid-column: 1 / -1; }

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .page-container { padding: 1.5rem 1rem 4rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.cols-2 { grid-template-columns: 1fr; }
  .form-grid.cols-3 { grid-template-columns: 1fr; }
  .cost-row { grid-template-columns: 1fr; }
  .damage-selector { flex-direction: column; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .topbar { padding: 0 1rem; }
  .topbar-subtitle { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 1.4rem; }
  .section-card { padding: 1.25rem; border-radius: var(--radius-lg); }
  .section-header { margin-bottom: 1.25rem; padding-bottom: 0.75rem; gap: 10px; }
  .modal { max-height: 92vh; border-radius: var(--radius-lg); }
  .modal-header { padding: 1rem 1.25rem; }
  .modal-body { padding: 1.25rem; }
  /* Tablas largas: permitir scroll horizontal sin bordes rotos */
  .table-wrapper { -webkit-overflow-scrolling: touch; }
  th, td { padding: 10px 12px; }
  /* Columnas secundarias marcadas como ocultables → fuera en tablet/móvil.
     Definición ÚNICA y global (antes estaba duplicada en ~8 páginas y solo a 600px).
     A ≤768px se ocultan ya en tablet para que las tablas esenciales entren. */
  .table-hide-mobile { display: none !important; }
}

/* ── Tablas responsive ≤600px — vista tarjeta ─────────────────────────── */
@media (max-width: 600px) {
  /* Cualquier tabla directa (sin wrapper o con wrapper) */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tablas con clase card-table → vista de tarjeta apilada */
  .card-table thead { display: none; }
  .card-table tbody tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    padding: 10px 14px;
  }
  .card-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: none;
    font-size: .82rem;
  }
  .card-table tbody td::before {
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .card-table tbody tr:last-child { margin-bottom: 0; }

  /* Tablas densas (>5 cols) con .table-wrapper: solo scroll, no tarjeta.
     EXCEPCIÓN card-table: NO debe heredar el min-width (si no, las "tarjetas"
     apiladas arrastran 560px y siguen con scroll horizontal — bug raíz). */
  .table-wrapper table:not(.card-table) { min-width: 560px; }
  .table-wrapper .card-table { min-width: 0; width: 100%; }
  /* Touch targets mínimos 44px + 16px en inputs (evita el auto-zoom de iOS al
     enfocar; regla global, ya no por página). DESIGN.md §4. */
  .field-input,
  .field-select,
  .field-textarea,
  .search-input { min-height: 44px; font-size: 16px; }
  .btn-sm { min-height: 40px; padding: 8px 14px; }
}

/* ════════════════════════════════════════════════════════
   ACCESIBILIDAD — Movimiento reducido (WCAG 2.5.3)
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════
   TÁCTIL — Elimina 300ms tap delay en iOS / Android
   ════════════════════════════════════════════════════════ */
.btn, .nav-link, .field-input, .field-select,
.field-textarea, .search-input, .badge,
.damage-option, .modal-close, .copy-btn,
a[href], [onclick], [role="button"] {
  touch-action: manipulation;
}

/* ════════════════════════════════════════════════════════
   ALTO CONTRASTE — refuerza separación en sistemas con
   Windows High Contrast / macOS Increase Contrast
   ════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
  :root {
    --border: #666;
    --text-muted: #555;
  }
  [data-theme="light"] {
    --border: #aaa;
    --text-muted: #444;
  }
  .btn-secondary { border-width: 2px; }
  .field-input, .field-select, .field-textarea { border-width: 2px; }
}

/* ════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO — respeta prefers-reduced-motion:
   neutraliza animaciones/transiciones para usuarios que lo piden.
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Timeline de auditoría (case_timeline.js) ──────────────────────────────── */
.ctl-list { position: relative; padding-left: 26px; }
.ctl-list::before {
  content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border);
}
.ctl-item { position: relative; padding: 8px 0 14px; }
.ctl-dot {
  position: absolute; left: -22px; top: 10px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--accent);
}
.ctl-item.ctl-done   .ctl-dot { border-color: var(--success); background: var(--success); }
.ctl-item.ctl-reject .ctl-dot { border-color: var(--danger);  background: var(--danger); }
.ctl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ctl-title { font-weight: 600; font-size: .88rem; color: var(--text-primary); }
.ctl-ts { font-size: .72rem; color: var(--text-muted); font-family: var(--font); }
.ctl-meta { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.ctl-actor { font-size: .72rem; color: var(--text-muted); }