/* ==========================================================================
   hub/marca.css — EL SISTEMA DE DISEÑO DE BIG MOTOR BY BIGSYS.
   Fuente: C:\bigsys\taller\marca\Manual-de-marca-BigMotor.pdf (21 páginas, v1.0).
   Resumen en MARCA.md. El manual manda: si algo de acá no coincide con el PDF, gana el PDF.

   REGLA QUE SOSTIENE TODO EL ARCHIVO, y está escrita en la página 15 del manual:
   **acá viven TODOS los hex del sistema y en ningún otro archivo hay uno suelto.**
   Hay una prueba que lo verifica (hub/marca.test.js). Si necesitás un color que no está,
   se agrega acá con su nombre, no se escribe el hex donde haga falta.

   Y la regla de producto que decidió Juan (06/09/2026): **bordo y carmín donde más se pueda.**
   El gradiente de producto va en todas las superficies de identidad y de acción; el fondo de
   trabajo queda en el neutro cálido para que un checklist de 40 ítems se pueda leer en un galpón.
   ========================================================================== */

:root{
  /* ---------- MARCA · NÚCLEO (manual, pág. 5) ---------- */
  --carmin:#e4003f;            /* primario · el ÚNICO color de acción */
  --bordo:#7d0022;             /* tramo medio del gradiente de producto */
  --grafito:#292724;           /* arranque del gradiente · sidebar */
  --lila:#c5bcdd;              /* secundario */
  --magenta:#a42785;           /* acento */
  --violeta:#4f3089;           /* acento · IA (Bigcito, "En diagnóstico") */
  --neutro-calido:#d6d1ca;     /* base de los grises */

  /* Variaciones del carmín, derivadas: para hover, fondos suaves y bordes de aviso. */
  --carmin-700:#a3002d; --carmin-600:#c60036; --carmin-100:#ffdbe4; --carmin-50:#fff0f4;
  --bordo-900:#5a0018;
  --violeta-50:#f1eef8; --magenta-50:#f9eff6; --lila-50:#f7f5fb; --lila-100:#efecf6; --lila-200:#e0dbef;

  /* ---------- NEUTROS CÁLIDOS (manual, pág. 5) ----------
     Con algo de beige, NUNCA azulados. Un #64748b o un #f8fafc en este sistema es un error. */
  --superficie-pagina:#faf9f7;   /* fondo de la app */
  --superficie-card:#ffffff;
  --superficie-hundida:#f5f3f0;  /* burbuja del usuario, zonas hundidas */
  --superficie-inversa:#292724;  /* sidebar / oscuro */
  --borde-sutil:#eae7e2;
  --borde-medio:#e0dcd5;
  --borde-fuerte:#cec8bf;
  --texto-muted:#6f6a62;         /* íconos y texto secundario */
  --texto-cuerpo:#4a443e;
  --texto-fuerte:#1c1a18;        /* tinta más oscura · texto principal */
  --texto-sutil:#a49e96;
  --blanco:#ffffff;
  --negro-velo:rgba(41,39,36,.55);
  --blanco-velo-08:rgba(255,255,255,.08);
  --blanco-velo-12:rgba(255,255,255,.12);
  --blanco-velo-16:rgba(255,255,255,.16);
  --blanco-velo-70:rgba(255,255,255,.70);
  --blanco-velo-85:rgba(255,255,255,.85);

  /* ---------- GRADIENTES · MOMENTOS HERO (manual, pág. 5) ----------
     El de PRODUCTO es la firma de BIG Motor: grafito del taller → bordo → carmín. Es "la lectura
     industrial de la marca — grasa, metal y herramienta — sin salirse de la paleta".
     NO va como fondo general ni detrás de texto de lectura. */
  --gradient-motor:linear-gradient(115deg,#292724,#7d0022 55%,#e4003f);
  --gradient-brand:linear-gradient(100deg,#e4003f,#a42785);   /* familia BigSys */
  --gradient-motor-suave:linear-gradient(115deg,rgba(41,39,36,.08),rgba(125,0,34,.08) 55%,rgba(228,0,63,.08));
  --velo-sidebar:linear-gradient(180deg,rgba(125,0,34,.28),rgba(41,39,36,0) 46%);

  /* ---------- ESTADOS SEMÁNTICOS Y CANALES (manual, pág. 6) ---------- */
  --exito:#1f9d5b;      --exito-100:#d6f2e2;
  --advertencia:#e8930a; --advertencia-100:#fbeccd;
  --error:#e4003f;      --error-100:#ffdbe4;
  --info:#4f3089;       --info-100:#e6e0f2;
  --ambar-oscuro:#c25e00;   /* "En reparación": el carmín es acción, no progreso */
  --ambar-oscuro-100:#fbe6cf;
  --whatsapp:#25d366;
  --email:#6f6a62;

  /* ---------- TIPOGRAFÍA (manual, pág. 7) ----------
     La de marca es Cyntho, que es comercial y no tenemos el archivo; el sustituto oficial que
     indica el manual es Poppins (Google Fonts). */
  /* reemplazar por Cyntho cuando esté el archivo */
  --font-brand:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --fs-display:3.5rem;   /* 56px · hero / marketing · 800 · tracking -0.02em */
  --fs-h1:2.25rem;       /* 36px */
  --fs-h2:1.75rem;       /* 28px · 700 */
  --fs-h3:1.375rem;      /* 22px */
  --fs-body:0.9375rem;   /* 15px · default de la app · interlineado 1.55 */
  --fs-sm:0.8125rem;     /* 13px · labels */
  --fs-xs:0.6875rem;     /* 11px · meta. NUNCA para un dato que se lee de lejos */
  --lh-body:1.55;
  --tracking-tight:-.02em;
  --tracking-eyebrow:.14em;   /* eyebrows en MAYÚSCULAS, 0.08–0.2em */

  /* ---------- ESPACIADO, RADIOS Y CONTROLES (manual, pág. 8) ----------
     Grilla base 4px. Densidad cómoda: público no técnico, controles altos y mucho aire. */
  --e-xs:4px; --e-sm:8px; --e-md:16px; --e-lg:24px; --e-xl:32px; --e-2xl:48px;
  --r-sm:8px; --r-md:12px;      /* inputs, chips */
  --r-card:16px;                /* cards (default) */
  --r-tile:20px; --r-2xl:28px;  /* tiles, paneles */
  --r-pill:999px;               /* botones, badges y avatares — SIEMPRE pastilla */
  --control-sm:32px; --control-h:40px; --control-lg:48px;   /* 40 es el default */
  --tap-min:48px;               /* área táctil mínima: se toca con guantes (pág. 21) */

  /* ---------- ELEVACIÓN Y MOVIMIENTO (manual, pág. 9) ----------
     Sombras suaves y cálidas, tinte grafito a baja opacidad, NUNCA negro duro. */
  --shadow-sm:0 1px 3px rgba(41,39,36,.06);
  --shadow-md:0 4px 12px rgba(41,39,36,.08);
  --shadow-lg:0 12px 28px rgba(41,39,36,.10);
  --glow-brand:0 6px 20px rgba(228,0,63,.28);   /* SOLO el CTA principal */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --t-rapida:120ms var(--ease-out);
  --t:180ms var(--ease-out);
  --t-lenta:320ms var(--ease-out);

  /* ---------- LAYOUT (manual, pág. 12) ---------- */
  --sidebar-w:248px; --topbar-h:64px; --content-max:1200px;

  /* ---------- ALIAS DE COMPATIBILIDAD ----------
     Los nombres viejos que usa el código de las fases 01 a 14. Quedan apuntando a los tokens
     nuevos para no reescribir 500 reglas de golpe y romper algo que anda. */
  --warm-25:var(--superficie-pagina); --warm-50:var(--superficie-hundida); --warm-100:var(--borde-sutil);
  --warm-200:var(--neutro-calido); --warm-400:var(--texto-sutil); --warm-500:var(--texto-muted);
  --warm-700:var(--texto-cuerpo); --warm-800:var(--grafito); --warm-900:var(--texto-fuerte);
  --surface-page:var(--superficie-pagina); --surface-card:var(--superficie-card);
  --surface-sunken:var(--superficie-hundida); --surface-inverse:var(--superficie-inversa);
  --text-strong:var(--texto-fuerte); --text-body:var(--texto-cuerpo);
  --text-muted:var(--texto-muted); --text-subtle:var(--texto-sutil);
  --border-subtle:var(--borde-sutil); --border-default:var(--borde-medio); --border-strong:var(--borde-fuerte);
  --success:var(--exito); --success-100:var(--exito-100); --warning:var(--advertencia);
  --warning-100:var(--advertencia-100); --danger:var(--error); --danger-100:var(--error-100);
  --font:var(--font-brand); --mono:var(--font-mono);
  --shadow-brand:var(--glow-brand); --ease:var(--ease-out);
  --rojo:var(--carmin); --carbon:var(--grafito); --bg:var(--superficie-pagina); --panel:var(--superficie-card);
  --line:var(--borde-sutil); --txt:var(--texto-cuerpo); --muted:var(--texto-muted);
  --green:var(--exito); --amber:var(--advertencia);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--superficie-pagina);color:var(--texto-cuerpo);
  font:var(--fs-body)/var(--lh-body) var(--font-brand);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:var(--tracking-tight);color:var(--texto-fuerte);font-weight:700}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
a{color:var(--carmin);text-decoration:none;font-weight:600}
i[data-lucide]{stroke-width:2;vertical-align:-2px}

/* Eyebrow: MAYÚSCULAS con tracking amplio. Es el único lugar donde va texto en mayúsculas. */
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--carmin)}

