/* =============================================================================
   M3SOLARIS — css/joomla.css · Capa de Joomla core
   -----------------------------------------------------------------------------
   Cómo se ven las piezas que pinta Joomla (no el theme): textos para lectores
   de pantalla, botones, mensajes, paginación, migas, formularios, artículo y
   blog, botón de submenú de mod_menu y selector de idioma (html/mod_languages).
   Se carga justo después de styles.css y antes de los paquetes nav/<id>/.

   El theme no trae Bootstrap y las vistas de Joomla emiten clases de Bootstrap
   (.visually-hidden, .btn, .badge, .list-inline, .float-end…). §J0 da a esas
   clases lo mínimo DENTRO DE :where() (especificidad cero): si se activa
   Bootstrap (pestaña Librerías) o lo carga M3 Design, manda el suyo.

   PERSONALIZAR SIN TOCAR ESTE ARCHIVO: cambia las variables de abajo en
   la pestaña «Código personalizado» (CSS personalizado) o en css/custom.css:
       :root { --tb-lang-fs: 13px; --tb-btn-bg: #0a58ca; }
   Lo que se escriba allí se carga DESPUÉS y gana. Este archivo lo sustituye
   cada actualización del theme.

   Variables (valor por defecto entre paréntesis; casi todas heredan los tokens
   del theme: --ink, --paper, --mute, --rule, --accent, --mono, --radius)
     Etiquetas pequeñas (fechas, autor, migas, labels)
       --tb-j-label-font (--mono) · --tb-j-label-fs (11px) · --tb-j-label-ls (0.08em)
     Botones de Joomla (.btn: leer más, enviar, anterior/siguiente)
       --tb-btn-bg (transparent) · --tb-btn-color (--ink) · --tb-btn-line (--ink)
       --tb-btn-bg-primary (--accent) · --tb-btn-color-primary (--paper)
       --tb-btn-pad (10px 22px) · --tb-btn-fs (11px)
     Mensajes del sistema
       --tb-msg-bg (--paper) · --tb-msg-line (--rule) · --tb-msg-ok (#3f7a52)
       --tb-msg-warn (#b08a3e) · --tb-msg-error (#a4453a) · --tb-msg-info (--mute)
     Paginación
       --tb-pag-size (36px) · --tb-pag-line (--rule) · --tb-pag-active-bg (--ink)
       --tb-pag-active-color (--paper)
     Formularios
       --tb-form-line (--rule) · --tb-form-focus (--ink) · --tb-form-pad (10px 14px)
       --tb-form-max (480px)
     Artículo y blog
       --tb-art-gap (--gutter) · --tb-art-meta-color (--mute)
       --tb-blog-cols-gap (--gutter)
     Selector de idioma
       --tb-lang-font (menú del theme) · --tb-lang-fs (11px) · --tb-lang-ls (0.12em)
       --tb-lang-gap (12px) · --tb-lang-dim (0.45) · --tb-lang-line (1px)
       --tb-lang-offset (4px) · --tb-lang-menu-bg (--paper) · --tb-lang-menu-line (--rule)
     Submenús (botón)
       --tb-sub-chevron (0.42em)
   ============================================================================= */

