/* TARJETA */

.epion-card {
    position: relative;
    background-color: var(--epion-surface);
    border: 1px solid var(--epion-line);
    border-radius: var(--epion-radius-lg);
    box-shadow: var(--epion-shadow-md);
}


.epion-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--epion-line);
}

.epion-card-head__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--epion-text);
}

/* INSIGNIAS */

.epion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--epion-brand-ink);
    background-color: var(--epion-brand-soft);
    border-radius: 999px;
}

.epion-badge--success {
    color: var(--epion-success);
    background-color: rgba(18, 128, 92, 0.12);
}

.epion-badge--danger {
    color: var(--epion-danger);
    background-color: rgba(192, 57, 47, 0.10);
}

.epion-badge--warning {
    color: var(--epion-warning-ink);
    background-color: rgba(201, 129, 28, 0.14);
}

.epion-badge--info {
    color: var(--epion-info-ink);
    background-color: var(--epion-info);
}

.epion-badge--compact {
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--epion-radius-sm);
}

.epion-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.epion-required {
    font-weight: 700;
    color: var(--epion-danger);
}

.epion-hint {
    margin: 0;
    font-size: 0.8rem;
    color: #8fa3ad;
}

/* TRAZA DE PULSO */

.epion-ecg {
    display: flex;
    overflow: hidden;
    height: 44px;
    color: var(--epion-brand);
}


.epion-ecg__beat {
    flex: 0 0 auto;
    width: 190px;
    height: 100%;
    animation: epion-ecg-scroll 3.4s linear infinite;
}

.epion-ecg__beat path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px currentColor);
}

@keyframes epion-ecg-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-190px);
    }
}