/* Flujos de aprobación: cuello de botella y responsable (docs/flujos-aprobacion.md), prefijo fcu-.
   «⏳ Lo tiene…» en la solicitud y en las tarjetas, y el «🐢 ¿Dónde se atasca?» del tablero.
   Reglas de la casa: colores SÓLIDOS (sin degradados), pastel, todo con las variables del tema (el
   modo oscuro viene solo); el color siempre va con palabras. */

.fcu-solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fcu-sin-tomar { font-size: 1.05rem; line-height: 1; }

/* ---------- Quién lo tiene (página de la solicitud) ---------- */
.fcu-responsable {
  display: flex; align-items: flex-start; gap: .8rem; border-radius: var(--radius-sm); padding: .75rem .9rem; margin: 0 0 1rem;
  border: 2px solid transparent;
}
.fcu-verde { background: var(--color-success-bg); color: var(--color-success-tinta); border-color: var(--color-success); }
.fcu-amarillo { background: var(--color-warning-bg); color: var(--color-warning-tinta); border-color: var(--color-warning); }
.fcu-rojo { background: var(--color-danger-bg); color: var(--color-danger-tinta); border-color: var(--color-danger); }
.fcu-devuelta { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info); }
.fcu-responsable-cara {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-surface); display: inline-flex;
  align-items: center; justify-content: center; box-shadow: var(--elev-1); overflow: hidden;
}
.fcu-responsable-icono { font-size: 1.5rem; line-height: 1; }
.fcu-responsable-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.fcu-responsable-frase { font-size: 1.05rem; line-height: 1.3; text-wrap: pretty; }
.fcu-responsable-estado { font-weight: 600; }
.fcu-como-se-mide { color: var(--color-text-muted); text-wrap: pretty; }

/* La barra: de 0 al doble de lo normal; la rayita del medio es lo normal. */
.fcu-barra {
  position: relative; display: block; height: .7rem; border-radius: 999px; background: var(--color-surface);
  border: 1px solid var(--color-border); overflow: hidden; max-width: 28rem;
}
.fcu-barra-lleno {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: currentColor;
  transition: width 400ms var(--ease-out, ease-out);
}
.fcu-barra-normal { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: var(--color-text); }
.fcu-barra-leyenda { display: flex; justify-content: space-between; max-width: 28rem; font-size: .74rem; color: var(--color-text-muted); }

/* ---------- 🐢 ¿Dónde se atasca? (tablero del flujo) ---------- */
.fcu-cuello {
  background: var(--color-danger-bg); color: var(--color-danger-tinta); border: 2px solid var(--color-danger);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1rem; box-shadow: 0 4px 0 var(--color-danger);
}
.fcu-cuello p { margin: 0; }
.fcu-cuello-frase { font-size: 1.15rem; font-weight: 800; line-height: 1.3; text-wrap: pretty; }
.fcu-cuello-detalle { margin-top: .35rem !important; text-wrap: pretty; }
.fcu-cuello-quienes { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem !important; }
.fcu-cuello-quienes > span:first-child { font-weight: 700; }
/* Sobre el fondo rojo del cuello, las fichas van en blanco con su borde: si no, la roja no se ve. */
.fcu-cuello-quienes .flu-reloj { background: var(--color-surface); border: 1px solid currentColor; }
.fcu-sin-cuello {
  background: var(--color-success-bg); color: var(--color-success-tinta); border-radius: var(--radius-sm);
  padding: .7rem .9rem; margin: 0 0 1rem; font-weight: 600; text-wrap: pretty;
}

.fcu-columnas { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1000px) { .fcu-columnas { grid-template-columns: 1fr 1fr; } }
.fcu-caja { padding: 1rem 1.1rem; min-width: 0; }
.fcu-subtitulo { font-size: 1.05rem; margin: 0 0 .3rem; }
.fcu-nadie { margin: 0; font-weight: 600; color: var(--color-success-tinta); }

.fcu-pasados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.fcu-pasado { display: flex; gap: .65rem; align-items: flex-start; padding-bottom: .7rem; border-bottom: 1px solid var(--color-border); }
.fcu-pasado:last-child { border-bottom: 0; padding-bottom: 0; }
.fcu-pasado-cara {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--color-surface-2);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.fcu-pasado-texto { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fcu-pasado-resumen { color: var(--color-text-muted); font-size: .9rem; }
.fcu-pasado-lista { display: flex; flex-wrap: wrap; gap: .35rem; }
.fcu-pasado-lista .flu-reloj { display: inline-block; white-space: normal; text-decoration: none; line-height: 1.35; padding: .1rem .55rem; }

.fcu-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; counter-reset: fcu; }
.fcu-paso { display: flex; flex-direction: column; gap: .3rem; }
.fcu-paso-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.fcu-paso-depto { color: var(--color-text-muted); font-size: .85rem; }
.fcu-paso-datos { font-size: .88rem; color: var(--color-text-muted); }
.fcu-paso-datos strong { color: var(--color-text); }
.fcu-paso-pocos { opacity: .75; }
.fcu-paso .fcu-barra { max-width: none; }
.fcu-lleno-verde { background: var(--color-success); }
.fcu-lleno-amarillo { background: var(--color-warning); }
.fcu-lleno-rojo { background: var(--color-danger); }
.fcu-paso-datos .fcu-texto-rojo { color: var(--color-danger-tinta); }
.fcu-paso-datos .fcu-texto-amarillo { color: var(--color-warning-tinta); }
.fcu-paso-datos .fcu-texto-verde { color: var(--color-success-tinta); }

@media (max-width: 560px) {
  .fcu-responsable { padding: .65rem .7rem; gap: .6rem; }
  .fcu-responsable-cara { width: 2.5rem; height: 2.5rem; }
  .fcu-cuello { padding: .8rem .85rem; }
  .fcu-cuello-frase { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fcu-barra-lleno { transition: none; }
}