/*
 * Hoja de estilos propia del sitio.
 *
 * AQUI NO SE IMPORTA NADA. AssetMapper publica cada fichero con un hash en el
 * nombre (main.css -> main-MndwcYF.css), asi que un @import por nombre relativo
 * apunta a un fichero que no existe: los seis que habia daban 404 y el tema
 * entero llevaba tiempo sin aplicarse en la web publica. Se veia en el
 * navegador, no en el codigo de estado: las paginas seguian respondiendo 200.
 *
 * Todas las hojas se enlazan desde templates/layouts/master.html.twig con
 * asset(), que si resuelve el nombre con hash. Es el mismo trato que ya tenian
 * las de terceros.
 */

/* Aviso de cookies. Va en app.css porque aparece en cualquier pagina. */
.mf-cookies {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    padding: 16px;
    background: #14213d;
    color: #fff;
    box-shadow: 0 -6px 24px rgb(20 33 61 / 25%);
}

.mf-cookies[hidden] {
    display: none;
}

.mf-cookies-caja {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mf-cookies-titulo {
    margin: 0 0 4px;
    font-weight: bold;
    font-size: .95rem;
}

.mf-cookies-texto {
    margin: 0;
    max-width: 70ch;
    font-size: .85rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 82%);
}

.mf-cookies-texto a {
    color: #fff;
    text-decoration: underline;
}

.mf-cookies-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mf-cookies-boton {
    padding: 10px 22px;
    border: 0;
    border-radius: 24px;
    background: #007bff;
    color: #fff;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

/* Rechazar tiene que costar lo mismo que aceptar: si el boton de rechazo
   estuviera escondido, el consentimiento no seria libre. */
.mf-cookies-boton--suave {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 45%);
}

.mf-cookies-boton:hover,
.mf-cookies-boton:focus-visible {
    filter: brightness(1.1);
}

/*
  Iconos de redes de la cabecera.

  El tema los pintaba en #555186, un morado apagado que venia de cuando la
  cabecera era blanca. Sobre el azul de ahora da 1,8:1 de contraste, muy por
  debajo del 3:1 que pide la WCAG para un elemento grafico, y a simple vista
  casi no se ven.

  En blanco al 85% quedan en 3,4:1 y el hover sube a blanco puro, que es lo que
  marca la diferencia al pasar por encima.
*/
#header .social-links a {
    color: rgb(255 255 255 / 85%);
}

#header .social-links a:hover,
#header .social-links a:focus-visible {
    color: #fff;
}

/*
  Boton del menu de movil.

  Era un <i> y ahora es un <button>, asi que hay que quitarle el fondo, el
  borde y el relleno que trae el navegador para que siga siendo solo el icono.

  El color tambien venia del tema, #413e66 sobre cabecera blanca. Sobre el azul
  de ahora quedaba en 2,5:1, y es el unico modo de abrir el menu en un movil.
  Abierto ya se pone blanco por su cuenta (.bi-x), asi que solo cambia el
  estado cerrado.
*/
.mobile-nav-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(255 255 255 / 85%);
}

.mobile-nav-toggle:hover {
    color: #fff;
}

.mobile-nav-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* Abierto, el menu se despliega sobre un velo oscuro y el aspa va en blanco. */
.navbar-mobile .mobile-nav-toggle {
    color: #fff;
}

/*
  El logo como imagen de portada.

  Contacto y las tres paginas de politicas no tienen foto propia y ponen ahi el
  logo. La franja es azul y el logo lleva azul claro, asi que la mitad del
  logotipo y el «cerramientos metalicos» de debajo se perdian contra el fondo.

  Se resuelve como en la cabecera: tarjeta blanca detras, que ademas es lo que
  pide la guia de marca para el logo a color.
*/
.hero-img--marca img {
    padding: 22px 26px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}

