/* =====================================================================
   CSA Cossio Medellín · estilos base compartidos
   Colores de estado tomados de los mockups. La placa amarilla de moto
   colombiana es el elemento de identidad del tablero.
   ===================================================================== */
:root {
  --ink: #1b1d20;
  --ink-soft: #5b6068;
  --steel: #eceef1;          /* fondo general */
  --graphite: #4a4d52;       /* menú lateral, como el mockup */
  --line: #c9cdd3;
  --paper: #ffffff;

  --ok: #1e9e3e;             /* A TIEMPO */
  --warn: #f2b705;           /* FALTA POCO */
  --urgent: #e0261b;         /* URGENTE */
  --late: #000000;           /* INCUMPLIMIENTO */
  --none: #8c8f94;           /* SIN ASIGNACIONES */

  --plate: #f7d117;          /* placa de moto en Colombia */
  --plate-ink: #000000;

  --font: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;

  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--steel);
}

body { font-family: var(--font); color: var(--ink); background: var(--steel); }

:focus-visible { outline: 3px solid #1a5fd0; outline-offset: 2px; }

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

/* Placa: fondo amarillo, letra negra condensada, borde fino como la lámina real */
.plate {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-cond); font-weight: 700; letter-spacing: .06em;
  background: var(--plate); color: var(--plate-ink);
  border: 2px solid var(--plate-ink); border-radius: 4px;
  padding: .05em .45em; line-height: 1.15; white-space: nowrap;
}

/* Etiquetas de estado reutilizables */
.st-ok { --st: var(--ok); --st-ink: #fff; }
.st-warn { --st: var(--warn); --st-ink: #1b1d20; }
.st-urgent { --st: var(--urgent); --st-ink: #fff; }
.st-late { --st: var(--late); --st-ink: #fff; }
.st-none { --st: var(--none); --st-ink: #fff; }
.pill-st { background: var(--st); color: var(--st-ink); font-family: var(--font-cond); font-weight: 600;
  border-radius: 3px; padding: .1em .5em; font-size: .85em; white-space: nowrap; }

/* Avisos */
.toast-ok { background: #1f3b2a; color: #fff; }
.toast-error { background: var(--urgent); color: #fff; }
.toast-ok .btn-close, .toast-error .btn-close { filter: invert(1); }

.pin-input { font-family: var(--font-cond); font-size: 2rem; letter-spacing: .6em; text-align: center; }
.demo-badge { font-family: var(--font-cond); font-weight: 600; background: var(--plate); color: #000;
  border-radius: 3px; padding: .05em .45em; font-size: .8rem; }