/* ==========================================================================
   Esqueleto común de las páginas públicas (doc 23)
   Lo cargan solo las 15 páginas que incluyen Plantillas/cabeza.inc.
   Las reglas cuelgan de .cabecera-comun y .pie-comun (Plantillas/cabecera.inc,
   pie-inicio.inc y pie-fin.inc), salvo html, body y las de «Contenido», que tampoco
   salen de esas páginas porque solo ellas cargan este fichero.
   ========================================================================== */

/* Debajo de la página, el mismo gris que el pie (red de seguridad, por ejemplo al estirar la página en el móvil) */
html { background-color: #333; }

/* Hueco bajo la cabecera fija de 80 px: el contenido no queda tapado */
body { padding-top: 80px; }

/* El pie siempre abajo: en las páginas cortas crece el contenido y el pie queda al final de la ventana.
   El pie cuelga del body en todas las páginas salvo la portada (dentro del formulario; siempre es larga). */
body { display: flex; flex-direction: column; min-height: 100vh; }
.pie-comun { margin-top: auto; }
/* En una columna flexible, un hijo con márgenes automáticos se encoge a su contenido: en móviles,
   donde .container no tiene ancho fijo, se le devuelve el ancho completo que tenía como bloque */
@media (max-width: 767px) {
    body > .container { width: 100%; }
}

/* ---------- Cabecera ---------- */
/* La sombra de 1 px del color de la cabecera tapa la línea blanca que, con zoom o escalado de pantalla
   distinto del 100 %, deja el redondeo entre la cabecera fija y el contenido */
.cabecera-comun { min-height: 80px; box-shadow: 0 1px 0 #222; }
.cabecera-comun .cabecera-logo { width: 80px; margin-top: 2px; margin-bottom: -2px; }
.cabecera-comun .navbar-collapse,
.cabecera-comun .navbar-nav { text-align: center; }

/* Escritorio: menú en una fila, con el texto centrado en los 80 px */
@media (min-width: 1200px) {
    .cabecera-comun .navbar-nav > li > a { padding-top: 30px; padding-bottom: 30px; }
}

/* Tablets y móviles: el menú se pliega en el botón para que la cabecera no ocupe varias
   filas ni tape el contenido. Los !important son necesarios: Bootstrap 3 fuerza con
   !important que el menú se muestre desplegado a partir de 768 px. */
@media (max-width: 1199px) {
    .cabecera-comun .navbar-header { float: none; }
    .cabecera-comun .navbar-toggle { display: block; margin-top: 23px; margin-bottom: 23px; }
    .cabecera-comun .navbar-collapse { background-color: #222; border-top: 1px solid #080808;
                                       max-height: calc(100vh - 80px); overflow-y: auto; }
    .cabecera-comun .navbar-collapse.collapse { display: none !important; }
    .cabecera-comun .navbar-collapse.collapse.in { display: block !important; }
    .cabecera-comun .navbar-nav { float: none; margin: 0; }
    .cabecera-comun .navbar-nav > li { float: none; }
    .cabecera-comun .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Pie ---------- */
.pie-comun .pie-gencat { float: left; display: table; }
.pie-comun .pie-redes { float: right; display: table; }
/* Privacitat y Termes en blanco: sobre el fondo gris no se veían */
.pie-comun .pie-legal,
.pie-comun .pie-legal a { color: #fff; }
/* Iconos de redes: las imágenes en bloque, sin el hueco de las letras con descendente, para que sus recuadros
   midan lo mismo que los de Font Awesome (correo, teléfono y planeta, de 30 px) */
.pie-comun .pie-redes img { display: block; }
/* Copyright: MisEstilos.css pide la fuente Lato sin alternativa y la web no la carga, así que
   salía en Times. Lato si el dispositivo la tiene; si no, la misma letra que el resto de la web. */
.pie-comun .footer-info .info p { font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Móviles: Generalitat, iconos y textos centrados y en varias filas */
@media (max-width: 767px) {
    .pie-comun .pie-gencat,
    .pie-comun .pie-redes { float: none; display: block; text-align: center; }
    /* Iconos en dos filas alineadas: redes sociales arriba; WhatsApp, correo, teléfono y web abajo */
    .pie-comun .pie-redes ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: center;
                               gap: 8px; padding-left: 0; }
    .pie-comun .pie-redes ul li { float: none; margin: 0; }
    .pie-comun .footer-info { text-align: center; }
    /* El logo de PayPal en su propia línea: a su lado, «Privacitat ·» quedaba arriba y «Termes» debajo */
    .pie-comun .pie-legal { text-align: center; }
    .pie-comun .pie-legal img { display: block; max-width: 100%; margin: 0 auto 10px; }
}

/* ---------- Contenido ---------- */

/* Fotos de los carruseles (ficha de empresa, sorteos y banners de la portada): el .vb les da todo el
   ancho y un alto máximo, y al llegar al tope la foto se aplastaba. Ahora se ve entera y sin
   deformar dentro del mismo hueco. */
#MyCarousel2 img { object-fit: contain; }

/* Móviles: las palabras o tiras de caracteres más largas que la línea (URL, filas de guiones bajos
   o de puntos, tiras de espacios duros pegadas desde Word en Alta y en fichas de empresa) se parten
   en lugar de ensanchar la página, que hacía que la cabecera y el pie se vieran cortados.
   Solo en móviles: en escritorio partiría etiquetas de columnas estrechas (Funcionario). */
@media (max-width: 767px) {
    body { overflow-wrap: break-word; word-wrap: break-word; }
}

/* Carrusel de logos del pie (portada): la tira nunca se parte por un mal cálculo de ancho de Owl Carousel
   (al girar el móvil o cambiar el tamaño de la ventana); los logos llenan su hueco, cuadrados y pegados.
   En móviles la portada los agrupa de dos en dos, así que el carrusel tiene dos filas. */
#MyCarousel .owl-stage { display: flex; }
#MyCarousel .owl-stage:after { display: none; }
#MyCarousel .owl-item { flex-shrink: 0; }
/* el .vb pone a cada logo 100 x 100 px en línea: !important para que ocupe todo su hueco */
#MyCarousel .item > div { width: 100% !important; height: auto !important; }
#MyCarousel .item img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 1 / 1; }

/* Buscador de la portada (columnas de Bootstrap en Default.aspx): separación cuando las columnas se apilan
   y el código postal (control de Telerik) con la misma altura y aspecto que los desplegables */
#filtros > .row > div { margin-bottom: 10px; }
#filtros input.riTextBox { height: 34px; padding: 6px 12px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
/* El script de Telerik fija el ancho del código postal en línea al arrancar: !important para que ocupe su columna */
#filtros .RadInput, #filtros input.riTextBox { width: 100% !important; }
@media (max-width: 767px) {
    /* Móviles: campos y botones más altos para el dedo; con 16 px el iPhone no amplía la página al escribir */
    #filtros .form-control, #filtros input.riTextBox, #filtros .btn { height: 44px; font-size: 16px; }
}

/* Móviles: responsive.css (de la plantilla original) pone h1, h2 y h4 en mayúsculas y con 2-10 px
   entre letras solo en el móvil. Se dejan como en escritorio; el tamaño de móvil no cambia. */
@media (max-width: 640px) {
    h1, h2, h4 { letter-spacing: normal; text-transform: none; }
}