/* LMC i18n language switch (see build/js/lmc_i18n.js).
   Self-contained: light defaults here, dark-mode overrides keyed off html.dark-mode
   like the rest of this theme. State lives in aria-checked, never in inline styles. */

.lmc-lang-mount { text-align: right; padding-top: 8px; }

/* Nav-popup row's icon slot: a language-code badge (see wireRow's comment in lmc_i18n.js for why a
   badge and not a flag) instead of a fa-* glyph, sized to fill the sibling rows' 30x30 icon box
   (estilo.css .nav-profile-popup a .divb1) the same way their fa-2x glyphs do. Selector is scoped
   past .divb1 (not just the class) because estilo.css's ".nav-profile-popup a span" -- meant for
   the row's own LABEL span -- matches any span in the link and was overriding this one's size
   (flex:1) and position (margin-left:16px !important), leaving a small, off-center badge. */
.nav-profile-popup a .divb1 .lmc-lang-row__badge {
  flex: none; margin-left: 0 !important;   /* the sibling ".nav-profile-popup a span" rule sets this !important */
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  font-size: 11px; font-weight: 800; letter-spacing: -.02em; color: #fff;
}

/* The theme's .page-title splits into a fixed .title_left 45% / .title_right 55%, and at
   <=767px force-stacks both to width:100% with a gap (style_custom.css) -- both wrong for a
   switch this narrow: a longer Spanish title wraps to two lines with room to spare, and on
   mobile the switch drops to its own row even when it would fit right next to a short title.
   Flexbox lets the row size itself instead: the title takes only what it needs, the switch
   sits flush at the far right (same visual spot as before, since the old 45+55=100% split
   also filled to the right edge), and flex-wrap is only a LAST-resort fallback if a title is
   genuinely too long for even a narrow phone to show both on one row.
   Scoped with :has() (the same technique dark_mode.css uses for .top_search) so other pages'
   .title_right (buttons, filters, a search bar) keep the original 45/55 layout. */
.page-title:has(.lmc-lang-mount) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  height: auto; min-height: 65px; gap: 6px 16px;
}
.page-title:has(.lmc-lang-mount) .title_left {
  width: auto !important; float: none !important; flex: 1 1 auto; min-width: 0;
}
.page-title:has(.lmc-lang-mount) .title_right.lmc-lang-mount {
  width: auto !important; float: none !important; flex: 0 0 auto;
  margin-top: 0 !important; padding-top: 0;
}

/* Pages whose .title_right already holds real buttons/links (isi_sesiones.php and others still to
   come) can't put the mount class on title_right itself -- it would replace that content. There the
   mount is a small child span (.lmc-lang-mount--inline, see menu/menu_top.php callers) appended after
   the existing buttons instead. :has() still matches (it looks at descendants, not just the element
   itself), so the .page-title flex rule above already fires; this just makes title_right itself lay
   its own children out in a row instead of the old float:left block, and zeroes the base
   .lmc-lang-mount padding-top (meant for a standalone right-aligned mount) so the switch lines up
   with the buttons beside it instead of sitting lower. */
.page-title:has(.lmc-lang-mount) .title_right:not(.lmc-lang-mount) {
  width: auto !important; float: none !important; flex: 0 1 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 0 !important;
}
.lmc-lang-mount--inline { padding-top: 0 !important; text-align: left; }