:root {
  --tb-j-label-font: var(--mono, ui-monospace, monospace);
  --tb-j-label-fs: 11px;
  --tb-j-label-ls: 0.08em;

  --tb-btn-bg: transparent;
  --tb-btn-color: var(--ink, #161513);
  --tb-btn-line: var(--ink, #161513);
  --tb-btn-bg-primary: var(--accent, #161513);
  --tb-btn-color-primary: var(--paper, #ffffff);
  --tb-btn-pad: 10px 22px;
  --tb-btn-fs: 11px;

  --tb-msg-bg: var(--paper, #ffffff);
  --tb-msg-line: var(--rule, rgba(0, 0, 0, 0.14));
  --tb-msg-ok: #3f7a52;
  --tb-msg-warn: #b08a3e;
  --tb-msg-error: #a4453a;
  --tb-msg-info: var(--mute, #6f6b64);

  --tb-pag-size: 36px;
  --tb-pag-line: var(--rule, rgba(0, 0, 0, 0.14));
  --tb-pag-active-bg: var(--ink, #161513);
  --tb-pag-active-color: var(--paper, #ffffff);

  --tb-form-line: var(--rule, rgba(0, 0, 0, 0.14));
  --tb-form-focus: var(--ink, #161513);
  --tb-form-pad: 10px 14px;
  --tb-form-max: 480px;

  --tb-art-gap: var(--gutter, 24px);
  --tb-art-meta-color: var(--mute, #6f6b64);
  --tb-blog-cols-gap: var(--gutter, 24px);

  --tb-lang-font: var(--tb-nav-l1-font, var(--nav-font, var(--mono, ui-monospace, monospace)));
  --tb-lang-fs: 11px;
  --tb-lang-ls: 0.12em;
  --tb-lang-gap: 12px;
  --tb-lang-dim: 0.45;
  --tb-lang-line: 1px;
  --tb-lang-offset: 4px;
  --tb-lang-menu-bg: var(--paper, #ffffff);
  --tb-lang-menu-line: var(--rule, rgba(0, 0, 0, 0.14));

  --tb-sub-chevron: 0.42em;
}


/* ---------- §J0 · Clases de Bootstrap que emite Joomla (especificidad cero) ---------- */
:where(.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within)) {
  position: absolute !important;   /* !important: igual que Bootstrap; si no, un display/position ajeno lo enseña */
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(.float-end) { float: inline-end; }
:where(.float-start) { float: inline-start; }
:where(.clearfix)::after { content: ""; display: table; clear: both; }
:where(.w-100) { width: 100%; }
:where(.text-muted) { color: var(--mute, #6f6b64); }
:where(.collapse:not(.show)) { display: none; }

:where(.list-inline) { margin: 0; padding: 0; list-style: none; }
:where(.list-inline-item) { display: inline-block; }
:where(.list-inline-item:not(:last-child)) { margin-inline-end: 8px; }

:where(.badge) {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius, 2px);
  font-family: var(--tb-j-label-font);
  font-size: 10px;
  letter-spacing: var(--tb-j-label-ls);
  text-transform: uppercase;
  line-height: 1.2;
}

:where(.table) { width: 100%; border-collapse: collapse; margin: 0 0 var(--tb-art-gap); }
:where(.table) :where(th, td) { padding: 10px 8px; border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.14)); text-align: start; }
:where(.table) :where(th) {
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-j-label-fs);
  letter-spacing: var(--tb-j-label-ls);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--mute, #6f6b64);
}

:where(.card, .well) { padding: var(--gutter, 24px); border: 1px solid var(--rule, rgba(0, 0, 0, 0.14)); border-radius: var(--radius, 2px); }
:where(.list-group) { margin: 0; padding: 0; list-style: none; }
:where(.list-group-item) { padding: 8px 0; border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.14)); }
:where(.input-group) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
:where(.control-group) { margin-bottom: 18px; }
:where(.form-check) { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
:where(.caption, figcaption) {
  margin-top: 8px;
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-j-label-fs);
  letter-spacing: var(--tb-j-label-ls);
  color: var(--mute, #6f6b64);
}


/* ---------- §J1 · Botones de Joomla (.btn) ---------- */
/* Solo los botones de las VISTAS de Joomla (leer más, anterior/siguiente,
   etiquetas, login, búsqueda, contacto): el contenido del artículo (M3 Design
   con Bootstrap) no se toca. Contorno fino; .btn-primary relleno con --accent. */
:where(.readmore, .pagenavigation, .tags, .com-users, .login, .com-finder, .com-contact, .com-tags, .com-content-category, .com-content-category-blog__navigation, .mod-login, .mod-finder) .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--tb-btn-pad);
  background-color: var(--tb-btn-bg);
  color: var(--tb-btn-color);
  border: 1px solid var(--tb-btn-line);
  border-radius: var(--radius, 2px);
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-btn-fs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-ui, 0.2s ease), color var(--t-ui, 0.2s ease);
}

:where(.readmore, .pagenavigation, .tags, .com-users, .login, .com-finder, .com-contact, .com-tags, .com-content-category, .com-content-category-blog__navigation, .mod-login, .mod-finder) .btn:hover { background-color: var(--tb-btn-color); color: var(--paper, #ffffff); }

:where(.readmore, .pagenavigation, .tags, .com-users, .login, .com-finder, .com-contact, .com-tags, .com-content-category, .com-content-category-blog__navigation, .mod-login, .mod-finder) .btn-primary {
  background-color: var(--tb-btn-bg-primary);
  color: var(--tb-btn-color-primary);
  border-color: var(--tb-btn-bg-primary);
}

:where(.readmore, .pagenavigation, .tags, .com-users, .login, .com-finder, .com-contact, .com-tags, .com-content-category, .com-content-category-blog__navigation, .mod-login, .mod-finder) .btn-primary:hover { opacity: 0.85; background-color: var(--tb-btn-bg-primary); color: var(--tb-btn-color-primary); }

:where(.readmore, .pagenavigation, .tags, .com-users, .login, .com-finder, .com-contact, .com-tags, .com-content-category, .com-content-category-blog__navigation, .mod-login, .mod-finder) .btn-sm { padding: 6px 12px; font-size: 10px; }

:where(.readmore, .pagenavigation, .tags, .com-users, .login, .com-finder, .com-contact, .com-tags, .com-content-category, .com-content-category-blog__navigation, .mod-login, .mod-finder) .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Botón de enviar sin clases (formularios de otras extensiones) */
.tb-main :where(button[type="submit"]:not([class]), input[type="submit"]:not([class])) {
  padding: var(--tb-btn-pad);
  background-color: var(--tb-btn-bg-primary);
  color: var(--tb-btn-color-primary);
  border: 1px solid var(--tb-btn-bg-primary);
  border-radius: var(--radius, 2px);
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-btn-fs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Iconos de Joomla (Font Awesome) sin Font Awesome: las flechas se dibujan;
   el resto de iconos decorativos de las vistas no se pintan. */
:where(.icon-chevron-left, .icon-chevron-right, .icon-angle-left, .icon-angle-right,
       .icon-angle-double-left, .icon-angle-double-right) {
  display: inline-block;
  inline-size: 0.45em;
  block-size: 0.45em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  font-size: inherit;
}

:where(.icon-chevron-left, .icon-angle-left, .icon-angle-double-left) { transform: rotate(135deg); }
:where(.icon-chevron-right, .icon-angle-right, .icon-angle-double-right) { transform: rotate(-45deg); }

/* Doble flecha (primera / última página): una segunda flecha pegada */
:where(.icon-angle-double-left, .icon-angle-double-right) { position: relative; }

:where(.icon-angle-double-left, .icon-angle-double-right)::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translate(-0.32em, -0.32em);
}

:where(.icon-chevron-left, .icon-chevron-right, .icon-angle-left, .icon-angle-right,
       .icon-angle-double-left, .icon-angle-double-right)::before { content: none !important; }


/* ---------- §J2 · Mensajes del sistema ---------- */
/* Contenedor: CERO padding/margin de salida — Joomla lo pinta SIEMPRE
   (vacío casi siempre); el aire lo ponen los avisos cuando existen. */
#system-message-container { margin: 0; padding: 0; }

#system-message-container .alert,
#system-message-container joomla-alert,
:where(.tb-main .alert) {
  display: block;
  max-width: var(--container, 1280px);
  margin: var(--gutter, 24px) auto;
  padding: 14px 18px;
  border: 1px solid var(--tb-msg-line);
  border-inline-start: 3px solid var(--tb-msg-info);
  border-radius: var(--radius, 2px);
  background-color: var(--tb-msg-bg);
  font-size: 0.9rem;
}

#system-message-container .alert-success,
#system-message-container joomla-alert[type="success"] { border-inline-start-color: var(--tb-msg-ok); }

#system-message-container .alert-warning,
#system-message-container joomla-alert[type="warning"] { border-inline-start-color: var(--tb-msg-warn); }

#system-message-container .alert-danger,
#system-message-container .alert-error,
#system-message-container joomla-alert[type="danger"],
#system-message-container joomla-alert[type="error"] { border-inline-start-color: var(--tb-msg-error); }


/* ---------- §J3 · Paginación (layouts/joomla/pagination) ---------- */
.tb-main .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: var(--gutter, 24px) 0;
  padding: 0;
  list-style: none;
}

.tb-main .pagination .page-link,
.tb-main .pagination > li > a,
.tb-main .pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tb-pag-size);
  block-size: var(--tb-pag-size);
  padding: 0 10px;
  border: 1px solid var(--tb-pag-line);
  border-radius: var(--radius, 2px);
  font-family: var(--tb-j-label-font);
  font-size: 12px;
  color: inherit;
  text-decoration: none;
}

.tb-main .pagination .active .page-link,
.tb-main .pagination .active > span {
  background-color: var(--tb-pag-active-bg);
  color: var(--tb-pag-active-color);
  border-color: var(--tb-pag-active-bg);
}

.tb-main .pagination .disabled .page-link { opacity: 0.35; }

.tb-main .pagination__wrapper + .counter,
.tb-main .com-content-category-blog__counter,
.tb-main .com-content-category__counter {
  text-align: center;
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-j-label-fs);
  letter-spacing: var(--tb-j-label-ls);
  color: var(--mute, #6f6b64);
}


/* ---------- §J4 · Migas de pan (posición breadcrumbs) ---------- */
.tb-breadcrumbs { padding-block: 12px; }

.tb-breadcrumbs ol,
.tb-breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-j-label-fs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute, #6f6b64);
}

.tb-breadcrumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: 0.5; }
.tb-breadcrumbs a { color: var(--mute, #6f6b64); text-decoration: none; }
.tb-breadcrumbs a:hover { color: var(--ink, #161513); }
.tb-breadcrumbs [class*="icon-"] { display: none; }


/* ---------- §J5 · Formularios (login, registro, contacto, búsqueda) ---------- */
:where(input, button, select, textarea) { font: inherit; color: inherit; }

.tb-main input[type="text"],
.tb-main input[type="email"],
.tb-main input[type="password"],
.tb-main input[type="search"],
.tb-main input[type="tel"],
.tb-main input[type="number"],
.tb-main input[type="url"],
.tb-main input[type="date"],
.tb-main select,
.tb-main textarea {
  width: 100%;
  max-width: var(--tb-form-max);
  padding: var(--tb-form-pad);
  background-color: transparent;
  border: 1px solid var(--tb-form-line);
  border-radius: var(--radius, 2px);
  transition: border-color var(--t-ui, 0.2s ease);
}

.tb-main .input-group input { flex: 1 1 200px; width: auto; }

.tb-main input:focus-visible,
.tb-main select:focus-visible,
.tb-main textarea:focus-visible {
  outline: none;
  border-color: var(--tb-form-focus);
}

.tb-main input[type="checkbox"],
.tb-main input[type="radio"] { accent-color: var(--accent, #161513); }

.tb-main label {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-j-label-fs);
  letter-spacing: var(--tb-j-label-ls);
  text-transform: uppercase;
  color: var(--mute, #6f6b64);
}

.tb-main .form-check label,
.tb-main .form-check-label { margin: 0; }

.tb-main fieldset {
  margin: 0 0 var(--gutter, 24px);
  padding: var(--gutter, 24px);
  border: 1px solid var(--tb-form-line);
  border-radius: var(--radius, 2px);
}

.tb-main legend {
  padding-inline: 8px;
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-j-label-fs);
  letter-spacing: var(--tb-j-label-ls);
  text-transform: uppercase;
}

.tb-main .invalid { border-color: var(--tb-msg-error) !important; }
.tb-main label.invalid { color: var(--tb-msg-error); }


/* ---------- §J6 · Artículo y blog (com_content) ---------- */
.tb-main .page-header { margin-bottom: calc(var(--tb-art-gap) * 0.5); }
.tb-main .page-header :where(h1, h2) { margin: 0; }
.tb-main .page-header h2 a { color: inherit; text-decoration: none; }

/* Datos del artículo (autor, fecha, categoría, visitas): una línea pequeña */
.tb-main .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 var(--tb-art-gap);
  font-family: var(--tb-j-label-font);
  font-size: var(--tb-j-label-fs);
  letter-spacing: var(--tb-j-label-ls);
  text-transform: uppercase;
  color: var(--tb-art-meta-color);
}

.tb-main .article-info dt { flex-basis: 100%; font-weight: 400; }
.tb-main .article-info dd { margin: 0; }
.tb-main .article-info a { color: inherit; }
.tb-main .article-info [class*="icon-"] { display: none; }

.tb-main .com-content-article__body > :first-child { margin-top: 0; }

/* Imágenes de intro / completa */
.tb-main .item-image { margin: 0 0 var(--tb-art-gap); }
.tb-main .item-image img { display: block; max-width: 100%; height: auto; }
.tb-main .item-image.float-start { margin-inline-end: var(--tb-art-gap); }
.tb-main .item-image.float-end { margin-inline-start: var(--tb-art-gap); }

/* Etiquetas */
.tb-main .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--tb-art-gap) 0; }
.tb-main .tags .list-inline-item { margin: 0; }

/* Leer más */
.tb-main .readmore { margin: calc(var(--tb-art-gap) * 0.5) 0 0; }

/* Anterior / siguiente (plugin Navegación de contenido) */
.tb-main .pagenavigation { margin: calc(var(--tb-art-gap) * 1.5) 0 0; padding-top: var(--tb-art-gap); border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.14)); }
.tb-main .pagenavigation .pagination { display: flex; justify-content: space-between; margin: 0; }
.tb-main .pagenavigation .next { margin-inline-start: auto; }

/* Blog: elementos separados por una línea; columnas = opción «Columnas» del menú */
.tb-main .blog-items { margin-bottom: var(--tb-art-gap); }
.tb-main .blog-item { padding-bottom: var(--tb-art-gap); margin-bottom: var(--tb-art-gap); border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.14)); }
.tb-main .blog-item::after { content: ""; display: table; clear: both; }

