/* ═══════════════════════════════════════════════════════════════════════════
   AYR HUB — SISTEMA EMPRESARIAL v1
   Reemplaza theme.css y layout.css. Se carga al final de todo.

   Principio: el color SIGNIFICA, no decora.
     - Azul institucional  -> acción principal y selección.
     - Rojo                -> sólo riesgo, error y destructivo.
     - Ímbar               -> sólo advertencia.
     - Verde               -> sólo confirmado.
     - Grises fríos        -> todo lo demás.
   Densidad operativa: la información manda. Menos aire, más datos.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Superficies ─────────────────────────────────────────────────────── */
  --bg:        #f5f6f8;
  --panel:     #ffffff;
  --panel-2:   #fafbfc;
  --panel-3:   #f1f3f5;
  --panel-4:   #e9ecf1;

  /* ── Texto: escala con jerarquía real ────────────────────────────────── */
  --ink:       #111827;
  --ink-2:     #374151;
  --muted:     #5b6472;
  --muted-2:   #8b93a1;

  /* ── Bordes ──────────────────────────────────────────────────────────── */
  --line:      #dfe3e8;
  --line-2:    #eceff3;
  --line-3:    #cbd2da;

  /* ── Sombra: mínima. Un ERP no flota. ────────────────────────────────── */
  --shadow-sm: 0 1px 1px rgba(17,24,39,.04);
  --shadow:    0 1px 3px rgba(17,24,39,.07), 0 1px 2px rgba(17,24,39,.04);
  --shadow-lg: 0 8px 24px rgba(17,24,39,.12), 0 2px 8px rgba(17,24,39,.06);

  /* ── Radios: contenidos, no burbujas ─────────────────────────────────── */
  --radius:    6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* ── AZUL INSTITUCIONAL: el acento ───────────────────────────────────── */
  --primary:      #8f1a1a;
  /* La pone JavaScript según la empresa elegida. Aquí el valor de AYR, para
     que el CSS siempre tenga algo con qué pintar. */
  --empresa-color: #8f1a1a;
  --empresa-acento: #8f1a1a;
  --empresa-suave: #e8edf9;
  --primary-600:  #1b3a9e;
  --primary-700:  #16307f;
  --primary-soft: #eef2fb;
  --primary-mid:  #c3cee8;

  /* ── Rojo: sólo riesgo, error y destructivo ──────────────────────────── */
  --red:       #b42318;
  --red-soft:  #fef3f2;
  --red-mid:   #f3c4bf;
  --red-dark:  #7a1810;

  /* ── Semánticos ──────────────────────────────────────────────────────── */
  --green:      #067647;
  --green-soft: #ecfdf3;
  --green-mid:  #a9dcbf;

  --amber:      #b54708;
  --amber-soft: #fffaeb;
  --amber-mid:  #f2d59b;

  --blue:       #1e40af;
  /* El rojo de la marca AYR: distinto del rojo de riesgo de arriba. */
  --rojo-marca: #8f1a1a;
  --blue-soft:  #eef2fb;
  --blue-mid:   #c3cee8;

  --purple:     #5925dc;
  --purple-soft:#f4f0ff;
  --purple-mid: #d6cbf7;

  --cyan:       #0e7090;
  --cyan-soft:  #ecfdff;
  --cyan-mid:   #a5e3ef;

  /* ── Alias que otras hojas esperan ───────────────────────────────────── */
  --navy:        #1f2937;
  --navy-2:      #111827;
  --navy-soft:   #f1f3f5;
  --border:      #dfe3e8;
  --line-strong: #cbd2da;
  --card:        #ffffff;
  --surface:     #ffffff;
  --surface-2:   #fafbfc;
  --text:        #111827;

  /* ── Escala tipográfica ──────────────────────────────────────────────── */
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base:13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;

  /* ── Espaciado ───────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --lectura: 100%;

  /* ── Barra lateral ───────────────────────────────────────────────────── */
  --sidebar-w: 216px;
  --sidebar-bg:        #111827;
  --sidebar-ink:       #e5e7eb;
  --sidebar-muted:     #9ca3af;
  --sidebar-section:   #6b7280;
  --sidebar-hover:     #1f2937;
  --sidebar-active-bg: #1f2937;
  --sidebar-active:    #ffffff;

  --navy-2: #111827;
  --t: cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════════ BASE ═══════════════════════════════════════════════ */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

/* Números que se alinean en columna. Importa en importes, folios y conteos. */
.num, .money, .metric-card .value, table td.num, .sd-folio, .vr-plate,
[data-metric], .importe, .total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Códigos: placas, VIN, folios. */
code, .mono, .sd-folio, .vr-plate, .vin, .placa {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* ═══════════════════ ESTRUCTURA ════════════════════════════════════════ */

/* A todo lo ancho: la tabla se aprovecha mejor sin franjas vacías a los lados.
   En pantallas muy grandes se deja un respiro mínimo para que no se pegue al borde. */
.app-content { padding: var(--sp-4) var(--sp-4); }
.page-content { max-width: none; margin: 0; }

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  min-height: 50px;
  padding: 0 var(--sp-5);
  box-shadow: none;
  backdrop-filter: none;
}
.page-title { font-size: var(--fs-md); font-weight: 600; }
.page-eyebrow { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.role-pill {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  border-radius: var(--radius);
  padding: 3px 8px;
}

/* ═══════════════════ BARRA LATERAL ═════════════════════════════════════ */

.sidebar { background: var(--sidebar-bg); border-right: 1px solid #000; }
.sidebar-brand { padding: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand strong { font-size: var(--fs-md); font-weight: 600; color: #fff; }
.sidebar-brand small { font-size: var(--fs-xs); color: var(--sidebar-muted); }
.nav-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sidebar-section);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.nav-item {
  min-height: 34px;
  padding: 6px var(--sp-4);
  border-radius: 0;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--sidebar-ink);
  border-left: 3px solid transparent;
  gap: var(--sp-3);
}
.nav-item i { font-size: 16px; opacity: .85; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.is-active {
  background: var(--sidebar-active-bg);
  color: #fff;
  font-weight: 600;
  border-left-color: #3b82f6;
  box-shadow: none;
}
.nav-item.is-active i { opacity: 1; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-badge { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
.sidebar-badge strong { color: #fff; font-weight: 600; }

/* ═══════════════════ BOTONES: tres niveles, sin ambigͼedad ═════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s var(--t), border-color .12s var(--t);
  box-shadow: none;
}
.btn i { font-size: 15px; }
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Primario: azul institucional. La acción principal de la pantalla. */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }

/* Secundario: blanco con borde. La mayoría de las acciones. */
.btn-secondary {
  background: var(--panel);
  border-color: var(--line-3);
  color: var(--ink-2);
}
.btn-secondary:hover { background: var(--panel-3); border-color: #aab2bd; color: var(--ink); }

/* Terciario: sin caja. Acciones de fila y enlaces. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-ghost:hover { background: var(--panel-3); color: var(--ink); }

/* Destructivo: rojo, sólo aquí. */
/* El botón de RIESGO (borrar, cancelar) va en CONTORNO, no sólido.
   Así no se confunde con el botón principal, que es rojo sólido de la marca:
   el relleno distingue "Guardar" de "Borrar" sin depender del tono. */
.btn-danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
}
.btn-danger:hover {
  background: var(--red-soft);
}
.btn-danger:hover { background: #9a1c12; }

.btn-sm { min-height: 28px; padding: 4px 10px; font-size: var(--fs-sm); }
.btn-xs { min-height: 24px; padding: 2px 8px; font-size: var(--fs-xs); gap: 4px; }
.btn-lg { min-height: 40px; padding: 9px 18px; font-size: var(--fs-md); }

.icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--line-3);
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--panel-3); color: var(--ink); }
.icon-btn i { font-size: 16px; }
.menu-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--line-3);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.menu-btn i { font-size: 18px; }
.btn-link {
  background: none; border: 0; padding: 2px 4px;
  color: var(--primary); font-weight: 600; font-size: var(--fs-base);
  cursor: pointer; border-radius: var(--radius);
}
.btn-link:hover { background: var(--primary-soft); text-decoration: none; }

/* ═══════════════════ TARJETAS Y PANELES ════════════════════════════════ */

.card, .panel, .sd-panel, .vr-card, .metric-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card-head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  gap: var(--sp-3);
}
.card-head h2 { font-size: var(--fs-md); margin: 0; }
.card-head .eyebrow { font-size: var(--fs-xs); margin: 0; }

/* ═══════════════════ TABLA: la vista principal del sistema ═════════════ */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-base);
}
table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-3);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-3);
  white-space: nowrap;
}
table tbody td {
  padding: 7px var(--sp-3);
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  vertical-align: middle;
}
table tbody tr:hover td { background: var(--panel-2); }
table tbody tr:last-child td { border-bottom: 0; }
/* Fila seleccionada o en foco. */
table tbody tr[aria-selected="true"] td,
table tbody tr.is-selected td { background: var(--primary-soft); }

.table-wrap, .orders-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: auto;
  max-height: 68vh;
  background: var(--panel);
}
/* Celdas de acciones: a la derecha y sin envolver. */
table td.acciones, table th.acciones { text-align: right; white-space: nowrap; }
table td .btn + .btn { margin-left: 4px; }

