/* umivale/listado-faqs — réplica del hub /preguntas-frecuentes, medido con
   DevTools contra producción: el `.container` real (1170px) que envuelve
   buscador+fila vive CENTRADO (margin:auto) dentro de una sección más ancha
   — acá replicamos ese mismo ancho/centrado dentro de `.card-flotante`
   (mismo criterio ya usado en `.faq-row` de single-faq.php). padding:0
   cancela el constrained-layout genérico de Gutenberg (`.page__content > *
   { padding:0 1.5rem; max-width:1024px }`, style.css raíz) que agarra a
   `.umivale-lf` por ser hijo directo de `.page__content` — mismo gotcha de
   especificidad/orden-de-carga ya resuelto para `.faq-row`: selector
   compuesto para ganarle a style.css, que se encola después. */
.card-flotante .page__content > .umivale-lf {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

/* Medido contra producción: fila total 570×77px (input+botón), margin-bottom
   25px. El input queda en su propio wrapper con border-bottom (réplica del
   Material `form-group.is-empty`); el botón (círculo naranja, 46.7×47.1px,
   padding:15px) NO comparte ese borde — es un hermano flex aparte, alineado
   al fondo del input. */
.umivale-lf__search {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: 570px;
  /* medido: 40px desde el breadcrumb. Nota: el margin-top de este elemento
     colapsa con el margin-bottom de .breadcrumbs (no hay padding/borde de
     por medio en .umivale-lf) — el resultado final es el MAYOR de los dos,
     no la suma, por eso el valor acá es el target absoluto (40), no un
     delta sobre el gap que hubiera sin este margin. */
  margin: 40px 0 25px;
}
.umivale-lf__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.umivale-lf__search-input-wrap {
  /* ancho fijo (medido: 500.28px), NO flex:1 — no debe correrse al agrandar
     el botón de al lado (regresión de un fix anterior). */
  flex: 0 0 500px;
  width: 500px;
  border-bottom: 1px solid #d0d9e8;
  padding-bottom: 7px;
}
.umivale-lf__search-input {
  width: 100%;
  border: 0;
  font-size: 14px;
  color: #3C4858;
  background: transparent;
}
.umivale-lf__search-btn {
  flex-shrink: 0;
  width: 46.7px;
  height: 47.1px;
  border-radius: 50%;
  border: 0;
  padding: 15px;
  background: var(--uv-naranja);
  /* Cliente (feedback visual, 2026-09-17): "el icono de la lupa debe ser
     blanco" -- confirmado en vivo, color(#fff) real de producción. Revierte
     el Fix 9 (#120, contraste 3.11:1 -> 5.75:1 con #171717): 3.11:1 sigue
     pasando el mínimo WCAG 1.4.11 (3:1, no-texto) y el cliente pidió
     replicar el original explícitamente. */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}
.umivale-lf__search-btn .fa { font-size: 18px; }
.umivale-lf__search-btn:hover { background: color-mix(in srgb, var(--uv-naranja) 89.6%, black); }

.umivale-lf__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.umivale-lf__nav {
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
  padding-right: 15px;
  display: flex;
  flex-direction: column;
}
.umivale-lf__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  color: #3C4858;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 4px;
}
.umivale-lf__nav-link:hover { background: color-mix(in srgb, var(--uv-azul) 6%, transparent); }
.umivale-lf__nav-link.is-active { font-weight: 700; }
/* Chevron dibujado en CSS puro (border+rotate) — Material Icons no está
   cargada en el tema, mismo criterio ya usado en listado-articulos/style.css
   para la flecha de "Ver más entradas". */
.umivale-lf__nav-arrow {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.umivale-lf__list {
  flex: 0 0 75%;
  max-width: 75%;
  box-sizing: border-box;
  padding-left: 15px;
}
/* Medido contra producción (DevTools, div.card-header...): 847.5×55px,
   background #FFFFFF, padding:15px 10px, font 16px Lato sans-serif (base
   del card-header — el link de adentro pisa color/tamaño/peso, ver abajo). */
.umivale-lf__card {
  margin-top: 15px;
  padding: 15px 10px;
  background: var(--uv-blanco);
  font: 16px/1.5 var(--wp--preset--font-family--lato, 'Lato', sans-serif);
  box-sizing: border-box;
}
.umivale-lf__card:first-child { margin-top: 0; }
.umivale-lf__card-link {
  display: block;
  color: var(--uv-azul);
  font-size: var(--uv-subtitulo-xs);
  font-weight: var(--uv-peso-bold);
  line-height: var(--uv-subtitulo-xs-line-height);
  text-decoration: none;
}
.umivale-lf__card-link:hover { text-decoration: underline; }
.umivale-lf__empty { color: #3C4858; }

@media (max-width: 768px) {
  .umivale-lf__nav {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 24px;
  }
  .umivale-lf__list {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
  }
}