/*
 * Monitor de electrocardiograma (layouts/partials/ecg-monitor). Se carga en todas las
 * páginas: lo usan el panel de inicio y el login.
 *
 * Tiempos: un ciclo de 2,4 s con dos latidos (100 por minuto). El pulso de luz es un
 * núcleo blanco con estela (tres capas del mismo trazo con distinto largo); su cabeza
 * avanza 1,3 veces el largo del trazo por ciclo para que la estela salga completa antes
 * de volver a empezar. La cabeza cruza las ondas R (al 23,8 % y 73,8 % del largo real)
 * en el 18,3 % y el 56,8 % del ciclo: ahí late el corazón.
 */

.bm-pulse {
    --pulse-glow: rgba(103, 232, 249, .85);
    display: flex;
    align-items: center;
    gap: .55rem;
    height: 2.7rem;
    padding: 0 .6rem 0 .8rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .85rem;
    background: rgba(15, 12, 50, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.bm-pulse__heart {
    position: relative;
    flex-shrink: 0;
    color: #fb7185;
    font-size: .95rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(251, 113, 133, .7));
    animation: bm-pulse-heart 2.4s linear infinite;
}
.bm-pulse__ecg {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.9rem;
    overflow: visible;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px var(--pulse-glow));
}
.bm-pulse__base { stroke-width: 1.4; stroke-opacity: .24; }
.bm-pulse__beam { animation: 2.4s linear infinite; }
/* Cada capa: guion de largo d que entra (offset d) y sale (offset d - 1,3). Valores fijos:
   el navegador no interpola un número con un calc() y el pulso saltaba sin verse. */
.bm-pulse__beam--tail { stroke-dasharray: .3 2; stroke-dashoffset: .3; stroke-width: 1.6; stroke-opacity: .35; animation-name: bm-pulse-tail; }
.bm-pulse__beam--glow { stroke-dasharray: .12 2; stroke-dashoffset: .12; stroke-width: 2.1; stroke-opacity: .9; animation-name: bm-pulse-glow; }
.bm-pulse__beam--core { stroke-dasharray: .035 2; stroke-dashoffset: .035; stroke-width: 2.4; stroke: #fff; animation-name: bm-pulse-core; }

@keyframes bm-pulse-tail { from { stroke-dashoffset: .3; } to { stroke-dashoffset: -1; } }
@keyframes bm-pulse-glow { from { stroke-dashoffset: .12; } to { stroke-dashoffset: -1.18; } }
@keyframes bm-pulse-core { from { stroke-dashoffset: .035; } to { stroke-dashoffset: -1.265; } }
/* "Lub-dub" en cada onda R. */
@keyframes bm-pulse-heart {
    0%, 16%, 25%, 54.5%, 63.5%, 100% { transform: scale(1); }
    18.3%, 56.8% { transform: scale(1.3); }
    20.3%, 58.8% { transform: scale(1.05); }
    22.3%, 60.8% { transform: scale(1.18); }
}
/* Onda que se expande desde el corazón en cada latido (solo en el login). */
@keyframes bm-pulse-ring {
    0%, 18.2% { opacity: 0; transform: scale(1); }
    18.3% { opacity: .85; transform: scale(1); }
    30% { opacity: 0; transform: scale(1.9); }
    56.7% { opacity: 0; transform: scale(1); }
    56.8% { opacity: .85; transform: scale(1); }
    68.5% { opacity: 0; transform: scale(1.9); }
    100% { opacity: 0; transform: scale(1); }
}

/* Login ("hero"): sin caja, más grande y en proporción real, sobre una rejilla de
   monitor que se desvanece en los bordes; el corazón va en un círculo con brillo. */
.bm-pulse--hero {
    width: min(24rem, 100%);
    height: auto;
    gap: .95rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.bm-pulse--hero .bm-pulse__heart {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(251, 113, 133, .38);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 38%, rgba(251, 113, 133, .3), rgba(251, 113, 133, .06) 72%);
    font-size: 1.2rem;
    box-shadow: 0 0 24px -4px rgba(251, 113, 133, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
    filter: none;
}
.bm-pulse--hero .bm-pulse__heart::before { filter: drop-shadow(0 0 6px rgba(251, 113, 133, .85)); }
.bm-pulse--hero .bm-pulse__heart::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1.5px solid rgba(251, 113, 133, .7);
    border-radius: 999px;
    opacity: 0;
    animation: bm-pulse-ring 2.4s linear infinite;
}
.bm-pulse--hero .bm-pulse__ecg {
    height: auto;
    aspect-ratio: 5;
    background-image:
        linear-gradient(rgba(103, 232, 249, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 249, .08) 1px, transparent 1px);
    background-size: 13px 13px;
    background-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 80%, transparent);
    filter: drop-shadow(0 0 6px var(--pulse-glow));
}
.bm-pulse--hero .bm-pulse__base { stroke-width: 1.2; stroke-opacity: .3; }
.bm-pulse--hero .bm-pulse__beam--tail { stroke-width: 1.4; }
.bm-pulse--hero .bm-pulse__beam--glow { stroke-width: 1.9; }
.bm-pulse--hero .bm-pulse__beam--core { stroke-width: 2.2; }

/* En el pie del menú, separado del usuario. */
.bm-sidebar__footer .bm-pulse { margin-bottom: .55rem; }

/* Menú recogido: queda solo el corazón. */
.bm-collapsed .bm-sidebar .bm-pulse { justify-content: center; padding: 0; }
.bm-collapsed .bm-sidebar .bm-pulse__ecg { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bm-pulse__heart, .bm-pulse__heart::after, .bm-pulse__beam { animation: none; }
    .bm-pulse__beam { display: none; }
    .bm-pulse__base { stroke-opacity: .7; }
}

/* Panel de inicio: cápsula oscura junto al título, para que luzca el brillo del trazo. */
.bm-pulse--panel {
    width: 17rem;
    max-width: 100%;
    height: 2.6rem;
    border-radius: 999px;
    border-color: rgba(129, 140, 248, .35);
    background: linear-gradient(135deg, #1e1b4b, #312e81 60%, #4338ca);
    box-shadow: 0 8px 22px -10px rgba(67, 56, 202, .75), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.bm-pulse--panel .bm-pulse__ecg { height: 1.7rem; }
@media (max-width: 575.98px) {
    .bm-pulse--panel { width: 100%; }
}

/*
 * Trazo de los títulos de color (layouts/partials/hero-ecg): llena solo el hueco libre
 * entre el texto y los botones (nunca pasa por detrás de ellos), se dibuja una vez al
 * cargar y se oculta si el hueco es muy angosto. Va dentro de un contenedor flex junto
 * al texto: .hero-ecg-host o uno propio de la pantalla que crezca hasta los botones.
 */
.hero-ecg-host { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.hero-ecg {
    position: relative;
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    container: hero-ecg / inline-size;
}
.hero-ecg svg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 64px;
    margin-top: -32px;
    fill: none;
    stroke: #a5f3fc;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: .5;
    filter: drop-shadow(0 0 5px rgba(103, 232, 249, .85));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
    clip-path: inset(0 100% 0 0);
    animation: hero-ecg-draw 2.6s cubic-bezier(.45, 0, .2, 1) .15s forwards;
}
@keyframes hero-ecg-draw { to { clip-path: inset(0 0 0 0); } }
@container hero-ecg (max-width: 7rem) { .hero-ecg svg { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .hero-ecg svg { animation: none; clip-path: none; }
}