/* ---------------------------------------------------------------------------
   Erizonet - CSS global de la interfaz (todas las paginas).

   Se carga declarandolo en "links" dentro de meta.json, NO sobrescribiendo
   includes/layout.html. Asi no heredamos el mantenimiento de una plantilla
   del nucleo de elastic.

   OJO CON EL ORDEN: layout.html coloca <roundcube:object name="links" /> en la
   linea 21, ANTES del <link> de /styles/styles.css (linea 28). Es decir, este
   fichero carga PRIMERO y elastic lo pisa a igualdad de especificidad.
   De ahi los !important: no son dejadez, son necesarios por el orden de carga.

   El nombre NO puede ser "styles.css": ese lo enlaza layout.html por ruta de
   skin y un fichero homonimo aqui SUSTITUIRIA al de elastic en vez de sumarse,
   dejando toda la interfaz sin estilos.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Logotipo de la barra lateral, en negativo blanco.

   El logo corporativo es azul marino con acento naranja; sobre el fondo oscuro
   de la barra la parte azul desaparecia.

     brightness(0) -> pasa todo a negro conservando la transparencia
     invert(1)     -> lo vuelve blanco puro
   Resultado: silueta blanca limpia sobre fondo transparente.

   ACOTADO A #layout-menu A PROPOSITO: el logo del LOGIN vive en
   #layout-content, sobre fondo claro, y alli debe conservar su color original.

   NO SE TOCA EL TAMANO AQUI. elastic ya lo dimensiona de forma responsive:
       #layout-menu .popover-header img { max-height: 58px; max-width: 78px }
       @media 481-1024px  -> max-width: 35.1px
       html.layout-phone  -> max-width: 222px
   Un max-width propio pisaria los tres puntos de ruptura de golpe (nuestro
   selector es mas especifico) y el logo se saldria de la barra, tapando la
   direccion de correo. Ocurrio el 2026-08-04 con un max-width: 150px.
   --------------------------------------------------------------------------- */
#layout-menu .popover-header #logo,
#layout-menu #logo {
	filter: brightness(0) invert(1) !important;
	opacity: 1 !important;
}

/* elastic baja la opacidad del logo en modo oscuro (html.dark-mode #logo).
   Con el negativo blanco ya no hace falta y solo lo apagaria. */
html.dark-mode #layout-menu #logo {
	opacity: 1 !important;
}