/* DIAGRAMA DE FLUJO DE GOLAZO (componente <x-golazo.flujo />) ------------------------------------
   Autónomo: no depende del tema del panel ni del sitio público. Colores del logo. */

.flujo-golazo {
  --fg-tinta: #1e1222; --fg-rojo: #e30613; --fg-verde: #138a52; --fg-borde: #e3e3e8; --fg-gris: #5f6168;
  display: flex; flex-direction: column; align-items: stretch; gap: .25rem;
  font-size: .9rem; color: #1e1c22;
}

.flujo-etapa { background: #fff; border: 1px solid var(--fg-borde); border-top: 4px solid var(--fg-color); border-radius: .75rem; padding: .9rem; box-shadow: 0 .25rem .75rem rgba(30, 18, 34, .06); }
.flujo-tinta { --fg-color: var(--fg-tinta); }
.flujo-rojo  { --fg-color: var(--fg-rojo); }
.flujo-verde { --fg-color: var(--fg-verde); }

.flujo-etapa-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-bottom: .75rem; font-weight: 700; font-size: 1rem; color: var(--fg-tinta); }
.flujo-etapa-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--fg-color); color: #fff; font-size: .85rem; }
.flujo-repite { margin-left: auto; padding: .1rem .5rem; border-radius: 50rem; background: rgba(227, 6, 19, .1); color: #a00016; font-size: .72rem; font-weight: 700; }

.flujo-paso { display: flex; gap: .6rem; align-items: flex-start; }
.flujo-icono { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: color-mix(in srgb, var(--fg-color) 12%, #fff); color: var(--fg-color); font-size: 1.1rem; }
.flujo-paso-titulo { font-weight: 700; line-height: 1.25; }
.flujo-paso-detalle { color: var(--fg-gris); font-size: .82rem; line-height: 1.4; }
.flujo-quien { display: inline-block; margin-top: .2rem; padding: .05rem .45rem; border-radius: 50rem; border: 1px solid var(--fg-borde); background: #f5f5f7; font-size: .7rem; font-weight: 600; color: var(--fg-tinta); }

.flujo-flecha-corta { padding: .15rem 0 .15rem .65rem; color: #b4b5bb; line-height: 1; }

.flujo-automatico { margin-top: .8rem; padding: .6rem .7rem; border: 1px dashed var(--fg-verde); border-radius: .6rem; background: rgba(19, 138, 82, .06); }
.flujo-automatico-titulo { font-weight: 700; color: var(--fg-verde); font-size: .82rem; }
.flujo-automatico ul { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: #1e1c22; }

.flujo-conector { display: grid; place-items: center; color: var(--fg-rojo); font-size: 1.4rem; line-height: 1; padding: .1rem 0; }
.flujo-conector .flujo-der { display: none; }

/* computadora: las 4 etapas de izquierda a derecha */
@media (min-width: 992px) {
  .flujo-golazo { flex-direction: row; align-items: stretch; gap: .35rem; }
  .flujo-etapa { flex: 1 1 0; min-width: 0; }
  .flujo-conector { align-self: center; }
  .flujo-conector .flujo-der { display: inline; }
  .flujo-conector .flujo-abajo { display: none; }
}