/* ═══════════════════ ETAPAS: control segmentado con conteo ═════════════ */

.sd-stages {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 !important;
  margin: 0 0 var(--sp-3) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}
.sd-stages button {
  min-height: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: 7px 14px !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: var(--fs-base) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color .12s var(--t), color .12s var(--t);
}
.sd-stages button:last-child { border-right: 0 !important; }
.sd-stages button:hover { background: var(--panel-3) !important; color: var(--ink) !important; }
.sd-stages button[aria-pressed="true"] {
  background: var(--primary) !important;
  color: #fff !important;
}
.sd-stages button strong {
  font-size: var(--fs-base) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
  font-variant-numeric: tabular-nums;
}
.sd-stages button span { font-size: var(--fs-base) !important; font-weight: 600 !important; color: inherit !important; }

/* Los colores de etapa se reservan para la etiqueta de estado, no para el filtro. */
.sd-stages button[data-sd-filter="received"]  { border-bottom: 0 !important; }
.sd-stages button[data-sd-filter="quoted"]    { border-bottom: 0 !important; }
.sd-stages button[data-sd-filter="working"]   { border-bottom: 0 !important; }
.sd-stages button[data-sd-filter="finished"]  { border-bottom: 0 !important; }
.sd-stages button[data-sd-filter="delivered"] { border-bottom: 0 !important; }

/* ═══════════════════ FILTROS: barra superior compacta ══════════════════ */

.sd-filters, .vr-tools, .filters {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--sp-2) !important;
  align-items: end;
  margin-bottom: var(--sp-3) !important;
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.sd-filters > label, .vr-tools > label, .filters > label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  flex: 1 1 150px;
  min-width: 0;
}
.sd-filters label:first-child { flex: 2 1 240px; }
.sd-filters input, .sd-filters select,
.vr-tools input, .vr-tools select,
.filters input, .filters select {
  height: 32px !important;
  min-height: 32px !important;
  font-size: var(--fs-base) !important;
  border: 1px solid var(--line-3) !important;
  border-radius: var(--radius) !important;
  padding: 4px 8px !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
  width: 100%;
}
.sd-filters input:focus, .sd-filters select:focus,
.vr-tools input:focus, .vr-tools select:focus,
.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.filter-search { display: flex; align-items: center; gap: 6px; height: 32px; border: 1px solid var(--line-3); border-radius: var(--radius); padding: 0 8px; background: var(--panel); }
.filter-search input { border: 0 !important; height: 30px !important; padding: 0 !important; }
.filter-search i { color: var(--muted-2); font-size: 15px; }

.sd-count { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--sp-2); }

/* ═══════════════════ ETIQUETAS DE ESTADO ═══════════════════════════════ */

.sd-status, .status-pill, .chip, .vr-warning, .etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 21px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid;
  white-space: nowrap;
}
.sd-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sd-status[data-stage="received"]  { background: var(--blue-soft);   color: var(--blue);   border-color: var(--blue-mid); }
.sd-status[data-stage="quoted"]    { background: var(--purple-soft); color: var(--purple); border-color: var(--purple-mid); }
.sd-status[data-stage="working"]   { background: var(--amber-soft);  color: var(--amber);  border-color: var(--amber-mid); }
.sd-status[data-stage="finished"]  { background: var(--green-soft);  color: var(--green);  border-color: var(--green-mid); }
.sd-status[data-stage="delivered"] { background: var(--panel-3);     color: var(--ink-2);  border-color: var(--line-3); }
.vr-warning { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-mid); }
.etiqueta[data-tipo="riesgo"] { background: var(--red-soft);   color: var(--red-dark); border-color: var(--red-mid); }
.etiqueta[data-tipo="aviso"]  { background: var(--amber-soft); color: var(--amber);    border-color: var(--amber-mid); }
.etiqueta[data-tipo="ok"]     { background: var(--green-soft); color: var(--green);    border-color: var(--green-mid); }
.etiqueta[data-tipo="info"]   { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-mid); }

/* Folios y placas: código, no adorno. */
.sd-folio, .vr-plate {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .02em;
}

/* ═══════════════════ TARJETAS DE ORDEN: densas, no decorativas ════════ */

.sd-cards, .vr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important;
  gap: var(--sp-2) !important;
}
.sd-card, .vr-card {
  padding: var(--sp-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel);
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  transition: border-color .12s var(--t);
}
.sd-card:hover, .vr-card:hover { border-color: var(--line-3) !important; transform: none !important; box-shadow: var(--shadow-sm) !important; }
.sd-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; }
.sd-card h2, .vr-card h2 { font-size: var(--fs-md) !important; font-weight: 600; margin: 0 0 2px !important; color: var(--ink); }
.sd-customer, .vr-customer { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 6px !important; }
.sd-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 6px !important;
  padding-top: 6px;
  border-top: 1px solid var(--line-2);
}
.sd-meta b { color: var(--ink-2); font-weight: 600; }
.sd-next { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 var(--sp-2) !important; font-weight: 500; }
.sd-card small { font-size: var(--fs-xs); color: var(--muted-2); }
.sd-open {
  width: 100%;
  min-height: 30px !important;
  margin-top: auto;
  font-size: var(--fs-sm) !important;
  background: var(--panel) !important;
  border: 1px solid var(--line-3) !important;
  color: var(--ink-2) !important;
  font-weight: 600;
}
.sd-open:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.vr-actions { display: flex; gap: 6px; margin-top: var(--sp-2); }
.vr-actions .btn { flex: 1; min-height: 30px !important; font-size: var(--fs-sm) !important; }

/* ═══════════════════ Í“RDENES: TABLA DENSA ══════════════════════════════
   La app dibuja cada orden como una tarjeta. En lugar de reescribir el módulo
   (riesgo alto sobre funcionalidad probada), se le da forma de tabla: una fila
   por orden, columnas alineadas y encabezado fijo. Sólo cambia la presentación. */

