/* Flujos de aprobación (docs/flujos-aprobacion.md), prefijo flu-: la portada «Proyectos y flujos»,
   el catálogo («¿Qué necesitas pedir?»), las tarjetas de nivel, el camino de una solicitud como el
   mapa de un videojuego, el diseñador, el calendario y el tablero.
   Reglas de la casa: colores SÓLIDOS (sin degradados), cielo azul y pastel, todo con las variables
   del tema (el modo oscuro viene solo).
   Movimiento (docs/flujos-aprobacion.md, «Cómo se mueve»): solo transform y opacity.
   - Entradas: 280 ms con --ease-out desde 10 px y 97 % (nunca desde la nada), 40 ms de escalón (--i ≤ 10).
   - Tocar: se hunde (scale .97 / 3 px) en 120 ms; pasar el ratón: sube 3 px con un rebote corto
     (--flu-rebote, solo con ratón).
   - El camino: los tramos ya recorridos se rellenan uno tras otro (110 ms de escalón); en el último
     el personaje camina 720 ms con --ease-in-out moviendo las piernas en tres cuadros. Es el único
     momento largo y es raro: al abrir una solicitud o al avanzar.
   - Bucles (la estación actual que late, el personaje que respira, el ruedo de «cargando»): se
     detienen fuera de vista y con la pestaña escondida (.flu-quieta, js/flujos.js).
   - Con prefers-reduced-motion nada se mueve de sitio: lo que entra solo aparece (opacidad) y las
     transiciones entre pantallas son instantáneas. */

:root {
  /* Rebote corto (easeOutBack de easings.net): solo en lo pequeño que se celebra o se toca. */
  --flu-rebote: cubic-bezier(.34, 1.56, .64, 1);
  /* El escalón del camino: cada tramo empieza 110 ms después del anterior. */
  --flu-escalon: 110ms;
  /* Sombra sólida «de caramelo» bajo botones y tarjetas (sin degradados). */
  --flu-sombra-solida: rgba(15, 23, 42, .22);
}

/* ---------- Colores de cada flujo (los pastel de la casa) ---------- */
.flu-color-azul { --flu-c: var(--sec-clima); --flu-bg: var(--sec-clima-bg); }
.flu-color-amarillo { --flu-c: var(--nota-tinta); --flu-bg: var(--nota); }
.flu-color-verde { --flu-c: var(--color-success-tinta); --flu-bg: var(--color-success-bg); }
.flu-color-lila { --flu-c: var(--sec-plataforma); --flu-bg: var(--sec-plataforma-bg); }
.flu-color-turquesa { --flu-c: var(--sec-supervision); --flu-bg: var(--sec-supervision-bg); }
.flu-color-naranja { --flu-c: var(--sec-rrhh); --flu-bg: var(--sec-rrhh-bg); }

