/* Recorrido del pedido en horizontal: la tira de "Seguimiento del pedido".
 *
 * Este archivo lo cargan las dos pantallas que muestran el recorrido —la ficha
 * del cliente y el pedido del panel— y por eso está aparte de los estilos de la
 * tienda. La información es la misma en las dos y tiene que dibujarse igual: si
 * el panel lo pintara con otras reglas, un cambio de estado se vería de una
 * forma donde atiende y de otra donde compra.
 *
 * Los colores salen de variables con valor por defecto, y la tienda las define
 * en su `:root`. Aquí no se repite la paleta de la marca: cuando `--line` está
 * definida (la tienda) se usa esa, y cuando no (el panel) entra el valor de
 * reserva. Los pasos de tono (`--flow`) sí son propios de la tira, porque son
 * los que distinguen la etapa actual de la superada y de la que todavía no
 * llegó, y no dependen del tema.
 */

.order-flow-card,
.order-flow-strip {
    --of-card: var(--white, #ffffff);
    --of-line: var(--line, #e7e9e5);
    --of-muted: var(--muted, #6b8077);
    --of-ink: var(--charcoal, #1f322b);
    --of-page: var(--page-bg, #ffffff);
    --of-radius: var(--radius-lg, 22px);
    --of-shadow: var(--shadow-sm, 0 2px 10px rgba(31, 50, 43, 0.05));
}

/* En el panel la tarjeta es la propia sección de Filament, así que el fondo lo
   pone ella. El color de la superficie se toma del gris de Filament para no
   inventar un blanco que en modo oscuro sería un descuadre. */
.dark .order-flow-card,
.dark .order-flow-strip {
    --of-card: transparent;
    --of-line: rgba(255, 255, 255, 0.14);
    --of-muted: #94a3b8;
    --of-ink: #e5e7eb;
    --of-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.order-flow-section {
    padding: 1.75rem 0 0;
    background: var(--of-page);
}

.order-flow-card {
    background: var(--of-card);
    border: 1px solid var(--of-line);
    border-radius: var(--of-radius);
    box-shadow: var(--of-shadow);
    padding: 1.6rem 1.75rem 1.5rem;
}

.order-flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.order-flow-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--of-muted);
}

.order-flow {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-flow-step {
    /* `flex: 1` reparte el ancho entre los pasos, y `min-width` impide que se
       aplasten en un móvil. Cuando no caben todos, la fila se sale a scroll en
       vez de encogerse: un paso estrecho con su etiqueta partida en tres líneas
       no dice en qué estado está el pedido. */
    position: relative;
    flex: 1 1 0;
    min-width: 8.5rem;
    text-align: center;
    padding: 0 0.35rem;
}

/* El conector va en el paso, no entre pasos: así se puede pintar del color del
   tono que corresponda sin apoyarse en el hermano siguiente. */
.order-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.3rem;
    left: calc(50% + 1.3rem);
    right: calc(-50% + 1.3rem);
    height: 2px;
    background: var(--of-line);
}

.order-flow-bubble {
    position: relative;
    z-index: 1;
    /* Bloque y no `inline-flex`: en línea, la burbuja se apoya en la línea base
       del texto y baja los píxeles que ocupa el descendente, con lo cual el
       conector —que se coloca a `1.3rem`, justo la mitad de la burbuja— quedaba
       torcido. */
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    font-size: 1.15rem;
    background: var(--of-card);
    color: var(--of-muted);
    box-shadow: inset 0 0 0 1px var(--of-line);
}

.order-flow-label {
    display: block;
    margin-top: 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--of-muted);
}

.order-flow-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: var(--of-muted);
    opacity: 0.85;
}

/* La nota que el panel dejó al cambiar de estado. Va dentro del paso porque es
   de ese paso, pero se recorta a dos líneas: hay notas técnicas largas («estado
   inicial, pedido anterior al historial») y con el texto entero la fila deja de
   ser una tira para volverse un bloque desigual. El texto completo sigue en el
   `title` del paso. */
.order-flow-note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--of-muted);
    opacity: 0.8;
}

/* Quién dejó el estado anotado. Solo aparece en el panel, donde hace falta para
   saber si una etapa la puso una persona o el sistema. */
.order-flow-actor {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--of-muted);
    opacity: 0.7;
}

/* Cada tono mueve dos variables y el resto de las reglas no sabe de dónde
   salen. Es lo que permite que un mismo paso se vea igual de superado, actual o
   futuro cambiando solo estas tres líneas. */
.order-flow-step--warning { --flow: #92600a; --flow-soft: #fdf3d7; }
.order-flow-step--info { --flow: #0f6d8a; --flow-soft: #e0f0f7; }
.order-flow-step--primary { --flow: #3c5096; --flow-soft: #e5eaf5; }
.order-flow-step--success { --flow: #2f7240; --flow-soft: #e2f1e4; }
.order-flow-step--danger { --flow: #a6352e; --flow-soft: #fbe4e2; }
.order-flow-step--secondary { --flow: #5c6b62; --flow-soft: #eceee9; }

/* Superado: el tono se ve en la burbuja y en el conector que sale de ella. El
   texto se queda en gris para que la mirada caiga primero en la etapa actual,
   que es la única que está en marcha ahora. */
.order-flow-step--done .order-flow-bubble {
    background: var(--flow-soft);
    color: var(--flow);
    box-shadow: inset 0 0 0 1px transparent;
}

.order-flow-step--done::after {
    background: var(--flow);
    opacity: 0.35;
}

/* La etapa actual: burbuja cheia, anillo del mismo tono y la etiqueta en negro.
   Es la única que tiene sombra, y por eso se lee como «aquí» sin necesidad de
   leer nada. */
.order-flow-step--current .order-flow-bubble {
    background: var(--flow);
    color: #ffffff;
    font-size: 1.3rem;
    box-shadow: 0 0 0 4px var(--flow-soft), var(--of-shadow);
}

.order-flow-step--current .order-flow-label {
    color: var(--of-ink);
    font-weight: 700;
}

.order-flow-step--current .order-flow-meta {
    color: var(--flow);
    font-weight: 700;
    opacity: 1;
}

/* Futuro: hueco. El borde discontinuo dice «todavía no» sin necesidad de ninguna
   leyenda. */
.order-flow-step--todo .order-flow-bubble {
    box-shadow: inset 0 0 0 1px var(--of-line);
    font-size: 1rem;
}

.order-flow-now {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.5rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--of-line);
    font-size: 0.88rem;
    color: var(--of-muted);
}

.order-flow-now strong {
    color: var(--of-ink);
}

.order-flow-now i {
    align-self: center;
}

/* En el panel, que es más estrecho que la página de la tienda, la fila sale a
   scroll antes de encogerse: es la misma decisión que toma la tienda en el
   móvil, y con el mismo motivo —un paso estrecho con la etiqueta partida no
   dice en qué estado está el pedido. Solo aplica a `.order-flow-strip`, que es
   la marca del panel, para no tocar el comportamiento de la tienda, que ya lo
   resuelve en sus propias reglas responsive. */
@media (max-width: 1023px) {
    .order-flow-strip .order-flow {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
    }

    .order-flow-strip .order-flow-step {
        flex: 0 0 8.5rem;
        scroll-snap-align: center;
    }
}