:root{
    --primary-color:   #FFD200; /* Amarillo principal */
    --secondary-color: #D49A00; /* Amarillo oscuro más estable y corporativo */
    --active-color:    #FFE766; /* Amarillo claro para estados activos */
    --soft-color:      #FFF9D6; /* Fondo muy suave, cálido, sin molestar */
    --highlight-color: #FFF3A3; /* Zona destacada, tono pastel */
    --header-bg-color: #F5F5F5; /* Neutro que funciona con amarillos */


    --primary-color:   #1F84EF; /* Azul principal */
    --secondary-color: #1667BA; /* Azul más oscuro y corporativo */
    --active-color:    #6CB0F7; /* Tono más claro para estados activos */
    --soft-color:      #F1F7FF; /* Fondo muy suave con matiz azul */
    --highlight-color: #DCEBFF; /* Pastel azul para resaltes */
    --header-bg-color: #F5F5F5; /* Neutro que combina con todo */

 
    --user-logo: url('/theme_images/logoipsum-226.svg');
}

.headerlogo {
    background-image: var(--user-logo);
    width: clamp(60px, 15vw, 142px);
    height: clamp(34px, 10vw, 80px);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}