/*
  Menu principal.

  Es el fallo de contraste mas gordo que quedaba en la web: el tema pintaba los
  enlaces en #413e66 y el activo en #1bb1dc, colores pensados para la cabecera
  blanca del template original. Sobre el azul de ahora dan 1,42:1 y 2,81:1,
  cuando para un texto de 14px hacen falta 4,5:1. El menu de escritorio, en
  todas las paginas, estaba practicamente ilegible.

  Solo se tocan los de primer nivel, que son los que van sobre el azul. Los del
  desplegable caen sobre un panel blanco y ahi el color oscuro es el correcto,
  de ahi el :not(.navbar-mobile) y el selector de hijo directo: el menu de
  movil tambien se despliega sobre blanco.
*/
#navbar:not(.navbar-mobile) > ul > li > a {
    color: rgb(255 255 255 / 85%);
}

#navbar:not(.navbar-mobile) > ul > li > a:hover,
#navbar:not(.navbar-mobile) > ul > li:hover > a,
#navbar:not(.navbar-mobile) > ul > li > a.active,
#navbar:not(.navbar-mobile) > ul > li > a:focus-visible {
    color: #fff;
}

/*
  El desplegable ya no cambia de color al pasar por encima: desde que la
  plantilla usa la paleta de la guia, el enlace y el que estaria resaltado
  serian el mismo azul. Se marca con fondo, que ademas se ve mejor que un
  cambio de tono y no baja el contraste del texto, que se queda en 10:1.
*/
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active,
.navbar .dropdown ul li:hover > a,
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
    color: #004087;
    background: #E7F6F8;
}

/*
  La banda de titulo de las paginas interiores.

  Llevaba margin-top: 150px para librar la cabecera fija, y se veia una franja
  blanca entre el azul de la cabecera y el azul de la banda.

  La cuenta: la cabecera mide 125px y <main> ya arrastra 35px de margen, asi
  que a la banda le bastan 90 para quedar pegada justo debajo.
*/
#inner-title {
    margin-top: 90px;
}

/*
  Y la portada de esas mismas paginas.

  #hero mide una pantalla entera (100vh). En la portada tiene sentido, porque
  es lo primero que hay. En una pagina interior viene despues de la banda de
  titulo, asi que entre las dos se comian 1.150 pixeles antes de la primera
  linea de texto: en un portatil de 900 de alto, el titular del producto
  quedaba justo por debajo del pliegue y la descripcion no se veia.

  Con altura automatica la seccion mide lo que mide su contenido, que es lo
  que ya hacia por debajo de 991px.
*/
#inner-title ~ #hero {
    height: auto;
    padding-top: 60px;
    padding-bottom: 60px;
}

/*
  El boton «Solicitar Presupuesto» de las paginas de producto.

  Vive en .content-section, no en .hero, asi que no le llegaba ninguna de las
  reglas del tema y se quedaba con el azul de enlace de Bootstrap, #007bff:
  3,98:1 sobre blanco con letra de 14px, que pide 4,5. Es el unico boton de
  esas paginas.

  La regla va sin mas especificidad que la clase a proposito: asi no pisa ni
  el de la portada, que es blanco sobre azul, ni el de las portadas
  interiores, que ya tienen la suya.
*/
.btn-get-started {
    color: #004087;
}

.btn-get-started:hover {
    color: #0D82CA;
}

/*
  Las clases de color de Bootstrap en las paginas de politicas.

  text-info sobre el gris claro de esas cajas da 1,86:1 y text-warning 1,55.
  Son los encabezados que dicen de que tipo es cada cookie, en la pagina que
  la ley obliga a publicar y a que se entienda.

  Los valores son los «text-emphasis» del propio Bootstrap, pensados para leer
  sobre fondo claro, salvo el primario, que pasa al azul de la guia.
*/
.text-primary {
    color: #004087 !important;
}

.text-success {
    color: #0F5132 !important;
}

.text-info {
    color: #055160 !important;
}

.text-warning {
    color: #664D03 !important;
}