/* ==========================================================================
   SUPERFICIES DE IDENTIDAD — donde va el gradiente de producto
   La lista completa está en MARCA.md. Regla: si dudás, ponelo; lo único que no se cruza es la
   legibilidad de un dato.
   ========================================================================== */
.motor{background:var(--gradient-motor);color:var(--blanco)}
.motor h1,.motor h2,.motor h3{color:var(--blanco)}
.motor .eyebrow{color:var(--blanco-velo-85)}

/* La banda hero de una pantalla principal: gradiente arriba, contenido claro debajo. */
.hero-motor{background:var(--gradient-motor);color:var(--blanco);border-radius:var(--r-2xl);
  padding:var(--e-lg) var(--e-lg) var(--e-xl);position:relative;overflow:hidden;margin-bottom:var(--e-md)}
.hero-motor::after{content:"";position:absolute;right:-90px;bottom:-130px;width:320px;height:320px;
  border-radius:50%;background:var(--blanco-velo-08)}
.hero-motor>*{position:relative;z-index:1}
.hero-motor h1{font-size:var(--fs-h2);margin:.2em 0 .3em;color:var(--blanco)}
.hero-motor .lead{color:var(--blanco-velo-85);max-width:62ch}

/* El lockup sobre color va SIEMPRE dentro de una pastilla blanca (manual, pág. 3). */
.lockup{display:inline-flex;align-items:center;gap:var(--e-sm);background:var(--blanco);
  border-radius:var(--r-md);padding:6px 12px;min-width:120px;box-shadow:var(--shadow-sm)}