.tb-main .blog-items[class*="columns-"] { display: grid; gap: var(--tb-blog-cols-gap); }
.tb-main .blog-items.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-main .blog-items.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-main .blog-items.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb-main .blog-items[class*="columns-"] .blog-item { margin: 0; }

.tb-main .blog-items.masonry-2 { column-count: 2; column-gap: var(--tb-blog-cols-gap); }
.tb-main .blog-items.masonry-3 { column-count: 3; column-gap: var(--tb-blog-cols-gap); }
.tb-main .blog-items.masonry-4 { column-count: 4; column-gap: var(--tb-blog-cols-gap); }
.tb-main .blog-items[class*="masonry-"] .blog-item { break-inside: avoid; }

.tb-main .items-more ol,
.tb-main .items-more ul { padding-inline-start: 1.2em; }

.tb-main .category-desc { margin-bottom: var(--tb-art-gap); color: var(--mute, #6f6b64); }

@media (max-width: 768px) {
  .tb-main .blog-items[class*="columns-"] { grid-template-columns: minmax(0, 1fr); }
  .tb-main .blog-items[class*="masonry-"] { column-count: 1; }
  .tb-main .item-image.float-start,
  .tb-main .item-image.float-end { float: none; margin-inline: 0; }
}


/* ---------- §J7 · Submenús de mod_menu (todas las navegaciones) ----------
   Joomla 6 (mod_menu/tmpl/default.php) ya pinta <button class="mod-menu__toggle-sub"
   aria-expanded> en cada padre de primer nivel y su JS (mod_menu.menu) abre y cierra
   con clic y teclado (Espacio, flechas, Escape) poniendo aria-hidden en el
   <ul class="mod-menu__sub">. Aquí solo se dibuja: flecha propia (no depende de Font
   Awesome). El desplegable lo decide cada paquete nav/<id>/nav.css. */
:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.6em;
  block-size: 1.6em;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub [class*="icon-"] { display: none; }

:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub::before {
  content: "";
  inline-size: var(--tb-sub-chevron);
  block-size: var(--tb-sub-chevron);
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-20%) rotate(45deg);
  transition: transform var(--t-ui, 0.2s ease);
}

:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub[aria-expanded="true"]::before { transform: translateY(20%) rotate(225deg); }

:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Padre sin enlace (tipo Encabezado o Separador): Joomla mete el texto DENTRO del
   botón. Se pinta como un enlace del menú con la flecha detrás. */
:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub:has(.nav-header,
:where(body:not(.tb-nav-limpio)) .separator) {
  inline-size: auto;
  block-size: auto;
  gap: 0.45em;
  text-align: start;
}

:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub:has(.nav-header,
:where(body:not(.tb-nav-limpio)) .separator)::before { content: none; }

:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub:has(.nav-header,
:where(body:not(.tb-nav-limpio)) .separator)::after {
  content: "";
  inline-size: var(--tb-sub-chevron);
  block-size: var(--tb-sub-chevron);
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-20%) rotate(45deg);
  transition: transform var(--t-ui, 0.2s ease);
}

