/* ============================================================
   ADDELIVERY — Sistema de diseño
   Tokens base. Todo lo demás se deriva de aquí.

   PRINCIPIO RECTOR
   El color es información, no decoración.
   El cromo de la interfaz es acromático. La saturación queda
   reservada exclusivamente para el estado operacional, para que
   un operador que mira la pantalla ocho horas detecte la
   excepción sin tener que leerla.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,300..800;1,62..125,300..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Superficies acromáticas ------------------------------ */
  --concreto:      #E8E8E4;  /* fondo de página — zinc pálido, tibio */
  --concreto-hond: #DCDCD7;  /* hundido: canaletas, pistas, vacíos  */
  --papel:         #FFFFFF;  /* superficies de trabajo              */
  --tinta:         #16171A;  /* texto primario y marca              */
  --tinta-suave:   #34363B;  /* bandas oscuras secundarias          */
  --humo:          #6E7076;  /* texto secundario                    */
  --humo-claro:    #9A9CA1;  /* texto terciario, deshabilitado      */
  --linea:         #D3D3CE;  /* filetes sobre concreto              */
  --linea-papel:   #E4E4E0;  /* filetes sobre papel                 */

  /* ---- Señales: el único lugar donde vive el color ----------- */
  --verde:      #1E8E4A;   /* en regla · entregado · disponible     */
  --ambar:      #C98A00;   /* atención · retraso · por revisar      */
  --azul:       #1F5FD0;   /* en movimiento · en ruta               */
  --bermellon:  #D33A2C;   /* problema · fallido · fuera de servicio*/

  /* Lavados de señal — fondos de estado sobre papel */
  --verde-lav:     #E7F3EB;
  --ambar-lav:     #FBF1DC;
  --azul-lav:      #E6EDFA;
  --bermellon-lav: #FAE9E7;

  /* ---- Tipografía -------------------------------------------
     Una superfamilia. El eje de ANCHO carga la jerarquía:
     expandida rotula, normal narra, angosta tabula.          */
  --fam-texto: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --fam-dato:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --ancho-rotulo: 118;  /* titulares — lee como rotulado de flota */
  --ancho-normal: 100;  /* cuerpo                                 */
  --ancho-tabla:  84;   /* cabeceras densas, etiquetas            */

  /* Escala tipográfica */
  --t-rotulo-xl: 2.375rem;  /* 38 */
  --t-rotulo-l:  1.75rem;   /* 28 */
  --t-rotulo-m:  1.1875rem; /* 19 */
  --t-rotulo-s:  0.9375rem; /* 15 */
  --t-cuerpo:    0.875rem;  /* 14 */
  --t-menor:     0.8125rem; /* 13 */
  --t-etiqueta:  0.6875rem; /* 11 */
  --t-micro:     0.625rem;  /* 10 */

  /* ---- Retícula --------------------------------------------- */
  --u: 4px;
  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px; --e6: 32px;  --e7: 48px;  --e8: 64px;

  --radio:  4px;   /* radio único y discreto en toda la interfaz  */
  --radio-p: 2px;  /* piezas pequeñas: chips, ticks               */

  --rail: 216px;   /* ancho del riel de navegación                */
  --banda: 52px;   /* alto de la banda superior                   */

  /* ---- Elevación —— muy contenida, casi todo es filete ------ */
  --sombra-1: 0 1px 2px rgba(22, 23, 26, .06);
  --sombra-2: 0 4px 16px rgba(22, 23, 26, .10), 0 1px 2px rgba(22, 23, 26, .06);
  --sombra-3: 0 18px 48px rgba(22, 23, 26, .20);

  /* ---- Movimiento ------------------------------------------- */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --rapido: 120ms;
  --medio: 260ms;
}

/* ============================================================
   Reinicio acotado
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--concreto);
  color: var(--tinta);
  font-family: var(--fam-texto);
  font-variation-settings: 'wdth' var(--ancho-normal);
  font-size: var(--t-cuerpo);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

/* ============================================================
   Primitivas tipográficas
   ============================================================ */

.rotulo-xl, .rotulo-l, .rotulo-m, .rotulo-s {
  font-variation-settings: 'wdth' var(--ancho-rotulo);
  letter-spacing: -0.018em;
  line-height: 1.08;
}
.rotulo-xl { font-size: var(--t-rotulo-xl); font-weight: 700; }
.rotulo-l  { font-size: var(--t-rotulo-l);  font-weight: 700; }
.rotulo-m  { font-size: var(--t-rotulo-m);  font-weight: 600; letter-spacing: -0.012em; }
.rotulo-s  { font-size: var(--t-rotulo-s);  font-weight: 600; letter-spacing: -0.008em; }

/* Etiqueta angosta versalita — cabeceras de tabla, antetítulos */
.etiqueta {
  font-variation-settings: 'wdth' var(--ancho-tabla);
  font-size: var(--t-etiqueta);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}
.etiqueta-micro {
  font-variation-settings: 'wdth' var(--ancho-tabla);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--humo-claro);
}

/* Monoespaciada: sólo para códigos reales — #pedido, SKU,
   patente, coordenadas, horas, kilómetros. Nunca decorativa. */
.dato {
  font-family: var(--fam-dato);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-menor);
  letter-spacing: -0.01em;
}
.dato-cifra {
  font-family: var(--fam-dato);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.humo { color: var(--humo); }
.humo-claro { color: var(--humo-claro); }

/* ============================================================
   Accesibilidad — piso de calidad, sin anunciarse
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--radio-p);
}

.salta-a-contenido {
  position: absolute;
  left: var(--e3);
  top: -100px;
  z-index: 999;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--e2) var(--e4);
  border-radius: var(--radio);
  transition: top var(--rapido) var(--curva);
}
.salta-a-contenido:focus { top: var(--e3); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}