/* ---------- Comunes ---------- */
.flu-para-que { color: var(--color-text-muted); max-width: 75ch; margin: 0 0 .9rem; text-wrap: pretty; }
.flu-seccion { margin: 0 0 1.5rem; }
.flu-seccion-titulo { font-size: 1.2rem; margin: 1.5rem 0 .4rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.card .flu-seccion-titulo:first-child, .flu-seccion > .flu-seccion-titulo:first-child { margin-top: 0; }
.flu-contador {
  display: inline-flex; min-width: 1.8rem; height: 1.8rem; align-items: center; justify-content: center; padding: 0 .45rem;
  border-radius: 999px; background: var(--color-danger); color: var(--color-sobre-relleno); font-size: .95rem; font-variant-numeric: tabular-nums;
  animation: flu-pop 360ms var(--flu-rebote) both; animation-delay: 120ms;
}
.flu-chip {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .6rem; font-size: .84rem; font-weight: 600;
  background: var(--flu-bg, var(--color-surface-2)); color: var(--flu-c, var(--color-text)); text-decoration: none; white-space: nowrap;
}
a.flu-chip { transition: transform var(--dur-1) var(--ease-out); }
a.flu-chip:active { transform: scale(.97); }
.flu-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.flu-chip-grande { font-size: 1rem; padding: .35rem .9rem; }
.flu-estado-encurso { background: var(--color-info-bg); color: var(--color-info); }
.flu-estado-devueltaalsolicitante { background: var(--color-warning-bg); color: var(--color-warning-tinta); }
.flu-estado-completada { background: var(--color-success-bg); color: var(--color-success-tinta); }
.flu-estado-rechazada { background: var(--color-danger-bg); color: var(--color-danger-tinta); }
.flu-estado-cancelada { background: var(--color-surface-2); color: var(--color-text-soft); }
.flu-texto-rojo { color: var(--color-danger-tinta); font-weight: 600; }
.flu-texto-verde { color: var(--color-success-tinta); }
.flu-flecha { color: var(--color-text-soft); }
.flu-migas { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

.flu-reloj { display: inline-flex; align-items: center; gap: .2rem; border-radius: 999px; padding: .05rem .5rem; font-size: .8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flu-reloj small { font-weight: 500; }
.flu-reloj-verde { background: var(--color-success-bg); color: var(--color-success-tinta); }
.flu-reloj-amarillo { background: var(--color-warning-bg); color: var(--color-warning-tinta); }
.flu-reloj-rojo { background: var(--color-danger-bg); color: var(--color-danger-tinta); }

/* ---------- Piezas genéricas para los componentes de cualquier pantalla de flujos ----------
   (quién lo tiene, el cuello de botella, el calendario): el semáforo de tiempo, el chip «Lo tiene»,
   la barra que se llena y la entrada con rebote. Así todos se ven y se mueven igual. */
.flu-tono-verde { background: var(--color-success-bg); color: var(--color-success-tinta); }
.flu-tono-amarillo { background: var(--color-warning-bg); color: var(--color-warning-tinta); }
.flu-tono-rojo { background: var(--color-danger-bg); color: var(--color-danger-tinta); }
.flu-borde-verde { box-shadow: inset 4px 0 0 var(--color-success); }
.flu-borde-amarillo { box-shadow: inset 4px 0 0 var(--color-warning); }
.flu-borde-rojo { box-shadow: inset 4px 0 0 var(--color-danger); }
/* «⏳ Lo tiene: Ana Pérez (Caja) · 3 h»: el personaje, el nombre y el reloj en una sola píldora. */
.flu-chip-lotiene {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .2rem .7rem .2rem .25rem; max-width: 100%;
  background: var(--color-surface); border: 2px solid var(--color-border); font-weight: 700; font-size: .9rem; min-width: 0;
}
.flu-chip-lotiene > span:not(.flu-reloj) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.flu-chip-lotiene .of-avatar { flex: 0 0 auto; }
.flu-chip-lotiene.flu-tono-verde { border-color: var(--color-success); }
.flu-chip-lotiene.flu-tono-amarillo { border-color: var(--color-warning); }
.flu-chip-lotiene.flu-tono-rojo { border-color: var(--color-danger); }
/* Barra que se llena al aparecer: el ancho va en --p (0 a 1) y se anima con transform, no con width. */
.flu-barra { position: relative; height: 12px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); overflow: hidden; }
.flu-barra-relleno {
  position: absolute; inset: 0; border-radius: inherit; background: var(--flu-barra-color, var(--color-primary));
  transform-origin: left center; transform: scaleX(var(--p, 0)); animation: flu-barra 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms);
}
.flu-barra-relleno.flu-tono-verde { --flu-barra-color: var(--color-success); }
.flu-barra-relleno.flu-tono-amarillo { --flu-barra-color: var(--color-warning); }
.flu-barra-relleno.flu-tono-rojo { --flu-barra-color: var(--color-danger); }
@keyframes flu-barra { from { transform: scaleX(0); } }
/* Lo que pide atención (el culpable del cuello de botella, lo vencido): un latido corto, una sola vez. */
.flu-atencion { animation: flu-atencion 900ms var(--ease-out) 1 both; animation-delay: 400ms; }
@keyframes flu-atencion { 0%, 100% { transform: none; } 30% { transform: scale(1.04); } 60% { transform: scale(.99); } }
/* Aparecer con un rebote corto (insignias, contadores, «¡logrado!»). */
.flu-pop { animation: flu-pop 360ms var(--flu-rebote) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes flu-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* Entradas: desde 10 px y 97 %, nunca desde la nada. Escalón de 40 ms con tope (--i ≤ 10). */
.flu-entra, .flu-mundo, .flu-nivel { animation: flu-aparecer 280ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes flu-aparecer { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
/* Cifras que suben (js/flujos.js, contar): números de ancho fijo para que no bailen. */
[data-contar] { font-variant-numeric: tabular-nums; }

/* ---------- Portada ---------- */
.flu-hub-cabeza h1 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
/* Pestañas de la portada: botones de juego, uno por cosa, cada uno con su color pastel SÓLIDO
   (fondo suave en reposo, más intenso al estar activo) y su reborde inferior grueso del mismo tono
   más oscuro, como los botones caramelo de los «mundos». La activa queda hundida y pegada al panel,
   que toma su color en el borde de arriba. En el teléfono la fila es un carrusel que se desliza de
   lado (la activa se trae a la vista, js/flujos.js verPestana); «Crear» va a la derecha con su «+».
   Los tonos salen de las variables del tema: el modo oscuro viene solo. */
.flu-pt-te-toca { --pt-c: var(--color-warning); --pt-bg: var(--nota); }
.flu-pt-pedir { --pt-c: var(--sec-clima); --pt-bg: var(--sec-clima-bg); }
.flu-pt-solicitudes { --pt-c: var(--sec-plataforma); --pt-bg: var(--sec-plataforma-bg); }
.flu-pt-flujos { --pt-c: var(--sec-supervision); --pt-bg: var(--sec-supervision-bg); }
.flu-pt-proyectos { --pt-c: var(--sec-clientes); --pt-bg: var(--sec-clientes-bg); }
.flu-pt-crear { --pt-c: var(--sec-riesgo); --pt-bg: var(--sec-riesgo-bg); }
[class*="flu-pt-"] {
  --pt-fuerte: color-mix(in srgb, var(--pt-c) 26%, var(--pt-bg));
  --pt-borde: var(--pt-c);
  --pt-tinta: color-mix(in srgb, var(--pt-c) 55%, var(--color-text));
}
:root[data-theme="dark"] [class*="flu-pt-"] {
  --pt-fuerte: color-mix(in srgb, var(--pt-c) 34%, var(--pt-bg));
  --pt-borde: color-mix(in srgb, var(--pt-c) 62%, var(--pt-bg));
  --pt-tinta: color-mix(in srgb, var(--pt-c) 45%, var(--color-text));
}

.flu-pestanas {
  flex-wrap: nowrap; align-items: flex-end; gap: .6rem; border-bottom: 0; margin: 0;
  /* Aire arriba para el globito y para que el botón suba sin cortarse; a los lados, para el foco. */
  padding: .7rem .5rem 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: .5rem;
}
.flu-pestanas::-webkit-scrollbar { display: none; }
.flu-pestanas .pestana {
  position: relative; flex: none; scroll-snap-align: start; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .45rem 1.05rem .45rem .7rem;
  margin: 0 0 5px; background: var(--pt-bg); color: var(--color-text); font-size: 1rem; font-weight: 700;
  border: 2px solid var(--pt-borde); border-radius: 16px; box-shadow: 0 5px 0 var(--pt-borde);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-2) ease;
}
.flu-pestana-icono { position: relative; display: inline-flex; flex: none; }
.flu-pestana-icono .icono { display: block; transition: transform var(--dur-2) var(--ease-out); }
/* La activa: hundida hasta el panel (sin reborde debajo), con su color más intenso y el texto teñido. */
.flu-pestanas .pestana.activa {
  background: var(--pt-fuerte); color: var(--pt-tinta); font-weight: 800;
  transform: translateY(5px); box-shadow: none; border-bottom-color: var(--pt-fuerte);
  border-radius: 16px 16px 0 0; padding-bottom: calc(.45rem + 2px);
}
.flu-pestanas .pestana:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Tocar: el botón se hunde sobre su reborde. */
.flu-pestanas .pestana:not(.activa):active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pt-borde); }
@media (hover: hover) and (pointer: fine) {
  /* Pasar el ratón: sube un poquito, como un botón que se puede apretar. */
  .flu-pestanas .pestana:not(.activa):hover {
    transform: translateY(-3px); box-shadow: 0 8px 0 var(--pt-borde);
    transition: transform 260ms var(--flu-rebote), box-shadow var(--dur-2) var(--ease-out);
  }
  .flu-pestanas .pestana:not(.activa):hover .flu-pestana-icono .icono { transform: rotate(-8deg) scale(1.08); }
  .flu-pestanas .pestana:not(.activa):active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pt-borde); transition-duration: var(--dur-1); }
}

/* «Crear» se aparta a la derecha y lleva un «+» pegado al ícono. */
.flu-pestana-crear { margin-left: auto !important; }
.flu-pestana-mas {
  position: absolute; right: -6px; bottom: -4px; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 900; line-height: 1;
  background: var(--pt-borde); color: var(--color-sobre-relleno); box-shadow: 0 0 0 2px var(--color-surface);
}

/* Las cifras: un globito de notificación en la esquina; la que pide atención, en rojo. */
.flu-pestana-cifra {
  position: absolute; top: -.6rem; right: -.45rem; display: inline-flex; min-width: 1.45rem; height: 1.45rem; padding: 0 .4rem;
  align-items: center; justify-content: center; border-radius: 999px; font-size: .78rem; font-weight: 800; line-height: 1;
  background: var(--color-surface); color: var(--pt-tinta); border: 2px solid var(--pt-borde);
  font-variant-numeric: tabular-nums; animation: flu-pop 360ms var(--flu-rebote) both; animation-delay: 160ms;
}
.flu-pestana-cifra-alerta { background: var(--color-danger); color: var(--color-sobre-relleno); border-color: var(--color-surface); }

/* El panel toma el color de la pestaña activa en su borde de arriba: los dos se ven como una pieza. */
.flu-panel { border-top: 4px solid var(--pt-borde, var(--color-border)); padding-top: 1.1rem; margin-bottom: 1rem; }
/* Al cambiar de pestaña el contenido entra suave (solo opacidad y 6 px); el borde se queda quieto. */
.flu-panel > * { animation: flu-panel-entra 220ms var(--ease-out) both; }
@keyframes flu-panel-entra { from { opacity: 0; transform: translateY(6px); } }

