:root {
    /* === Colores base BARNA === */
    --color-primario: #2CB3FB; /* Azul institucional BARNA */
    --color-secundario: #0B93BD; /* Azul claro */
    --color-acento: #0E74AB; /* Azul oscuro para CTA o elementos de énfasis */
    --color-fondo: #ffffff; /* Fondo gris claro */
    --color-blanco: #ffffff; /* Blanco puro */
    --color-error: #BF0B0B; /* Rojo neutro (no está en la paleta BARNA, necesario para estados) */
    --color-ok: #0BBF38; /* Verde neutro para estados */

    /* === Colores auxiliares (UI, estados, tablas, loaders) === */
    --color-tabla-bg: #F2F2F2; /* Gris claro */
    --color-tabla-header: #73A9D9; /* Azul claro BARNA */
    --color-loader-borde: #F2F2F2; /* Igual al fondo */
    --color-pendiente: #0B93BD; /* Azul oscuro como estado intermedio */
    --color-rechazado: #BF0B0B; /* Rojo de error */
    --color-comentario-fondo: #E8F1FA; /* Azul MUY pálido derivado de #73A9D9 */
    --color-comentario-borde: #73A9D9; /* Azul claro */
    --color-borde-input: #CCCCCC; /* Gris neutro */

    /* === Sombras y gradientes === */
    --color-shadow-azul: #2CB3FB; /* Derivado de #73A9D9 */
    --color-gradiente-azul-oscuro: #0B93BD; /* Azul navy BARNA */
    --color-borde-boton: #0E74AB; /* Igual al primario */
    --color-texto-shadow: #0B93BD; /* Contraste */

    /* === Tipografía === */
    --font-principal: Arial, Helvetica, sans-serif;
    --font-size-base: 13px;
    --font-size-h1: 20px;
    --font-size-h3: 16px;
    --font-size-label: 13px;
    --font-size-legend: 15px;
    --font-size-textarea: var(--font-size-base);
    --font-color-principal: #193153;

    /* === Espaciados y medidas === */
    --espaciado-gap: 16px;
    --padding-general: 20px;
    --margin-top-body: 20px;
    --margin-h1: 20px 0;
    --margin-h3-bottom: 10px;
    --margin-label-bottom: 5px;
    --margin-hr-bottom: 5px;
    --margin-textarea-bottom: 10px;
    --padding-textarea: 10px;
    --altura-input: 30px;
    --radio-borde: 5px;

    /* === Layout y dimensiones === */
    --container-width: 80%;
    --container-max-width: 65vw;
    --container-border-radius: 10px;
    --container-item-width: 250px;
    --container-item-flex: 1 300px;
    --container-item-flex-medium: 1 200px;
    --container-item-flex-small: 1 100px;
    --logo-width: 200px;

    /* === Estilos visuales === */
    --color-fondo-form: rgba(11, 56, 191, 0.07); /* Primario BARNA transparente */
    --box-shadow-suave: 1px 3px 10px 1px rgba(0, 48, 87, 0.2);
}