/*
 * variables.css — Colores, tipografía, radios, sombras y tiempos de animación del sistema.
 * Cambie aquí la identidad visual; el resto de hojas solo usa estas variables.
 */
:root{
  /* Marca: petróleo (principal) y ocre andino (acento puntual) */
  --pe-800:#0B4350; --pe-700:#0E4F5C; --pe-600:#125F6E; --pe-500:#17788A; --pe-200:#B7D9E0; --pe-100:#D5EAEE; --pe-50:#EEF6F7;
  --oc:#C98A1B; --oc-600:#A9720F; --oc-50:#FBF1DC;

  /* Texto y superficies */
  --tx:#1C2630; --tx2:#55616E; --tx3:#8A96A3;
  --bd:#E1E6EB; --bd2:#EDF0F3; --bg:#F4F6F8; --sup:#FFFFFF; --sup2:#F8FAFB;

  /* Estados (siempre acompañados de texto o ícono) */
  --ok:#276B42; --ok-50:#E3F1E8; --wa:#8E5510; --wa-50:#FBEEDC; --er:#A8321F; --er-50:#FAE5E2; --in:#245B91; --in-50:#E2EDF8;

  /* Gráficos: serie principal y de contraste (validadas para daltonismo), gris de contexto */
  --g1:#00809A; --g1-wash:rgba(0,128,154,.10); --g2:#C65A2E; --g-gris:#9AA6B2; --g-grid:#E6EAEE;

  /* Tipografía */
  --fuente:"Segoe UI",Arial,sans-serif;
  --fs-xs:12px; --fs-s:13px; --fs-m:14px; --fs-l:15px; --fs-h2:15px; --fs-h1:24px; --fs-cifra:28px; --fs-heroe:48px;

  /* Forma y profundidad */
  --r-s:3px; --r:4px; --r-l:6px; --r-xl:10px;
  --sombra-1:0 1px 2px rgba(28,38,48,.06);
  --sombra-2:0 6px 18px rgba(28,38,48,.12);
  --sombra-3:0 12px 32px rgba(28,38,48,.18);

  /* Movimiento: rápido y con salida fuerte */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-panel:cubic-bezier(.32,.72,0,1);
  --t-rapido:120ms; --t-medio:180ms; --t-panel:240ms;
}