/* ==========================================================================
   SOSbaterías CRM — Tema base (rediseño a partir del mockup de Claude Design)
   Marca: coral #DD3629 · teal #03BFB1. Tipografía Inter (cuerpo) + Poppins
   (marca/títulos). Fuentes AUTO-ALOJADAS (sin CDN, Principio X). Regla WCAG AA:
   coral como fondo con texto blanco; badges de estado con bg tenue + texto oscuro.
   ========================================================================== */

/* ---- Fuentes self-hosted ---- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/poppins-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/poppins-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/poppins-latin-800.woff2') format('woff2');
}

:root {
  /* Marca (hex exactos del mockup de Claude Design) */
  --coral: #DD3629;
  --coral-dark: #BC2C21;
  --coral-soft: #FBE7E3;
  --teal: #03BFB1;
  --teal-dark: #0E7264;
  --teal-soft: #DCF5F2;
  --teal-border: #BEE9E5;
  /* Blancos translúcidos para sidebar/topbar teal */
  --on-teal: #FFFFFF;
  --on-teal-2: rgba(255, 255, 255, .9);
  --on-teal-3: rgba(255, 255, 255, .7);
  --on-teal-line: rgba(255, 255, 255, .18);
  --on-teal-fill: rgba(255, 255, 255, .12);

  /* Neutros */
  --ink: #1A1D21;
  --ink-2: #374151;
  --ink-3: #4B5563;
  --muted: #6B7280;
  --muted-2: #9AA1AC;
  --faint: #B0B6BF;
  --line: #E6E8EC;
  --line-soft: #EEF0F3;
  --bg: #F7F8FA;
  --bg-soft: #F2F4F7;
  --surface: #FFFFFF;
  --surface-2: #FBFBFC;

  /* Estados: fondo tenue + texto (mapa exacto del mockup) */
  --st-pending-bg: #EEF0F3;      --st-pending-fg: #4B5563;      --st-pending-dot: #9AA1AC;
  --st-assigned-bg: #E7EEFE;     --st-assigned-fg: #2456C7;     --st-assigned-dot: #2E6BE6;
  --st-en_route-bg: #FEF0E0;     --st-en_route-fg: #B4620A;     --st-en_route-dot: #F59E0B;
  --st-on_site-bg: #DCF5F2;      --st-on_site-fg: #0E7264;      --st-on_site-dot: #03BFB1;
  --st-completed-bg: #DFF3E4;    --st-completed-fg: #1B7A3D;    --st-completed-dot: #22A34A;
  --st-cancelled-bg: #E4E6EA;    --st-cancelled-fg: #374151;    --st-cancelled-dot: #4B5563;
  --st-incident-bg: #FDE4E0;     --st-incident-fg: #C22A16;     --st-incident-dot: #DD3629;
  --st-rescheduled-bg: #EFE7FB;  --st-rescheduled-fg: #6B2FC0;  --st-rescheduled-dot: #7C3AED;
  --st-cancelled: #C22A16; /* compat: color de error/enlaces destructivos */

  /* Métrica */
  --radius: 13px;
  --radius-md: 11px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .03);
  --shadow-pop: 0 8px 30px rgba(16, 24, 40, .10);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --touch-min: 44px;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
}

/* ---- Reset ligero ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.2; color: var(--ink); font-family: var(--font-display); letter-spacing: -.3px; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 700; margin-top: var(--space-5); }
h3 { font-size: 14px; font-weight: 700; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted-2); }
p { margin: 0 0 var(--space-3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D7DBE0; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---- Layout base ---- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* ---- Botones ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 2px 6px rgba(221, 54, 41, .28); }
.btn-primary:hover { background: var(--coral-dark); color: #fff; }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-secondary:hover { border-color: var(--coral); color: var(--coral); }
.btn-neutral { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-neutral:hover { background: var(--bg); }
.btn-soft { background: var(--coral-soft); color: var(--coral); }
.btn-soft:hover { background: #F7D6CF; color: var(--coral-dark); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Formularios ---- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--space-2); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
}
.field textarea { min-height: 72px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239AA1AC' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--coral);
  outline: none;
  box-shadow: 0 0 0 3px rgba(221, 54, 41, .12);
}
.field input:disabled { background: var(--bg); color: var(--muted-2); }
.field .error, .error { color: var(--st-cancelled); font-size: 12px; margin-top: var(--space-1); display: block; }

/* ---- Tablas ---- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table thead th {
  background: var(--surface-2);
  color: var(--muted-2);
  text-align: left;
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-3); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }
.table td a { color: var(--ink); font-weight: 600; }
.table .mono { color: var(--ink-2); }

/* ---- Badges de estado (bg tenue + texto, mapa exacto) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge--pending { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.badge--assigned { background: var(--st-assigned-bg); color: var(--st-assigned-fg); }
.badge--en_route { background: var(--st-en_route-bg); color: var(--st-en_route-fg); }
.badge--on_site { background: var(--st-on_site-bg); color: var(--st-on_site-fg); }
.badge--completed { background: var(--st-completed-bg); color: var(--st-completed-fg); }
.badge--cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); }
.badge--incident { background: var(--st-incident-bg); color: var(--st-incident-fg); }
.badge--rescheduled { background: var(--st-rescheduled-bg); color: var(--st-rescheduled-fg); }

/* ---- Responsive (PWA / móvil) ---- */
@media (max-width: 640px) {
  .btn { min-height: var(--touch-min); }
  .table, .table thead, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table td { border: none; border-bottom: 1px solid var(--line); padding: 8px 14px; }
}