/* Ajustes Eloi */

/* ============================================
   Ajustes para cuando está activa la toolbar de administración de Drupal
   ============================================ */
body.toolbar-tray-open.toolbar-horizontal #navigation-menu {
    margin-top: 80px !important;
}

/* Submenús dropdown con toolbar admin */
body.toolbar-tray-open .dropdown-nav {
    top: 230px !important; /* Aumentado para evitar que pise el menú con toolbar */
}

body.toolbar-tray-open.toolbar-horizontal .dropdown-nav {
    top: 230px !important;
}

/* Posicionamiento del menú principal con toolbar (solo escritorio ≥992px) */
@media (min-width: 992px) {
  body.toolbar-tray-open.toolbar-horizontal .navbar .navbar-collapse .navbar-nav {
    margin-left: -150px !important;
    margin-right: 120px !important;
  }

  body.toolbar-tray-open.toolbar-horizontal .navbar .navbar-collapse .menu-right,
  body.toolbar-tray-open.toolbar-horizontal .navbar.navbar-expand-lg .navbar-collapse .menu-right {
    right: 290px !important;
    position: absolute !important;
    top: calc(50% - 15px) !important;
  }
}

body .form-control.error {
    border: 1px solid #e4452e;
    background-image: url(../icons/ico-error.svg);
    background-repeat: no-repeat;
    background-size: 20px 22px;
    background-position: calc(100% - 12px) center;
}

body .form-control.required {
    border: 1px solid #b1bdca;
    background-image: none;
}

#block-form-instalador,
#block-form-usuario {
    flex: 0 0 auto;
    width: 50%;
    background-color: #fff;
    display: none;
}

.ga-academia .ficha-academia .paneles-contenedor .paneles .panel .btn-suscribirme[disabled] {
    color: #f9fafc;
    background-color: #b1bdca;
    cursor: not-allowed;
}

.ui-dialog.ui-dialog-off-canvas {
    z-index: 99999999;
}

.ga-academia .nota-formadores .image {
    overflow: hidden;
}

.block-views-blockbiblioteca-home .item {
    height: 500px;
}

.bg-registro {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(23, 41, 58, .4);
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.modals.registro {
    max-width: 522px;
}

.ga-academia .ficha-archivo .panel .picture {
    min-width: 84px;
}

.codigo-de-error .modulo.sin-resultado {
    max-width: 100%;
    margin-top: 100px;
}

.home.instalador-club .image {
    overflow: hidden;
}

.alert-wrapper {
    z-index: 100000 !important;
}

.layout-builder-form {
    background-color: white;
}


/* Ajustes Maria 28/09/2021 */

.pl-10px {
    padding-left: 12px;
}

.pr-10px {
    padding-right: 12px;
}

.inicio-sesion .btn-botones.habilitado {
    max-width: 100% !important;
}

.registro-instalador-club {
    background-color: #ffffff;
}

.registro-instalador-club .left {
    padding-right: 0px;
}

.registro-instalador-club .left .image>img {
    height: 100vh;
}

#block-form-instalador,
#block-form-usuario {
    height: 100vh;
    overflow: auto;
    position: fixed;
    right: 0px
}

.registro-instalador-club .right .ya-cuenta {
    position: initial;
}

