/* ==========================================================================
   AJTEL · Selector de idioma  (rev118)
   Se monta dentro de .tools del encabezado, junto al buscador y al tema.
   Hereda .icon-btn para no inventar un estilo nuevo.
   ========================================================================== */

.ajl { position: relative; flex-shrink: 0; }

.ajl-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 38px;
  padding: 0 .6rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ajl-btn:hover,
.ajl-btn[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }

.ajl-bandera {
  object-fit: fill;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  display: block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, .18);
}
[data-theme="dark"] .ajl-bandera { box-shadow: 0 0 0 1px rgba(232, 238, 248, .28); }

.ajl-btn .ajl-caret { width: 9px; height: 9px; opacity: .7; }

/* Menu desplegable ------------------------------------------------------- */
.ajl-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(11, 18, 32, .18);
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity .18s var(--ease), translate .18s var(--ease), visibility .18s;
  z-index: 210;
}
.ajl[data-abierto] .ajl-lista { opacity: 1; visibility: visible; translate: 0 0; }

.ajl-lista li { margin: 0; list-style: none; }
.ajl-lista li::before { content: none !important; }

.ajl-op {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .6rem;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.ajl-op:hover { background: var(--glow); color: var(--blue); }
.ajl-op[aria-current="true"] { color: var(--blue); font-weight: 600; }
.ajl-op[aria-current="true"]::after {
  content: '';
  margin-left: auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

/* Pantallas estrechas: solo la bandera, sin codigo ni flecha --------------- */
@media (max-width: 560px) {
  .ajl-btn { padding: 0 .5rem; gap: 0; }
  .ajl-btn .ajl-codigo,
  .ajl-btn .ajl-caret { display: none; }
}
@media (max-width: 400px) {
  .ajl-btn { height: 34px; }
}

/* Aviso de traduccion de cortesia (solo en/fr) ---------------------------- */
.ajl-aviso {
  display: none;
  margin: 0;
  padding: .55rem 0;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
}
html[data-idioma="en"] .ajl-aviso,
html[data-idioma="fr"] .ajl-aviso { display: block; }

@media print { .ajl { display: none; } }