/* Flow-Bi · Web de Analista (A-14), pieza F — páginas de producto alineadas.

   Sólo disposición, con los tokens que ya existen (--muted, --line, --surface,
   --ink, --accent): ningún color nuevo. Los estados "próximo" de integraciones.html
   reutilizan `.plan-locked` y `.plan-status`, ya definidos en oferta.css (esa
   página los enlaza además de esta hoja) — acá sólo se agrega lo que ninguna
   de las dos cubre: la ficha plegable de compatibilidad de cada integración
   certificada, el tamaño del "(próximamente)" dentro de un <h2>, y la grilla
   de los dos ejemplos nuevos de Flor (uno con evidencia, uno de información
   insuficiente). Ver INVENTARIO-COMPONENTES.md, E1 y E3. */

/* El nombre certificado sigue en <h2> (mismo nivel que Shopify/Tiendanube/
   Meta, sin salto de jerarquía); el estado va en un <small> más chico y
   apagado, dentro del MISMO <h2> — necesario para que el guard de "próximos"
   lea el marcador en la misma unidad de texto que el nombre del proveedor. */
.integration-entry h2 small {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
}

/* Ficha plegable de compatibilidad, dentro de cada integration-entry. */
.integration-detail {
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 4px;
}

.integration-detail summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
}

.integration-detail dl {
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}

.integration-detail dt {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.integration-detail dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink);
}

.integration-detail .text-link {
  margin-top: 14px;
}

/* Los dos ejemplos nuevos de Flor (evidencia / información insuficiente),
   lado a lado en escritorio, apilados en móvil. */
.flor-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

@media (max-width: 760px) {
  .flor-examples {
    grid-template-columns: 1fr;
  }

  /* m1 (revisión de diseño 21-sep): `.conversation` trae `width:420px` fijo
     de styles.css (pensado para el escritorio de /home) y desborda a 320.
     `min-width:0` es necesario porque el item de grid, si no, no encoge por
     debajo del contenido intrínseco. La píldora del ejemplo lleva
     `white-space:nowrap` en la base: acá se permite el salto de línea. */
  .flor-examples .conversation {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none;
  }

  .flor-examples .conversation-head {
    flex-wrap: wrap;
  }

  .flor-examples .conversation-head .pill {
    white-space: normal;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .integration-detail summary {
    transition: none;
  }
}