/* Selector de idioma y arranque sin destello en español */
html.i18n-pend body{ opacity:0; }
html:not(.i18n-pend) body{ transition:opacity .15s ease; }

.idi{ position:relative; display:inline-flex; flex-shrink:0; }
.idi-btn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 9px 0 7px; border-radius:999px; border:1px solid var(--hairline); background:var(--surface);
  color:var(--text-1); cursor:pointer; font-family:var(--font-body, inherit); font-size:12px; font-weight:700; letter-spacing:.04em; line-height:1; transition:border-color 160ms ease, transform 120ms ease; }
.idi-btn:hover{ border-color:var(--accent); }
.idi-btn:active{ transform:scale(.96); }
.idi-btn:focus-visible, .idi-op:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.idi-flag{ display:block; flex-shrink:0; border-radius:999px; box-shadow:0 0 0 1px color-mix(in oklab, var(--text-1) 18%, transparent); }
.idi-chev{ opacity:.7; transition:transform 180ms ease; }
.idi-btn[aria-expanded="true"] .idi-chev{ transform:rotate(180deg); }

.idi-menu{ position:fixed; z-index:2147483000; min-width:190px; padding:6px; border-radius:16px; background:var(--surface); border:1px solid var(--hairline);
  box-shadow:0 18px 40px -14px color-mix(in oklab, var(--sombra-fuerte, rgba(0,0,0,.55)) 100%, transparent), 0 2px 8px -2px rgba(0,0,0,.18);
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; transition:opacity 160ms ease, transform 160ms ease; }
.idi-menu.abierto{ opacity:1; transform:none; }
.idi-menu[hidden]{ display:none; }

.idi-op{ display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:8px 12px; border:none; border-radius:11px; background:transparent; color:var(--text-1);
  cursor:pointer; text-align:left; font-family:var(--font-body, inherit); font-size:15px; transition:background 120ms ease; -webkit-tap-highlight-color:transparent; }
.idi-op:hover{ background:var(--accent-soft); }
.idi-op:active{ background:color-mix(in oklab, var(--accent) 22%, transparent); }
.idi-nom{ flex:1; font-weight:600; }
.idi-cod{ font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--text-3); }
.idi-check{ opacity:0; color:var(--accent); flex-shrink:0; }
.idi-op.activo{ background:var(--accent-soft); }
.idi-op.activo .idi-check{ opacity:1; }
.idi-op.activo .idi-nom{ color:var(--accent); }

/* En la barra de arriba (celular) solo bandera y código, compacto */
.idi-nav .idi-btn, .idi-top .idi-btn{ height:36px; }
@media (max-width:420px){ .idi-btn{ padding:0 7px 0 6px; gap:5px; } .idi-btn .idi-chev{ display:none; } }

/* Lista completa (Ajustes / Primeros pasos) */
.idi-lista{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.idi-lista .idi-op{ min-width:0; gap:8px; }
.idi-lista .idi-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idi-lista .idi-op{ border:1.5px solid var(--hairline); background:var(--surface); min-height:52px; padding:8px 12px; }
.idi-lista .idi-op.activo{ border-color:var(--accent); background:var(--accent-soft); }
.idi-lista .idi-nom{ font-size:14.5px; }
@media (max-width:340px){ .idi-lista{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce){ .idi-menu, .idi-chev, html:not(.i18n-pend) body{ transition:none; } }

/* Barra de la página de ventas: con el selector de idioma el nombre pasa a 2 renglones en vez de cortarse */
nav.top .marca{ min-width:0; }
@media (max-width:520px){
  nav.top .marca{ white-space:normal !important; line-height:1.15; overflow:visible !important; text-overflow:clip !important; flex:1 1 0; font-size:10.5px !important; letter-spacing:.02em; }
  nav.top .in{ gap:6px !important; }
  nav.top .tema-grupo{ gap:6px; }
  nav.top .btn{ padding:0 12px !important; font-size:11.5px !important; height:40px !important; }
}