/* Teléfono: el ícono encima del texto, para que entren más botones a la vista en el carrusel. */
@media (max-width: 600px) {
  .flu-pestanas { gap: .45rem; padding-inline: .25rem; margin-inline: -.25rem; scroll-padding-inline: .25rem; }
  .flu-pestanas .pestana { flex-direction: column; gap: .15rem; min-height: 0; min-width: 4.9rem; padding: .45rem .6rem .4rem; font-size: .84rem; }
  .flu-pestanas .pestana.activa { padding-bottom: calc(.4rem + 2px); }
  .flu-pestana-crear { margin-left: 0 !important; }
}
.flu-segmentos { display: inline-flex; max-width: 100%; }
.flu-vacio {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; background: var(--color-surface); border: 2px dashed var(--color-border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 0 0 1rem;
}
.flu-vacio p { margin: 0; flex: 1 1 240px; }
.flu-vacio-icono { font-size: 2.4rem; line-height: 1; }

/* «Te toca» es la misión del día: un panel amarillo de nota con su insignia, sobre el cielo. */
.flu-mision {
  background: var(--nota); border: 2px solid var(--nota-borde, var(--color-warning)); border-radius: var(--radius);
  padding: 1rem 1.1rem 1.15rem; box-shadow: 0 5px 0 var(--nota-borde, var(--color-warning));
  animation: flu-aparecer 280ms var(--ease-out) backwards;
}
.flu-mision-cabeza { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .6rem; }
.flu-mision-cabeza .flu-seccion-titulo { margin: 0 0 .2rem; color: var(--nota-tinta); }
.flu-mision-cabeza .flu-para-que { margin: 0; color: var(--color-text); }
.flu-mision-insignia {
  flex: 0 0 auto; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--color-surface); display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 3px 0 var(--nota-borde, var(--color-warning));
  animation: flu-pop 420ms var(--flu-rebote) both; animation-delay: 80ms;
}
.flu-mision-resumen { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-weight: 700; font-size: .92rem; margin: .35rem 0 0; }
.flu-mision .flu-nivel { border-color: var(--nota-borde, var(--color-border)); }

/* Catálogo: cada flujo es un «mundo» con su color; el reborde inferior sólido es el de los botones caramelo. */
.flu-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.flu-mundo {
  display: flex; flex-direction: column; gap: .5rem; background: var(--flu-bg); color: var(--color-text);
  border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: 0 4px 0 var(--flu-c);
  padding: 1rem; text-align: left; position: relative; min-width: 0;
}
button.flu-mundo { cursor: pointer; font: inherit; }
.flu-mundo-abrir { display: flex; flex-direction: column; gap: .45rem; color: inherit; text-decoration: none; }
.flu-mundo-icono {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--color-surface); display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: var(--elev-1);
}
.flu-mundo-nombre { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.flu-mundo-para { color: var(--color-text-muted); font-size: .9rem; }
.flu-mundo-pasos { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .8rem; }
.flu-mundo-paso { background: var(--color-surface); border-radius: 999px; padding: .05rem .5rem; font-weight: 600; }
.flu-mundo-boton {
  align-self: flex-start; margin-top: .2rem; border-radius: 999px; padding: .35rem 1rem; font-weight: 800;
  background: var(--flu-c); color: var(--color-sobre-relleno); box-shadow: 0 3px 0 var(--color-text);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.flu-mundo-abrir:active .flu-mundo-boton, button.flu-mundo:active .flu-mundo-boton { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-text); }
.flu-mundo:active { transform: scale(.985); }
.flu-mundo:has(.flu-mundo-pie :active):active { transform: none; }
.flu-mundo-pie { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .84rem; align-items: center; }
.flu-mundo-pie a, .flu-mundo-pie .btn-link { font-weight: 600; }
.flu-mundo-vista { margin-bottom: .8rem; animation: none; }
.flu-mundo, .flu-nivel { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  /* Pasar el ratón: la tarjeta salta un poquito, como un objeto que se puede recoger. */
  .flu-mundo:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--flu-c); transition: transform 260ms var(--flu-rebote), box-shadow var(--dur-2) var(--ease-out); }
  .flu-mundo:hover .flu-mundo-icono { transform: rotate(-8deg) scale(1.06); }
  .flu-mundo:active { transform: translateY(-1px) scale(.985); transition-duration: var(--dur-1); }
  .flu-mundo-vista:hover { transform: none; box-shadow: 0 4px 0 var(--flu-c); }
  .flu-mundo-vista:hover .flu-mundo-icono { transform: none; }
}
.flu-mundo-icono, .flu-nivel-icono { transition: transform 260ms var(--flu-rebote); }

/* Crear: solo para quien puede. */
.flu-crear-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.flu-crear-boton {
  display: flex; flex-direction: column; gap: .2rem; text-align: left; font: inherit; cursor: pointer; color: var(--color-text);
  background: var(--color-surface); border: 2px dashed var(--color-border-strong); border-radius: var(--radius);
  padding: 1rem; text-decoration: none; transition: transform var(--dur-1) var(--ease-out);
}
.flu-crear-boton span { font-size: 1.6rem; }
.flu-crear-boton small { color: var(--color-text-muted); }
.flu-crear-boton:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .flu-crear-boton:hover { transform: translateY(-2px); border-color: var(--color-primary); transition: transform 260ms var(--flu-rebote), border-color var(--dur-2) ease; }
}

/* Pestaña «Flujos»: un renglón por flujo con sus cifras y lo que se puede hacer con él. */
.flu-renglones { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.flu-renglon {
  display: flex; gap: .9rem; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 6px solid var(--flu-c); border-radius: var(--radius); padding: .9rem 1rem;
  animation: flu-aparecer 280ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms);
}
.flu-renglon-icono {
  flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--flu-bg); display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.5rem;
}
.flu-renglon-cuerpo { display: flex; flex-direction: column; gap: .45rem; min-width: 0; flex: 1; }
.flu-renglon-nombre { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: 1.05rem; }
.flu-renglon-cifras { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .86rem; color: var(--color-text-muted); }
.flu-renglon-acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.flu-accion {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .3rem .8rem; min-height: 36px;
  font: inherit; font-size: .86rem; font-weight: 700; background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border); text-decoration: none; cursor: pointer; transition: transform var(--dur-1) var(--ease-out);
}
.flu-accion:active { transform: scale(.97); }
.flu-accion-pedir { background: var(--flu-c); border-color: var(--flu-c); color: var(--color-sobre-relleno); }
@media (hover: hover) and (pointer: fine) {
  .flu-accion:hover { border-color: var(--color-primary); }
  .flu-accion-pedir:hover { border-color: var(--color-text); }
}

