/**
 * Paleta Cerealto (logo y panel): azul marino principal, acentos del isotipo
 * y franja decorativa rojo → amarillo → verde → azul profundo → marino.
 */
:root {
    --cerealto-navy: #003366;
    --cerealto-navy-hover: #00264d;
    --cerealto-navy-deep: #0b2343;

    --cerealto-rojo: #d32f2f;
    --cerealto-rojo-hover: #b71c1c;
    --cerealto-rojo-claro: #e53935;

    --cerealto-amarillo: #f5b400;
    --cerealto-verde: #00a651;
    /* Azul profundo (marca); evita el tono “cielo” del teal anterior */
    --cerealto-teal: #0a4d6e;

    --cerealto-gris-fondo: #f4f6f9;
    --cerealto-gris-panel: #eef1f5;

    --cerealto-franja: linear-gradient(
        90deg,
        #e30613 0%,
        #f5b400 24%,
        #00a651 50%,
        #0a4d6e 76%,
        #003366 100%
    );

    /* Fondo neutro cálido, sin tinte azul cielo */
    --cerealto-fondo-pagina: linear-gradient(180deg, #f7f5f2 0%, #f8f9fb 42%, #ffffff 100%);

    /* Ítem activo sidebar (toque burdeos sobre azul) */
    --cerealto-sidebar-active: linear-gradient(90deg, #00264d 0%, #4a1a32 100%);

    /* Compatibilidad con nombres ya usados en el proyecto */
    --cerealto-azul: var(--cerealto-navy);
    --cerealto-rojo-oscuro: var(--cerealto-rojo-hover);
    --gris-bg: var(--cerealto-gris-fondo);
    --gris-card: var(--cerealto-gris-panel);
}

/* Franja superior multicolor (headers, modales, tarjetas) */
.marca-franja-top {
    height: 4px;
    width: 100%;
    background: var(--cerealto-franja);
}