/* Piezas de las herramientas que salen en TODO el sitio (fase 1 de herramientas, 20-10-2026):
   el menú «Herramientas» de la cabecera y del menú móvil (herramientas/_menu_cabecera.html, _menu_movil.html)
   y el bloque «Herramientas útiles» de landings y fichas (herramientas/enlaces/_herramientas_utiles.html).
   Fichero aparte de legaltica-ds.css a propósito: no toca su hash ni su ?v=. Solo se carga si el país tiene
   herramientas publicadas. Mismo estilo que .lt-header__nav, el offcanvas y las tarjetas de las landings. */

/* --- Escritorio ------------------------------------------------------------------------------------- */
.lt-navherr { position: relative; }
.lt-navherr__boton {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; list-style: none;
  cursor: pointer; font-size: var(--lt-fs-nav, 14.5px); font-weight: 500; color: var(--lt-text-2, #5B6472);
  user-select: none;
}
.lt-navherr__boton::-webkit-details-marker { display: none; }
.lt-navherr__boton:hover, .lt-navherr[open] > .lt-navherr__boton { color: var(--lt-ink, #16202E); }
.lt-navherr__boton:focus-visible { outline: 3px solid var(--lt-primary, #C54343); outline-offset: 2px; border-radius: 6px; }
.lt-navherr__flecha { transition: transform .2s; }
.lt-navherr[open] .lt-navherr__flecha { transform: rotate(180deg); }

.lt-navherr__panel {
  position: absolute; top: calc(100% + 12px); left: -18px; z-index: 60; width: min(580px, calc(100vw - 48px));
  padding: 18px; border: 1px solid var(--lt-border, #E7E2DA); border-radius: 16px; background: var(--lt-surface, #FFFFFF);
  box-shadow: 0 24px 48px -20px rgba(22, 32, 46, .28);
}
/* 20-10: dos columnas que reparte el servidor por peso (catalogo.columnas): en rejilla, grupos de distinto
   tamaño dejaban huecos (AR: «Plazos» con una herramienta junto a «Dinero» con tres). Con un grupo, una. */
.lt-navherr__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.lt-navherr__grupos:has(> .lt-navherr__col:only-child) { grid-template-columns: 1fr; }
.lt-navherr__panel:has(.lt-navherr__col:only-child) { width: min(320px, calc(100vw - 48px)); }
/* 20-10: con 10-12 herramientas por país el panel de dos columnas se salía ~5 px por la derecha a 1150 px: en
   pantallas medianas se abre hacia la izquierda, alineado con el final del botón. */
@media (max-width: 1279.98px) { .lt-navherr__panel { left: auto; right: -18px; } }
.lt-navherr__grupo { padding-bottom: 14px; }
.lt-navherr__grupo-h {
  margin: 0 0 4px 10px; font-family: var(--lt-font-head, 'Space Grotesk', system-ui, sans-serif); font-size: 12px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lt-text-muted, #666D7A);
}
.lt-navherr__lista { gap: 0; margin: 0; padding: 0; list-style: none; }
/* (0,2,0): gana a `.lt-header__nav a` (0,1,1) sin !important */
.lt-header__nav .lt-navherr__enlace {
  display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--lt-ink, #16202E);
}
.lt-header__nav .lt-navherr__enlace:hover { background: var(--lt-canvas, #F7F5F1); color: var(--lt-primary, #C54343); }
.lt-header__nav .lt-navherr__enlace:focus-visible,
.lt-header__nav .lt-navherr__todas:focus-visible { outline: 3px solid var(--lt-primary, #C54343); outline-offset: 0; }
.lt-header__nav .lt-navherr__todas {
  display: flex; align-items: center; min-height: 44px; margin-top: -2px; padding: 12px 10px 0;
  border-top: 1px solid var(--lt-divider, #EFEBE5); font-size: 14.5px; font-weight: 700; color: var(--lt-primary, #C54343);
}
.lt-header__nav .lt-navherr__todas:hover { color: var(--lt-primary-hover, #B23F3F); }

/* --- Menú móvil (offcanvas) ------------------------------------------------------------------------- */
.lt-navherr-movil__boton {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px 10px;
  border-radius: var(--lt-r-ctl, 10px); list-style: none; cursor: pointer; font-size: 15px; font-weight: 600;
  color: var(--lt-text-2, #5B6472);
}
.lt-navherr-movil__boton::-webkit-details-marker { display: none; }
.lt-navherr-movil__boton:hover { background: var(--lt-surface, #FFFFFF); color: var(--lt-primary, #C54343); }
.lt-navherr-movil__boton:focus-visible { outline: 3px solid var(--lt-primary, #C54343); outline-offset: 0; }
.lt-navherr-movil[open] .lt-navherr__flecha { transform: rotate(180deg); }
.lt-navherr-movil__panel { padding: 2px 0 8px 12px; }
.lt-navherr-movil__grupo-h {
  margin: 8px 0 0 10px; font-family: var(--lt-font-head, 'Space Grotesk', system-ui, sans-serif); font-size: 11.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lt-text-muted, #666D7A);
}
.lt-navherr-movil__lista { gap: 0; margin: 0; padding: 0; list-style: none; }
.lt-offcanvas__nav .lt-navherr-movil__lista a,
.lt-offcanvas__nav .lt-navherr-movil__todas {
  display: flex; align-items: center; min-height: 44px; padding: 8px 10px; font-size: 14.5px; font-weight: 600;
  color: var(--lt-ink, #16202E);
}
.lt-offcanvas__nav .lt-navherr-movil__todas { color: var(--lt-primary, #C54343); font-weight: 700; }

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

/* --- «Herramientas útiles» en landings y fichas ------------------------------------------------------ */
.lt-herr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lt-herr-utiles__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .lt-herr-utiles__lista { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } }
.lt-herr-utiles__item {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 16px 18px;
  border: 1px solid var(--lt-border, #E7E2DA); border-radius: var(--lt-r-md, 14px); background: var(--lt-surface, #FFFFFF);
  transition: border-color .2s, transform .2s;
}
.lt-herr-utiles__item:hover { border-color: var(--lt-ink, #16202E); transform: translateY(-1px); }
.lt-herr-utiles__item:focus-within { outline: 3px solid var(--lt-primary, #C54343); outline-offset: 2px; }
.lt-herr-utiles__icono {
  display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px;
  border-radius: 12px; background: #FBEDEB; color: var(--lt-primary, #C54343);
}
.lt-herr-utiles__icono svg { width: 22px; height: 22px; }
.lt-herr-utiles__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-herr-utiles__enlace, .lt-herr-utiles__enlace:hover {
  font-family: var(--lt-font-head, 'Space Grotesk', system-ui, sans-serif); font-size: 16px; font-weight: 600;
  line-height: 1.3; color: var(--lt-ink, #16202E); text-decoration: none;
}
.lt-herr-utiles__enlace:focus-visible { outline: none; }
.lt-herr-utiles__enlace::after { content: ''; position: absolute; inset: 0; border-radius: var(--lt-r-md, 14px); }
.lt-herr-utiles__texto { font-size: 13.5px; line-height: 1.45; color: var(--lt-text-2, #5B6472); }
.lt-herr-utiles__etiqueta {
  flex: none; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #E3EFE7;
  font-size: 12px; font-weight: 700; color: #1F5B3A;
}
@media (prefers-reduced-motion: reduce) { .lt-herr-utiles__item { transition: none; } .lt-herr-utiles__item:hover { transform: none; } }
.lt-herr-utiles--ficha { margin: 32px 0 8px; padding: 0; }
.lt-navherr__todas > span, .lt-navherr-movil__todas > span { margin-left: .35em; }

/* Tableta (769–1079 px): la fila de escritorio no cabe con «Herramientas» (los enlaces partían en dos líneas).
   Ahí el menú va a la hamburguesa, que ya lo lleva (_menu_movil.html), y los enlaces no parten. */
@media (min-width: 769px) and (max-width: 1079.98px) {
  .lt-header .lt-navherr { display: none; }
  .lt-header button.lt-header__burger { display: flex; }
  .lt-header__nav a { white-space: nowrap; }
}
/* Por debajo de 900 px ni siquiera caben los tres enlaces junto al CTA: la cabecera es la del móvil. */
@media (min-width: 769px) and (max-width: 899.98px) {
  .lt-header .lt-header__nav { display: none; }
}