/* ---------- Tarjetas de nivel ---------- */
.flu-niveles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .9rem; }
.flu-nivel {
  display: flex; flex-direction: column; gap: .6rem; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: .9rem 1rem; text-decoration: none;
  box-shadow: var(--elev-1); min-width: 0; position: relative;
}
.flu-nivel-tarde { box-shadow: inset 3px 0 0 var(--color-danger), var(--elev-1); }
.flu-nivel-cabeza { display: flex; gap: .65rem; align-items: flex-start; }
.flu-nivel-icono {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-sm); background: var(--flu-bg);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.flu-nivel-titulos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.flu-nivel-codigo { font-size: .78rem; color: var(--color-text-soft); font-weight: 600; }
.flu-nivel-titulo { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flu-nivel-monto { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flu-nivel-barra { display: flex; gap: 4px; }
.flu-nivel-tramo { flex: 1; height: 10px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); overflow: hidden; position: relative; }
.flu-nivel-tramo.lleno::after, .flu-nivel-tramo.actual::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  animation: flu-llenar 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + var(--j, 0) * 70ms + 120ms);
}
.flu-nivel-tramo.lleno::after { background: var(--color-success); }
.flu-nivel-tramo.actual::after { background: var(--color-warning); transform: scaleX(.5); animation-name: flu-llenar-medio; }
@keyframes flu-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flu-llenar-medio { from { transform: scaleX(0); } to { transform: scaleX(.5); } }
.flu-nivel-pie { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; font-size: .84rem; }
.flu-nivel-quien { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.flu-nivel-fecha { color: var(--color-text-soft); }
/* «▶ Atender»: en las tarjetas que esperan por ti, el botón caramelo de la misión. */
.flu-nivel-jugar {
  margin-left: auto; border-radius: 999px; padding: .2rem .8rem; font-weight: 800; font-size: .84rem; white-space: nowrap;
  background: var(--flu-c, var(--color-primary)); color: var(--color-sobre-relleno); box-shadow: 0 3px 0 var(--color-text);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.flu-nivel:active { transform: scale(.98); }
.flu-nivel:active .flu-nivel-jugar { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .flu-nivel:hover { transform: translateY(-3px); box-shadow: var(--elev-2); transition: transform 260ms var(--flu-rebote), box-shadow var(--dur-2) var(--ease-out); }
  .flu-nivel-tarde:hover { box-shadow: inset 3px 0 0 var(--color-danger), var(--elev-2); }
  .flu-nivel:hover .flu-nivel-icono { transform: rotate(-8deg) scale(1.08); }
  .flu-nivel:active { transform: translateY(-1px) scale(.98); transition-duration: var(--dur-1); }
}

/* ---------- Cabecera de una solicitud o un flujo ---------- */
.flu-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; background: var(--flu-bg); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin: .6rem 0 1rem; box-shadow: 0 4px 0 var(--flu-c);
}
.flu-cabecera h1 { margin: 0; font-size: 1.55rem; overflow-wrap: anywhere; }
.flu-cabecera-icono {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--color-surface); display: inline-flex;
  align-items: center; justify-content: center; font-size: 2rem; flex: 0 0 auto; box-shadow: var(--elev-1);
}
.flu-cabecera.flu-entra .flu-cabecera-icono { animation: flu-pop 420ms var(--flu-rebote) both; animation-delay: 90ms; }
.flu-cabecera-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.flu-cabecera-codigo { font-size: .85rem; font-weight: 700; color: var(--flu-c); }
.flu-cabecera-codigo small { font-weight: 500; color: var(--color-text-soft); }
.flu-cabecera-para { margin: .2rem 0 0; color: var(--color-text-muted); }
.flu-cabecera-datos { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--color-text-muted); font-size: .92rem; }
.flu-cabecera-monto { font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.flu-cabecera-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.flu-cabecera .flu-chip-estado { animation: flu-pop 360ms var(--flu-rebote) both; animation-delay: 160ms; }

.flu-quien-grande {
  font-size: 1.05rem; font-weight: 700; border-radius: var(--radius-sm); padding: .65rem .9rem; margin: 0 0 1rem;
}
.flu-quien-verde { background: var(--color-success-bg); color: var(--color-success-tinta); }
.flu-quien-amarillo { background: var(--color-warning-bg); color: var(--color-warning-tinta); }
.flu-quien-rojo { background: var(--color-danger-bg); color: var(--color-danger-tinta); }

/* ---------- El camino (mapa del nivel) ---------- */
.flu-detalle { position: relative; }
.flu-camino {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 2.6rem .5rem 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  --salto-y: 0px;
}
/* -100cqw es el ancho de contenido de la estación; la distancia real suma su padding (.35rem por lado). */
.flu-ficha { --salto-x: calc(-100cqw - .7rem); }
.flu-estaciones { list-style: none; margin: 0; padding: 0; display: flex; min-width: min-content; }
.flu-estacion {
  flex: 1 0 150px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .15rem; padding: 0 .35rem;
  /* Cada estación mide su ancho (cqw): el personaje camina exactamente una estación. */
  container-type: inline-size;
  /* Cuándo llega el relleno a esta estación (al abrir): un escalón por estación, con tope en Razor. */
  --flu-llega: calc(var(--k, 0) * var(--flu-escalon));
}
.flu-estacion-marca {
  position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 900; background: var(--color-surface); border: 4px solid var(--color-border-strong); color: var(--color-text);
}
.flu-estacion-nombre { font-weight: 800; font-size: .92rem; line-height: 1.2; margin-top: .3rem; overflow-wrap: anywhere; }
.flu-estacion-depto { font-size: .8rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
/* Qué se hace en la estación: 👍 Aprueba o 🛠 Hace (para que se entienda sin leer el diseño). */
.flu-estacion-tipo {
  display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 0 .45rem;
  background: var(--color-surface-2); color: var(--color-text-muted); white-space: nowrap;
}
.flu-estacion-dato { font-size: .76rem; color: var(--color-text-soft); max-width: 100%; overflow-wrap: anywhere; }
.flu-estacion-quien { position: absolute; top: -26px; z-index: 2; }

/* El sendero (en horizontal): un tramo punteado desde la estación anterior; el relleno verde
   (::after) se pinta encima, de izquierda a derecha, cuando la solicitud ya pasó por ahí. */
@media (min-width: 701px) {
  .flu-estacion + .flu-estacion::before {
    content: ""; position: absolute; top: 26px; right: 50%; width: 100%; border-top: 5px dashed var(--color-border-strong); z-index: 0;
  }
  .flu-estacion + .flu-estacion.flu-tramo-recorrido::after {
    content: ""; position: absolute; top: 26px; right: 50%; width: 100%; height: 5px; background: var(--color-success); z-index: 0;
    transform-origin: left center; animation: flu-tramo 260ms var(--ease-out) both; animation-delay: max(0ms, calc(var(--flu-llega) - var(--flu-escalon)));
  }
  /* El último tramo lo recorre el personaje: mismo tiempo y misma curva que su caminata. */
  .flu-estacion + .flu-estacion-actual.flu-tramo-recorrido::after { animation-duration: 720ms; animation-timing-function: var(--ease-in-out); }
}
@keyframes flu-tramo { from { transform: scaleX(0); } to { transform: none; } }
@keyframes flu-tramo-v { from { transform: scaleY(0); } to { transform: none; } }

.flu-estacion-hecha .flu-estacion-marca {
  background: var(--color-success); border-color: var(--color-success); color: var(--color-sobre-relleno);
  animation: flu-marca-gana 380ms var(--flu-rebote) both; animation-delay: calc(var(--flu-llega) + 120ms);
}
@keyframes flu-marca-gana { from { transform: scale(.82); } to { transform: none; } }
/* Brillo una sola vez cuando el relleno llega: un anillo que se abre y se apaga. */
.flu-estacion-hecha .flu-estacion-marca::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--color-success);
  opacity: 0; animation: flu-brillo 700ms var(--ease-out) 1 both; animation-delay: calc(var(--flu-llega) + 160ms);
}
@keyframes flu-brillo { from { opacity: .7; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
/* La salida (🚀 La pidió) ya está ganada desde el principio: sin brillo ni rebote. */
.flu-estacion-inicio .flu-estacion-marca { animation: none; }
.flu-estacion-inicio .flu-estacion-marca::after { content: none; }

.flu-estacion-actual .flu-estacion-marca { background: var(--color-warning-bg); border-color: var(--color-warning); }
.flu-estacion-actual .flu-estacion-tipo { background: var(--color-warning-bg); color: var(--color-warning-tinta); }
/* La estación actual late (bucle): se detiene fuera de vista y con movimiento reducido. */
.flu-estacion-actual .flu-estacion-marca::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--color-warning);
  animation: flu-latido 1800ms var(--ease-out) infinite; animation-delay: calc(var(--flu-llega) + 720ms);
  opacity: 0;
}
@keyframes flu-latido { 0% { opacity: .75; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.4); } }

/* Lo que falta se apaga en sus textos, no en la estación entera: con opacidad en toda la
   estación, el círculo dejaba ver el sendero punteado por encima de su borde (lo vio el dueño). */
.flu-estacion-futura > :not(.flu-estacion-marca) { opacity: .72; }
.flu-estacion-futura .flu-estacion-marca { color: var(--color-text-soft); }
/* Lo que no aplica se apaga, pero el sendero que pasa por ahí no (la opacidad va a sus partes). */
.flu-estacion-omitida > * { opacity: .5; }
.flu-estacion-omitida .flu-estacion-marca { border-style: dashed; width: 40px; height: 40px; margin: 8px 0; font-size: 1rem; }
.flu-estacion-omitida .flu-estacion-nombre { text-decoration: line-through; }
.flu-estacion-rechazada .flu-estacion-marca {
  background: var(--color-danger); border-color: var(--color-danger); color: var(--color-sobre-relleno);
  animation: flu-sacudir 420ms var(--ease-out) 1 both; animation-delay: calc(var(--flu-llega) + 200ms);
}
@keyframes flu-sacudir { 0%, 100% { transform: none; } 20% { transform: translateX(-5px) rotate(-4deg); } 40% { transform: translateX(5px) rotate(4deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.flu-estacion-meta .flu-estacion-marca { border-style: dashed; }
.flu-estacion-ganada .flu-estacion-marca {
  background: var(--color-accent); border: 4px solid var(--color-accent); border-style: solid; color: var(--color-text);
  animation: flu-trofeo 620ms var(--flu-rebote) both; animation-delay: calc(var(--flu-llega) + 120ms);
}
.flu-estacion-ganada .flu-estacion-marca::after { border-color: var(--color-accent); }
@keyframes flu-trofeo { 0% { transform: scale(.7) rotate(-12deg); } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }

/* El personaje: espera en la estación anterior mientras el sendero se rellena y luego llega
   caminando (la capa de fuera se desplaza; el dibujo da saltitos y mueve las piernas). */
.flu-ficha { position: absolute; top: -34px; z-index: 3; line-height: 0; }
.flu-ficha .of-avatar { display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.flu-ficha-llega { animation: flu-caminar 720ms var(--ease-in-out) both; animation-delay: max(0ms, calc(var(--flu-llega) - var(--flu-escalon))); }
.flu-ficha-llega .of-avatar {
  animation: flu-saltito 180ms var(--ease-out) 4, flu-respirar 2400ms steps(2, end) infinite;
  animation-delay: max(0ms, calc(var(--flu-llega) - var(--flu-escalon))), calc(var(--flu-llega) + 900ms);
}
.flu-ficha-quieta .of-avatar { animation: flu-respirar 2400ms steps(2, end) infinite; }
@keyframes flu-caminar { from { transform: translate(var(--salto-x), var(--salto-y)); } to { transform: none; } }
@keyframes flu-saltito { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes flu-respirar { 0%, 100% { transform: none; } 50% { transform: translateY(-1px); } }
/* Los tres cuadros de la caminata, sobre el dibujo de SpritesOficina (12 × 16; un px aquí es un
   pixel del personaje): pierna izquierda arriba, las dos abajo, pierna derecha arriba; las manos
   van al revés. Las filas 13–15 son las piernas y la 10 tiene las manos en x = 1 y x = 10. */
.flu-ficha-llega .of-avatar rect { animation-delay: max(0ms, calc(var(--flu-llega) - var(--flu-escalon))); animation-duration: 240ms; animation-iteration-count: 3; animation-timing-function: steps(1, end); }
.flu-ficha-llega .of-avatar rect:is([y="13"][x="2"], [y="14"][x="2"], [y="15"][x="1"], [y="10"][x="10"]) { animation-name: flu-cuadro-a; }
.flu-ficha-llega .of-avatar rect:is([y="13"][x="7"], [y="14"][x="7"], [y="15"][x="7"], [y="10"][x="1"]) { animation-name: flu-cuadro-b; }
@keyframes flu-cuadro-a { 0% { transform: translateY(-1px); } 33.3% { transform: none; } 66.6% { transform: none; } 100% { transform: none; } }
@keyframes flu-cuadro-b { 0% { transform: none; } 33.3% { transform: none; } 66.6% { transform: translateY(-1px); } 100% { transform: none; } }
.flu-ficha-anonima { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface-2); align-items: center; justify-content: center; line-height: 1; font-size: 1.1rem; }

/* Rechazo y cancelación: un sello que cae con golpe; el mapa tiembla un instante al recibirlo. */
.flu-sello {
  position: absolute; top: .5rem; right: .9rem; z-index: 4; pointer-events: none; padding: .2rem .8rem; border-radius: var(--radius-sm);
  border: 3px solid currentColor; font-weight: 900; font-size: 1.05rem; letter-spacing: .06em; background: var(--color-surface);
  transform: rotate(-6deg); animation: flu-sellar 360ms var(--ease-out) both; animation-delay: 300ms;
}
.flu-sello-rechazo { color: var(--color-danger-tinta); }
.flu-sello-cancelada { color: var(--color-text-soft); }
@keyframes flu-sellar {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.6); }
  60% { opacity: 1; transform: rotate(-5deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.flu-camino-rechazado .flu-estaciones { animation: flu-temblor 260ms var(--ease-out) 1 both; animation-delay: 520ms; }
@keyframes flu-temblor { 0%, 100% { transform: none; } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-2px, 0); } }
.flu-camino-rechazado .flu-estacion-futura, .flu-camino-cancelado .flu-estacion-futura { opacity: .45; }

/* ¡Nivel completado!: la insignia que salta al llegar a la meta. */
.flu-ganado {
  position: absolute; top: .5rem; right: .9rem; z-index: 4; pointer-events: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .85rem; border-radius: 999px; font-weight: 900; font-size: 1rem; letter-spacing: .01em;
  background: var(--color-accent); color: #3b2a00; box-shadow: 0 3px 0 var(--color-text);
  animation: flu-pop 460ms var(--flu-rebote) both; animation-delay: calc(var(--k-fin, 0) * var(--flu-escalon) + 200ms);
}

/* Confeti al aprobarse el último paso (js/flujos.js lo pone una vez): pixeles cuadrados, como el personaje. */
.flu-confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.flu-confeti i {
  position: absolute; top: 0; left: var(--x); width: var(--w, 9px); height: var(--w, 9px); border-radius: 1px; opacity: 0;
  animation: flu-confeti var(--dur, 1200ms) var(--ease-out) forwards; animation-delay: var(--t);
}
@keyframes flu-confeti { 0% { opacity: 1; transform: translate(0, -10px) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--d), var(--caida, 380px)) rotate(var(--r)); } }

/* «¡Logrado!»: lo que acabas de hacer, en una insignia que sube y se apaga (role=status). */
.flu-logro-lugar { position: relative; }
.flu-logro {
  /* Abajo al centro del mapa: arriba a la derecha están el sello y «¡Nivel completado!». */
  position: absolute; left: 50%; bottom: -1rem; z-index: 6; pointer-events: none; translate: -50% 0;
  display: inline-flex; align-items: center; gap: .4rem; width: max-content; max-width: min(92%, 34rem); padding: .45rem 1rem; border-radius: 999px;
  font-weight: 800; background: var(--color-surface); color: var(--color-text); border: 2px solid var(--flu-logro-c, var(--color-success));
  box-shadow: 0 4px 0 var(--flu-logro-c, var(--color-success)); text-align: center;
  animation: flu-logro 2600ms var(--ease-out) both;
}
.flu-logro-rojo { --flu-logro-c: var(--color-danger); }
.flu-logro-gris { --flu-logro-c: var(--color-border-strong); }
@keyframes flu-logro {
  0% { opacity: 0; transform: translateY(12px) scale(.9); }
  12% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* Los bucles se detienen fuera de vista o con la pestaña escondida. */
.flu-quieta *, .flu-quieta *::after, .flu-quieta *::before { animation-play-state: paused !important; }

/* En el teléfono el camino baja en vertical: la estación a la izquierda, el texto a la derecha; el
   sendero sale hacia abajo de cada estación y se rellena de arriba abajo. */
@media (max-width: 700px) {
  .flu-camino { overflow: visible; padding: 1.2rem .75rem 1rem 1rem; --salto-x: 0px; --salto-y: -96px; }
  .flu-estaciones { flex-direction: column; min-width: 0; gap: 1.6rem; }
  .flu-estacion {
    flex: none; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-auto-rows: auto; column-gap: .75rem;
    align-items: start; justify-items: start; text-align: left; padding: 0; min-height: 56px;
  }
  .flu-estacion > :not(.flu-estacion-marca):not(.flu-ficha):not(.flu-estacion-quien) { grid-column: 2; }
  .flu-estacion-marca { grid-column: 1; grid-row: 1 / span 5; justify-self: center; }
  .flu-estacion-nombre { margin-top: .2rem; }
  .flu-estacion:not(:last-child)::before {
    content: ""; position: absolute; left: 30px; top: 56px; bottom: -1.6rem; border-left: 5px dashed var(--color-border-strong); z-index: 0;
  }
  .flu-estacion:not(:last-child):has(+ .flu-tramo-recorrido)::after {
    content: ""; position: absolute; left: 30px; top: 56px; bottom: -1.6rem; width: 5px; background: var(--color-success); z-index: 0;
    transform-origin: center top; animation: flu-tramo-v 260ms var(--ease-out) both; animation-delay: var(--flu-llega);
  }
  .flu-estacion:not(:last-child):has(+ .flu-estacion-actual.flu-tramo-recorrido)::after { animation-duration: 720ms; animation-timing-function: var(--ease-in-out); }
  .flu-estacion.flu-estacion-omitida:not(:last-child)::before, .flu-estacion.flu-estacion-omitida:not(:last-child)::after { left: 30px; top: 40px; }
  .flu-ficha { top: -8px; left: -6px; --salto-x: 0px; }
  .flu-estacion-quien { top: -10px; left: -6px; }
  .flu-estacion-omitida .flu-estacion-marca { margin: 0; justify-self: center; }
  .flu-sello, .flu-ganado { top: auto; bottom: .6rem; right: .6rem; }
  /* En el teléfono el mapa es largo: la insignia va fija arriba, como un aviso, para que se vea. */
  .flu-logro { position: fixed; z-index: 60; top: calc(env(safe-area-inset-top, 0px) + 66px); bottom: auto; max-width: calc(100% - 32px); }
}

/* ---------- Panel de acción, datos, línea de tiempo y conversación ---------- */
.flu-panel-accion { border: 2px solid var(--color-warning); box-shadow: 0 4px 0 var(--color-warning); }
.flu-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; align-items: center; }
.flu-acciones-pegadas { position: sticky; bottom: 0; background: var(--color-bg); padding: .6rem 0; z-index: 5; }
.flu-porque { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: .55rem .8rem; color: var(--color-text-muted); margin: .4rem 0 1rem; }
.flu-cancelar { margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Botones del juego: se hunden al pulsar, giran mientras trabajan sin cambiar de tamaño y el
   principal es un caramelo con sombra sólida. (BotonJuego.razor) */
.flu-boton { position: relative; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--transicion); }
.flu-boton:active:not(:disabled) { transform: scale(.97); }
.flu-boton-texto { display: inline-flex; align-items: center; gap: .35rem; transition: opacity var(--dur-1) ease; }
.btn.flu-boton-jugar { font-weight: 800; box-shadow: 0 4px 0 var(--flu-sombra-solida); }
.btn.flu-boton-jugar:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--flu-sombra-solida); }
@media (hover: hover) and (pointer: fine) {
  .btn.flu-boton-jugar:hover:not(:disabled) { box-shadow: 0 5px 0 var(--flu-sombra-solida); transform: translateY(-1px); }
  .btn.flu-boton-jugar:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--flu-sombra-solida); }
}
.flu-cargando { cursor: progress; }
.flu-cargando:disabled { opacity: 1; }
.flu-cargando .flu-boton-texto { opacity: 0; }
.flu-cargando::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.15em; height: 1.15em; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent; animation: flu-girar 640ms linear infinite;
}
@keyframes flu-girar { to { transform: rotate(1turn); } }

