/* ═══════════════════════════════════════════════════════════════════════════
   TRANSPORTE ARMANDO — DESIGN TOKENS
   Fuente única de verdad de color, tipografía, espaciado y layout.
   Ningún archivo define un color o un tamaño por su cuenta: todo sale de acá.

   DESKTOP-FIRST (ADR-020). Corrección del 2026-08-10: Vero opera desde la
   computadora, no desde el celular en la calle. El layout por defecto — el que
   se aplica sin ninguna media query — es el de escritorio. Las media queries
   son `max-width` y REDUCEN hacia pantallas chicas.

   Paleta heredada del proyecto hermano Feria/Agro. Transporte Armando ya tiene
   identidad de marca (logo y favicon en assets/img); cuando se ajuste la paleta
   al color de marca, se cambian los valores de esta sección y nada más.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PRIMITIVOS ── */
  --color-white:     #ffffff;
  --color-green-50:  #f0f9ee;
  --color-green-100: #dcf0d8;
  --color-green-300: #93cf88;
  --color-green-500: #2e7d32;
  --color-green-600: #256628;
  --color-green-700: #1c4f1f;
  --color-amber-100: #fdecc8;
  --color-amber-300: #f5c563;
  --color-amber-500: #d98c00;
  --color-amber-700: #8f5c00;
  --color-red-100:   #fbdcdc;
  --color-red-300:   #ee9999;
  --color-red-500:   #c62828;
  --color-red-700:   #8f1c1c;
  --color-blue-100:  #dbe9f7;
  --color-blue-500:  #1565c0;
  --color-gray-50:   #fafaf8;
  --color-gray-100:  #f2f1ed;
  --color-gray-200:  #e4e2db;
  --color-gray-300:  #cfccc1;
  --color-gray-400:  #a9a599;
  --color-gray-500:  #7c7869;
  --color-gray-600:  #57544a;
  --color-gray-700:  #3a382f;
  --color-gray-800:  #232219;
  --color-gray-900:  #16150f;

  /* ── SUPERFICIES — tema claro de alto contraste ──
     El contexto de uso incluye oficina con ventanal y cabina de camión: un
     tema oscuro se lava con luz directa. */
  --bg:            var(--color-gray-50);
  --bg-elevated:   var(--color-white);
  --bg-card:       var(--color-white);
  --bg-input:      var(--color-white);
  --bg-overlay:    rgba(22, 21, 15, 0.55);
  --bg-sidebar:    var(--color-gray-900);
  --surface:       rgba(22, 21, 15, 0.03);
  --surface-hover: rgba(22, 21, 15, 0.06);
  --surface-active:rgba(22, 21, 15, 0.09);

  /* ── BORDES ── */
  --border:        var(--color-gray-200);
  --border-hover:  var(--color-gray-300);
  --border-focus:  rgba(46, 125, 50, 0.55);

  /* ── TEXTO ── */
  --text-primary:    var(--color-gray-900);
  --text-secondary:  var(--color-gray-700);
  --text-tertiary:   var(--color-gray-500);
  --text-disabled:   var(--color-gray-400);
  --text-inverse:    var(--color-white);
  --text-on-accent:  var(--color-white);

  /* ── ACENTO ── */
  --accent:        var(--color-green-500);
  --accent-hover:  var(--color-green-600);
  --accent-active: var(--color-green-700);
  --accent-muted:  rgba(46, 125, 50, 0.10);
  --accent-bg:     var(--color-green-50);

  /* ── ESTADOS ──
     En este producto: success = vigente/activo, warning = por vencer,
     danger = vencido/error, info = neutro. */
  --success:        var(--color-green-500);
  --success-muted:  var(--color-green-100);
  --success-border: var(--color-green-300);
  --success-text:   var(--color-green-700);
  --warning:        var(--color-amber-500);
  --warning-muted:  var(--color-amber-100);
  --warning-border: var(--color-amber-300);
  --warning-text:   var(--color-amber-700);
  --danger:         var(--color-red-500);
  --danger-muted:   var(--color-red-100);
  --danger-border:  var(--color-red-300);
  --danger-text:    var(--color-red-700);
  --info:           var(--color-blue-500);
  --info-muted:     var(--color-blue-100);
  --info-text:      var(--color-blue-500);

  /* ── TIPOGRAFÍA ──
     Base 16px: en escritorio la densidad importa más que el tamaño gigante que
     necesitaba la versión pensada para el celular. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --text-xs:   0.75rem;    /* 12px — metadatos, códigos internos */
  --text-sm:   0.875rem;   /* 14px — celdas de tabla, etiquetas */
  --text-base: 1rem;       /* 16px — cuerpo */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px — título de sección */
  --text-xl:   1.5rem;     /* 24px — título de pantalla */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px — número grande de un indicador */

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --tracking-tight: -0.01em;
  --tracking-wide:  0.04em;

  /* ── ESPACIADO ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── ÁREAS DE CLIC ──
     44px en escritorio (era 48 en la versión mobile-first). Sigue generoso
     porque también se usa en pantallas táctiles. */
  --tap-min: 44px;

  /* ── RADIOS ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  /* ── SOMBRAS — sutiles, tema claro ── */
  --shadow-sm: 0 1px 2px rgba(22, 21, 15, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 21, 15, 0.08);
  --shadow-lg: 0 12px 28px rgba(22, 21, 15, 0.12);
  --shadow-xl: 0 24px 48px rgba(22, 21, 15, 0.16);

  /* ── TRANSICIONES ── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --dur-fast:      0.12s;
  --dur-normal:    0.2s;

  /* ── LAYOUT DE ESCRITORIO ──
     Ancho útil acotado: una tabla de 2000px de ancho es ilegible. */
  --sidebar-width:   240px;
  --sidebar-narrow:  68px;
  --content-max:     1280px;
  --content-pad:     32px;
  --topbar-height:   64px;

  /* ── BREAKPOINTS (para referencia; las media queries usan max-width) ──
     1100px → la navegación lateral se angosta a iconos
      820px → la navegación pasa a cajón y las tablas colapsan a tarjetas */
  --bp-lateral: 1100px;
  --bp-compacto: 820px;

  /* ── Z-INDEX ── */
  --z-sticky:  50;
  --z-sidebar: 100;
  --z-modal:   500;
  --z-toast:   900;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ── FOCO VISIBLE — se usa el teclado en escritorio ── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── SOLO PARA LECTORES DE PANTALLA ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── BARRA DE SCROLL ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }

/* ── MOVIMIENTO REDUCIDO ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── ANIMACIONES ── */
@keyframes tb-spin    { to { transform: rotate(360deg); } }
@keyframes tb-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes tb-shimmer { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } }
@keyframes tb-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tb-modal-in{ from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tb-toast-in{ from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }