/* Componentes compartidos nuevos de Meteosat España. Rutas de imagen desde CSS: /img/... */
.ms-site-header-new .cabecera2 .wrapper { display:flex; align-items:center; }
.ms-site-header-new .cabecera2 .logo { padding:4px 0 16px; float:none!important; }
.ms-site-header-new .cabecera2 .logo img { width:min(421px,100%);height:auto; }
.ms-superior-new .ms-superior-inner { display:flex; align-items:center; justify-content:space-between; }
.ms-superior-new .ms-shares-new { margin-left:auto; display:flex;align-items:center;float:none!important; }
.ms-superior-new .ms-search-new { margin-left:12px; display:flex;align-items:center; }
.ms-superior-new .ms-search-new input[type=search] { width:185px;min-width:0;padding:2px;background:transparent;color:#222; }
.ms-superior-new .ms-search-submit { font-size:24px; width:25px; cursor:pointer;background:transparent;color:#226B96;line-height:1; }
.ms-menu-toggle { display:none; cursor:pointer; }
.ms-menu-panel[hidden], .ms-menu-overlay[hidden] {display:none!important;}
/* El footer es independiente del directorio de la página e integra los enlaces legales operativos. */
footer.meteosat-footer-es .wrapper {display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:20px;row-gap:14px;}
footer.meteosat-footer-es .wrapper > ul.left {float:none!important;flex:1 1 135px;min-width:120px;padding:0 0 10px;}
footer.meteosat-footer-es .wrapper > .dommia {float:none!important;text-align:right;flex:2 1 255px;max-width:420px;padding:0 0 10px;margin-left:auto;}
footer.meteosat-footer-es .dommia span {display:block;white-space:normal;}
footer.meteosat-footer-es .dommia span + span {margin-top:8px;}
@media(max-width:787px){
  .ms-superior-new {position:fixed!important;left:0;top:0;right:0;width:100%;z-index:1200;}
  .ms-superior-new .wrapper {box-sizing:border-box;width:100%;max-width:100%;padding:0 10px;min-height:50px;}
  .ms-menu-toggle {display:flex;align-items:center;gap:7px;background:transparent;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;min-width:40px;height:44px;}
  .ms-menu-glyph {font-size:25px;line-height:1;}
  .ms-superior-new .ms-shares-new {width:auto!important;max-width:calc(100% - 45px);position:static;gap:3px;}
  .ms-superior-new .ms-search-new {height:40px!important;margin:0!important;padding:6px 2px 6px 4px!important;background:transparent!important;}
  .ms-superior-new .ms-search-new input[type=search] {width:clamp(85px,20vw,155px);max-width:100%;font-size:12px;}
  .ms-superior-new .ms-search-submit {color:white;font-size:23px;}
  .ms-site-header-new .cabecera2 .wrapper {width:100%;padding:0 15px;box-sizing:border-box;}
  .ms-site-header-new .cabecera2 .logo {width:100%;}
  .ms-site-header-new .cabecera2 .logo img {margin:0 auto;}
  .ms-menu-overlay {position:fixed;inset:0;z-index:1299;background:rgba(0,0,0,.5);}
  .ms-menu-panel {position:fixed;display:block!important;inset:0 auto 0 0;box-sizing:border-box;width:min(320px,88vw);height:100dvh;overflow-y:auto;background:#12415c;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;z-index:1300;box-shadow:3px 0 12px rgba(0,0,0,.25);}
  .ms-menu-panel-heading {display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.22);}
  .ms-menu-panel-heading button {background:transparent;color:#fff;font-size:24px;cursor:pointer;}
  .ms-menu-panel ul {padding:0;margin:0;list-style:none;}
  .ms-menu-panel li {display:block;border-bottom:1px solid rgba(255,255,255,.14);}
  .ms-menu-panel li a {display:block;padding:11px 18px;color:#fff!important;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;font-weight:600;}
  .ms-menu-panel li .hoverable {display:block!important;position:static!important;width:auto!important;border:0!important;background:#1c526c!important;}
  .ms-menu-panel li .hoverable li a {padding:8px 24px;font-weight:400;font-size:15px;}
  .ms-menu-panel li a i {display:none;}
  .ms-menu-panel .wrapper {width:auto!important;max-width:100%!important;padding:0!important;}
  body.ms-mobile-menu-open {overflow:hidden;}
  footer.meteosat-footer-es .wrapper {width:100%;box-sizing:border-box;padding:0 18px;}
  footer.meteosat-footer-es .wrapper > .dommia {flex-basis:100%;max-width:none;text-align:center!important;margin:10px 0 0;}
}
@media(max-width:430px){
  .ms-menu-label {display:none;}
  .ms-superior-new .ms-search-new input[type=search]{width:94px;}
  .ms-superior-new .redes{padding:0!important;}
  footer.meteosat-footer-es .wrapper > ul.left {flex-basis:45%;min-width:115px;text-align:left!important;}
}


/* Menu escritorio - tipografia natural - Meteosat España.
   Comparte HTML con el menu movil, cuya tipografia se ha unificado.
   Aislamiento: exclusivamente <nav class="ms-primary-nav"> desde 788px.
*/
@media (min-width: 788px) {
  .ms-primary-nav {
    position: relative;
    z-index: 1100;
    height: 56px;
    background: #123f59;
    box-shadow: 0 2px 8px rgba(13, 41, 58, .12);
  }
  .ms-primary-nav.sticky { z-index: 1100; }
  .ms-primary-nav > .menu {
    display: block;
    box-sizing: border-box;
    width: min(1300px, calc(100% - 24px));
    height: 56px;
    padding: 0;
  }
  .ms-primary-nav .menu > ul {
    text-transform: none !important;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .ms-primary-nav .menu > ul > li,
  .ms-primary-nav .menu > ul > li:first-of-type {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .ms-primary-nav .menu > ul > li > a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    height: 100%;
    padding: 0 11px;
    box-sizing: border-box;
    border-radius: 0;
    text-transform: none !important;  /* Neutraliza .upper de la plantilla histórica */
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .005em;
    white-space: nowrap;
    color: #f5f9fc !important;
    text-decoration: none !important;
    transition: background-color .16s ease, color .16s ease;
  }
  .ms-primary-nav .menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #ffcb36;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .16s ease;
  }
  .ms-primary-nav .menu > ul > li:hover > a,
  .ms-primary-nav .menu > ul > li:focus-within > a,
  .ms-primary-nav .menu > ul > li > a.active {
    background: rgba(255, 255, 255, .09);
    color: #fff !important;
  }
  .ms-primary-nav .menu > ul > li:hover > a::after,
  .ms-primary-nav .menu > ul > li:focus-within > a::after,
  .ms-primary-nav .menu > ul > li > a.active::after {
    transform: scaleX(1);
  }
  .ms-primary-nav .menu > ul > li > a:focus-visible {
    outline: 2px solid #ffcb36;
    outline-offset: -4px;
  }
  /* Flecha limpia, sin depender de las antiguas imagenes down.png. */
  .ms-primary-nav .menu > ul > li > a > i {
    display: inline-block;
    flex: 0 0 auto;
    float: none;
    width: 6px;
    height: 6px;
    margin: -3px 1px 0 3px;
    background: none !important;
    border-right: 2px solid #cfe2ef;
    border-bottom: 2px solid #cfe2ef;
    transform: rotate(45deg);
    transition: border-color .16s ease;
  }
  .ms-primary-nav .menu > ul > li:hover > a > i,
  .ms-primary-nav .menu > ul > li:focus-within > a > i {
    border-color: #ffcb36;
  }
  /* Desplegables individuales: no hay hueco entre enlace y submenú. */
  .ms-primary-nav .menu > ul > li > .hoverable {
    position: absolute;
    z-index: 1101;
    top: 100%;
    left: 0;
    display: none;
    box-sizing: border-box;
    width: max-content;
    min-width: 240px;
    max-width: min(340px, 90vw);
    padding: 7px;
    background: #fff;
    border: 1px solid #dbe5ed;
    border-top: 3px solid #ffcb36;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 24px rgba(7, 36, 56, .17);
    text-align: left;
  }
  .ms-primary-nav .menu > ul > li:hover > .hoverable,
  .ms-primary-nav .menu > ul > li:focus-within > .hoverable {
    display: block;
  }
  .ms-primary-nav .menu .hoverable > ul.wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    margin: 0;
    text-align: left !important;
  }
  .ms-primary-nav .menu .hoverable li,
  .ms-primary-nav .menu .hoverable li:first-of-type {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .ms-primary-nav .menu .hoverable li a {
    display: block;
    box-sizing: border-box;
    padding: 13px 14px;
    border-radius: 7px;
    color: #174c6d !important;
    font: 500 16px/1.5 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background-color .14s ease, color .14s ease;
  }
  .ms-primary-nav .menu .hoverable li a:hover,
  .ms-primary-nav .menu .hoverable li a:focus-visible {
    background: #eaf4fa;
    color: #103d58 !important;
  }
  .ms-primary-nav .menu .hoverable li a:focus-visible {
    outline: 2px solid #397fa7;
    outline-offset: -2px;
  }
}
/* Acotar el tamano en escritorios intermedios sin recortar enlaces. */
@media (min-width: 1121px) and (max-width: 1339px) {
  .ms-primary-nav .menu > ul > li > a { font-size: 16px; padding-left: 6px; padding-right: 6px; }
  .ms-primary-nav .menu > ul > li > a::after { left: 6px; right: 6px; }
}
/* Los ocho enlaces necesitan una escala gradual en escritorios estrechos. */
@media (min-width: 788px) and (max-width: 1120px) {
  .ms-primary-nav > .menu { width: calc(100% - 16px); }
  .ms-primary-nav .menu > ul > li > a {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 14.5px;
    letter-spacing: -.015em;
  }
  .ms-primary-nav .menu > ul > li > a::after { left: 6px; right: 6px; }
  .ms-primary-nav .menu > ul > li > a > i { margin-right: 0; margin-left: 0; }
}
@media (min-width: 788px) and (max-width: 1020px) {
  .ms-primary-nav .menu > ul > li > a { font-size: 13.5px; }
}
@media (min-width: 788px) and (max-width: 850px) {
  .ms-primary-nav .menu > ul { gap: 0; }
  .ms-primary-nav .menu > ul > li > a {
    font-size: 12.5px;
    padding-left: 3px;
    padding-right: 3px;
  }
  .ms-primary-nav .menu > ul > li > a::after { left: 3px; right: 3px; }
  .ms-primary-nav .menu > ul > li > a > i { margin-left: 0; }
}
@media (min-width: 788px) and (prefers-reduced-motion: reduce) {
  .ms-primary-nav .menu a,
  .ms-primary-nav .menu a::after,
  .ms-primary-nav .menu a > i { transition: none !important; }
}

/* --------------------------------------------------------------
   Footer Meteosat España — tipografía renovada (v1)
   Solo footer: no afecta al menú, cabecera, buscador ni publicidad.
   Mantiene HTML y enlaces originales de htmlFooter-new.php.
   -------------------------------------------------------------- */
footer.meteosat-footer-es {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* Títulos de columna y enlaces destacados (columna 4).
   .upper del CSS histórico lleva !important: anulamos solo en el footer. */
footer.meteosat-footer-es .wrapper > ul > li > span.font.upper {
  display: block;
  margin-top: 0;
  padding: 0 0 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none !important;
}
footer.meteosat-footer-es .wrapper > ul > li > span.font.upper a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Enlaces secundarios: lectura más cómoda, sin cambiar sus destinos. */
footer.meteosat-footer-es .wrapper > ul > li > a {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}
footer.meteosat-footer-es .wrapper > ul > li + li {
  margin-top: 6px;
}

/* Texto corporativo y legal: legible sin competir con las secciones. */
footer.meteosat-footer-es .wrapper > .dommia {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
}
footer.meteosat-footer-es .wrapper > .dommia a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Buscador móvil — solo lupa en reposo; campo abierto al pulsar.
   Exclusivo de la cabecera NEW. No afecta a escritorio ni al menú móvil. */
@media (max-width: 787px) {
  .ms-superior-new .ms-superior-inner { position: relative; }
  .ms-superior-new .ms-search-new {
    box-sizing: border-box;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #e4e3e3 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .ms-superior-new .ms-search-new input[type="search"] {
    display: none !important;
  }
  .ms-superior-new .ms-search-new .ms-search-submit {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #226b96;
    font-size: 26px;
    line-height: 1;
  }
  .ms-superior-new .ms-search-new .ms-search-submit:focus-visible,
  .ms-superior-new .ms-search-new.is-open input[type="search"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
  }
  .ms-superior-new .ms-shares-new.ms-search-expanded .redes {
    visibility: hidden;
  }
  .ms-superior-new .ms-search-new.is-open {
    position: absolute;
    z-index: 3;
    top: 3px;
    left: 60px;
    right: 10px;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    padding: 0 0 0 10px !important;
    gap: 0;
    background: #e4e3e3 !important;
  }
  .ms-superior-new .ms-search-new.is-open input[type="search"] {
    display: block !important;
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px;
    margin: 0;
    padding: 0 4px;
    background: transparent;
    font-size: 14px;
    color: #263849;
  }
  .ms-superior-new .ms-search-new.is-open input[type="search"]::placeholder {
    color: #465867;
    opacity: 1;
  }
}

/* Buscador: recuperar la lupa original del sitio operativo.
   En main.css se usaba ../img/lupa.png sobre un input submit 22x22.
   La ruta absoluta evita depender de la profundidad de la página.
   Mantener el botón y el JS actual: solo cambia el dibujo del icono.
*/
.ms-superior-new .ms-search-new button.ms-search-submit {
  background-image: url('/img/lupa.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: auto !important;
  font-size: 0 !important; /* Oculta el carácter temporal ⌕ */
  color: transparent !important;
}

/* Corrección puntual: el icono PNG original quedaba recortado en escritorio.
   Con font-size:0 el botón perdía su altura intrínseca. Aislar a >=788px:
   el botón móvil conserva sus 44x44 y su comportamiento desplegable. */
@media (min-width: 788px) {
  .ms-superior-new .ms-search-new button.ms-search-submit {
    box-sizing: border-box;
    display: block;
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 0;
    line-height: 0;
  }
}