/*
 * Sistema compartido móvil: carruseles horizontales nativos y botón flotante
 * de contacto institucional. Sólo tokens ya aprobados (tinta / blanco / rojo).
 *
 * Los carruseles funcionan sin JavaScript: la regla `:has()` activa la pista
 * cuando la colección tiene 3 o más tarjetas. El script sólo agrega controles
 * y recuenta después de los filtros (data-rail="off" vuelve al layout normal).
 */

:root {
  --fa-rail-gap: 14px;
  --fa-rail-card: 85%;
  --fa-rail-pad: 20px;
  --fa-fab-offset: 0px;
}

@media (max-width: 767px) {
  .home-analysis-list:has(> article:nth-child(3)):not([data-rail="off"]),
  .crit-cards:has(> .crit-card:nth-child(3)):not([data-rail="off"]),
  ol.inf-rows:has(> li:nth-child(3)):not([data-rail="off"]),
  .authority-reading-list:has(> li:nth-child(3)):not([data-rail="off"]),
  .institutional-paths:has(> li:nth-child(3)):not([data-rail="off"]),
  .next-step-grid:has(> :nth-child(3)):not([data-rail="off"]),
  [data-rail="on"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: var(--fa-rail-gap) !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--fa-rail-pad);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .home-analysis-list:has(> article:nth-child(3)):not([data-rail="off"])::-webkit-scrollbar,
  .crit-cards:has(> .crit-card:nth-child(3)):not([data-rail="off"])::-webkit-scrollbar,
  ol.inf-rows:has(> li:nth-child(3)):not([data-rail="off"])::-webkit-scrollbar,
  .authority-reading-list:has(> li:nth-child(3)):not([data-rail="off"])::-webkit-scrollbar,
  .institutional-paths:has(> li:nth-child(3)):not([data-rail="off"])::-webkit-scrollbar,
  .next-step-grid:has(> :nth-child(3)):not([data-rail="off"])::-webkit-scrollbar,
  [data-rail="on"]::-webkit-scrollbar {
    display: none;
  }

  .home-analysis-list:has(> article:nth-child(3)):not([data-rail="off"]) > article,
  .crit-cards:has(> .crit-card:nth-child(3)):not([data-rail="off"]) > .crit-card,
  ol.inf-rows:has(> li:nth-child(3)):not([data-rail="off"]) > li,
  .authority-reading-list:has(> li:nth-child(3)):not([data-rail="off"]) > li,
  .institutional-paths:has(> li:nth-child(3)):not([data-rail="off"]) > li,
  .next-step-grid:has(> :nth-child(3)):not([data-rail="off"]) > *,
  [data-rail="on"] > * {
    flex: 0 0 var(--fa-rail-card) !important;
    min-width: 0 !important;
    max-width: var(--fa-rail-card) !important;
    scroll-snap-align: start;
  }

  /* Prensa: agrupación de artículos (la fotografía queda fuera de la fila).
     El contenedor lo crea el script; sin JS los artículos siguen apilados y
     legibles tal como los sirve el servidor. */
  .press-focus__layout > .fa-rail-group {
    grid-column: 1 / -1;
    width: 100%;
  }
  .fa-rail-group[data-rail="off"] {
    display: grid;
    gap: var(--fa-rail-gap);
  }

  /* Menos de 3 tarjetas visibles tras filtrar: vuelve el layout original
     (las reglas de pista se desactivan con :not([data-rail="off"])). */

  .fa-rail-ctl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }
  .fa-rail-ctl[hidden] {
    display: none;
  }
  .fa-rail-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 999px;
    font: inherit;
    line-height: 1;
    cursor: pointer;
  }
  .fa-rail-btn[disabled] {
    opacity: 0.35;
    cursor: default;
  }
  .fa-rail-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
  .fa-rail-count {
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0.8;
  }

  /* Pulido móvil mínimo: sin desbordes ni anchos heredados. */
  .crit-card,
  .next-step-card,
  .home-analysis-list > article {
    min-width: 0;
  }
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-rail="on"],
  .home-analysis-list,
  .crit-cards,
  ol.inf-rows,
  .authority-reading-list,
  .institutional-paths,
  .next-step-grid {
    scroll-behavior: auto !important;
  }
}

/* ---------- Botón flotante de contacto institucional ---------- */

.fa-wa-fab {
  position: fixed;
  z-index: 60;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--fa-fab-offset));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--gc-tinta, #07101c);
  color: var(--gc-papel, #ffffff);
  border: 1px solid var(--gc-rojo-accion, #b01018);
  box-shadow: 0 10px 28px rgba(7, 16, 28, 0.28);
  font: 600 0.82rem/1.2 var(--sans, system-ui, sans-serif);
  text-decoration: none;
}

.fa-wa-fab svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--gc-rojo-marca, #d6000c);
}

.fa-wa-fab:hover {
  background: var(--gc-rojo-accion, #b01018);
  border-color: var(--gc-rojo-accion, #b01018);
}

.fa-wa-fab:hover svg {
  color: var(--gc-papel, #ffffff);
}

.fa-wa-fab:focus-visible {
  outline: 3px solid var(--gc-rojo-marca, #d6000c);
  outline-offset: 3px;
}

/* Oculto e infocalizable detrás de menú, diálogo, video o teclado. */
.fa-wa-fab[hidden],
body.nav-open .fa-wa-fab,
body.fa-fab-suppressed .fa-wa-fab {
  display: none !important;
}

@media (max-width: 767px) {
  .fa-wa-fab {
    font-size: 0.78rem;
    padding: 11px 16px;
  }
}