/* Pantalla de los lives (/seguidores, seguidores-tops.js): los seguidores a todo lo ancho arriba y una tira por top
   (solo los que tienen a alguien; sin ninguno, los seguidores llenan la pantalla). Sin títulos, solo iconos. Desde el
   live el iPad se ve desenfocado detrás de Emma, así que foto, nombre y cifras van lo más grandes que quepan: todo se
   mide contra su tarjeta (`cqh`/`cqw`). De cada top solo sale el #1 que sigue en el live. */

/* El tema de Día de Muertos le pone espacio arriba a main por la guirnalda; aquí no hay guirnalda. */
body.is-live.is-bare main { display: block; padding: 0; }

.lv2 {
    --lv2-gap: clamp(8px, 1.4vmin, 16px);
    height: 100vh;
    height: 100dvh;
    padding: var(--lv2-gap);
    display: flex;
    flex-direction: column;
    gap: var(--lv2-gap);
    color: var(--mascara);
    overflow: hidden;
}

.lv2-tops {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--lv2-gap);
}

/* En horizontal, dos columnas de tiras. */
@media (orientation: landscape) {
    .lv2-tops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Seguidores: arriba a todo lo ancho; sin tops, toda la pantalla --- */
.lv2-hero {
    container-type: size;
    position: relative;
    flex: 0 0 24%;
    min-height: 0;
    display: grid;
    place-items: center;
    background: #fff;
    border: 4px solid var(--mascara);
    border-radius: clamp(18px, 2.6vmin, 32px);
    box-shadow: 0 6px 0 var(--mascara);
    overflow: hidden;
}

.is-solo .lv2-hero { flex: 1; }
.is-solo .lv2-tops { display: none; }

.lv2-number {
    position: relative;
    /* Proporción del número recortado (embed_crop: 124 × 34): lo más grande que quepa a lo ancho y a lo alto. */
    height: min(84cqh, calc(94cqw / 3.65));
    aspect-ratio: 124 / 34;
    overflow: hidden;
    background: #fff;
}

.lv2-number iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 320px;
    height: 90px;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.lv2-tiktok { position: absolute; top: 6cqh; left: 3cqw; width: min(16cqh, 8cqw); height: auto; }
.lv2:not(.is-solo) .lv2-tiktok { display: none; }
.is-solo .lv2-tiktok { width: min(8cqh, 10cqw); }

.lv2-state {
    position: absolute;
    top: 5cqh;
    right: 3cqw;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0.65em;
    border-radius: 999px;
    background: #e03162;
    color: #fff;
    font-size: min(10cqh, 4cqw);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.lv2-state[hidden] { display: none; }
.lv2-state:not(.is-on) { background: var(--mascara); }
.lv2-state:not(.is-on) .lv2-dot { display: none; }
.lv2-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; animation: latido 1.6s ease-in-out infinite; }

/* --- Tiras de los tops: foto, nombre e icono + cifra a la derecha, en un solo renglón y lo más grandes que quepan --- */
.lv2-top {
    --lv2-color: #e0457b;
    --lv2-soft: #ffe3ee;
    container-type: size;
    min-width: 0;
    min-height: 0;
    background: #fff;
    border: 4px solid var(--mascara);
    border-left: clamp(10px, 1.6vmin, 18px) solid var(--lv2-color);
    border-radius: clamp(18px, 2.6vmin, 32px);
    box-shadow: 0 6px 0 var(--mascara);
    overflow: hidden;
}

.lv2-top[hidden] { display: none; }

.lv2-top--gifts { --lv2-color: #c98a00; --lv2-soft: #fff1c9; }
.lv2-top--chat { --lv2-color: #2a78d6; --lv2-soft: #dfeeff; }
.lv2-top--likes { --lv2-color: #e0457b; --lv2-soft: #ffe3ee; }
.lv2-top--shares { --lv2-color: #1f9e6e; --lv2-soft: #daf5ea; }
.lv2-top--stay { --lv2-color: #c4521a; --lv2-soft: #ffe6d6; }
.lv2-top--new { --lv2-color: #0f8f9a; --lv2-soft: #d6f4f6; }
.lv2-top--fans { --lv2-color: #8a3ad6; --lv2-soft: #efe2ff; }

.lv2-in {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3cqw;
    padding: 0 3cqw 0 2cqw;
}

.lv2-ava {
    flex: none;
    width: min(88cqh, 34cqw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: max(3px, 2.4cqh) solid var(--lv2-color);
    background: var(--lv2-soft);
    color: var(--lv2-color);
    font-size: min(46cqh, 18cqw);
    font-weight: 900;
}

.lv2-ava img { width: 100%; height: 100%; object-fit: cover; }
.lv2-ava[hidden] { display: none; }

.lv2-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3cqw; }

.lv2-head {
    display: flex;
    align-items: center;
    gap: 0.15em;
    order: 2;
    flex: none;
    max-width: 45%;
    font-size: min(56cqh, 11cqw);
    line-height: 1;
}

.lv2-icon { flex: none; }

.lv2-num {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--lv2-color);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.lv2-num:empty { display: none; }

/* El nombre: tamaño máximo aquí; seguidores-tops.js lo achica solo lo necesario para que quepa a lo ancho. */
.lv2-name {
    font-family: var(--titulos);
    flex: 1;
    min-width: 0;
    font-size: min(56cqh, 11cqw);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
}

/* --- Cuenta regresiva (solo si hay evento en config/countdown.php) --- */
.lv2-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vmin, 36px);
    padding: clamp(6px, 1.2vmin, 14px) clamp(16px, 3vmin, 36px);
    border-radius: clamp(20px, 3vmin, 36px);
    background: var(--mascara);
    color: #fff;
}

.lv2-countdown h2 { font-size: clamp(1.2rem, 3.6vmin, 2.4rem); line-height: 1.05; }
.lv2-clock { display: flex; gap: clamp(10px, 2.4vmin, 28px); list-style: none; margin: 0; padding: 0; }
.lv2-clock li { display: flex; align-items: baseline; gap: 0.2em; }
.lv2-clock strong { font-size: clamp(1.8rem, 6vmin, 3.8rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.lv2-clock span { font-size: clamp(0.9rem, 2.2vmin, 1.3rem); font-weight: 800; opacity: 0.8; }
.lv2-countdown .live-started { font-size: clamp(1.4rem, 4.4vmin, 2.6rem); font-weight: 900; }

.lv2-foot {
    display: flex;
    align-items: center;
    gap: 1em;
    font-size: clamp(0.75rem, 1.6vmin, 0.95rem);
    font-weight: 800;
    line-height: 1;
}

.lv2-credit { margin-right: auto; opacity: 0.5; }

/* Botoncitos del pie: chicos pero fáciles de tocar en el iPad. */
.lv2-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 0.9em;
    border: 2px solid var(--mascara);
    border-radius: 999px;
    background: #fff;
    color: var(--mascara);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.lv2-btn[hidden] { display: none; }

/* Celular: una columna que se desliza, tarjetas de alto fijo. */
@media (max-width: 600px) {
    .lv2 { height: auto; min-height: 100dvh; overflow: visible; }
    .lv2-hero { flex-basis: 140px; }
    .is-solo .lv2-hero { flex: 0 0 60vh; }
    .lv2-tops { grid-template-columns: 1fr; grid-auto-rows: 110px; }
}