@media (min-width: 761px) {
  /* Una sola definición de columnas para que encabezado y filas coincidan. */
  .sd-cards.es-tabla {
    /* El ancho total debe caber en el contenedor. La columna de vehículo y cliente
       es la que absorbe el espacio sobrante. */
    --filas: 62px minmax(200px, 2.4fr) 96px 78px 82px minmax(170px, 1.8fr) 88px 132px;
    display: block !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
    overflow: hidden;
  }
  /* Encabezado de la tabla: una franja arriba con las etiquetas en la MISMA
     rejilla que las filas. Lo inserta orders-table-head.js, que lo repone cada
     vez que la lista se redibuja. */
  .sd-cards.es-tabla { position: relative; }
  .sd-cards.es-tabla .sd-cards-head {
    display: grid;
    grid-template-columns: var(--filas);
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    background: var(--panel-3);
    border-bottom: 1px solid var(--line-3);
    color: var(--ink-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    position: sticky;
    top: 0;
    z-index: 3;
  }
  .sd-cards.es-tabla .sd-cards-head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
  .sd-cards.es-tabla .sd-cards-head > span:nth-child(7) { justify-self: start; }
  .sd-cards.es-tabla .sd-cards-head > span:nth-child(8) { justify-self: end; }

  .sd-cards.es-tabla {
    /* Si se ensanchan las columnas a mano más allá de la pantalla, la tabla se
       desplaza en horizontal en vez de cortar el contenido, como una hoja de
       cálculo. Mientras quepan, se reparten el ancho disponible. */
    overflow-x: auto;
    overflow-y: visible;
  }
  .sd-cards.es-tabla .sd-cards-head,
  .sd-cards.es-tabla .sd-card { min-width: fit-content; }

  /* ── Tirador para ajustar el ancho de cada columna, como en Excel ──────
     Se arrastra el borde derecho del encabezado; doble clic lo restablece. */
  .sd-cards-head .col-tirador {
    position: absolute;
    top: 0;
    right: -7px;
    width: 14px;
    height: 100%;
    cursor: col-resize;
    z-index: 4;
    touch-action: none;
  }
  .sd-cards-head .col-tirador::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 6px;
    width: 2px;
    height: 70%;
    background: transparent;
    transition: background-color .12s ease;
  }
  .sd-cards-head > span:hover .col-tirador::after { background: var(--line-3); }
  .sd-cards-head .col-tirador:hover::after,
  .sd-cards-head .col-tirador:active::after { background: var(--primary); }
  body.col-arrastrando { cursor: col-resize; user-select: none; }
  body.col-arrastrando .sd-cards-head .col-tirador::after { background: var(--primary); }

  /* Cada tarjeta, una fila de la tabla */
  .sd-cards.es-tabla .sd-card {
    display: grid !important;
    grid-template-columns: var(--filas);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px var(--sp-3);
    /* Sin padding lateral: las columnas se miden contra el ancho real del
       contenedor. Con padding, la fila medía 24px más que su contenedor y el
       botón de Acciones quedaba fuera del área visible. */
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line-2) !important;
    border-radius: 0 !important;
    background: var(--panel);
    min-height: 48px;
  }
  .sd-cards.es-tabla .sd-card:last-child { border-bottom: 0 !important; }
  .sd-cards.es-tabla .sd-card:hover { background: var(--panel-2) !important; box-shadow: none !important; }

  /* El encabezado interno desaparece como caja, pero el folio y el estado SÍ se
     conservan: son datos. Se colocan en su columna. */
  .sd-cards.es-tabla .sd-card-top { display: contents !important; }
  .sd-cards.es-tabla .sd-card-top > .sd-folio { grid-column: 1; grid-row: 1 / span 2; justify-self: start; align-self: center; }
  .sd-cards.es-tabla .sd-card-top > .sd-status { grid-column: 7; grid-row: 1 / span 2; justify-self: start; align-self: center; }
  .sd-cards.es-tabla .sd-card > .sd-status { grid-column: 7; grid-row: 1 / span 2; justify-self: start; align-self: center; }
  .sd-cards.es-tabla .sd-card > .sd-folio { grid-column: 1; grid-row: 1 / span 2; justify-self: start; align-self: center; }

  .sd-cards.es-tabla .sd-card > h2 { grid-column: 2; grid-row: 1; font-size: var(--fs-base) !important; font-weight: 600; margin: 0 !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sd-cards.es-tabla .sd-card > .sd-customer { grid-column: 2; grid-row: 2; font-size: var(--fs-sm) !important; color: var(--muted); margin: 0 !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* La franja de metadatos se reparte en sus columnas. */
  .sd-cards.es-tabla .sd-meta {
    display: contents !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: var(--fs-sm) !important;
  }
  .sd-cards.es-tabla .sd-meta > span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
  .sd-cards.es-tabla .sd-meta > span:nth-child(1) { grid-column: 3; grid-row: 1 / span 2; }
  .sd-cards.es-tabla .sd-meta > span:nth-child(2) { grid-column: 4; grid-row: 1 / span 2; }
  .sd-cards.es-tabla .sd-meta > span:nth-child(3) { grid-column: 5; grid-row: 1 / span 2; }
  .sd-cards.es-tabla .sd-meta b { color: var(--ink); font-weight: 600; }
  .sd-cards.es-tabla .sd-next { grid-column: 6; grid-row: 1 / span 2; font-size: var(--fs-sm) !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
  .sd-cards.es-tabla .sd-card > small { grid-column: 4 / span 2; grid-row: 3; font-size: var(--fs-xs); color: var(--muted-2); }
  .sd-cards.es-tabla .sd-open {
    grid-column: 8;
    grid-row: 1 / span 2;
    width: auto !important;
    margin: 0 !important;
    min-height: 28px !important;
    padding: 3px 10px !important;
    font-size: var(--fs-sm) !important;
    justify-self: end;
    align-self: center;
  }
  /* Historial plegable: ocupa el ancho completo cuando se abre. */
  .sd-cards.es-tabla .sd-card > details { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; }
  .sd-cards.es-tabla .sd-card > details summary { font-size: var(--fs-sm); color: var(--muted); cursor: pointer; min-height: 22px; }
}

/* ═══════════════════ SELECTOR DE VISTA (tabla / tarjetas) ══════════════ */

.vista-selector {
  display: inline-flex;
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: var(--sp-3);
  vertical-align: middle;
}
.vista-selector button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 2px 10px;
  border: 0;
  border-right: 1px solid var(--line-3);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s var(--t), color .12s var(--t);
}
.vista-selector button:last-child { border-right: 0; }
.vista-selector button i { font-size: 14px; }
.vista-selector button:hover { background: var(--panel-3); color: var(--ink); }
/* El activo se marca con fondo gris y un filete azul abajo, no con relleno azul:
   el azul está reservado para la acción principal, no para un conmutador. */
.vista-selector button[aria-pressed="true"] {
  background: var(--panel-3);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* ── Vista de tarjetas: se desactiva la forma de tabla ─────────────────── */
.sd-cards.es-tarjetas {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)) !important;
  gap: var(--sp-3) !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.sd-cards.es-tarjetas .sd-cards-head { display: none !important; }
.sd-cards.es-tarjetas .sd-card {
  display: flex !important;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel) !important;
  min-height: 0;
}
.sd-cards.es-tarjetas .sd-card:hover { border-color: var(--line-3) !important; background: var(--panel) !important; }
.sd-cards.es-tarjetas .sd-card-top { display: flex !important; justify-content: space-between; align-items: center; }
.sd-cards.es-tarjetas .sd-card h2 { margin: 0 !important; }
.sd-cards.es-tarjetas .sd-meta { display: flex !important; flex-wrap: wrap; gap: 2px var(--sp-3); margin: 0 !important; }
.sd-cards.es-tarjetas .sd-next { margin: 0 !important; }
.sd-cards.es-tarjetas .sd-open { width: 100% !important; margin-top: var(--sp-2) !important; justify-self: auto; }
.sd-cards.es-tarjetas .sd-card > details { grid-column: auto; }

/* En celular el selector no aporta: las tarjetas son la única opción. */
@media (max-width: 620px) {
  .vista-selector { display: none; }
}

/* ═══════════════════ COTIZADOR: CONTRASTE ══════════════════════════════
   El cotizador pintaba de ROJO el filtro seleccionado, porque el rojo era el
   color de la marca. Ahora el rojo significa riesgo y destructivo, así que un
   filtro activo se leía como una alarma. Se pasa a azul institucional, y los
   textos apagados suben de contraste. */

.quote-list-filter button,
.sd-filters button,
[data-quote-filter] {
  color: var(--ink-2) !important;
  border-color: var(--line-3) !important;
  background: var(--panel) !important;
  font-weight: 700 !important;
}
.quote-list-filter button:hover,
[data-quote-filter]:hover { background: var(--panel-3) !important; color: var(--ink) !important; }

.quote-list-filter button.is-active,
[data-quote-filter].is-active {
  border-color: var(--primary) !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

/* Los textos secundarios del cotizador estaban muy claros. */
.quote-list-item,
.quote-card,
.quote-shell { color: var(--ink-2); }

.quote-list-item small,
.quote-card small,
.quote-shell small,
.quote-list-head .eyebrow,
.quote-shell .muted { color: var(--muted) !important; }

/* Las etiquetas de campo dejan de ser casi invisibles. */
label,
.field,
.quote-card label,
.quote-shell label {
  color: var(--muted) !important;
  font-weight: 700;
}
label :is(input, select, textarea),
.quote-card label :is(input, select, textarea) {
  color: var(--ink) !important;
  font-weight: 400;
}

/* Los importes y totales del cotizador, bien marcados. */
.quote-total,
.quote-card .total,
[data-quote-total] {
  color: var(--ink) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* El botón de borrar partida sí es destructivo: ahí el rojo se queda. */
[data-quote-remove]:hover,
.quote-remove:hover { color: var(--red) !important; border-color: var(--red-mid) !important; }

/* ═══════════════════ BARRA LATERAL COLAPSABLE (ESCRITORIO) ══════════════
   La barra se come 216px. En una laptop de 1152px eso deja 848px para la tabla
   y la última columna queda apretada. Con Ctrl+B o el botón de menú se esconde
   y el contenido usa todo el ancho. La preferencia se recuerda. */

body.barra-oculta .sidebar {
  display: none !important;
}
body.barra-oculta .app-content {
  margin-left: 0 !important;
  max-width: none !important;
}
body.barra-oculta .topbar,
body.barra-oculta .page-content {
  max-width: none !important;
}
/* El botón de menú se marca cuando la barra está escondida, para saber que
   sirve para volver a mostrarla. */
body.barra-oculta #menuBtn {
  color: var(--primary);
  border-color: var(--primary-mid);
  background: var(--primary-soft);
}

/* ═══════════════════ EXPEDIENTE ════════════════════════════════════════ */

.sd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  margin: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.sd-header h1 { font-size: var(--fs-xl); margin: 2px 0; }
.sd-header > div > p:last-child { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.sd-kicker { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0; }

.sd-order-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 var(--sp-3);
  padding: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.sd-order-tabs button {
  min-height: 34px;
  padding: 7px var(--sp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  border-radius: 0;
}
.sd-order-tabs button:hover { color: var(--ink); background: var(--panel-2); }
.sd-order-tabs button[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }

.sd-detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.sd-panel { padding: var(--sp-4); }
.sd-panel h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
.sd-panel h3 { font-size: var(--fs-base); margin: var(--sp-4) 0 var(--sp-2); color: var(--ink-2); font-weight: 700; }
.sd-help { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--sp-3); }
.sd-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.sd-save {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.sd-save span { font-size: var(--fs-sm); color: var(--muted); }

/* ═══════════════════ FORMULARIOS ═══════════════════════════════════════ */

label.field, .field, .sd-panel label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: var(--sp-2);
}
input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  padding: 5px 8px;
  min-height: 32px;
  width: 100%;
  transition: border-color .12s var(--t), box-shadow .12s var(--t);
}
textarea { min-height: 72px; line-height: 1.5; text-transform: none; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; accent-color: var(--primary); }
.field-grid, .modal .field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
}

/* ═══════════════════ AVISOS ═══════════════════════════════════════════ */

.sd-notice, .notice, .quick-note {
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--primary) !important;
  background: var(--panel-2) !important;
  color: var(--ink-2) !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  margin: 0 0 var(--sp-3);
}
.dato-falta {
  border: 1px solid var(--amber-mid); border-left: 3px solid var(--amber);
  background: var(--amber-soft); color: #7a3c05;
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-3);
}
.riesgo-sin-factura {
  border: 1px solid var(--red-mid); border-left: 3px solid var(--red);
  background: var(--red-soft); color: var(--red-dark);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-3);
}
.ya-facturada {
  border: 1px solid var(--green-mid); border-left: 3px solid var(--green);
  background: var(--green-soft); color: var(--green);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-3);
}