.lockup .bs{font-weight:800;font-style:italic;color:var(--carmin);font-size:1rem;letter-spacing:-.03em}
.lockup .sep{width:1px;height:18px;background:var(--borde-sutil)}
.lockup .prod{display:flex;flex-direction:column;line-height:1}
.lockup .prod b{font-weight:700;color:var(--texto-fuerte);font-size:.875rem}
.lockup .prod span{font-size:8px;letter-spacing:.18em;color:var(--texto-muted);text-transform:uppercase;margin-top:2px}

/* El isotipo BS: monograma blanco sobre el gradiente. Avatar, favicon, ícono de app, Bigcito. */
.isotipo{display:inline-flex;align-items:center;justify-content:center;background:var(--gradient-motor);
  color:var(--blanco);font-weight:800;font-style:italic;border-radius:var(--r-pill);
  width:36px;height:36px;font-size:.8125rem;letter-spacing:-.04em;flex:none}
.isotipo.tile{border-radius:22.37%}   /* ícono de app: esquinas al 22.37% (manual, pág. 4) */

/* ==========================================================================
   BOTONES — siempre pastilla (manual, pág. 8). Una acción primaria por pantalla (pág. 21).
   ========================================================================== */
button{cursor:pointer;font-family:inherit}
button:active{transform:scale(.98)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn,.btn-r,.btn-o,.btn-grad{border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-body);
  min-height:var(--control-h);padding:9px 18px;transition:transform var(--t),box-shadow var(--t),background var(--t);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-sm);border:1px solid transparent}
