/* Piezas que comparten las escenas del hero del landing (Components/Landing/Showcase). Usan los tokens
   --bsrd-* de landing.css; la animación de cada escena vive en su propio .razor.css. Las medidas se escriben como
   calc(N * var(--u)): --u la define el escenario (HeroShowcase.razor.css) y es lo que permite agrandarlo o achicarlo entero. */

:root {
    /* Duración de las animaciones internas de una escena; la escena completa dura un poco más (SceneDuration). */
    --sc-d: 5.2s;
}

/* El contenido de una escena es de otro componente: su estilo aislado no llega, así que esto va aquí. */
.hs-scene * {
    min-width: 0;
}

/* Bajo el encabezado de la tarjeta, la frase queda pegada a él (la separación normal es la de entre bloques). */
.sc-head + .hs-caption {
    margin-top: calc(-0.4 * var(--u));
}

.sc-mut {
    color: var(--bsrd-cream-muted);
}

/* Cifra que «rueda»: cada valor es una línea y la escena desplaza la columna. Sin animación se ve el último valor.
   Cada línea mide --lh (más que el cuerpo de la letra) para que los trazos que sobresalen, como el de «$» o el de las cifras
   de la tipografía de títulos, no se corten; las escenas desplazan la columna en múltiplos de --lh. */
.sc-odo {
    --lh: round(1.3em, 1px);
    display: inline-block;
    height: var(--lh);
    line-height: var(--lh);
    overflow: hidden;
    vertical-align: bottom;
    font-variant-numeric: tabular-nums;
}

.sc-odo > div {
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--lh) * -1 * (var(--n, 1) - 1)));
}

.sc-odo i {
    display: block;
    height: var(--lh);
    line-height: var(--lh);
    font-style: normal;
    white-space: nowrap;
}

.sc-chip {
    --c: var(--bsrd-copper-strong);
    display: inline-flex;
    align-items: center;
    gap: calc(0.3 * var(--u));
    height: var(--chip-h);
    padding: 0 calc(0.6 * var(--u));
    line-height: var(--chip-h);
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 18%, transparent);
    color: var(--c);
    font-size: calc(0.75 * var(--u));
    font-weight: 700;
    white-space: nowrap;
}

.sc-chip.ok { --c: var(--bsrd-ok); }
.sc-chip.wait { --c: var(--bsrd-warn); }
.sc-chip.cop { --c: var(--bsrd-copper-strong); }

/* Etiqueta que cambia de estado: cada estado es una línea de --chip-h y la escena desplaza la columna. */
.sc-swap {
    display: block;
    height: var(--chip-h);
    overflow: hidden;
}

.sc-swap > div {
    display: flex;
    flex-direction: column;
    /* Cada etiqueta mide lo que mide su texto, no lo de la más ancha de la columna (la «Completada» lleva un icono). */
    align-items: flex-end;
    transform: translateY(calc(var(--chip-h) * -1 * (var(--n, 1) - 1)));
}

.sc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(0.9 * var(--u));
}

.sc-head b {
    font: 800 calc(1.4 * var(--u))/1 var(--bsrd-font-display);
    text-transform: uppercase;
}

.sc-btn {
    display: inline-grid;
    place-items: center;
    height: calc(2.75 * var(--u));
    padding: 0 calc(1.1 * var(--u));
    border: 1px solid var(--bsrd-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--bsrd-cream);
    font: 700 calc(0.95 * var(--u)) var(--bsrd-font-body);
}

.sc-btn.p {
    background: var(--bsrd-copper);
    border-color: var(--bsrd-copper);
    color: var(--bsrd-on-copper);
}

.sc-drawer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(1 * var(--u));
    margin-top: auto;
    padding: calc(0.8 * var(--u)) calc(1 * var(--u));
    background: var(--bsrd-surface-raised);
    border: 1px solid var(--bsrd-line-strong);
    border-radius: 14px;
}

.sc-drawer small {
    display: block;
    color: var(--bsrd-cream-muted);
    font-size: calc(0.78 * var(--u));
}

.sc-drawer .sc-odo {
    font: 900 calc(1.7 * var(--u))/1 var(--bsrd-font-display);
}