/* Figura "Qué pasa después de darle enviar" — /aforeweb (sb_fig_flujo_localizador).
 *
 * Arquetipo: FLUJO. Tres pasos en secuencia y una bifurcación final. El armazón lo pone
 * figuras.css (.figh__pasos/.figh__paso para la línea de tiempo, .figh__duo para los dos
 * finales, .figh__t/.figh__st/.figh__pie para los textos de marco); acá sólo va lo que esta
 * figura tiene y ninguna otra: el rótulo "PASO N" en el color del paso, el rótulo de la
 * bifurcación y las dos cajas de desenlace con fondo de estado.
 *
 * Todo lo que cambia de color por paso viaja en --fc, que el PHP fija en el style del <li>: es
 * dato de la figura, no del tema, igual que --gc en .arbol y --fc en .figh__caja--acento.
 */

/* ── Los tres pasos ────────────────────────────────────────────────────────────────────────── */

/* El disco numerado hereda el color del paso. El de figuras.css es azul fijo, pero acá el color
   ES información: distingue el trámite (azul) de la pantalla que engaña (ámbar) y del correo que
   resuelve (verde). Lo mismo que hacía el filete de 5px arriba de cada caja del SVG.
   Va con .flo delante porque .figh__n pinta el fondo con la misma especificidad: sin el ancestro
   quedaría dependiendo del orden de carga de las hojas. */
.flo .flo__n{background:var(--fc,var(--brand))}

/* El rail que une los pasos también se tiñe: arranca en el color del paso y se apaga hacia el
   siguiente, que es lo que insinuaban las flechas del dibujo. */
.flo .flo__paso::before{background:linear-gradient(to bottom,var(--fc,var(--border)),var(--border))}

/* .figh__paso es una rejilla de dos columnas (disco | contenido); el cuerpo es UN solo hijo para
   que el h4 y el p no se vuelvan celdas sueltas de esa rejilla. */
.flo__cuerpo{min-width:0}

/* "PASO 1", "PASO 2"… En el SVG era un <text> de 10,5px con letter-spacing en el color del paso.
   Es un rótulo, no un título: por eso no compite con el h4 de abajo. */
.flo__eyebrow{display:block;margin:0 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fc,var(--brand))}

/* ── La bifurcación ────────────────────────────────────────────────────────────────────────── */

/* El SVG dibujaba dos flechas que bajaban del paso 3 y se abrían. Acá el mismo mensaje lo da un
   rótulo centrado con dos filetes al costado: no hay coordenadas que recalcular cuando el texto
   envuelve, y a 320px sigue siendo una línea. Los filetes son ::before/::after —decoración pura,
   sin marcado— y el rótulo es texto de verdad porque nombra lo que pasa. */
.flo__bifurca{display:flex;align-items:center;gap:12px;margin:16px 0 12px;font-size:11.5px;
  font-weight:700;color:var(--muted)}
.flo__bifurca::before,.flo__bifurca::after{content:"";flex:1;height:2px;border-radius:1px;
  background:var(--border);min-width:14px}

/* ── Los dos finales ───────────────────────────────────────────────────────────────────────── */

/* Mismas cajas que el SVG pintaba con fill/stroke de estado, ahora con los tokens del tema. El
   borde de 1,8px del original se redondea a 2px, que es lo que el navegador puede pintar limpio.
   El color de fondo lo pone cada modificador; el layout es común. */
.flo__fin{border:2px solid var(--border);border-radius:12px;padding:14px 16px;
  background:var(--surface-alt)}
.flo__fin h4{margin:0 0 6px;font-size:13.5px;font-weight:800;line-height:1.3}
.flo__fin p{margin:0 0 4px;font-size:13px;line-height:1.5;color:var(--soft)}
.flo__fin p:last-child{margin-bottom:0}
/* ⚠️ El strong{color:var(--brand-d)} de app.css:100 es global y pinta de azul de marca cualquier
   negrita, incluida la que va sobre un fondo de estado. Acá el énfasis tiene que seguir al color
   de su párrafo, no al del tema: dos clases le ganan de sobra al selector de elemento. */
.flo__fin p strong{color:inherit}

.flo__fin--ok{border-color:var(--ok);background:var(--ok-bg)}
.flo__fin--ok h4{color:var(--ok)}

.flo__fin--warn{border-color:var(--warn);background:var(--warn-bg)}
.flo__fin--warn h4{color:var(--warn)}

/* El único renglón rojo de la figura: la advertencia que evita quemar la consulta del día. Era
   el único <text> con fill var(--danger) del SVG y sigue siendo el único acento de alarma.
   Doble clase para ganarle a `.flo__fin p{color:var(--soft)}` de arriba. */
.flo__fin .flo__ojo{margin-top:8px;font-size:12px;font-weight:700;color:var(--danger)}

/* El teléfono de SARTEL es accionable en el celular, que es donde se lee esta página. El
   subrayado se mantiene: es un enlace y tiene que parecerlo. */
.flo__fin a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}

@media (max-width:720px){
  .flo__fin{padding:13px 14px}
}