.btn-r{background:var(--carmin);color:var(--blanco);box-shadow:var(--glow-brand)}
.btn-r:hover{background:var(--carmin-600);transform:translateY(-1px)}
.btn-o{background:var(--superficie-card);color:var(--texto-fuerte);border-color:var(--borde-fuerte)}
.btn-o:hover{background:var(--superficie-hundida);transform:translateY(-1px)}
.btn-grad{background:var(--gradient-motor);color:var(--blanco);box-shadow:var(--glow-brand)}
.btn-grad:hover{transform:translateY(-1px)}
.btn-lg{min-height:var(--control-lg);padding:12px 24px}
.btn-sm{min-height:var(--control-sm);padding:6px 14px;font-size:var(--fs-sm)}
.icon-btn{width:var(--control-h);height:var(--control-h);min-height:0;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r-pill);background:var(--superficie-card);
  border:1px solid var(--borde-medio);color:var(--texto-cuerpo);transition:background var(--t)}
.icon-btn:hover{background:var(--superficie-hundida)}

/* ==========================================================================
   CONTROLES
   ========================================================================== */
input,select,textarea{background:var(--superficie-card);color:var(--texto-cuerpo);
  border:1px solid var(--borde-medio);border-radius:var(--r-md);padding:9px 12px;
  font-size:var(--fs-body);font-family:inherit;min-height:var(--control-h)}
input[type=checkbox],input[type=radio]{width:19px;height:19px;min-height:0;padding:0;
  accent-color:var(--carmin);vertical-align:-3px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--carmin) 20%,transparent);border-color:var(--carmin)}
label.f{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--texto-muted);margin-bottom:var(--e-md)}
label.f input,label.f select,label.f textarea{width:100%;margin-top:var(--e-xs);color:var(--texto-fuerte)}

/* ==========================================================================
   CARDS Y SUPERFICIES — se separan por SOMBRA, no por línea dura (manual, pág. 8)
   ========================================================================== */
.card{background:var(--superficie-card);border-radius:var(--r-card);padding:var(--e-md);
  box-shadow:var(--shadow-sm);margin-bottom:var(--e-md);transition:transform var(--t),box-shadow var(--t)}
.card.hoverable:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tile{background:var(--superficie-card);border-radius:var(--r-tile);padding:var(--e-lg);box-shadow:var(--shadow-md)}
.hundido{background:var(--superficie-hundida);border-radius:var(--r-card);padding:var(--e-md)}