:where(body:not(.tb-nav-limpio)) .mod-menu__toggle-sub[aria-expanded="true"]:has(.nav-header,
:where(body:not(.tb-nav-limpio)) .separator)::after { transform: translateY(20%) rotate(225deg); }

:where(body:not(.tb-nav-limpio)) .mod-menu__sub[aria-hidden="true"] { display: none; }

/* Joomla solo pone botón en el primer nivel: el nivel 3 se ve siempre que
   se vea su nivel 2 (si no, nadie podría abrirlo con teclado ni en móvil). */
:where(body:not(.tb-nav-limpio)) .mod-menu__sub .mod-menu__sub[aria-hidden] { display: block; }


/* ---------- §J8 · Selector de idioma (html/mod_languages/default.php) ----------
   Mínimo por defecto (pestaña Idiomas → «Selector de idioma»): solo el código
   («ES  EN»), sin banderas, sin nombres y sin separadores. El activo, entero y
   subrayado; los demás, atenuados. Cada código lleva aria-label con el nombre
   del idioma para los lectores de pantalla. */
.tb-lang {
  margin: 0;
  padding: 0;
  font-family: var(--tb-lang-font);
  font-size: var(--tb-lang-fs);
  letter-spacing: var(--tb-lang-ls);
  line-height: 1;
}

