/* GOV-SITIO-09: paginas por integracion. Reusa rubros.css (bloques, tarjetas,
   preguntas, tiles) y solo agrega el diagrama de ida y vuelta: dos carriles con
   SUSBI OS en el medio. */

.public-integracion__flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(0.75rem, 2vw, 1.5rem); align-items: stretch; }
.public-integracion__lane { display: flex; flex-direction: column; min-width: 0; padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--public-border); border-radius: var(--public-radius-xl); background: rgba(7, 23, 38, 0.6); }
.public-integracion__lane .public-rubro__label { display: flex; align-items: center; gap: 0.45rem; }
.public-integracion__lane .public-rubro__label iconify-icon { font-size: 1rem; }
.public-integracion__items { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.public-integracion__item { display: grid; gap: 0.2rem; padding: 0.85rem 1rem; border: 1px solid var(--public-border); border-radius: var(--public-radius); background: rgba(11, 32, 51, 0.72); }
.public-integracion__item strong { font-family: var(--public-font-title); letter-spacing: -0.01em; }
.public-integracion__item small { color: var(--public-muted); font-size: 0.9rem; line-height: 1.45; }
.public-integracion__item em { justify-self: start; margin-top: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(0, 229, 255, 0.1); color: var(--public-accent); font-size: 0.74rem; font-style: normal; font-weight: 700; }
.public-integracion__item--vacio { border-style: dashed; background: transparent; }

.public-integracion__hub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; }
.public-integracion__hub strong { padding: 0.55rem 0.9rem; border: 1px solid rgba(0, 229, 255, 0.45); border-radius: 999px; background: rgba(0, 229, 255, 0.12); color: var(--public-text); font: 800 0.85rem var(--public-font-title); white-space: nowrap; box-shadow: 0 0 2rem rgba(0, 229, 255, 0.18); }
.public-integracion__hub span { flex: 1; width: 1px; min-height: 2rem; background: linear-gradient(to bottom, transparent, var(--public-signal), transparent); }

.public-integracion__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; max-width: 62ch; margin: 1rem 0 0; color: var(--public-muted); font-size: 0.9rem; }
.public-integracion__estado strong { padding: 0.2rem 0.65rem; border: 1px solid rgba(74, 222, 128, 0.45); border-radius: 999px; background: rgba(74, 222, 128, 0.12); color: #86efac; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.public-integracion__estado[data-estado="beta"] strong { border-color: rgba(255, 196, 102, 0.5); background: rgba(255, 196, 102, 0.12); color: #ffc466; }

.public-integracion__limite { border-color: rgba(255, 196, 102, 0.22); }
.public-integracion__limite h3::before { content: "—"; margin-right: 0.4rem; color: #ffc466; }
.public-integracion__rubros-label { margin-top: 1.25rem; }

@media (max-width: 860px) {
  .public-integracion__flow { grid-template-columns: 1fr; }
  .public-integracion__hub { flex-direction: row; }
  .public-integracion__hub span { width: auto; min-height: 1px; height: 1px; background: linear-gradient(to right, transparent, var(--public-signal), transparent); }
}