/* Datos clave en franja: placa, VIN, unidad, teléfono. */
.datos-clave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-3);
}
.datos-clave dt { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.datos-clave dd { margin: 1px 0 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.datos-clave dd.vacio { color: var(--amber); font-style: italic; font-weight: 500; }

/* ═══════════════════ MÉTRICAS DEL PANEL ═══════════════════════════════ */

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.metric-card {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--line-3) !important;
  position: static;
}
.metric-card::before { content: none !important; }
.metric-card.accent-red   { border-left-color: var(--red) !important; }
.metric-card.accent-blue  { border-left-color: var(--primary) !important; }
.metric-card.accent-amber { border-left-color: var(--amber) !important; }
.metric-card.accent-green { border-left-color: var(--green) !important; }
.metric-card .label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.metric-card .value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.metric-card .sub { font-size: var(--fs-xs); color: var(--muted-2); }

.vr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.vr-stats > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); }
.vr-stats > div strong { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); line-height: 1.15; }
.vr-stats > div span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }

/* ═══════════════════ VEHÍCULOS ════════════════════════════════════════ */

.vr-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); margin: var(--sp-2) 0; }
.vr-card dl dt { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.vr-card dl dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.vr-history-summary { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-2) 0; }
.vr-history-row {
  width: 100%; text-align: left; min-height: 32px; padding: 5px 8px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel-2); color: var(--ink-2); cursor: pointer;
  font-size: var(--fs-sm);
}
.vr-history-row:hover { background: var(--panel); border-color: var(--line-3); }
.vr-history-row strong { color: var(--ink); }
.vr-pick { width: 100%; text-align: left; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; font-size: var(--fs-sm); }
.vr-pick:hover { border-color: var(--primary); background: var(--primary-soft); }
.vr-merge { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.vr-compare-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.vr-compare-card h3 { font-size: var(--fs-base); }
.vr-compare-card dl > div.vr-different { background: var(--amber-soft); border-left: 3px solid var(--amber); }
.vr-merge-alert { border: 1px solid var(--amber-mid); border-left: 3px solid var(--amber); background: var(--amber-soft); color: #7a3c05; font-weight: 600; border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }

/* ═══════════════════ MODALES ══════════════════════════════════════════ */

.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-head { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: var(--fs-lg); margin: 0; }
.modal-body { padding: var(--sp-4) var(--sp-5); overflow: auto; }
.modal-foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.modal-close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.modal-close:hover { background: var(--panel-3); color: var(--ink); }

/* ═══════════════════ NAVEGACIÍ“N INFERIOR (CELULAR) ════════════════════ */

.mobile-bottom-nav {
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mob-nav-btn { min-height: 50px; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); border-radius: 0; }
.mob-nav-btn i { font-size: 19px; }
.mob-nav-btn.is-active { color: var(--primary); background: transparent; }
.mob-nav-create {
  background: var(--primary); color: #fff; border-radius: 50%;
  width: 48px; height: 48px; min-height: 48px;
  box-shadow: var(--shadow); margin-top: -14px;
}
.mob-nav-create i { font-size: 21px; }

/* ═══════════════════ RESPONSIVO: mide el CONTENIDO, no la ventana ══════
   El CSS de la app rompe a una columna en 760px de VENTANA, pero el sidebar
   se come 216px. Aquí los puntos de quiebre son más bajos. */

@media (max-width: 1180px) {
  .sd-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sd-stages { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .sd-stages button { flex: 0 0 auto; }
}
@media (max-width: 620px) {
  .app-content { padding: var(--sp-3); }
  .sd-cards, .vr-grid { grid-template-columns: 1fr !important; }
  .sd-filters, .vr-tools, .filters { gap: 6px !important; }
  .sd-filters > label, .vr-tools > label, .filters > label { flex: 1 1 100%; }
  .sd-actions .btn, .modal-foot .btn, .vr-actions .btn { flex: 1 1 100%; }
  .sd-header { flex-direction: column; }
  .modal-head, .modal-body, .modal-foot { padding: var(--sp-3) var(--sp-4); }
  .datos-clave { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table { font-size: var(--fs-sm); }
  table thead th, table tbody td { padding: 6px var(--sp-2); }
}

/* Írea táctil: en pantallas de dedo, los controles crecen. */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .nav-item { min-height: 42px; }
  input, select, textarea { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Foco visible siempre. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ═══════════════════ IMPRESIÍ“N ════════════════════════════════════════ */

@media print {
  .sidebar, .topbar, .mobile-bottom-nav, .toast-stack, .sd-filters, .sd-stages { display: none !important; }
  .app-content { padding: 0 !important; }
  .card, .panel, .sd-panel, table { box-shadow: none !important; border-color: #999 !important; }
  body { background: #fff; }
}

/* ═══════════════════ CAPTURA DE FACTURA EN EL CORTE ════════════════════
   Karen y Nancy capturan el folio de Odoo aquí mismo, en la lista del corte,
   sin abrir el expediente de cada unidad. Al confirmar, la unidad se cierra. */

.corte-captura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
}
.corte-captura label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0;
}
.corte-captura input {
  height: 30px;
  min-height: 30px;
  font-size: var(--fs-base);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.corte-captura input[data-campo="folio"] {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.corte-captura-pie {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-1);
}
.corte-aviso {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--amber);
}
.corte-aviso:empty { display: none; }

/* La captura ocupa TODA la fila, no una columna. En modo tabla la fila es una
   rejilla de 8 columnas, así que se le dice que abarque de la primera a la última.
   Sin esto, el formulario queda encajado en la columna de "Folio". */
.sd-cards .sd-card > .corte-captura {
  grid-column: 1 / -1;
  grid-row: 3;
}
/* El botón de abrir el expediente baja debajo, para no partir la captura. */
.sd-cards .sd-card > .corte-captura ~ .sd-open { grid-row: 4; }

@media (max-width: 760px) {
  .sd-cards .sd-card > .corte-captura,
  .sd-cards .sd-card > .corte-captura ~ .sd-open { grid-column: auto; grid-row: auto; }
}

@media (max-width: 620px) {
  .corte-captura { grid-template-columns: 1fr; }
  .corte-captura-pie .btn { width: 100%; }
}

/* ═══════════════════ CASILLA DE GARANTÍA EN LA COTIZACIÍ“N ══════════════
   Un concepto marcado como garantía no se cobra: se cuenta como pérdida.
   El renglón se marca para que se vea de un vistazo, sin gritar. */

.quote-items-table th:nth-last-child(2) { text-align: center; width: 84px; }
.quote-garantia { text-align: center; width: 84px; }
.quote-garantia-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 44px;
  cursor: pointer;
  margin: 0;
  border-radius: var(--radius);
}
.quote-garantia-caja:hover { background: var(--amber-soft); }
.quote-garantia-caja input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--amber);
  cursor: pointer;
}
/* El renglón de garantía se distingue con fondo suave y un filete. */
.quote-items-table tr.es-garantia > td { background: var(--amber-soft); }
.quote-items-table tr.es-garantia > td:first-child { border-left: 3px solid var(--amber); }
.quote-items-table tr.es-garantia input[data-item-field="unit_price"] { opacity: .55; }

@media (pointer: coarse) {
  .quote-garantia-caja { min-height: 44px; min-width: 56px; }
  .quote-garantia-caja input[type="checkbox"] { width: 22px; height: 22px; }
}

/* ═══════════════════ APARTADO DE GARANTÍAS ══════════════════════════════
   Lo que se dejó de cobrar. No entra al corte ni se factura: sólo se cuenta. */

.gar-caja { display: flex; flex-direction: column; gap: var(--sp-4); }

.gar-totales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
}
.gar-totales > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
}
.gar-totales .rotulo {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gar-totales .cifra {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.gar-totales .nota { font-size: var(--fs-xs); color: var(--muted-2); }

.gar-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: end;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
.gar-filtros label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
  flex: 1 1 160px; margin: 0;
}
.gar-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.gar-tabla thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-3);
  border-bottom: 1px solid var(--line-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em; text-align: left; white-space: nowrap;
}
.gar-tabla tbody td { padding: 7px var(--sp-3); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.gar-tabla tbody tr:hover td { background: var(--panel-2); }
.gar-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gar-tabla .perdida { font-weight: 700; color: var(--amber); }
.gar-tabla .folio, .gar-tabla .placa {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700; color: var(--ink);
}
.gar-motivo { color: var(--muted); font-size: var(--fs-sm); }
.gar-vacio {
  padding: var(--sp-6);
  text-align: center;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px dashed var(--line-3);
  border-radius: var(--radius-lg);
}
.gar-vacio h2 { font-size: var(--fs-lg); color: var(--ink); margin: 0 0 var(--sp-2); }

@media (max-width: 900px) {
  .gar-tabla .oculta-angosta { display: none; }
}

/* Al imprimir, sólo la tabla y los totales. */
@media print {
  .gar-filtros, .gar-acciones, .sidebar, .topbar { display: none !important; }
  .gar-tabla thead th { background: #eee !important; }
  .gar-caja { gap: 12px; }
}

/* ═══════════════ RESCATE DE COTIZACIONES DEL NAVEGADOR ═════════════════
   Cuando el guardado a Supabase falla, la cotización se queda en el navegador.
   Esto la recupera desde la propia pantalla, sin abrir la consola. */

.rescate-fondo {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(17, 24, 39, .55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.rescate-cuadro {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(640px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rescate-cuadro header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line-2);
}
.rescate-cuadro header h2 { font-size: var(--fs-lg); margin: 0; color: var(--ink); }
.rescate-cuadro header .icon-btn { font-size: 22px; line-height: 1; min-width: 34px; min-height: 34px; }

.rescate-conteo {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-2);
}
.rescate-conteo > div { display: flex; flex-direction: column; gap: 2px; }
.rescate-conteo .rotulo {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.rescate-conteo strong {
  font-size: var(--fs-2xl); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.rescate-conteo strong.alerta { color: var(--amber); }

.rescate-nota { padding: var(--sp-3) var(--sp-4) 0; margin: 0; color: var(--ink-2); font-size: var(--fs-base); }
.rescate-nota.bueno { color: var(--green); font-weight: 600; }

.rescate-lista { padding: var(--sp-3) var(--sp-4); overflow-y: auto; }
.rescate-lista table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rescate-lista th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 8px; border-bottom: 1px solid var(--line-3);
}
.rescate-lista td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); }
.rescate-lista .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rescate-lista .folio { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.rescate-lista .motivo { color: var(--muted); font-size: var(--fs-xs); }

.rescate-aviso { padding: 0 var(--sp-4); margin: var(--sp-2) 0; min-height: 20px; font-size: var(--fs-sm); font-weight: 600; }
.rescate-aviso.bueno { color: var(--green); }
.rescate-aviso.malo { color: var(--red); }

.rescate-cuadro footer {
  display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--sp-4); border-top: 1px solid var(--line-2); background: var(--panel-2);
}

@media (max-width: 560px) {
  .rescate-conteo { grid-template-columns: 1fr; }
  .rescate-cuadro footer { flex-direction: column-reverse; }
  .rescate-cuadro footer .btn { width: 100%; }
}

/* ═══════════════ EL BOTÍ“N DE LAS 3 RAYAS ═══════════════════════════════
   Arriba de 1100px el botón NO se muestra: ahí la barra lateral ya está fija
   a la vista, y el cajón deslizable no tiene sentido.

   Se esconde aquí porque la regla de arriba (sin media query) le ganaba a la
   de styles.css, y por eso el botón aparecía en computadora.

   De 1100px hacia abajo, styles.css lo vuelve a mostrar y abre el cajón. */

@media (min-width: 1101px) {
  /* En computadora el botón se ve, pero NO abre el cajón: colapsa la barra.
     El velo del cajón queda bloqueado para que nunca tape la pantalla. */
  .sidebar-overlay, .sidebar-overlay.is-open { display: none !important; }
}

/* ═══════════════ SELECTOR DE EMPRESA (AYR / KARBONCERO) ═════════════════
   Mismo estilo que el de sucursal, para que se vean como una familia.
   Un punto de color distingue cada empresa de un vistazo. */

.company-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: none; display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}

.company-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.company-switch-btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--primary-mid); }
.company-switch-btn:disabled { cursor: default; opacity: .85; }

