/* =========================================


   0) VARIABLES GLOBALES


   ========================================= */


:root {


  /* Colores */


  --bg-page: #eaf2f3;               /* fondo general */


  --surface: #ffffff;               /* panel blanco */


  --panel-accent: #21505B;          /* verde corporativo */





  --text: #0f172a;                  /* texto principal */


  --text-muted: #64748b;            /* texto secundario */


  --link: #21505B;                  /* enlaces */


  --link-hover: #0a4b4e;            /* enlaces hover */





  --border: #e2e8f0;                /* bordes */


  --focus: #265750;                 /* color foco accesible */


  --shadow-color: rgba(15, 23, 42, .08);





  --brand: #21505B;                 /* botón */


  --brand-hover: #0c4d50;           /* hover botón */





  /* Tipografía */


  --font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;


  --fs-h1: 28px;


  --fs-base: 16px;


  --fs-small: 14px;





  /* Espaciado */


  --radius-lg: 14px;


  --radius-md: 10px;


  --space-1: 6px;


  --space-2: 10px;


  --space-3: 16px;


  --space-4: 24px;


  --space-5: 32px;





  /* Layout general */


  --container-max: 1160px;


  --col-left: 42%;


  --col-right: 58%;





  /* Sombras y transición */


  --shadow-panel: 0 12px 32px var(--shadow-color), 0 2px 6px var(--shadow-color);


  --shadow-cta: 0 4px 10px rgba(14, 94, 97, .25);


  --transition: 220ms ease;








    /* Mensajes */


  --danger: #dc2626;            /* rojo texto/icono */


    /* (opcional por si luego quieres “ok”) */


  --success: #0f766e;





  /* Progreso del wizard */


    --progress-track: #e5eef0;  /* fondo de pasos pendientes */


    --progress-active: var(--brand); /* paso activo/completado */





  /* —— Tokens de formularios (globales) —— */


  --input-bg: #f8fafc;


  --input-text: var(--text);


  --input-placeholder: #9aa4b2;





  --input-border: #e2e8f0;


  --input-border-hover: #cbd5e1;


  --input-focus: var(--focus);





  --input-radius: var(--radius-md);


  --input-py: 12px;


  --input-px: 14px;





  /* Select (desplegable) */


  --select-arrow-size: 18px;


  --select-arrow-gap: 12px; /* separación derecha */


}