/*
 * Global "vigencia" (validity) progress component — `scaem-status-bar` layer.
 *
 * Self-contained: the host supplies only layout context. Loaded globally (app
 * shell + legacy header) like the Dialog layer so any page can mount it.
 *
 * Rebuilt faithfully from the Zur reference without Bootstrap: grey track →
 * striped animated fill → icon pinned to the fill tip → centred label. The
 * warning and danger fills blink ("intermitente") so a state reads before the
 * label does; `prefers-reduced-motion` stops both that and the stripes.
 *
 * Band colours are modifier classes the component toggles by percentage — or by
 * an explicit `band` the caller passes to `set()` when its rule is not a
 * percentage. The set of bands is per-instance, so a page can add its own (the
 * fill colour of any band is `scaem-status-bar--<name> .scaem-status-bar__fill`).
 */

.scaem-status-bar {
    display: block;
}

/* Corners are the reference 0.25rem rounded 40% more (0.35rem). */
.scaem-status-bar__bar {
    position: relative;
    height: 1.25rem;
    background-color: #a7a7a7;
    border-radius: 0.35rem;
    overflow: visible;
}

.scaem-status-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background-color: #09c666;
    background-image: linear-gradient(
        45deg,
        rgb(255 255 255 / 15%) 25%,
        transparent 25%,
        transparent 50%,
        rgb(255 255 255 / 15%) 50%,
        rgb(255 255 255 / 15%) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    border-radius: 0.35rem;
    animation: scaem-status-bar-stripes 1s linear infinite;
    transition: width 0.6s ease;
}

.scaem-status-bar--warning .scaem-status-bar__fill {
    background-color: #ddbc23;
}

/* Urgency band; the app palette's danger red (Bootstrap `.bg-danger`). */
.scaem-status-bar--danger .scaem-status-bar__fill {
    background-color: #dc3545;
}

/* "Intermitente" states: the warning and danger fills pulse on and off. The
 * stripes keep moving underneath, so the two animations are composed rather
 * than replaced. */
.scaem-status-bar--warning .scaem-status-bar__fill,
.scaem-status-bar--danger .scaem-status-bar__fill {
    animation:
        scaem-status-bar-stripes 1s linear infinite,
        scaem-status-bar-blink 1s ease-in-out infinite;
}

@keyframes scaem-status-bar-blink {
    50% {
        opacity: 0.35;
    }
}

@keyframes scaem-status-bar-stripes {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

/* Icon track: full-height overlay whose width equals the fill, right-aligned
 * so the icon rides the fill tip (same technique as the reference). */
.scaem-status-bar__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: right;
    white-space: nowrap;
    transition: width 0.6s ease;
}

/* The glyph is a fifth larger than the 1.25rem track it rides, so its half-width
 * offset onto the fill tip grows by that same fifth.
 *
 * The glyph is white — it rides the fill tip, so it lands on the green, amber
 * and red bands in turn, and the crimson cap vanished against the red
 * `--danger` fill. A navy ring in the card's own background colour (`--uba-ink`,
 * #101829) plus a soft shadow lifts it off the track (#a7a7a7) when the bar is
 * empty and off the pale fills at full width. `paint-order: stroke` keeps the
 * ring under the fill, so the glyph loses no white to the border. */
.scaem-status-bar__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: -0.675rem;
    vertical-align: middle;
    fill: #fff;
    stroke: #101829;
    stroke-width: 2;
    stroke-linejoin: round;
    paint-order: stroke;
    filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 45%));
}

.scaem-status-bar__text {
    position: absolute;
    inset: 0 0 auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    height: 1.25rem;
    margin: 0;
    /* The label is centred, so it straddles the fill AND the grey track at the
     * same time — its colour therefore has to clear 4.5:1 against both. Measured
     * (WCAG 2.1, foreground on background):
     *   #000 on green #09c666  9.28:1 (AAA)
     *   #000 on amber #ddbc23 11.29:1 (AAA)
     *   #000 on track #a7a7a7  8.73:1 (AAA)
     *   #000 on red   #dc3545  4.64:1 (AA)
     * Light text cannot: #fff is 2.26:1 on the green, 1.86:1 on the amber and
     * 2.41:1 on the track, so no per-band light colour survives the fill edge.
     * No halo either — a light text-shadow washes the glyph edges out over the
     * bright fills instead of helping. Hosts with their own fills can override
     * via --scaem-status-bar-text. */
    color: var(--scaem-status-bar-text, #000);
    /* Inherited from the host so the label always matches the surrounding
     * font family; the size matches the reference exactly, the weight is the
     * reference's 600 (it keeps the small label solid over the fills). */
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* The number is part of the label: same colour, just larger. */
.scaem-status-bar__days {
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .scaem-status-bar__fill {
        animation: none;
    }
}