.company-menu {
  position: fixed;
  z-index: 500;
  /* ANCHO FIJO. Antes sólo tenía mínimo, y el texto largo lo estiraba a
     572px: se veía como una franja que tapaba media pantalla. */
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 420px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
}
.company-menu-title {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-2) 0;
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.35;
}
.company-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--radius);
  background: none; color: var(--ink);
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.company-option:hover { background: var(--panel-2); }
.company-option.is-active { background: var(--primary-soft); }
/* El texto va en columna: nombre arriba, detalle abajo. Sin esto, el botón
   es flex y los pone uno al lado del otro. */
.company-option > span:not(.company-dot) { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.company-option strong { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.company-option small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.25; }
.company-option i { margin-left: auto; color: var(--primary); font-size: 16px; flex: none; }
.company-menu-note {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.45;
  /* Sin esto, el texto largo estiraba el menú a 572px. */
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .company-switch-btn { height: 28px; padding: 0 8px; font-size: var(--fs-xs); }
}

/* ═══════════════ AVISO DE EMPRESA DENTRO DE LA ORDEN ═══════════════════
   AYR y Karboncero comparten clientes y vehículos. Este aviso evita capturar
   en la empresa equivocada. */

.sd-empresa {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
  padding: 7px var(--sp-3);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--panel-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.sd-empresa strong { color: var(--ink); font-weight: 700; }
.sd-empresa.es-otra {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}
.sd-empresa-aviso { color: var(--amber); font-weight: 600; font-size: var(--fs-xs); }

/* ═══════════════ CIERRE DE LA COTIZACIÍ“N ════════════════════════════════
   El seguimiento de las cotizaciones que no tienen orden de servicio.
   Sin esto se quedaban abiertas para siempre y nadie sabía en qué quedaron. */

.quote-cierre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.quote-cierre.es-vencida { border-left-color: var(--amber); background: var(--amber-soft); }
.quote-cierre.es-cerrada { border-left-color: var(--muted); background: var(--panel-3); }

.quote-cierre-info { min-width: 0; }
.quote-cierre-titulo {
  display: flex; align-items: center; gap: 6px;
  margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--ink);
}
.quote-cierre-detalle { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.quote-cierre-fecha { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }

.quote-cierre-botones { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

@media (max-width: 720px) {
  .quote-cierre { flex-direction: column; align-items: stretch; }
  .quote-cierre-botones .btn { flex: 1 1 auto; }
}

/* ═══════════════ AL CAMBIAR DE EMPRESA ══════════════════════════════════
   Al elegir empresa se recarga todo: órdenes, cotizaciones, clientes,
   vehículos, contadores. Eso tarda un momento, y sin un aviso parece que
   se colgó. */

.company-cargando {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.company-cargando::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 8px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: companyGirar .7s linear infinite;
  vertical-align: -1px;
}
@keyframes companyGirar { to { transform: rotate(360deg); } }

.company-aviso {
  position: fixed;
  top: 52px; left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-3);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .company-cargando::before { animation: none; }
}

/* ═══════════════ DE QUÉ EMPRESA ES CADA VISITA ══════════════════════════
   El historial es del carro: si vino a AYR y luego a Karboncero, se ve todo
   junto pero separado por empresa, con su color. */

.vr-empresas {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: 4px 0 0; padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.vr-empresas li { display: inline-flex; align-items: center; gap: 5px; }
.vr-empresas strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ═══════════════ LA EMPRESA EN CADA RENGLÍ“N ═════════════════════════════
   El corte de facturación y la lista de órdenes no deben revolver AYR con
   Karboncero. Cada renglón dice de qué empresa es, con su color. */

.sd-empresa-celda {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Y el aviso de "no hay órdenes de esta empresa" al vincular. */
.quote-sin-ordenes {
  font-weight: 400; font-size: var(--fs-xs); color: var(--amber);
  text-transform: none; letter-spacing: 0;
}

/* ═══════════════ EL COLOR DE LA EMPRESA EN LA INTERFAZ ══════════════════
   Al elegir Karboncero, la interfaz se pinta con su color. Así no hay duda
   de en qué empresa se está trabajando. Se cambia --primary, que es la que
   usan los botones, los encabezados y los acentos.
   El rojo de riesgo NO se toca: sigue significando lo mismo en las dos. */

/* ── La franja de la barra: el color de la marca ─────────────────────────
   Con Karboncero se ve el degradado de sus dos verdes, que es su identidad. */
body[data-empresa] .topbar {
  border-bottom: 3px solid var(--empresa-acento, var(--empresa-color, transparent));
  transition: border-color .2s;
}
body[data-empresa="KARBONCERO"] .topbar {
  border-bottom-color: transparent;
  border-image: linear-gradient(90deg, #9dff3e 0%, #6be000 45%, #347c1e 100%) 1;
}

/* La pestaña activa del menú: con Karboncero se marca con su verde lima, que
   es lo que más se ve. Con AYR se queda como estaba. */
body[data-empresa] .nav-item.is-active::before {
  background: var(--empresa-acento, var(--empresa-color, #8f1a1a));
}
body[data-empresa="KARBONCERO"] .nav-item.is-active {
  background: rgba(157, 255, 62, .14);
  color: #d9ffb8;
}

/* El botón de la empresa y el aviso de carga, con el color de la marca. */
body[data-empresa] .company-cargando { background: var(--empresa-color, #8f1a1a); }
body[data-empresa] .company-switch-btn {
  border-color: color-mix(in srgb, var(--empresa-acento, #8f1a1a) 70%, transparent);
}

/* Con Karboncero, los filetes de las secciones y los encabezados llevan su
   verde lima, para que se note en qué empresa se está trabajando. */
body[data-empresa="KARBONCERO"] .page-eyebrow { color: #347c1e; }
body[data-empresa="KARBONCERO"] .sd-panel h2,
body[data-empresa="KARBONCERO"] .quote-panel-title i { color: #347c1e; }
body[data-empresa="KARBONCERO"] .quote-cierre { border-left-color: #9dff3e; }
body[data-empresa="KARBONCERO"] .sd-empresa { border-left-color: #9dff3e; }

/* ═══════════════ PANEL IZQUIERDO CON EL COLOR DE LA EMPRESA ═════════════
   El panel de la izquierda tomaba el color de la empresa, pero era el único
   lugar donde no se notaba: seguía gris oscuro en las dos.

   Ahora, con Karboncero, el panel se pinta con su verde casi negro (#102006,
   el mismo de su sitio) y la pestaña activa con su verde lima.

   Los grises que se usan aquí son los suyos, sacados de karboncero.com:
      #102006  su verde casi negro (el fondo de su sitio)
      #1b2f10  un tono un poco más claro, para pasar el ratón
      #9dff3e  su verde de marca (la pestaña activa)
      #347c1e  verde profundo (la línea de la pestaña activa) */

.quote-empresa {
  display: inline-flex; align-items: center; gap: 5px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 1px;
}
.quote-empresa .company-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
}

/* ═══════════════ EL PANEL IZQUIERDO CON KARBONCERO ══════════════════════
   El panel es el marco del sistema: no cambia de color. Lo que cambia es la
   MARCA (el logo y el nombre, que pone empresa.js) y los ACENTOS de abajo. */

body[data-empresa="KARBONCERO"] {
  --sidebar-hover:      rgba(157, 255, 62, .10);
  --sidebar-active-bg:  rgba(157, 255, 62, .14);
  --sidebar-active:     #d9ffb8;
}

/* ═══════════════ KARBONCERO: SUS ACENTOS ═══════════════════════════════
   El color va en los ACENTOS, no en todo el panel. Pintar el panel entero de
   verde fue un error: el panel es el marco del sistema, no la empresa.

   Lo que sí lleva su color:
      · la barra del borde de la pestaña activa, en su verde lima
      · el fondo de la pestaña activa, en verde suave
      · el filete debajo de la marca
      · el logo y el nombre, que cambian a los suyos (eso lo hace empresa.js) */

/* La barra del borde izquierdo de la pestaña activa: su verde lima. */
body[data-empresa="KARBONCERO"] .nav-item.is-active::before {
  background: #9dff3e;
}
body[data-empresa="KARBONCERO"] .nav-item.is-active {
  background: rgba(157, 255, 62, .14);
  color: #d9ffb8;
}

/* La marca del panel: el filete verde lima debajo. El logo y el nombre los
   cambia empresa.js a los suyos. */
body[data-empresa="KARBONCERO"] .sidebar-brand {
  border-bottom: 2px solid #9dff3e;
}
body[data-empresa="KARBONCERO"] .sidebar-brand strong {
  color: #ffffff;
}
body[data-empresa="KARBONCERO"] .sidebar-brand small {
  color: #a8c493;
}

/* El logo de la barra de arriba: cambia con la empresa. */
.topbar-logo {
  height: 30px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  flex: none;
}

/* ═══════════════ EL PANEL DEL AVISO DE WHATSAPP ═════════════════════════
   Muestra el mensaje EXACTO que va a recibir el cliente y el enlace, antes de
   mandarlo. Así se revisa sin gastar un mensaje. */

.wa-panel-fondo {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.wa-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}
.wa-panel header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.wa-panel header h2 { margin: 2px 0 0; font-size: var(--fs-lg); }

.wa-panel-datos {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--panel-2); border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.wa-panel-datos div { display: flex; flex-direction: column; gap: 2px; }
.wa-panel-datos span { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }

.wa-panel-aviso {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--amber-soft); border-left: 3px solid var(--amber);
  border-radius: var(--radius); font-size: var(--fs-sm);
}

/* El mensaje, como se ve en WhatsApp. */
.wa-panel-mensaje {
  white-space: pre-wrap;
  padding: 14px 16px;
  background: #e7f5e9;
  border-radius: 12px 12px 12px 4px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #12351c;
  margin-bottom: 12px;
}

.wa-panel-enlace {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--panel-2); border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.wa-panel-enlace span { color: var(--muted); font-size: var(--fs-xs); }
.wa-panel-enlace code {
  font-size: var(--fs-xs); word-break: break-all;
  color: var(--ink-2); background: var(--panel-3);
  padding: 6px 8px; border-radius: 6px;
}
.wa-panel-enlace .btn { align-self: flex-start; }

.wa-panel-error {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--red-soft); border-left: 3px solid var(--red);
  border-radius: var(--radius); font-size: var(--fs-sm); color: var(--red-dark);
}

.wa-panel footer {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

@media (max-width: 640px) {
  .wa-panel { padding: 14px; }
  .wa-panel footer .btn { flex: 1 1 100%; }
}

/* ═══════════════ WHATSAPP: LEER Y CONTESTAR ═════════════════════════════
   Las conversaciones del WhatsApp del taller, dentro del Hub.

   La altura se calcula para que la pantalla quepa y NO tape nada: se le
   resta lo que ocupan la barra de arriba y el encabezado. */

.wa-shell {
  display: grid;
  grid-template-columns: minmax(250px, 320px) 1fr;
  gap: var(--sp-3);
  margin: 20px 28px;
  /* Lo que sobra después de la barra y los márgenes. */
  height: calc(100vh - 150px);
  min-height: 380px;
  max-height: 760px;
}

/* ── La lista de conversaciones ── */
.wa-lista {
  display: flex; flex-direction: column;
  min-height: 0;                 /* para que el scroll funcione dentro */
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.wa-lista > header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
.wa-lista h2 { margin: 2px 0 0; font-size: var(--fs-lg); }
.wa-lista header small { display: block; margin-top: 2px; font-size: var(--fs-xs); }

.wa-buscar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--sp-3);
  border-bottom: 1px solid var(--line-2);
  color: var(--muted);
}
.wa-buscar input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: inherit; color: var(--ink); padding: 6px 0;
}

.wa-items { flex: 1; min-height: 0; overflow-y: auto; }

.wa-item {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left;
  padding: 10px var(--sp-3);
  border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; cursor: pointer;
  font: inherit; color: var(--ink);
}
.wa-item:hover { background: var(--panel-2); }
.wa-item.is-active { background: var(--primary-soft); }
.wa-item.sin-leer { background: #f2fbf3; }

.wa-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wa-item-top strong {
  font-size: var(--fs-sm); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-item-top em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); flex: none; }
.wa-item-sub { font-size: var(--fs-xs); color: var(--muted); }
.wa-item-ultimo {
  font-size: var(--fs-xs); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-badge {
  position: absolute; right: 10px; bottom: 8px;
  min-width: 18px; padding: 1px 5px;
  border-radius: 999px; background: var(--green); color: #fff;
  font-size: 10px; font-weight: 800; text-align: center;
}

/* ── El chat ── */
.wa-chat {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.wa-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
  background: var(--panel-2);
}
.wa-chat-head strong { display: block; font-size: var(--fs-base); }
.wa-chat-head small { color: var(--muted); font-size: var(--fs-xs); }

.wa-hilo {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 6px;
  background: #f7f9f7;
}
.wa-burbuja {
  max-width: 76%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(15,23,42,.06);
}
.wa-burbuja.entra {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line-2);
  border-bottom-left-radius: 4px;
}
.wa-burbuja.sale {
  align-self: flex-end;
  background: #d9fdd3;
  border-bottom-right-radius: 4px;
}
.wa-texto { display: block; white-space: pre-wrap; word-break: break-word; }
.wa-hora { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); text-align: right; }
.wa-archivo {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; padding: 6px 8px;
  background: rgba(255,255,255,.6); border-radius: 8px;
  font-size: var(--fs-xs); font-weight: 600;
}
.wa-archivo em { font-style: normal; color: var(--muted); font-weight: 400; }

.wa-archivo-previo {
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--sp-3);
  background: var(--primary-soft);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-sm);
}
.wa-archivo-previo em { font-style: normal; color: var(--muted); }

.wa-escribir {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px var(--sp-3);
  border-top: 1px solid var(--line-2);
  background: var(--panel);
}
.wa-escribir textarea {
  flex: 1; min-width: 0; resize: none;
  min-height: 38px; max-height: 120px;
  padding: 9px 12px;
  border: 1px solid var(--line-2); border-radius: 10px;
  font: inherit; font-size: var(--fs-sm);
  background: var(--panel-2); color: var(--ink);
}
.wa-escribir textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.wa-vacio {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 30px; text-align: center; color: var(--muted);
}
.wa-vacio i { font-size: 2rem; opacity: .4; }
.wa-vacio p { margin: 0; font-weight: 600; }
.wa-vacio small { font-size: var(--fs-xs); }

/* El aviso de mensajes sin leer, en el menú de la izquierda. */
.nav-item { position: relative; }
.wa-chip {
  margin-left: auto;
  min-width: 18px; padding: 1px 5px;
  border-radius: 999px; background: var(--green); color: #fff;
  font-size: 10px; font-weight: 800; text-align: center;
}

@media (max-width: 1100px) {
  .wa-shell {
    grid-template-columns: 1fr;
    height: auto; max-height: none;
    margin: 12px;
  }
  .wa-lista { max-height: 38vh; }
  .wa-chat { height: 58vh; }
}

/* ═══════════════ LA BIBLIOTECA DE CONTACTOS ═════════════════════════════
   Un cliente puede tener varios teléfonos: el gerente, el chofer, el de
   refacciones. Aquí se ven todos y se identifica cada uno. */

.wa-tabs {
  display: flex; gap: 4px;
  margin: 20px 28px 0;
  border-bottom: 1px solid var(--line-2);
}
.wa-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--muted);
}
.wa-tab:hover { color: var(--ink); }
.wa-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.wa-tab-num {
  min-width: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--panel-3); color: var(--muted);
  font-size: 10px; font-weight: 800; text-align: center;
}
.wa-tab-num:empty { display: none; }
.wa-tab.is-active .wa-tab-num { background: var(--primary-soft); color: var(--primary); }

/* La pestaña de conversaciones, un poco más abajo por las pestañas. */
#waVistaConv .wa-shell { margin-top: 16px; }

/* ── La biblioteca ── */
.wa-bib { padding: 16px 28px 28px; }

.wa-bib-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: 14px;
}
.wa-bib-head h2 { margin: 2px 0 0; font-size: var(--fs-xl); }
.wa-bib-head small { display: block; margin-top: 2px; font-size: var(--fs-xs); }

.wa-bib-filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.wa-bib-filtros .wa-buscar {
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  max-width: 460px;
}
.wa-bib-filtros .wa-buscar input { padding: 9px 4px; }

.wa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
}
.wa-chip-filtro:hover { border-color: var(--line-3); }
.wa-chip-filtro.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.wa-chip-filtro em {
  font-style: normal; font-size: 10px;
  padding: 0 5px; border-radius: 999px;
  background: var(--panel-3); color: var(--muted);
}
.wa-chip-filtro.is-active em { background: rgba(255,255,255,.25); color: #fff; }

.wa-bib-grupo { margin-bottom: 22px; }
.wa-bib-grupo h3 {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 8px; font-size: var(--fs-sm);
  color: var(--ink); text-transform: none;
}
.wa-bib-grupo h3 span { font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }

.wa-bib-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 10px;
}

.wa-contacto {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel); cursor: pointer;
}
.wa-contacto:hover { border-color: var(--line-3); box-shadow: var(--shadow-sm); }
.wa-contacto.sin-identificar { border-style: dashed; background: #fffdf7; }
.wa-contacto strong { font-size: var(--fs-sm); }
.wa-contacto small { font-size: var(--fs-xs); color: var(--muted); }
.wa-contacto-empresa { color: var(--ink-2) !important; font-weight: 600; }
.wa-contacto-tel {
  margin-top: 4px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.wa-contacto-tipo {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 6px; padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.wa-contacto-acciones {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 2px;
  opacity: 0;
}
.wa-contacto:hover .wa-contacto-acciones { opacity: 1; }
.wa-contacto-falta {
  margin-top: 6px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  color: var(--amber);
}

/* ── El botón de identificar, en el chat ── */
.wa-tipo {
  padding: 3px 10px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.wa-identificar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--line-3); border-radius: 999px;
  background: var(--panel); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
}
.wa-identificar:hover { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }

/* ── La ficha del contacto ── */
.wa-campo { display: block; margin-bottom: 12px; }
.wa-campo > span {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink);
}
.wa-campo small { font-weight: 400; color: var(--muted); }
.wa-campo input, .wa-campo select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font: inherit; font-size: var(--fs-sm);
  background: var(--panel); color: var(--ink);
}
.wa-campo input:focus, .wa-campo select:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent;
}
.wa-campo input[readonly] { background: var(--panel-2); color: var(--muted); }
.wa-campo select[size] { height: auto; max-height: 170px; padding: 4px; }
.wa-campo select[size] option { padding: 6px 8px; border-radius: 6px; }

.wa-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 14px;
  font-size: var(--fs-sm); cursor: pointer;
}
.wa-check input { margin-top: 2px; flex: none; }

