/* ===================================================================
   EL RIU — Cabecera responsive de verdad en móvil
   - El logo se centra de forma absoluta: NUNCA puede taparlo nada,
     sea cual sea el ancho del botón de registro.
   - El botón "Regístrate gratis" pasa a un texto corto ("Entra") en
     pantallas estrechas, en vez de desbordarse.
   - El selector CA/ES ahora es SIEMPRE visible en móvil (antes se
     escondía junto con Newsletter/RSS).
   Se carga el último a propósito, para ganar siempre al resto del CSS.
   =================================================================== */

.lbl-short{display:none}

.topline-right{display:flex;align-items:center;gap:16px}
.lang-switch{display:flex;align-items:center;gap:6px;font-family:Inter,Arial,sans-serif;font-weight:800;font-size:11px}
.lang-switch a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:20px;padding:0 6px;border-radius:4px;
  color:#666;border:1px solid transparent;
}
.lang-switch a.on{background:var(--elriu-ink,#001f42);color:#fff!important}

@media (max-width:900px){
  /* Cabecera principal: flex + logo centrado de forma absoluta.
     Así, aunque el botón de la derecha sea ancho, JAMÁS se superpone
     al logo — cada uno vive en su propia capa. */
  .masthead-in{
    display:flex!important;align-items:center;justify-content:space-between;
    position:relative;height:auto!important;min-height:60px;padding:8px 0;
  }
  .masthead-in .hamb{flex:0 0 auto;position:relative;z-index:2}
  .masthead-in .brand{
    position:absolute!important;left:50%;top:50%;
    transform:translate(-50%,-50%);z-index:1;
    max-width:44vw; /* dale margen a los botones de los lados */
  }
  .masthead-in .brand-logo-img{max-height:32px;width:auto;margin:0 auto}
  .masthead-in .mast-actions{
    flex:0 0 auto;margin-left:auto;position:relative;z-index:2;
    display:flex!important;align-items:center;gap:6px;
  }
  .masthead-in .mast-actions .btn-sub{
    padding:7px 10px!important;font-size:10px!important;white-space:nowrap;
  }

  /* Topline: se esconden Newsletter/RSS (menos esenciales en móvil),
     pero el selector de idioma SIEMPRE se queda visible. */
  .top-links{display:none!important}
  .topline-right{display:flex!important}
  .lang-switch{display:flex!important}
}

/* En pantallas muy estrechas (iPhone SE y similares), el botón pasa a
   su versión corta ("Entra"/"Entrar") para no desbordarse nunca. */
@media (max-width:400px){
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .masthead-in .brand{max-width:36vw}
  .masthead-in .brand-logo-img{max-height:28px}
  .lang-switch a{min-width:22px;height:18px;font-size:10px}
}