/* ==========================================================================
   tokens.css · Sistema de diseño — Campamento CPO-13
   Paleta corporativa IRIS / PBI Tecpetrol. Ningún otro archivo define colores
   en crudo: si necesitas un color nuevo, se agrega aquí primero.
   ========================================================================== */

:root{
  /* --- Marca ------------------------------------------------------------ */
  --navy:#093C71;
  --blue:#0073B4;
  --blue-d:#005C90;
  --blue-m:#4FA3D1;
  --green:#78B450;
  --green-d:#5E9440;
  --orange:#ED7602;
  --red:#D64545;
  --yellow:#E9AE00;
  --purple:#7A5AD6;

  /* --- Tintes ----------------------------------------------------------- */
  --tint:#E8F3FA;
  --tint2:#F4FAFD;
  --tint-green:#F3FAEC;
  --tint-orange:#FFF7EA;
  --tint-red:#FDF0F0;

  /* --- Superficies y texto --------------------------------------------- */
  --ink:#152232;
  --mut:#67788A;
  --soft:#93A2B0;
  --bd:#E3E9EE;
  --bd2:#EDF1F5;
  --bg:#F4F7F9;
  --surface:#FFFFFF;
  --surface-2:#FAFCFD;
  --surface-3:#F7F9FB;

  /* --- Métricas del shell ---------------------------------------------- */
  --nav-w:264px;
  --panel-w:318px;
  --top-h:62px;
  --bottom-h:0px;

  /* --- Radios y sombras ------------------------------------------------- */
  --r-sm:6px;
  --r:8px;
  --r-md:10px;
  --r-lg:12px;
  --r-xl:14px;
  --sh1:0 1px 2px rgba(16,40,64,.06);
  --sh2:0 4px 14px -6px rgba(16,40,64,.18);
  --sh3:0 18px 44px -18px rgba(9,60,113,.45);
  --ring:0 0 0 3px rgba(0,115,180,.18);

  /* --- Tipografía ------------------------------------------------------- */
  --font:"Segoe UI",Segoe,system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  --font-mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --fs:14px;              /* escala base — la cambia el control A- / A+ */

  /* --- Movimiento ------------------------------------------------------- */
  --t-fast:.14s ease;
  --t:.22s cubic-bezier(.4,0,.2,1);
}

/* Escala de texto para uso en campo (guantes, sol, pantallas pequeñas).
   La controla el botón A- / A+ del encabezado y se recuerda por navegador. */
html[data-escala="grande"]{ --fs:15.5px; }
html[data-escala="xl"]{ --fs:17px; --nav-w:280px; }

/* Modo compacto: más filas visibles en jornada de recepción */
html[data-densidad="compacta"]{ --fs:13.2px; }

@media (prefers-reduced-motion:reduce){
  :root{ --t-fast:0s; --t:0s; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}