/* StatCard: el KPI. El valor que es PLATA va en carmín (manual, pág. 11). */
.statcard{background:var(--superficie-card);border-radius:var(--r-card);padding:var(--e-md);box-shadow:var(--shadow-sm)}
.statcard .l{font-size:var(--fs-sm);color:var(--texto-muted);font-weight:500}
.statcard .v{font-size:var(--fs-h2);font-weight:700;color:var(--texto-fuerte);letter-spacing:var(--tracking-tight);margin-top:var(--e-xs)}
.statcard.plata .v{color:var(--carmin)}
.statcard .d{font-size:var(--fs-sm);color:var(--texto-muted);margin-top:2px}
.statcard .d.sube{color:var(--exito)} .statcard .d.baja{color:var(--error)}

/* ==========================================================================
   BADGES, TAGS Y CHIPS DE ESTADO
   Los estados del vehículo van SIEMPRE como chip pastilla con punto de color + etiqueta de texto,
   nunca como semáforo sin texto ni sólo por color (manual, pág. 17).
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:3px 10px;font-size:var(--fs-sm);font-weight:600;background:var(--superficie-hundida);color:var(--texto-cuerpo)}
.badge.ok{background:var(--exito-100);color:var(--exito)}
.badge.warn{background:var(--advertencia-100);color:var(--ambar-oscuro)}
.badge.err{background:var(--error-100);color:var(--carmin-700)}
.badge.ia{background:var(--carmin);color:var(--blanco)}
.badge.neutral{background:var(--superficie-hundida);color:var(--texto-muted)}

/* EstadoChip: los nueve estados del vehículo, con su punto. Máximo nueve: si aparece uno nuevo,
   se discute, no se agrega. */
.estado-chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);
  padding:4px 12px;font-size:var(--fs-sm);font-weight:600;background:var(--superficie-hundida);
  color:var(--texto-cuerpo);white-space:nowrap}
.estado-chip .punto{width:8px;height:8px;border-radius:var(--r-pill);flex:none;background:var(--texto-muted)}
.estado-chip .desde{font-weight:400;color:var(--texto-muted);font-size:var(--fs-sm)}
.estado-chip[data-estado="recibido"] .punto,
.estado-chip[data-estado="entregado"] .punto{background:var(--texto-muted)}
.estado-chip[data-estado="en_diagnostico"] .punto{background:var(--violeta)}
.estado-chip[data-estado="en_diagnostico"]{background:var(--info-100)}
.estado-chip[data-estado="presupuestado"] .punto{background:var(--magenta)}
.estado-chip[data-estado="presupuestado"]{background:var(--magenta-50)}
.estado-chip[data-estado="esperando_aprobacion"] .punto,
.estado-chip[data-estado="esperando_repuesto"] .punto{background:var(--advertencia)}
.estado-chip[data-estado="esperando_aprobacion"],
.estado-chip[data-estado="esperando_repuesto"]{background:var(--advertencia-100)}
.estado-chip[data-estado="en_reparacion"] .punto{background:var(--ambar-oscuro)}
.estado-chip[data-estado="en_reparacion"]{background:var(--ambar-oscuro-100);color:var(--ambar-oscuro)}
.estado-chip[data-estado="listo"] .punto{background:var(--exito)}
.estado-chip[data-estado="listo"]{background:var(--exito-100);color:var(--exito)}
.estado-chip[data-estado="rechazado"] .punto{background:var(--carmin)}
.estado-chip[data-estado="rechazado"]{background:var(--error-100);color:var(--carmin-700)}

/* ChannelBadge: el canal por el que se habla con el cliente (círculo de color + glifo). */
.canal{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:var(--r-pill);color:var(--blanco);flex:none}
.canal.whatsapp{background:var(--whatsapp)}
.canal.email{background:var(--email)}

/* ==========================================================================
   AVISOS
   ========================================================================== */
.alert{display:flex;gap:var(--e-sm);align-items:flex-start;border-radius:var(--r-card);
  padding:12px 14px;font-size:var(--fs-body);margin-bottom:var(--e-md)}
.alert-ok{background:var(--exito-100);color:var(--exito)}
.alert-warn{background:var(--advertencia-100);color:var(--ambar-oscuro)}
.alert-err{background:var(--error-100);color:var(--carmin-700)}
.alert-info{background:var(--info-100);color:var(--violeta)}

/* ==========================================================================
   ESTADOS VACÍOS — ícono 28px sobre un círculo con el gradiente al 8%
   ========================================================================== */
.empty{text-align:center;color:var(--texto-muted);padding:var(--e-lg) var(--e-md);font-size:var(--fs-body)}
.empty .ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:var(--r-pill);background:var(--gradient-motor-suave);color:var(--texto-muted);margin-bottom:var(--e-sm)}
.hint{font-size:var(--fs-sm);color:var(--texto-muted);margin:var(--e-sm) 0}

/* ==========================================================================
   LA PATENTE — grande y en monoespaciada: es el identificador que usa todo el taller (pág. 16)
   ========================================================================== */
.patente{font-family:var(--font-mono);font-weight:700;letter-spacing:.08em;
  background:var(--superficie-hundida);border-radius:var(--r-sm);padding:6px 12px;
  color:var(--texto-fuerte);font-size:1.125rem;display:inline-block}
.patente.grande{font-size:1.75rem;padding:10px 18px;letter-spacing:.1em}

/* ==========================================================================
   BIGCITO (manual, pág. 20) — nunca un robot, nunca una carita
   ========================================================================== */
.bc-avatar{width:34px;height:34px;border-radius:var(--r-pill);background:var(--gradient-motor);
  color:var(--blanco);display:flex;align-items:center;justify-content:center;font-weight:800;
  font-style:italic;font-size:.75rem;flex:none;letter-spacing:-.04em}
.bc-burbuja{background:var(--superficie-card);border:1px solid var(--borde-sutil);
  border-radius:var(--r-card);border-top-left-radius:var(--e-xs);padding:10px 14px;box-shadow:var(--shadow-sm)}
.bc-burbuja.mia{background:var(--superficie-hundida);border-color:transparent;
  border-radius:var(--r-card);border-top-right-radius:var(--e-xs)}
.bc-estado{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:3px 10px;font-size:var(--fs-sm);font-weight:600;background:var(--info-100);color:var(--violeta)}

/* ==========================================================================
   NAV — activo en pastilla carmín con texto blanco (manual, pág. 12)
   ========================================================================== */
.navitem{display:flex;align-items:center;gap:10px;border-radius:var(--r-pill);padding:9px 14px;
  color:var(--blanco-velo-70);font-weight:500;font-size:var(--fs-body);cursor:pointer;
  min-height:var(--control-h);transition:background var(--t),color var(--t)}
.navitem:hover{background:var(--blanco-velo-08);color:var(--blanco)}
.navitem.on{background:var(--carmin);color:var(--blanco);font-weight:600}

/* ==========================================================================
   ACCESIBILIDAD Y TALLER (manual, pág. 21)
   Área táctil mínima 48px: se toca con guantes, no con la punta del dedo.
   ========================================================================== */
@media (pointer:coarse){
  .btn,.btn-r,.btn-o,.btn-grad,.icon-btn,.navitem{min-height:var(--tap-min)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   FILAS DE OPCIÓN Y UTILIDADES QUE COMPARTEN TODAS LAS PANTALLAS
   ========================================================================== */
.modrow{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--borde-sutil);
  border-radius:var(--r-md);margin-bottom:var(--e-sm);cursor:pointer;min-height:var(--tap-min)}
.modrow:hover{background:var(--superficie-hundida)}
.modrow .d{font-size:var(--fs-sm);color:var(--texto-muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-sm)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-sm)}
.acciones{display:flex;gap:var(--e-sm);flex-wrap:wrap;align-items:center}
.row-btns{display:flex;gap:var(--e-sm);margin-top:var(--e-md)}
.row-btns button{flex:1}
@media(max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}