@media (max-width: 700px) {
  .wa-bib { padding: 14px; }
  .wa-tabs { margin: 14px 14px 0; }
  .wa-bib-lista { grid-template-columns: 1fr; }
  .wa-contacto-acciones { opacity: 1; }
}

/* ═══════════════ MENSAJES AL CLIENTE ════════════════════════════════════
   El historial de lo que ya se le mandó al cliente, dentro del expediente
   de la orden. Aparte del estado operativo, que es interno. */

.mc { padding: 4px 0 8px; }

.mc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: 14px;
}
.mc-head h2 { margin: 2px 0 0; font-size: var(--fs-xl); }
.mc-head p { margin: 2px 0 0; font-size: var(--fs-sm); }

.mc-resumen {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 10px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel-2);
}
.mc-resumen strong { font-size: 1.5rem; line-height: 1; color: var(--primary); }
.mc-resumen span { font-size: var(--fs-xs); color: var(--muted); }
.mc-resumen em { font-style: normal; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ── Elegir a cuál teléfono ── */
.mc-tels {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.mc-tels > span { font-size: var(--fs-xs); font-weight: 700; }
.mc-tel {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); cursor: pointer;
  font: inherit; text-align: left;
}
.mc-tel:hover { border-color: var(--line-3); }
.mc-tel.is-active { border-color: var(--primary); background: var(--primary-soft); }
.mc-tel strong { font-size: var(--fs-sm); color: var(--ink); }
.mc-tel small { font-size: 10px; color: var(--muted); }

.mc-unico {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 9px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel-2);
  font-size: var(--fs-sm); font-weight: 600;
}

