/*
 * idSwift — selector de idioma ES/EN comun a todas las webs de la suite.
 * ---------------------------------------------------------------------------
 * POR QUE VIVE AQUI
 *   Mismo motivo que /assets/js/i18n.js: `regcard/assets` es el directorio de
 *   assets COMPARTIDO en config/deploy-manifest.json y se copia como `assets/`
 *   a regcard, frontdesk, folio, precheckin-register, precheckin-dashboard y
 *   ses-web-control. scanner, signedDocs y carousel-image-manager reciben este
 *   fichero por una entrada explicita en su `staticDirs`.
 *
 * USO
 *   <link rel="stylesheet" href="/assets/css/lang-toggle.css" />
 *   <div class="lang-toggle" role="group" aria-label="Idioma / Language">
 *     <button type="button" data-lang="es">ES</button>
 *     <button type="button" data-lang="en">EN</button>
 *   </div>
 *   El estado `.active` lo pone IdswiftI18n.apply(); no hay que tocarlo a mano.
 *
 * PALETA
 *   Azul idSwift #13556d. Es el mismo bloque que nacio inline en
 *   ses-web-control y se replico en precheckin-dashboard; aqui pasa a ser la
 *   unica copia. No meter aqui reglas de posicionamiento: cada web coloca el
 *   `.lang-toggle` en su cabecera con sus propias reglas de layout.
 */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  gap: 2px;
  background: rgba(19, 85, 109, 0.06);
  border: 1px solid rgba(19, 85, 109, 0.2);
  border-radius: 10px;
}

.lang-toggle button {
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #13556d;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lang-toggle button:hover:not(.active) {
  background: rgba(19, 85, 109, 0.1);
  color: #0a4255;
}

.lang-toggle button.active {
  background: #13556d;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(19, 85, 109, 0.18);
}

/* Kioscos y tablets: el control se toca con el dedo, no con el raton. */
@media (pointer: coarse) {
  .lang-toggle button { padding: 8px 16px; font-size: 13px; }
}