/* NCT 360 · selector de idioma común (ES · EN · FR · PT) y aviso de idioma sugerido.
   Marcado (en la cabecera de cada página, enlaces estáticos: funciona sin JavaScript):
   <details class="idiomas">
     <summary aria-label="Idioma: Español"><span aria-hidden="true">ES</span></summary>
     <ul>
       <li><a href="x.html" lang="es" hreflang="es" aria-current="page">Español</a></li>
       <li><a href="x.en.html" lang="en" hreflang="en">English</a></li>
       <li><a href="x.fr.html" lang="fr" hreflang="fr">Français</a></li>
       <li><a href="x.pt.html" lang="pt-PT" hreflang="pt-PT">Português</a></li>
     </ul>
   </details> */

.idiomas { position: relative; flex-shrink: 0; }
.idiomas > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; min-width: 40px; padding: 0 10px;
  border: 1px solid var(--border, #333); border-radius: 8px;
  color: var(--text, #fff); font: 600 .875rem/1 var(--font-body, Arial, sans-serif);
  cursor: pointer; user-select: none;
}
.idiomas > summary::-webkit-details-marker { display: none; }
.idiomas > summary::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.idiomas > summary::after { content: "▾"; font-size: .75rem; opacity: .8; }
.idiomas > summary:hover { border-color: var(--nct-gray-300, #c9c9c9); }
.idiomas > summary:focus-visible { outline: 2px solid var(--focus, #fff); outline-offset: 2px; }
.idiomas[open] > summary { border-color: var(--cta, #e00000); }

.idiomas ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 160px;
  background: var(--surface, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 10px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .35));
}
.idiomas li a {
  display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 6px;
  color: var(--text-2, #b3b3b3); text-decoration: none; font-weight: 500;
}
.idiomas li a:hover, .idiomas li a:focus-visible { background: var(--surface-2, #242424); color: var(--text, #fff); }
.idiomas li a[aria-current="page"] { color: var(--text, #fff); box-shadow: inset 3px 0 0 var(--cta, #e00000); }

/* Suggested-language bar (idiomas.js). Never redirects: the visitor decides. */
.idioma-aviso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  padding: 10px 16px; background: var(--surface-2, #242424); border-bottom: 1px solid var(--border, #333);
  color: var(--text, #fff); font: 400 .9375rem/1.4 var(--font-body, Arial, sans-serif); text-align: center;
}
.idioma-aviso a, .idioma-aviso button {
  font: 600 .9375rem/1 var(--font-body, Arial, sans-serif); min-height: 36px; padding: 0 14px; border-radius: 8px;
  display: inline-flex; align-items: center; cursor: pointer; text-decoration: none;
}
.idioma-aviso a { background: var(--cta, #e00000); color: #fff; }
.idioma-aviso a:hover { background: var(--cta-hover, #c40000); }
.idioma-aviso button { background: transparent; color: var(--text-2, #b3b3b3); border: 1px solid var(--border, #333); }
.idioma-aviso button:hover { color: var(--text, #fff); }