/* ── El historial ── */
.mc-hilo {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 44vh; overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: #f7f9f7;
  margin-bottom: 14px;
}

.mc-mensaje {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  font-size: var(--fs-sm);
}
.mc-mensaje.aviso { border-left: 3px solid var(--green); }
.mc-mensaje-cabeza {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.mc-quien { font-size: var(--fs-xs); font-weight: 800; color: var(--ink); }
.mc-mensaje-cabeza time { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.mc-etiqueta {
  padding: 1px 7px; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.mc-texto { display: block; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); }
.mc-estado {
  display: inline-block; margin-top: 5px;
  font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.mc-archivo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 4px; padding: 4px 9px;
  background: var(--panel-2); border-radius: 8px;
  font-size: var(--fs-xs); font-weight: 600;
}

.mc-sin, .mc-cargando {
  padding: 26px; text-align: center; color: var(--muted);
}
.mc-sin p { margin: 0; font-weight: 600; }
.mc-sin small { font-size: var(--fs-xs); }

/* ── Mandar ── */
.mc-escribir {
  padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel);
}
.mc-escribir textarea {
  width: 100%; resize: vertical;
  min-height: 62px; max-height: 180px;
  padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font: inherit; font-size: var(--fs-sm);
  background: var(--panel-2); color: var(--ink);
}
.mc-escribir textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.mc-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.mc-nota { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.5; }

.mc-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 20px; text-align: center; color: var(--muted);
}
.mc-vacio i { font-size: 2rem; opacity: .4; }
.mc-vacio h3 { margin: 0; font-size: var(--fs-base); color: var(--ink); }
.mc-vacio p { margin: 0; font-size: var(--fs-sm); max-width: 380px; }

@media (max-width: 700px) {
  .mc-resumen { align-items: flex-start; }
  .mc-hilo { max-height: 50vh; }
}

/* ═══════════════ LOS AVISOS DE ESTADO ═══════════════════════════════════
   Los momentos de la orden, con su botón para mandar. Sin escribir nada. */

.mc-tabs {
  display: flex; gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.mc-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.mc-tab:hover { color: var(--ink); }
.mc-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.mc-tab em {
  font-style: normal; font-size: 10px; padding: 0 5px;
  border-radius: 999px; background: var(--panel-3); color: var(--muted);
}

.mc-avisos { display: flex; flex-direction: column; gap: 8px; }
.mc-aviso-nota {
  margin: 0 0 6px; font-size: var(--fs-sm); color: var(--muted);
}

.mc-aviso {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel);
}
.mc-aviso.hecho { background: var(--green-soft); border-color: var(--green-mid); }