.lmc-lang {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  font: inherit; color: #6b7280; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lmc-lang__globe { font-size: 16px; line-height: 1; color: #8f9bb3; transition: color .25s; }
.lmc-lang:hover .lmc-lang__globe,
.lmc-lang[aria-checked="true"] .lmc-lang__globe { color: #667eea; }

.lmc-lang__track {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: 78px; height: 32px; border-radius: 999px;
  background: rgba(102, 126, 234, .09);
  box-shadow: inset 0 0 0 1px rgba(102, 126, 234, .28);
  transition: background-color .25s, box-shadow .25s;
}
.lmc-lang:hover .lmc-lang__track { box-shadow: inset 0 0 0 1px rgba(102, 126, 234, .55); }

.lmc-lang__thumb {
  position: absolute; top: 3px; left: 3px;
  width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px;
  background: linear-gradient(135deg, #7b8ff0 0%, #5a6be0 100%);
  box-shadow: 0 2px 8px rgba(90, 107, 224, .45);
  transition: transform .4s cubic-bezier(.34, 1.45, .5, 1);
  transition: transform .55s linear(0, 0.0693, 0.2302, 0.4259, 0.6176, 0.7823, 0.9097, 0.9982, 1.0519, 1.0777, 1.0834, 1.0762, 1.062, 1.0456, 1.0298, 1.0165, 1.0063, 0.9993, 0.9952, 0.9934, 0.9931, 0.9938, 0.995, 0.9964, 0.9977, 0.9988, 0.9996, 1.0001, 1.0004, 1.0006, 1.0006, 1.0005, 1);   /* a real spring where linear() easing is supported */
}
.lmc-lang[aria-checked="true"] .lmc-lang__thumb { transform: translateX(100%); }
.lmc-lang:active .lmc-lang__thumb { filter: brightness(.94); }

.lmc-lang__opt {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; line-height: 1;
  color: #7c8598; transition: color .28s;
}
.lmc-lang[aria-checked="false"] .lmc-lang__opt[data-l="es"],
.lmc-lang[aria-checked="true"] .lmc-lang__opt[data-l="en"] { color: #fff; }

.lmc-lang:focus { outline: 0; }
.lmc-lang:focus-visible .lmc-lang__track { outline: 2px solid #667eea; outline-offset: 3px; }

/* used when a page has no [data-lmc-lang-toggle] mount */
.lmc-lang-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 1002;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(20, 24, 40, .16);
}

html.dark-mode .lmc-lang { color: #9aa4b2; }
html.dark-mode .lmc-lang__globe { color: #7d879a; }
html.dark-mode .lmc-lang:hover .lmc-lang__globe,
html.dark-mode .lmc-lang[aria-checked="true"] .lmc-lang__globe { color: #8fa0ff; }
html.dark-mode .lmc-lang__track { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html.dark-mode .lmc-lang:hover .lmc-lang__track { box-shadow: inset 0 0 0 1px rgba(143, 160, 255, .6); }
html.dark-mode .lmc-lang__opt { color: #8b93a3; }
html.dark-mode .lmc-lang[aria-checked="false"] .lmc-lang__opt[data-l="es"],
html.dark-mode .lmc-lang[aria-checked="true"] .lmc-lang__opt[data-l="en"] { color: #fff; }
html.dark-mode .lmc-lang-float { background: rgba(28, 31, 39, .85); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }

@media (max-width: 767px) {
  .lmc-lang-mount { padding-top: 4px; }
}

/* Language-switch row in the profile nav popup (menu_top.php), above "Modo oscuro". Hidden by
   default sitewide (estilo.css .nav-profile-popup a[data-lmc-lang-row]); this higher-specificity
   rule reveals it only where lmc_i18n.js actually ran and wired it up (adds .lmc-ready). Everything
   else -- icon size, hover, the collapsed-nav icon-only state -- is already handled by the sibling
   row rules it inherits from (.nav-profile-popup a, a .divb1, a span). */
.nav-profile-popup a[data-lmc-lang-row].lmc-ready { display: flex !important; }
@media (prefers-reduced-motion: reduce) {
  .lmc-lang__thumb, .lmc-lang__opt, .lmc-lang__track, .lmc-lang__globe { transition: none; }
}

/* screen-reader-only text (the "language changed" announcement) */
.lmc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- N-language dropdown picker (buildMenu(), lmc_i18n.js) -- only built when a mount's page has
   registered more than one foreign dictionary (langs.length > 1; today: uso-del-sitio's 6 added
   languages). Every existing page keeps the 2-way slider above, untouched. Same accent/shape
   language as that slider (indigo #667eea, pill/rounded-card, dark-mode via html.dark-mode) so it
   reads as the same control family, just with more than 2 stops. */
.lmc-lang--menu { position: relative; display: inline-block; }

.lmc-lang__btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 10px; margin: 0; border: 0; border-radius: 999px;
  background: rgba(102, 126, 234, .09);
  box-shadow: inset 0 0 0 1px rgba(102, 126, 234, .28);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #4b3fc9; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s, box-shadow .25s;
}
.lmc-lang__btn:hover,
.lmc-lang__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(102, 126, 234, .55); }
.lmc-lang__btn:focus { outline: 0; }
.lmc-lang__btn:focus-visible { outline: 2px solid #667eea; outline-offset: 3px; }
.lmc-lang__btn .lmc-lang__globe { font-size: 14px; line-height: 1; color: #667eea; }
.lmc-lang__current { line-height: 1; }
.lmc-lang__caret { font-size: 10px; color: #8f9bb3; transition: transform .25s; }
.lmc-lang__btn[aria-expanded="true"] .lmc-lang__caret { transform: rotate(180deg); }

.lmc-lang__list {
  /* inset-inline-end (not right): aligns the list's END edge with the button's, which is the LEFT
     edge in RTL without a separate override below -- see the [dir="rtl"] comment further down for
     why a plain `right` wouldn't auto-mirror here the way flexbox layout elsewhere on the page does. */
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 1050;
  min-width: 170px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border-radius: 12px;
  box-shadow: 0 10px 32px rgba(20, 24, 40, .18), 0 0 0 1px rgba(20, 24, 40, .06);
  max-height: 60vh; overflow-y: auto;
}
.lmc-lang__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #384153; white-space: nowrap;
}
.lmc-lang__item:hover { background: rgba(102, 126, 234, .08); }
.lmc-lang__item.is-current { background: rgba(102, 126, 234, .12); color: #4b3fc9; font-weight: 700; }
.lmc-lang__item .lmc-lang__code {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 20px; border-radius: 5px; flex: none;
  background: rgba(102, 126, 234, .14); color: #4b3fc9;
  font-size: 10px; font-weight: 800; letter-spacing: -.02em;
}
.lmc-lang__item .lmc-lang__name { flex: 1; }

/* Explicit close affordance (buildMenu() in lmc_i18n.js creates this element unconditionally as
   the list's first child, always). Hidden by default -- the plain small dropdown already closes
   fine via tap-outside/Escape/picking a language, so this stays invisible everywhere until a page
   opts it into its OWN full-screen-modal presentation (e.g. uso-del-sitio's
   #navbarNavDropdown.show .lmc-lang__close rule) with its own visible styling. */
.lmc-lang__close { display: none; }

html.dark-mode .lmc-lang__btn { background: rgba(255, 255, 255, .06); color: #c7cdf0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html.dark-mode .lmc-lang__btn:hover,
html.dark-mode .lmc-lang__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(143, 160, 255, .6); }
html.dark-mode .lmc-lang__btn .lmc-lang__globe { color: #8fa0ff; }
html.dark-mode .lmc-lang__list { background: #20232e; box-shadow: 0 10px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
html.dark-mode .lmc-lang__item { color: #cfd3df; }
html.dark-mode .lmc-lang__item:hover { background: rgba(143, 160, 255, .12); }
html.dark-mode .lmc-lang__item.is-current { background: rgba(143, 160, 255, .18); color: #c7cdf0; }
html.dark-mode .lmc-lang__item .lmc-lang__code { background: rgba(143, 160, 255, .2); color: #c7cdf0; }

/* the page itself flips to RTL for Arabic (document.dir, set by setLang()) -- inset-inline-end
   above already repositions the list correctly (no separate override needed); only the caret glyph
   itself, a plain triangle with no built-in direction-awareness, needs a manual mirror. */
[dir="rtl"] .lmc-lang__caret { transform: scaleX(-1); }
[dir="rtl"] .lmc-lang__btn[aria-expanded="true"] .lmc-lang__caret { transform: scaleX(-1) rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .lmc-lang__caret { transition: none; }
}