@media (max-width: 480px) {
    .dropdown-nav {
        display: none !important;
    }
    /*------ HOME ------*/
    .home.instalador-club .modals.inicio-sesion {
        margin-top: 30px
    }
    .home.instalador-club .biblioteca-digital,
    .home.instalador-club .testimonio {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .home.instalador-club .testimonio .title-top-alt {
        margin-bottom: 30px;
    }
    .home.instalador-club .testimonio .owl-carousel {
        margin-bottom: 0px
    }
    .home.instalador-club .testimonio .owl-carousel .owl-dots {
        display: none;
    }
    .view-id-tutoriales.view-display-id-home {
        padding: 0px !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
    /*----- VENTAJAS CLUB ------*/
    .club-instaladores.ventajas-del-club .mensaje {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .club-instaladores.ventajas-del-club .ventajas {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .club-instaladores.ventajas-del-club .ventajas .ventaja.n1 h4,
    .club-instaladores.ventajas-del-club .ventajas .ventaja.n2 h4,
    .club-instaladores.ventajas-del-club .ventajas .ventaja.n3 h4 {
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 35px;
        letter-spacing: 0.1px;
        text-align: left;
    }
    .club-instaladores.ventajas-del-club .mensaje p {
        font-size: 25px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.1px;
        text-align: center;
    }
    .club-instaladores.ventajas-del-club .items .item h4,
    .herramientas .items .item h4 {
        font-size: 30px;
        font-style: normal;
        font-weight: 500;
        line-height: 35px;
        letter-spacing: 0.1px;
        text-align: left;
    }
    .club-instaladores.codigo-de-error,
    .club-instaladores.ventajas-del-club {
        padding-bottom: 30px;
    }
    /*----- AYUDA------*/
    .club-instaladores.te-ayudamos h3 {
        padding-left: 15px;
        padding-right: 15px
    }
    .ga-academia .nota-formadores {
        width: 100% !important;
    }
}

.ga-academia .modulo.sin-resultado {
    max-width: 100%;
}

#edit-field-birth-date-wrapper label {
    font-weight: 700;
    font-size: 14px;
}

/* Barra superior ThermorPro (WhatsApp) - Fixed top */
.barra-superior-thermorpro {
  width: 100%;
  background: #DDE6EF;
  color: #506077;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1051;
  border-bottom: 1px solid #c3cfd9;
  height: 48px;
  display: flex;
  align-items: center; /* Cambiado de flex-end a center para centrar verticalmente */
  box-shadow: none;
}
.barra-superior-thermorpro__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distribuir contenido entre izquierda y derecha */
  height: 100%;
  width: 100%;
  padding: 0; /* Usar solo el padding del .container padre */
  margin-left: 0; /* Sin desplazamiento extra para alinear con el layout */
}
.barra-superior-thermorpro__izquierda {
  display: flex;
  align-items: center;
}
.barra-superior-thermorpro__derecha {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre botones */
  margin-right: 0; /* Sin margen extra para alinear con el layout */
}
.btn-barra-superior {
  display: inline-block;
  padding: 6px 12px;
  background-color: #DDE6EF; /* Igual que el fondo del bloque */
  color: #e74c3c; /* Color rojo para el texto */
  border: 1px solid #e74c3c; /* Borde rojo */
  border-radius: 0 !important; /* Esquinas rectas */
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.btn-barra-superior:hover,
.btn-barra-superior:focus {
  border-radius: 0 !important; /* Mantener rectas en hover/focus */
}
.btn-barra-superior:hover {
  background-color: #e74c3c;
  color: #fff;
  text-decoration: none;
}
.btn-barra-superior:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3);
}
.icono-whatsapp {
  display: flex;
  align-items: center;
  margin-right: 0.7rem;
}
.icono-whatsapp svg {
  width: 32px;
  height: 32px;
  display: block;
}
.icono-whatsapp svg .whatsapp-bg {
  fill: transparent; /* Cambiado de #DDE6EF a transparent */
}
.icono-whatsapp svg .whatsapp-icon {
  fill: #506077;
}
.texto-whatsapp {
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 1.1rem;
  color: #506077;
}
/* ============================================
   BARRA SUPERIOR - TABLET (max-width: 900px)
   ============================================ */
@media (max-width: 900px) and (min-width: 768px) {
  .barra-superior-thermorpro {
    height: 40px;
  }
  .icono-whatsapp svg {
    width: 24px;
    height: 24px;
  }
  .texto-whatsapp {
    font-size: 0.95rem;
  }
  .barra-superior-thermorpro__derecha {
    margin-right: 0;
  }
}

/* ============================================
   BARRA SUPERIOR - MÓVIL (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
  .barra-superior-thermorpro {
    height: auto !important;
    min-height: 36px !important;
    padding: 4px 0 !important;
  }
  
  .barra-superior-thermorpro__contenido {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  
  /* Sección izquierda - WhatsApp */
  .barra-superior-thermorpro__izquierda {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  
  .icono-whatsapp {
    flex-shrink: 0 !important;
  }
  
  .icono-whatsapp svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .texto-whatsapp {
    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
  }
  
  /* Sección derecha - Botones */
  .barra-superior-thermorpro__derecha {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .btn-barra-superior {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    line-height: 12px !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 0 !important; /* Esquinas rectas */
    display: inline-block !important;
  }
}

.navbar.fixed-top {
  margin-top: 48px !important;
}

@media (max-width: 900px) and (min-width: 768px) {
  .navbar.fixed-top {
    margin-top: 40px !important;
  }
}

@media (max-width: 767px) {
  /* Ajustar el margen del navbar según la altura de la barra superior móvil */
  /* Usuario ANÓNIMO: barra superior más baja (solo WhatsApp) → menos margen */
  body:not(.user-logged-in) .navbar.fixed-top {
    margin-top: 36px !important;
  }

  /* Usuario LOGUEADO: barra superior con botones → mantener margen actual */
  body.user-logged-in .navbar.fixed-top {
    margin-top: 44px !important;
  }
  
  /* Asegurar que el navbar sea visible */
  .navbar.navbar-expand-lg {
    position: fixed !important;
    width: 100% !important;
    z-index: 1040 !important;
  }
}

/* Estilos para "Mi cuenta" en el menú de usuario */
.mi-cuenta-texto {
  color: #e74c3c; /* Color rojo consistente con el tema */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap; /* Evita que se parta en dos líneas */
  line-height: 1; 
  padding: 6px 8px; 
}

.mi-cuenta-texto:hover {
  color: #c0392b; /* Rojo más oscuro en hover */
}

/* Ajuste de posición para alinear con el menú */
.pic-cont .mi-cuenta-texto {
  margin: 0;
  line-height: 1.2;
}

/* Ajustes menú usuario - Mi cuenta */
.cuenta-cont {
  display: flex;
  align-items: center;
  position: relative;
}
.cuenta-cont .menu {
  margin-left: 8px; /* Mantener dropdown en su sitio */
}
/* Alineación general en la barra superior del header */
.menu-right .modulo.usuario {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Alineación del contenedor del enlace Mi cuenta respecto al menú */
.menu-right {
  display: flex;
  align-items: center;
  margin-left: auto; /* Empuja el bloque a la derecha dentro del header */
  padding-left: 8px; /* Separación mínima del resto del menú */
  padding-right: 0; /* Sin padding derecho para alinear con otros menús */
  margin-right: 0; /* Sin margen derecho */
}
.menu-right .cuenta-cont {
  display: flex;
  align-items: center;
}
.menu-right .mi-cuenta-texto {
  white-space: nowrap; /* Evitar salto a dos líneas */
  display: flex;
  align-items: center;
  gap: 4px; /* Espacio entre texto y flecha */
}
.menu-right .mi-cuenta-texto .icons.ico-angle-down {
  width: 11px;
  height: 7px;
  margin-left: 4px;
  background-image: url("../icons/ico-angle-down-rojo.svg"); /* Flecha roja específica para Mi cuenta */
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

/* Estilos para fechas en el menú - color rojo consistente */
.menu-right .menu .date,
.menu-right .menu time,
.menu-right .menu .fecha,
.menu-right .menu .date-display,
.menu-right .menu [class*="date"],
.menu-right .menu [class*="fecha"] {
  color: #e74c3c !important; /* Color rojo para fechas */
}

/* Textos del submenú en negro (como antes) */
.menu-right .menu a {
  color: #000000 !important; /* Negro para enlaces del submenú */
}

/* ============================================
   ESTILOS DESKTOP (min-width: 992px) - menú expandido Bootstrap lg
   Entre 768px y 991px rige navbar-tablet-devices.css (menú hamburguesa)
   ============================================ */
@media (min-width: 992px) {
  /* Desplazar todo el menú hacia la izquierda en DESKTOP */
  .navbar .navbar-collapse .navbar-nav {
    margin-right: 120px !important;
    margin-left: -150px !important;
  }

  /* Bajar los submenús para que no oculten el menú principal en DESKTOP */
  .dropdown-nav {
    top: 140px !important;
  }
  
  /* Ajuste adicional cuando está la toolbar de administración de Drupal */
  body.toolbar-tray-open.toolbar-horizontal .dropdown-nav {
    top: 160px !important;
  }

  /* Ajustes adicionales de posicionamiento según mockup - DESKTOP */
  .navbar .navbar-collapse .menu-right {
    position: absolute !important;
    right: 290px !important;
    top: calc(50% - 15px) !important;
    margin-right: 0 !important;
  }

  /* Regla adicional con mayor especificidad para asegurar el posicionamiento - DESKTOP */
  .navbar.navbar-expand-lg .navbar-collapse .menu-right {
    right: 290px !important;
    position: absolute !important;
    top: calc(50% - 15px) !important;
  }

  /* Regla con máxima especificidad para sobrescribir main.min.css - DESKTOP */
  .navbar.navbar-expand-lg.scrolltop.fixed-top .navbar-collapse .menu-right {
    right: 290px !important;
    position: absolute !important;
    top: calc(50% - 15px) !important;
  }
}

/* ============================================
   ESTILOS MÓVIL (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
  /* Asegurar que el contenedor del navbar no bloquee eventos */
  .navbar .container {
    position: relative !important;
  }
  
  .navbar.navbar-expand-lg {
    overflow: visible !important;
  }
  
  /* Asegurar que el botón hamburguesa/X sea clickeable y funcione correctamente */
  .navbar .navbar-toggler {
    position: absolute !important;
    right: 15px !important;
    top: 5px !important; /* Valor original de main.css línea 6165 para móvil */
    z-index: 1060 !important; /* Por encima del menú desplegado */
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0px !important; /* Valor original de main.css */
    cursor: pointer !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* Asegurar que los iconos dentro del botón sean visibles y tengan el tamaño correcto */
  .navbar .navbar-toggler .icons {
    display: inline-block !important;
    vertical-align: top !important;
    pointer-events: none !important; /* Los clics pasan al botón padre */
  }
  
  .navbar .navbar-toggler .icons.ico-menu {
    width: 25px !important;
    height: 16px !important;
  }
  
  .navbar .navbar-toggler .icons.ico-cruz {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Controlar la visibilidad de los iconos según el estado del menú */
  .navbar .navbar-toggler.collapsed .ico-menu {
    display: inline-block !important;
  }
  
  .navbar .navbar-toggler.collapsed .ico-cruz {
    display: none !important;
  }
  
  .navbar .navbar-toggler:not(.collapsed) .ico-menu {
    display: none !important;
  }
  
  .navbar .navbar-toggler:not(.collapsed) .ico-cruz {
    display: inline-block !important;
  }
  
  /* Corregir desplazamiento hacia la izquierda de los menús principales en móvil */
  .navbar .navbar-collapse .navbar-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }

  /* Elementos del menú en horizontal por defecto */
  .navbar.navbar-expand-lg .navbar-collapse .navbar-nav .nav-item {
    display: inline-flex !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .navbar.navbar-expand-lg .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding: 8px 4px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }
  
  /* Cuando el menú está expandido (hamburguesa abierta), mostrar en vertical SIN ocupar toda la pantalla */
  .navbar.navbar-expand-lg .navbar-collapse.show {
    position: relative !important;
    background-color: #F1F4F8 !important;
    width: 100% !important;
    height: auto !important;
    padding: 15px !important;
    padding-top: 50px !important; /* Espacio adicional arriba para el botón X */
    padding-right: 15px !important;
    margin-top: 0px !important; /* Eliminar margen para evitar gap */
    z-index: 1050 !important; /* Por debajo del botón toggler (1060) */
    pointer-events: auto !important; /* Permitir interacción con el menú */
  }
  
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0 !important;
    margin-top: 0 !important;
  }
  
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item {
    width: 100% !important;
    display: block !important;
  }
  
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item .nav-link {
    padding: 15px 0 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    display: block !important;
    width: 100% !important;
  }
  
  /* Ocultar el icono de usuario móvil (muñequito) y mostrar "Mi cuenta" en el menú principal */
  .navbar .pic-cont.mobile {
    display: none !important;
  }
  
  /* IMPORTANTE: Forzar que "Mi cuenta" se muestre en móvil (main.css lo oculta en línea 6390) */
  .navbar .navbar-collapse .menu-right {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  
  /* Posicionar "Mi cuenta" en una nueva línea ALINEADO A LA IZQUIERDA */
  .navbar.navbar-expand-lg .navbar-collapse .menu-right {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    clear: both !important;
    text-align: left !important;
    float: left !important;
  }
  
  .navbar.navbar-expand-lg .navbar-collapse .menu-right .modulo.usuario {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  
  .navbar.navbar-expand-lg .navbar-collapse .menu-right .cuenta-cont {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    float: left !important;
  }
  
  .navbar.navbar-expand-lg .navbar-collapse .menu-right .pic-cont {
    float: left !important;
    text-align: left !important;
  }
  
  .navbar.navbar-expand-lg .navbar-collapse .menu-right .mi-cuenta-texto {
    padding: 8px 4px 8px 0 !important;
    font-size: 11px !important;
    line-height: 13px !important;
    color: #e74c3c !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  
  /* Ajustar el submenú desplegable de "Mi cuenta" para que no se salga de la pantalla - ALINEADO A LA DERECHA */
  /* IMPORTANTE: Sobrescribir el left: -60px de main.css línea 1680 y 6188 con MÁXIMA especificidad */
  
  /* Selector exacto que usa main.css para sobrescribirlo */
  .modulo.usuario .pic-cont .menu {
    left: auto !important;
    right: -50px !important; /* Ajustado 50px para asegurar compatibilidad en todos los móviles */
  }
  
  .menu-right .modulo.usuario .pic-cont .menu {
    left: auto !important;
    right: -50px !important;
  }
  
  .navbar-collapse .menu-right .modulo.usuario .pic-cont .menu {
    left: auto !important;
    right: -50px !important;
  }
  
  .navbar .navbar-collapse .menu-right .modulo.usuario .pic-cont .menu {
    left: auto !important;
    right: -50px !important;
  }
  
  /* Selector para cuenta-cont */
  .menu-right .cuenta-cont .menu {
    left: auto !important;
    right: -50px !important;
  }
  
  /* Cualquier .menu dentro de .menu-right */
  .menu-right .menu {
    left: auto !important;
    right: -50px !important;
  }
  
  .navbar-collapse .menu-right .menu {
    left: auto !important;
    right: -50px !important;
  }
  
  /* Cuando el menú está expandido, "Mi cuenta" también en vertical */
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right {
    width: 100% !important;
    display: block !important;
    margin: 10px 0 0 0 !important;
  }
}

/* ============================================
   ESTILOS MÓVIL LANDSCAPE (Orientación Horizontal)
   Solo para móviles en horizontal - NO afecta desktop ni móvil vertical
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
  /* CRÍTICO: Bajar el z-index del contenido de la página para que el submenú "Mi cuenta" quede por encima */
  main,
  .main-content,
  .page-content,
  #main-content,
  .region-content,
  .layout-content,
  section,
  .slider,
  .carousel,
  .owl-carousel {
    z-index: 1 !important; /* Z-index BAJO para el contenido */
    position: relative !important;
  }

  /* Reducir la altura del menú desplegado para que quepa en pantalla horizontal */
  .navbar.navbar-expand-lg .navbar-collapse.show {
    max-height: calc(100vh - 80px) !important; /* Limitar altura según viewport - MUY compacto */
    overflow-y: auto !important; /* Permitir scroll si el contenido es muy largo */
    overflow-x: visible !important; /* CRÍTICO: visible para que el submenú escape del contexto de apilamiento */
    padding: 8px 15px !important; /* Reducir padding superior aún más */
    padding-top: 35px !important; /* Espacio para el botón X, muy compacto */
    z-index: 9999999 !important; /* CRÍTICO: Z-index EXTREMADAMENTE alto - 7 nueves para estar por encima de TODO */
    position: relative !important; /* Asegurar que el z-index funcione */
  }
  
  /* Reducir espaciado vertical de los items del menú en landscape */
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item .nav-link {
    padding: 4px 0 !important; /* Muy poco padding vertical */
    font-size: 11px !important; /* Más compacto */
    line-height: 13px !important;
  }
  
  /* Ajustar el contenedor del menú principal para optimizar espacio */
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav {
    gap: 0 !important;
    margin-top: 0 !important;
  }
  
  /* CRÍTICO: Ocultar los bloques desktop (.dropdown-nav) en landscape */
  /* En landscape solo debe mostrarse .dropdown-nav-mobile, NO .dropdown-nav */
  .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-nav,
  .navbar .navbar-collapse .navbar-nav .nav-item:hover .dropdown-nav,
  .navbar.navbar-expand-lg .navbar-collapse .navbar-nav .nav-item .dropdown-nav,
  .navbar.navbar-expand-lg .navbar-collapse .navbar-nav .nav-item:hover .dropdown-nav {
    display: none !important; /* Ocultar los bloques desktop en landscape */
  }
  
  /* Asegurar que los submenús móviles estén OCULTOS por defecto en landscape */
  .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-nav-mobile,
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item .dropdown-nav-mobile {
    display: none !important; /* Ocultos por defecto */
  }
  
  /* CRÍTICO: Limitar altura de los submenús móviles desplegables (Documentación, GA Academy, etc.) */
  /* Estos son los que se sobreponen al contenido en landscape */
  /* MÁXIMA ESPECIFICIDAD para sobrescribir main.css */
  /* IMPORTANTE: Los submenús deben estar OCULTOS por defecto, solo visible en :hover */
  .navbar .navbar-collapse .navbar-nav .nav-item:hover .dropdown-nav-mobile,
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item:hover .dropdown-nav-mobile {
    max-height: 120px !important; /* Altura máxima MUY limitada en landscape */
    overflow-y: auto !important; /* Scroll si hay muchos items */
    overflow-x: hidden !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding: 0px !important;
    display: block !important; /* Solo cuando está en hover */
    /* SIN background-color ni border-left para mantener estética igual que móvil vertical */
  }
  
  /* Reducir padding de los items dentro de los submenús móviles en landscape */
  /* Mantener estética similar a móvil vertical, solo ajustar tamaños para optimizar espacio */
  .navbar .navbar-collapse .navbar-nav .nav-item:hover .dropdown-nav-mobile .menu-items-mobile,
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item:hover .dropdown-nav-mobile .menu-items-mobile {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  
  .navbar .navbar-collapse .navbar-nav .nav-item:hover .dropdown-nav-mobile .menu-items-mobile li,
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item:hover .dropdown-nav-mobile .menu-items-mobile li {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .navbar .navbar-collapse .navbar-nav .nav-item:hover .dropdown-nav-mobile .menu-items-mobile li a,
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item:hover .dropdown-nav-mobile .menu-items-mobile li a {
    padding: 6px 10px !important; /* Compacto pero similar a vertical */
    font-size: 14px !important; /* Mismo tamaño que móvil vertical */
    line-height: 18px !important; /* Mismo line-height que móvil vertical */
    font-weight: 600 !important; /* Mismo peso que móvil vertical */
    color: #506077 !important; /* Mismo color gris que móvil vertical */
    display: block !important;
  }
  
  /* Ajustar "Mi cuenta" en landscape */
  .navbar.navbar-expand-lg .navbar-collapse .menu-right .mi-cuenta-texto {
    padding: 4px 4px 4px 0 !important; /* Reducir padding vertical */
    font-size: 10px !important;
    line-height: 12px !important;
  }
  
  /* CRÍTICO: Ajustar el contenedor padre .menu-right para tener z-index muy alto */
  /* SOLUCIÓN: Igual que móvil vertical, mantener position: absolute pero con z-index alto en el padre */
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .modulo.usuario,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .cuenta-cont,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .modulo.usuario .pic-cont {
    z-index: 99999999 !important; /* Z-index EXTREMADAMENTE alto - 8 nueves (más que el padre 7 nueves) */
    position: relative !important; /* Necesario para que z-index funcione */
  }

  /* CRÍTICO: Ajustar el submenú desplegable de "Mi cuenta" en landscape */
  /* El submenú debe tener altura limitada y scroll si es necesario */
  /* SOLUCIÓN DEFINITIVA: position fixed para ESCAPAR del overflow-y:auto del contenedor padre */
  .menu-right .menu,
  .navbar-collapse .menu-right .menu,
  .navbar .navbar-collapse .menu-right .menu,
  .modulo.usuario .pic-cont .menu,
  .menu-right .modulo.usuario .pic-cont .menu,
  .menu-right .cuenta-cont .menu,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .modulo.usuario .pic-cont .menu,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .cuenta-cont .menu {
    display: none !important; /* Oculto por defecto */
    max-height: 165px !important; /* AJUSTADO: Altura máxima para que quepa en landscape y sea scrolleable */
    height: auto !important; /* Altura automática según contenido */
    overflow-y: auto !important; /* CON SCROLL: Para poder ver todas las opciones */
    overflow-x: hidden !important; /* Sin scroll horizontal */
    position: fixed !important; /* CRÍTICO: fixed para escapar del overflow del contenedor padre */
    top: 105px !important; /* SUBIDO MÁS ARRIBA: Para que quepa mejor (antes 155px, ahora -50px) */
    left: 50% !important; /* CENTRADO: En el medio de la pantalla */
    right: auto !important; /* Desactivar right */
    transform: translateX(-50%) !important; /* CENTRADO: Ajuste perfecto al centro */
    z-index: 999999999 !important; /* Z-index EXTREMADAMENTE alto - 9 nueves para estar sobre TODO */
    background-color: #F1F4F8 !important; /* Asegurar fondo visible */
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25) !important; /* Sombra para destacar */
    min-width: 220px !important; /* Ancho mínimo */
    width: auto !important; /* Ancho automático */
    padding: 8px 16px !important; /* Padding para mejor visualización */
    pointer-events: auto !important; /* Asegurar que sea clickeable */
    -webkit-overflow-scrolling: touch !important; /* Scroll suave en móviles */
  }
  
  /* Mostrar el submenú cuando se hace hover/click en el elemento padre */
  /* En móvil, hover también responde a tap/click */
  .menu-right .modulo.usuario .pic-cont:hover .menu,
  .navbar-collapse .menu-right .modulo.usuario .pic-cont:hover .menu,
  .navbar .navbar-collapse .menu-right .modulo.usuario .pic-cont:hover .menu,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .modulo.usuario .pic-cont:hover .menu,
  .menu-right .cuenta-cont:hover .menu,
  .navbar-collapse .menu-right .cuenta-cont:hover .menu,
  .navbar .navbar-collapse .menu-right .cuenta-cont:hover .menu,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .cuenta-cont:hover .menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Asegurar que el contenedor padre sea clickeable */
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .modulo.usuario .pic-cont,
  .navbar.navbar-expand-lg .navbar-collapse.show .menu-right .cuenta-cont {
    position: relative !important;
    cursor: pointer !important;
  }
  
  /* Ajustar padding y tamaño de los items dentro del submenú "Mi cuenta" */
  .menu-right .menu a,
  .navbar-collapse .menu-right .menu a {
    padding: 10px 16px !important; /* AUMENTADO: Más padding para mejor visualización y que se vean todas las opciones */
    font-size: 14px !important; /* AUMENTADO: Tamaño de fuente más grande y legible (antes 13px) */
    line-height: 20px !important; /* AUMENTADO: Mejor legibilidad (antes 18px) */
    white-space: nowrap !important; /* No dividir el texto */
    display: block !important; /* Asegurar que ocupe todo el ancho */
  }
  
  /* Asegurar que el botón toggler permanezca visible y clickeable en landscape */
  .navbar .navbar-toggler {
    top: 5px !important;
    right: 15px !important;
    z-index: 1060 !important;
  }
  
  /* Optimizar la barra superior en landscape - VISIBLE y funcional */
  .barra-superior-thermorpro {
    height: auto !important; /* Altura automática para que se ajuste al contenido */
    min-height: 50px !important; /* Altura mínima AUMENTADA 2px más para mejor visualización */
    padding: 6px 0 !important; /* Más padding para mejor visualización */
    overflow: visible !important; /* CRÍTICO: No recortar el contenido */
    display: flex !important; /* Asegurar que flexbox funcione correctamente */
    align-items: center !important; /* Centrar verticalmente el contenido */
  }
  
  .barra-superior-thermorpro__contenido {
    gap: 4px !important; /* Más espacio entre elementos */
    flex-direction: row !important; /* Una sola línea en landscape */
    flex-wrap: wrap !important; /* Permitir wrap si no cabe */
    align-items: center !important;
  }
  
  .barra-superior-thermorpro__izquierda {
    flex: 0 0 auto !important;
  }
  
  .barra-superior-thermorpro__derecha {
    flex: 0 0 auto !important;
    gap: 4px !important;
  }
  
  .btn-barra-superior {
    padding: 5px 8px !important; /* Más padding para mejor visualización y que se vea completo */
    font-size: 10px !important; /* Tamaño más legible */
    line-height: 12px !important;
    white-space: nowrap !important; /* No dividir texto */
  }
  
  .icono-whatsapp {
    margin-right: 0.3rem !important;
  }
  
  .icono-whatsapp svg {
    width: 16px !important; /* Icono más visible */
    height: 16px !important;
  }
  
  .texto-whatsapp {
    font-size: 9px !important; /* Texto más legible */
    line-height: 11px !important;
  }
  
  /* Reducir el margen superior del navbar en landscape para aprovechar espacio */
  .navbar.fixed-top {
    margin-top: 52px !important; /* AJUSTADO: espacio suficiente para la barra superior aumentada (50px + margen) */
    z-index: 99998 !important; /* CRÍTICO: Z-index MUY alto para navbar */
  }
  
  /* Asegurar el navbar completo esté por encima del contenido */
  .navbar.navbar-expand-lg {
    z-index: 99998 !important;
  }
  
  /* Asegurar que el menú principal NO muestre los nav-items en línea cuando está desplegado */
  .navbar.navbar-expand-lg .navbar-collapse.show .navbar-nav .nav-item {
    width: 100% !important;
    display: block !important;
  }
  
  /* ============================================
     CORRECCIÓN: Imágenes de Formadores en Landscape
     Las imágenes deben mantenerse circulares, no ovaladas
     
     PROBLEMA DETECTADO:
     - En main.css @media (max-width: 768px) se aplica:
       .ga-academia .nota-formadores .image {
         max-width: 160px;   ← puede ser menor
         min-height: 160px;  ← siempre mínimo 160px
       }
     - Esto causa distorsión oval porque width y height no son iguales
     
     SOLUCIÓN:
     - Forzar width y height exactas e iguales
     - Usar object-fit para mantener proporción de imagen
     ============================================ */
  .ga-academia .nota-formadores .image {
    width: 160px !important; /* Ancho fijo, no máximo */
    height: 160px !important; /* Alto fijo, no mínimo */
    max-width: 160px !important;
    min-width: 160px !important;
    max-height: 160px !important;
    min-height: 160px !important;
    border-radius: 50% !important; /* Asegurar que sea circular */
    display: block !important; /* Eliminar espacio de inline-block */
    overflow: hidden !important; /* Asegurar que la imagen no se salga */
  }
  
  .ga-academia .nota-formadores .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recortar imagen manteniendo proporción */
    border-radius: 50% !important; /* Redundante pero asegura circularidad */
  }
}

/* ============================================
   FORMADORES - TABLET / GRANDES MÓVILES (portrait)
   Ej.: iPad / iPad Mini / Galaxy Tab S9 en vertical
   Mantener imágenes de formadores circulares
   sin afectar resto de resoluciones
   Rejilla 2 columnas en 712px/744px: formadores-tablet-devices.css
   ============================================ */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait) {
  .ga-academia .nota-formadores .image {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
    max-height: 200px !important;
    min-height: 200px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .ga-academia .nota-formadores .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
}

/* Bloque home destacado (bloque 4): hacer que el resumen ocupe el mismo ancho que el título */
/* Regla con máxima especificidad para sobrescribir main.min.css */
body.page-node-1 .home.instalador-club .view-id-bloques-home.view-display-id-bloques-home-destacado .view-content .views-row p.ct-text {
  max-width: none !important; /* Sobrescribe main.min.css que fija 430px */
  width: 100% !important;
}

/* Regla de respaldo con máxima especificidad posible */
body.page-node-1 .home.instalador-club .view-id-bloques-home.view-display-id-bloques-home-destacado p.ct-text {
  max-width: none !important;
  width: 100% !important;
}

/* Regla más agresiva - sobrescribe cualquier regla de main.min.css */
.home.instalador-club p.ct-text {
  max-width: none !important;
  width: 100% !important;
}

/* Regla de emergencia - máxima especificidad */
body .home.instalador-club .view-id-bloques-home.view-display-id-bloques-home-destacado .view-content .views-row p.ct-text {
  max-width: none !important;
  width: 100% !important;
}

/* ============================================
   BIBLIOTECA DIGITAL - Títulos (página + home)
   Interlineado compacto; color azul en enlaces (Bootstrap #0d6efd).
   No usar #17293A en los enlaces: se ve negro y tapaba el azul original.
   ============================================ */
.documentacion.biblioteca-digital .view-id-biblioteca h3,
.documentacion.biblioteca-digital .view-content h3,
.documentacion.biblioteca-digital h3 {
  line-height: 1.1 !important;
}

.documentacion.biblioteca-digital h3 a {
  line-height: inherit !important;
  color: #0d6efd !important;
}

.documentacion.biblioteca-digital h3 a:hover,
.documentacion.biblioteca-digital h3 a:focus {
  color: #0a58ca !important;
}

/* Home: carrusel Biblioteca digital */
.home.instalador-club .biblioteca-digital .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .cont a,
.home.instalador-club .biblioteca-digital .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .cont .title,
.home.instalador-club .biblioteca-digital .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .cont a .title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1 !important;
  color: #0d6efd !important;
  margin-bottom: 5px;
}

.home.instalador-club .biblioteca-digital .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .cont a:hover,
.home.instalador-club .biblioteca-digital .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .cont a:hover .title,
.home.instalador-club .biblioteca-digital .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .cont .title:hover {
  color: #0a58ca !important;
}

/* ============================================
   Laptop ~1280px — "Mi cuenta" vs "GA Academy"
   Capturas: 1280×800 (Laptop MDPI) y 1280×950 (Laptop touch).
   Rango 1260–1299px (no usar width:1280px: falla con scrollbar / viewport real).
   Al final del fichero para ganar cascada. Solo menú expandido ≥992px.
   ============================================ */
@media screen and (min-width: 992px) and (min-width: 1260px) and (max-width: 1299px) {
  #navigation-menu .navbar-collapse .menu-right,
  .navbar .navbar-collapse .menu-right,
  .navbar.navbar-expand-lg .navbar-collapse .menu-right,
  .navbar.navbar-expand-lg.scrolltop.fixed-top .navbar-collapse .menu-right {
    right: 210px !important; /* 290px base − 80px → separa de GA Academy */
    position: absolute !important;
    top: calc(50% - 15px) !important;
    margin-left: 0 !important;
  }

  body.toolbar-tray-open.toolbar-horizontal #navigation-menu .navbar-collapse .menu-right,
  body.toolbar-tray-open.toolbar-horizontal .navbar .navbar-collapse .menu-right,
  body.toolbar-tray-open.toolbar-horizontal .navbar.navbar-expand-lg .navbar-collapse .menu-right {
    right: 210px !important;
    position: absolute !important;
    top: calc(50% - 15px) !important;
  }
}