/* Variables de marca y diseño. Usar siempre la variable, no el hexadecimal. */
:root {
    --color-primario: #00a27d;
    --color-primario-oscuro: #008566;
    --color-primario-claro: #e6f6f1;
    --color-primario-borde: #b3e3d6;
    --color-tinta: #10302f;

    --color-texto: #2a2f33;
    --color-texto-suave: #6b7378;
    --color-texto-tenue: #9aa1a6;
    --color-borde: #e6e8eb;
    --color-borde-fuerte: #d3d7db;
    --color-fondo: #f4f5f7;
    --color-superficie: #ffffff;
    --color-fila-hover: #f8faf9;

    --color-info: #2f6fec;
    --color-info-fondo: #eef3ff;
    --color-info-borde: #c9d8fc;
    --color-exito: #0d9b58;
    --color-exito-fondo: #e8f7ef;
    --color-exito-borde: #bfe8d1;
    --color-aviso: #b7791f;
    --color-aviso-fondo: #fff7e6;
    --color-aviso-borde: #f6dfaa;
    --color-peligro: #d93a3a;
    --color-peligro-fondo: #fdeeee;
    --color-peligro-borde: #f5c6c6;
    --color-morado: #7b4fd6;
    --color-morado-fondo: #f3eefe;
    --color-morado-borde: #dccdfa;
    --color-neutro: #5d6670;
    --color-neutro-fondo: #f0f2f4;
    --color-neutro-borde: #dde1e5;

    --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --radio: 6px;
    --radio-grande: 10px;
    --sombra: 0 1px 2px rgba(16, 48, 47, .06), 0 1px 3px rgba(16, 48, 47, .05);
    --sombra-alta: 0 12px 32px rgba(16, 48, 47, .18);

    --alto-cabecera: 64px;
    --ancho-lateral: 196px;
}