.mc-aviso-icono {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--panel-3); color: var(--ink-2);
  font-size: 1.15rem;
}
.mc-aviso.hecho .mc-aviso-icono { background: var(--green); color: #fff; }
.mc-aviso-texto { flex: 1; min-width: 0; }
.mc-aviso-texto strong { display: block; font-size: var(--fs-base); }
.mc-aviso-texto small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.mc-aviso-hecho {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: var(--fs-xs); font-weight: 700; color: var(--green);
}
.mc-aviso-falta {
  display: inline-block; margin-top: 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
}
.mc-aviso-botones { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.mc-historial-avisos {
  margin-top: 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel-2);
}
.mc-historial-avisos summary {
  padding: 11px 14px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 700;
}
.mc-hilo-avisos { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.mc-aviso-hecho-fila {
  padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.mc-aviso-hecho-cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.mc-aviso-hecho-cabeza strong { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.mc-aviso-hecho-cabeza time { font-size: var(--fs-xs); color: var(--muted); }
.mc-aviso-hecho-fila pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
}
.mc-aviso-hecho-fila small { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--muted); }

.mc-chat { display: flex; flex-direction: column; }

@media (max-width: 700px) {
  .mc-aviso { flex-wrap: wrap; }
  .mc-aviso-botones { width: 100%; justify-content: flex-start; }
}

/* ═══════════════ EL AVISO DE QUE EL CLIENTE YA AUTORIZÓ ═════════════════
   El cliente autoriza desde su casa. Nadie del taller está ahí para mover
   la etapa — la mueve la base sola. Esto lo avisa al abrir el expediente. */

.sd-autorizado {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 28px 14px;
  padding: 14px 16px;
  border: 1px solid var(--green-mid);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  background: var(--green-soft);
}
.sd-autorizado > i {
  flex: none; margin-top: 1px;
  font-size: 1.35rem; color: var(--green);
}
.sd-autorizado strong { display: block; font-size: var(--fs-base); color: var(--green); }
.sd-autorizado p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.sd-autorizado-nota { color: var(--muted) !important; font-size: var(--fs-xs) !important; }

/* ═══════════════ AVISOS POR CORREO ══════════════════════════════════════
   Ver qué salió, qué no y por qué. Y configurar quién recibe qué.

   Esta pantalla existe porque en otro proyecto hubo 3,003 avisos al equipo
   que nunca salieron y nadie se enteró. Aquí, eso se ve el primer día. */

.mail { padding: 20px 28px 28px; }

.mail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 16px;
}
.mail-head h2 { margin: 2px 0 4px; font-size: var(--fs-xl); }
.mail-head p { margin: 0; font-size: var(--fs-sm); }

.mail-resumen { display: flex; gap: 10px; flex-wrap: wrap; }
.mail-num {
  display: flex; flex-direction: column; align-items: center;
  min-width: 88px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel-2);
}
.mail-num strong { font-size: 1.5rem; line-height: 1; color: var(--ink); }
.mail-num span { margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.mail-num.ok strong { color: var(--green); }
.mail-num.con-error { border-color: var(--red-mid); background: var(--red-soft); }
.mail-num.con-error strong { color: var(--red); }

.mail-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.mail-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.mail-tab:hover { color: var(--ink); }
.mail-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.mail-alerta {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px; padding: 14px 16px;
  border: 1px solid var(--red-mid); border-left: 4px solid var(--red);
  border-radius: var(--radius); background: var(--red-soft);
}
.mail-alerta > i { flex: none; margin-top: 1px; font-size: 1.35rem; color: var(--red); }
.mail-alerta strong { display: block; color: var(--red-dark); }
.mail-alerta p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }

.mail-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 14px;
}
.mail-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mail-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
}
.mail-chip:hover { border-color: var(--line-3); }
.mail-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.mail-chip em {
  font-style: normal; font-size: 10px; padding: 0 5px;
  border-radius: 999px; background: var(--panel-3); color: var(--muted);
}
.mail-chip.is-active em { background: rgba(255,255,255,.25); color: #fff; }

/* ── La lista ── */
.mail-lista { display: flex; flex-direction: column; gap: 8px; }
.mail-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel);
}
.mail-item.es-error { border-color: var(--red-mid); background: #fffbfb; }
.mail-icono {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  font-size: 1.05rem;
}
.mail-texto { flex: 1; min-width: 0; }
.mail-linea { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mail-linea strong { font-size: var(--fs-sm); }
.mail-estado { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.mail-asunto { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.mail-datos { margin: 5px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.mail-error {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 7px 0 0; padding: 7px 10px;
  background: var(--red-soft); border-radius: 6px;
  font-size: var(--fs-xs); color: var(--red-dark); line-height: 1.45;
}
.mail-acciones { flex: none; }

.mail-nota { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--muted); }

/* ── La configuración ── */
.mail-config { display: flex; flex-direction: column; gap: 10px; }
.mail-evento {
  padding: 14px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel);
}
.mail-evento.apagado { opacity: .6; background: var(--panel-2); }

.mail-evento-cabeza { display: flex; align-items: flex-start; gap: 14px; }
.mail-evento-cabeza > div:nth-child(2) { flex: 1; min-width: 0; }
.mail-evento-cabeza strong { font-size: var(--fs-base); }
.mail-evento-cabeza p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.mail-evento-nums { display: flex; gap: 8px; flex: none; font-size: var(--fs-xs); font-weight: 700; }
.mail-evento-nums .ok { color: var(--green); }
.mail-evento-nums .mal { color: var(--red); }

/* El interruptor. */
.mail-interruptor { position: relative; flex: none; width: 40px; height: 22px; cursor: pointer; }
.mail-interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.mail-interruptor span {
  position: absolute; inset: 0;
  background: var(--line-3); border-radius: 999px; transition: background .15s;
}
.mail-interruptor span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.mail-interruptor input:checked + span { background: var(--green); }
.mail-interruptor input:checked + span::after { transform: translateX(18px); }
.mail-interruptor input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.mail-destinos {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.mail-destino {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel-2); font-size: var(--fs-xs); font-weight: 600;
}
.mail-destino em { font-style: normal; color: var(--muted); font-weight: 400; }
.mail-destino button {
  border: 0; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--muted); padding: 0 3px;
}
.mail-destino button:hover { color: var(--red); }

.mail-sin-destinos { font-size: var(--fs-xs); color: var(--amber); font-weight: 700; }
.mail-agregar {
  padding: 4px 12px; border: 1px dashed var(--line-3); border-radius: 999px;
  background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
}
.mail-agregar:hover { border-color: var(--primary); color: var(--primary); }

.mail-evento-pie {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2);
}

.mail-vacio, .mail-cargando {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 44px 20px; text-align: center; color: var(--muted);
}
.mail-vacio i { font-size: 2rem; opacity: .4; }
.mail-vacio p { margin: 0; font-weight: 600; }
.mail-vacio small { font-size: var(--fs-xs); }

@media (max-width: 700px) {
  .mail { padding: 14px; }
  .mail-evento-cabeza { flex-wrap: wrap; }
  .mail-resumen { width: 100%; }
  .mail-num { flex: 1; min-width: 0; }
}

/* ═══════════════ CONTRASEÑAS ════════════════════════════════════════════
   Cambiar la propia, y poner temporales al equipo. */

.pw-card {
  margin: 20px 28px 0;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
}
.pw-card > header {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px;
}
.pw-card > header > i { font-size: 1.4rem; color: var(--primary); margin-top: 2px; }
.pw-card > header > div { flex: 1; min-width: 0; }
.pw-card h3 { margin: 0; font-size: var(--fs-lg); }
.pw-card header p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); }

.pw-campo { display: block; margin-bottom: 12px; max-width: 420px; }
.pw-campo > span {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink);
}
.pw-campo small { font-weight: 400; color: var(--muted); }
.pw-campo input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font: inherit; font-size: var(--fs-sm);
  background: var(--panel-2); color: var(--ink);
}
.pw-campo input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }

/* El medidor de qué tan buena es. */
.pw-medidor {
  display: flex; align-items: center; gap: 4px;
  max-width: 420px; margin: -4px 0 12px;
}
.pw-medidor span {
  flex: 1; height: 4px; border-radius: 999px; background: var(--line-3);
}
.pw-medidor em {
  margin-left: 8px; font-style: normal; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap;
}
.pw-medidor[data-nivel="1"] span:nth-child(1) { background: var(--red); }
.pw-medidor[data-nivel="2"] span:nth-child(-n+2) { background: var(--amber); }
.pw-medidor[data-nivel="3"] span { background: var(--green); }

.pw-error {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--red-soft); border-left: 3px solid var(--red);
  border-radius: var(--radius); font-size: var(--fs-sm); color: var(--red-dark);
}
.pw-listo {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--green-soft); border-left: 3px solid var(--green);
  border-radius: var(--radius); font-size: var(--fs-sm); color: var(--green);
}
.pw-acciones { display: flex; gap: 8px; }
.pw-cargando { margin: 0; padding: 20px; text-align: center; color: var(--muted); }

/* ── El equipo ── */
.pw-equipo { display: flex; flex-direction: column; gap: 6px; }
.pw-persona {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel-2);
}
.pw-persona.inactivo { opacity: .55; }
.pw-persona-datos { min-width: 0; }
.pw-persona-datos strong { display: block; font-size: var(--fs-sm); }
.pw-persona-datos small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.pw-persona-datos .pw-meta { margin-top: 2px; }
.pw-persona-acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.pw-pendiente {
  padding: 2px 8px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
}

/* ── La ventana con la temporal ── */
.pw-fondo {
  position: fixed; inset: 0; z-index: 720;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .45);
}
.pw-ventana {
  width: min(460px, 100%);
  padding: 18px;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.pw-ventana header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pw-ventana h2 { margin: 2px 0 0; font-size: var(--fs-lg); }
.pw-explica { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

.pw-clave {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--panel-3); border-radius: var(--radius);
}
.pw-clave code {
  flex: 1; font-size: 1.4rem; font-weight: 800; letter-spacing: .12em;
  color: var(--ink); font-family: ui-monospace, Menlo, monospace;
}
.pw-dato { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--ink-2); }

.pw-aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; margin-bottom: 14px;
  background: var(--amber-soft); border-left: 3px solid var(--amber);
  border-radius: var(--radius);
}
.pw-aviso i { flex: none; color: var(--amber); margin-top: 1px; }
.pw-aviso p { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }

.pw-ventana footer { display: flex; justify-content: flex-end; }

@media (max-width: 700px) {
  .pw-card { margin: 14px 14px 0; padding: 14px; }
  .pw-persona { align-items: flex-start; }
  .pw-persona-acciones { width: 100%; }
}