.tb-lang__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tb-lang-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-lang__list--block { flex-direction: column; align-items: flex-start; }

.tb-lang a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  opacity: var(--tb-lang-dim);
  transition: opacity var(--t-ui, 0.2s ease);
}

.tb-lang a:hover,
.tb-lang a:focus-visible,
.tb-lang a[aria-current="true"] { opacity: 1; }

.tb-lang a[aria-current="true"] > span {
  text-decoration: underline;
  text-decoration-thickness: var(--tb-lang-line);
  text-underline-offset: var(--tb-lang-offset);
}

.tb-lang a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.tb-lang__code { text-transform: uppercase; }

.tb-lang img { display: block; }

/* Desplegable (opción «Desplegable» del módulo): <details>, sin JS para abrir */
.tb-lang__menu { position: relative; display: inline-block; }

.tb-lang__menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.tb-lang__menu > summary::-webkit-details-marker { display: none; }

.tb-lang__menu > summary::after {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--t-ui, 0.2s ease);
}

.tb-lang__menu[open] > summary::after { transform: translateY(25%) rotate(225deg); }

.tb-lang__menu > summary:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.tb-lang__menu .tb-lang__list {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 130;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  background-color: var(--tb-lang-menu-bg);
  color: var(--ink, #161513);
  border: 1px solid var(--tb-lang-menu-line);
}