.flu-columnas { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.flu-columnas > * { margin-top: 0; }
@media (min-width: 1000px) { .flu-columnas { grid-template-columns: 1fr 1fr; } }
.flu-datos { display: grid; gap: .1rem; margin: 0; }
.flu-dato { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: .6rem; padding: .45rem .3rem; border-bottom: 1px solid var(--color-border); }
.flu-dato dt { font-weight: 600; color: var(--color-text-muted); }
.flu-dato dd { margin: 0; overflow-wrap: anywhere; }
.flu-dato-estrella { background: var(--nota); border-radius: var(--radius-xs); }
.flu-linea { list-style: none; margin: 0; padding: 0; position: relative; }
.flu-linea::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; border-left: 3px solid var(--color-border); }
.flu-evento { display: flex; gap: .6rem; padding: .35rem 0; position: relative; animation: flu-aparecer 280ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
.flu-evento-icono {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center; z-index: 1; font-size: .95rem;
}
.flu-evento-cuerpo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.flu-evento-cuerpo small { color: var(--color-text-soft); }
.flu-evento-dijo { display: block; background: var(--color-surface-2); border-radius: var(--radius-xs); padding: .3rem .55rem; font-style: normal; overflow-wrap: anywhere; }
.flu-evento-rechazado .flu-evento-icono { border-color: var(--color-danger); }
.flu-evento-aprobado .flu-evento-icono, .flu-evento-completada .flu-evento-icono { border-color: var(--color-success); }
.flu-comentarios { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.flu-comentario { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: .55rem .75rem; animation: flu-aparecer 240ms var(--ease-out) backwards; }
.flu-comentario small { color: var(--color-text-soft); margin-left: .4rem; }
.flu-comentario p { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.flu-comentario-evidencia { box-shadow: inset 3px 0 0 var(--color-success); }
.flu-aviso-tarea { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip-flujo { background: var(--color-warning-bg); color: var(--color-warning-tinta); }

/* ---------- Formulario ---------- */
.flu-formulario { display: grid; gap: .2rem; }
.flu-campo { margin-bottom: .8rem; min-width: 0; }
.flu-formulario > .flu-campo { animation: flu-aparecer 280ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
.flu-campo-estrella { background: var(--nota); border-radius: var(--radius-sm); padding: .6rem .7rem; }
.flu-obligatorio { color: var(--color-danger-tinta); }
.flu-estrella { display: inline-block; margin-left: .35rem; font-size: .76rem; font-weight: 700; color: var(--nota-tinta); }
.flu-monto { display: flex; align-items: stretch; }
.flu-monto-simbolo {
  display: inline-flex; align-items: center; padding: 0 .65rem; font-weight: 800; background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.flu-monto .form-control { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-variant-numeric: tabular-nums; min-width: 0; }
.flu-monto-eco { margin-top: .25rem; animation: flu-aparecer 200ms var(--ease-out) backwards; }
.flu-sino { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.flu-sino-opcion {
  font: inherit; font-weight: 700; border-radius: 999px; padding: .4rem .95rem; cursor: pointer; min-height: 40px;
  background: var(--color-surface); border: 2px solid var(--color-border-strong); color: var(--color-text);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.flu-sino-opcion.activa { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-sobre-relleno); }
.flu-sino-opcion:active { transform: scale(.96); }
.flu-socio { display: grid; gap: .5rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 560px) { .flu-socio { grid-template-columns: minmax(0, 1fr); } }
.flu-archivo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.flu-archivo-boton { position: relative; overflow: hidden; cursor: pointer; }
.flu-archivo-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.flu-nueva { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .flu-nueva { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); } .flu-ruta { position: sticky; top: 80px; } }

/* La ruta en lista (vista previa del camino): un mini mapa vertical, con el sendero punteado que une
   las estaciones; cada estación nueva aparece con un rebote y las que no aplican se apagan y se
   tachan poco a poco (el color de la raya, que sirve también en nombres de dos líneas). */
.flu-ruta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; position: relative; }
.flu-ruta-lista li { display: flex; gap: .55rem; align-items: flex-start; position: relative; transition: opacity var(--dur-2) ease; min-width: 0; }
.flu-ruta-lista li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.flu-ruta-lista small { color: var(--color-text-soft); }
.flu-ruta-lista strong {
  overflow-wrap: anywhere; text-decoration: line-through 2px; text-decoration-color: transparent;
  transition: text-decoration-color 240ms ease;
}
.flu-ruta-marca {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface-2); display: inline-flex;
  align-items: center; justify-content: center; font-size: .9rem; position: relative; z-index: 1; border: 2px solid var(--color-surface);
  transition: transform 260ms var(--flu-rebote);
}
.flu-ruta-condicion { color: var(--nota-tinta) !important; font-weight: 600; }
.flu-ruta-no { opacity: .5; }
.flu-ruta-no strong { text-decoration-color: currentColor; }
.flu-ruta-no .flu-ruta-marca { transform: scale(.86); }
.flu-ruta-lista:not(.flu-ruta-horizontal)::before {
  content: ""; position: absolute; left: 13.5px; top: 15px; bottom: 15px; border-left: 3px dashed var(--color-border-strong); z-index: 0;
}
.flu-ruta-lista:not(.flu-ruta-horizontal) > li { animation: flu-estacion-nace 320ms var(--flu-rebote) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes flu-estacion-nace { from { opacity: 0; transform: translateX(-8px) scale(.94); } to { opacity: 1; transform: none; } }
.flu-ruta-horizontal { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0 0 1.2rem; }
.flu-ruta-meta .flu-ruta-marca { background: var(--color-accent); }

/* ---------- Diseñador ---------- */
.flu-disenador { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1150px) { .flu-disenador { grid-template-columns: minmax(0, 1fr) 320px; } .flu-disenador-vista { position: sticky; top: 80px; } }
/* La guía de los cinco pasos del diseño: cada uno se marca ✓ cuando ya está listo; tocarlo lleva ahí. */
.flu-guia { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: none; }
.flu-guia-paso {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  border-radius: 999px; padding: .25rem .8rem .25rem .3rem; background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text);
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
.flu-guia-paso:active { transform: scale(.97); }
.flu-guia-num {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900;
  background: var(--color-surface-2); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.flu-guia-paso.lista { border-color: var(--color-success); background: var(--color-success-bg); }
.flu-guia-paso.lista .flu-guia-num { background: var(--color-success); color: var(--color-sobre-relleno); animation: flu-pop 360ms var(--flu-rebote) both; }
.flu-guia-paso small { font-weight: 600; color: var(--color-text-soft); }
.flu-guia-falta { flex-basis: 100%; margin: .1rem 0 0; font-size: .88rem; font-weight: 600; color: var(--nota-tinta); animation: flu-aparecer 200ms var(--ease-out) backwards; }
.flu-disenador .flu-seccion-titulo { scroll-margin-top: 84px; }
.flu-fila { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.flu-proyecto-flujo { margin-top: .9rem; max-width: 34rem; }
.flu-proyecto-flujo .flu-estrella { margin-bottom: .35rem; }
.flu-iconos, .flu-colores { display: flex; flex-wrap: wrap; gap: .35rem; }
.flu-icono-opcion {
  width: 42px; height: 42px; border-radius: var(--radius-sm); font-size: 1.3rem; cursor: pointer; background: var(--color-surface);
  border: 2px solid var(--color-border); transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.flu-icono-opcion.activa { border-color: var(--color-primary); background: var(--color-primary-light); transform: scale(1.06); }
.flu-icono-opcion:active, .flu-color-opcion:active { transform: scale(.94); }
.flu-color-opcion { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; background: var(--flu-bg); border: 3px solid var(--flu-c); transition: transform var(--dur-1) var(--ease-out); }
.flu-color-opcion.activa { outline: 3px solid var(--color-primary); outline-offset: 2px; transform: scale(1.06); }
.flu-checks { display: flex; flex-wrap: wrap; gap: .4rem; }
.flu-check {
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .88rem; margin: 0; cursor: pointer;
  border-radius: 999px; padding: .25rem .7rem; background: var(--color-surface-2); border: 1px solid var(--color-border);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.flu-check:active { transform: scale(.97); }
.flu-check.activa { background: var(--color-primary-light); border-color: var(--color-primary); }
.flu-check-estrella { background: var(--nota); border-color: var(--nota-borde); }
/* Qué significa la ⭐ (diseñador, «3 · Qué se pide»): una línea fija arriba, el ⓘ junto a cada casilla
   y un aviso cuando marcar una estrella le quita la suya a otro campo. */
.flu-estrella { display: inline-flex; align-items: center; gap: .3rem; }
.flu-estrella-nota {
  background: var(--nota); color: var(--nota-tinta); border: 1px solid var(--nota-borde, var(--color-border)); border-radius: var(--radius-sm);
  padding: .5rem .8rem; font-weight: 600; margin: 0 0 .6rem; max-width: 75ch; text-wrap: pretty;
}
.flu-estrella-aviso {
  display: inline-block; margin: .45rem 0 0; padding: .3rem .7rem; border-radius: var(--radius-sm); font-size: .86rem; font-weight: 600;
  background: var(--nota); color: var(--nota-tinta); animation: flu-aparecer 280ms var(--ease-out) backwards;
}
.flu-editor-fila { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .7rem; margin-bottom: .7rem; background: var(--color-surface); display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.flu-editor-paso { box-shadow: inset 3px 0 0 var(--color-primary); }
.flu-editor-cabeza, .flu-editor-opciones, .flu-editor-condicion { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; min-width: 0; }
.flu-editor-cabeza > .form-control { flex: 1 1 200px; min-width: 0; }
.flu-editor-tipo { flex: 0 1 220px !important; }
.flu-editor-numero {
  width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: var(--color-sobre-relleno);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto;
}
.flu-editor-mover { display: inline-flex; gap: .2rem; margin-left: auto; }
.flu-editor-ayuda { flex: 1 1 220px; min-width: 0; }
.flu-editor-opciones > select.form-control { flex: 1 1 180px; min-width: 0; }
.flu-editor-persona { flex: 1 1 220px; min-width: 0; }
.flu-editor-tiempo { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.flu-editor-tiempo .form-control { width: auto; max-width: 9rem; }
/* La frase armada con lo elegido («Si pasa de 4 horas laborables…»): debajo, en letra pequeña. */
.flu-tiempo-frase { flex-basis: 100%; color: var(--color-text-muted); font-size: .82rem; text-wrap: pretty; }
.flu-editor-condicion > .form-control { flex: 1 1 140px; min-width: 0; }
/* La condición en palabras: bien visible, en el amarillo de nota (lo que el paso pregunta). */
.flu-condicion-eco {
  flex-basis: 100%; margin: .2rem 0 0; padding: .4rem .7rem; border-radius: var(--radius-sm); background: var(--nota);
  color: var(--nota-tinta); font-weight: 700; text-wrap: pretty;
}
.flu-condicion-falta { flex-basis: 100%; }
.flu-condicion-falta .btn-link { font-size: inherit; padding: 0; }
.flu-visto { margin-top: 1.2rem; }
.flu-visto h3 { margin-top: 0; }
/* La vista previa del diseñador: el mini mapa del camino y un rótulo de para qué sirve. */
.flu-disenador-vista .flu-mundo-vista { transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.flu-disenador-vista .flu-mundo-vista .flu-mundo-icono { transition: transform 260ms var(--flu-rebote); }

/* ---------- Enlace y QR ---------- */
.flu-modal-enlace { max-width: 520px; }
.flu-enlace-fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.flu-enlace-fila .form-control { flex: 1 1 220px; min-width: 0; }
.flu-qr { display: block; margin: 1rem auto .4rem; border-radius: var(--radius-sm); background: #fff; padding: 6px; max-width: 100%; height: auto; }

/* ---------- Mi día ---------- */
.flu-ficha-midia-cabeza { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.flu-ficha-midia-cabeza h2 { margin: 0; }
.flu-atajos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.flu-atajo {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .45rem .95rem; font-weight: 700;
  background: var(--flu-bg); color: var(--color-text); text-decoration: none; box-shadow: 0 3px 0 var(--flu-c);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.flu-atajo:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--flu-c); }

/* ---------- Transiciones entre pantallas (View Transitions, js/flujos.js) ----------
   Al abrir una solicitud (o un formulario) desde su tarjeta, la tarjeta se estira hasta ser la
   cabecera y su ícono vuela a su sitio; al aprobar, rechazar o devolver, la cabecera y el chip del
   estado se transforman en su lugar y lo demás se funde. Sin la API, la cabecera entra con su
   animación de siempre (.flu-entra). */
html.flu-vt-activa main.content > .entrando { animation: none !important; }
html.flu-vt .flu-detalle .flu-cabecera { view-transition-name: flu-cabeza; }
html.flu-vt .flu-detalle .flu-cabecera-icono { view-transition-name: flu-icono; }
html.flu-vt .flu-detalle .flu-chip-estado { view-transition-name: flu-estado; }
html.flu-vt .flu-detalle .flu-panel-accion { view-transition-name: flu-panel; }
/* La cabecera que llegó volando desde su tarjeta no repite su entrada (js/flujos.js le pone
   .flu-llego y se queda así: quitarla después la haría entrar otra vez). */
.flu-cabecera.flu-llego, .flu-cabecera.flu-llego .flu-cabecera-icono, .flu-cabecera.flu-llego .flu-chip-estado { animation: none; }
::view-transition-group(flu-cabeza), ::view-transition-group(flu-icono), ::view-transition-group(flu-estado), ::view-transition-group(flu-panel) {
  animation-duration: 420ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
::view-transition-image-pair(flu-cabeza) { overflow: clip; border-radius: 16px; }
::view-transition-old(flu-cabeza), ::view-transition-new(flu-cabeza) {
  height: 100%; width: 100%; object-fit: none; object-position: left top;
}
::view-transition-old(flu-cabeza) { animation: flu-vt-sale 180ms ease-out both; }
::view-transition-new(flu-cabeza) { animation: flu-vt-entra 240ms ease-out 60ms both; }
/* La raíz solo cambia durante una transición de flujos (otras pantallas, como Ferias, tienen la suya). */
html.flu-vt-activa::view-transition-old(root) { animation: flu-vt-sale 200ms ease-out both; }
html.flu-vt-activa::view-transition-new(root) { animation: flu-vt-entra 260ms ease-out 40ms both; }
@keyframes flu-vt-sale { to { opacity: 0; } }
@keyframes flu-vt-entra { from { opacity: 0; } }

/* ---------- Movimiento reducido: lo que entra solo aparece; nada camina, late, salta ni vuela. ---------- */
@media (prefers-reduced-motion: reduce) {
  .flu-entra, .flu-mundo, .flu-nivel, .flu-renglon, .flu-estrella-aviso, .flu-mision, .flu-evento, .flu-comentario, .flu-formulario > .flu-campo, .flu-monto-eco,
  .flu-ruta-lista:not(.flu-ruta-horizontal) > li { animation: flu-solo-aparecer 200ms ease both; animation-delay: 0ms; }
  .flu-pop, .flu-contador, .flu-mision-insignia, .flu-cabecera.flu-entra .flu-cabecera-icono, .flu-cabecera .flu-chip-estado,
  .flu-ganado, .flu-guia-paso.lista .flu-guia-num { animation: flu-solo-aparecer 200ms ease both; animation-delay: 0ms; }
  .flu-nivel-tramo.lleno::after, .flu-nivel-tramo.actual::after, .flu-barra-relleno, .flu-atencion,
  .flu-estacion-hecha .flu-estacion-marca, .flu-estacion-hecha .flu-estacion-marca::after,
  .flu-estacion-rechazada .flu-estacion-marca, .flu-estacion-ganada .flu-estacion-marca, .flu-camino-rechazado .flu-estaciones,
  .flu-ficha-llega, .flu-ficha .of-avatar, .flu-ficha .of-avatar rect, .flu-sello,
  .flu-estacion.flu-tramo-recorrido::after, .flu-estacion::after { animation: none !important; }
  .flu-estacion-actual .flu-estacion-marca::after { animation: none; opacity: .6; }
  .flu-logro { animation: flu-logro-quieto 2600ms ease both; }
  .flu-cargando::after { animation: flu-latir-opacidad 1200ms ease infinite; border-right-color: currentColor; opacity: .5; }
  .flu-confeti { display: none; }
  .flu-panel > *, .flu-pestana-cifra { animation: flu-solo-aparecer 200ms ease both; animation-delay: 0ms; }
  .flu-pestanas .pestana, .flu-pestana-icono .icono { transition: none; }
  .flu-pestanas .pestana:not(.activa):hover, .flu-pestanas .pestana:not(.activa):hover .flu-pestana-icono .icono { transform: none; box-shadow: 0 5px 0 var(--pt-borde); }
  .flu-mundo, .flu-nivel, .flu-atajo, .flu-sino-opcion, .flu-boton, .flu-guia-paso, .flu-check, .flu-crear-boton, .flu-accion,
  .flu-mundo-icono, .flu-nivel-icono, .flu-ruta-marca, .flu-ruta-lista strong, .flu-icono-opcion, .flu-color-opcion { transition: none; }
  .flu-mundo:hover, .flu-nivel:hover, .flu-crear-boton:hover, .btn.flu-boton-jugar:hover:not(:disabled) { transform: none; }
  .flu-mundo:hover .flu-mundo-icono, .flu-nivel:hover .flu-nivel-icono { transform: none; }
  html.flu-vt-activa::view-transition-group(*), html.flu-vt-activa::view-transition-old(*), html.flu-vt-activa::view-transition-new(*) { animation: none !important; }
}
@keyframes flu-solo-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes flu-logro-quieto { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flu-latir-opacidad { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* ---------- Hoja impresa de la solicitud (HojaSolicitudFlujo) ---------- */
.flu-imprimir { align-self: center; }
.flu-hoja-texto { white-space: pre-line; }
.flu-hoja-firmas { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; }
@media print {
  .flu-hoja-firmas { grid-template-columns: repeat(3, 1fr) !important; }
  .flu-hoja .fer-hoja-tabla td small { display: block; }
}