/*
    Hoja de estilos de la marca "rutaenergy" (Ruta Energy, #5146).
    Paleta oficial: azul #01152D, verde #60AE25, gris #F7F7F7.

    ORDEN DE CARGA (ver brands/demo/brand.css):

      style.css del sitio  ->  este archivo  ->  <style>:root{...}</style> con los colores guardados

    Los cuatro colores de marca van en `:root` para que Herramientas administrativas -> Marcas los
    pueda cambiar; lo que Marcas no administra va en `:root:root`.
*/

:root {
    --brand-primary: #60AE25;
    --brand-primary-dark: #3F7A16;
    --brand-secondary: #01152D;
    --brand-sidebar: #01152D;
}

:root:root {
    --kendo-color-primary: #60AE25;
    --kendo-color-primary-hover: #559B20;
    --kendo-color-primary-active: #3F7A16;

    /* El fondo del inicio de sesión y de las páginas públicas es background.jpg, de esta misma
       carpeta: el sitio lo emite solo. Acá solo va la cabecera y el pie de las páginas públicas en
       el azul de la marca. */
    --brand-public-bar: #01152D;
}

/*
    El logotipo a color tiene las letras en el mismo azul que la barra lateral y que la cabecera de
    «Acerca de», así que ahí se pintaría azul sobre azul. En esos dos lugares se muestra en blanco,
    que es la versión oficial para fondo oscuro. La versión compacta ya trae su propio recuadro y no
    se toca.
*/
.menu__logo-container .menu__logo:not(.mini) {
    filter: brightness(0) invert(1);
}

/* La vista «Acerca de» le pone su propia sombra al logotipo con CSS aislado, que lleva un atributo
   más de especificidad: por eso este selector es más largo, y repite la sombra. */
.about-section .about-header img.logo {
    filter: brightness(0) invert(1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}