/* ... (Código CSS previo) ... */

/* Aros de intensidad (aplausos 1–5) */ 
/* ... (Código CSS previo de .ring) ... */

/* Lightbar: Diseño Aumentado (lightbar-wrapper) */
/* ... (Código CSS previo de .lightbar-wrapper) ... */

/* ======================== */
/* ESTILOS BOTÓN SCROLL UP */
/* ======================== */

/* ======================== */
/* ESTILOS BOTÓN SCROLL UP */
/* (Los que ya te envié) */
/* ======================== */

.arrow-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s;
    text-decoration: none;
}
.arrow-btn:hover {
    background: var(--ring);
    color: white;
    transform: scale(1.05);
}

.section-scroll-up {
    text-align: center;
    padding-top: 30px; 
    padding-bottom: 30px;
}

/* ======================== */
/* ESTILOS BLOQUE WHATSAPP */
/* ======================== */

.whatsapp-share-block {
    /* El bloque ya está centrado por la clase text-center en el HTML */
    padding: 30px 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.1); /* Ligero fondo para destacarlo */
    border-radius: 10px;
}

/* Estilo para el botón de WhatsApp (sobreescribe el verde por defecto de Bootstrap) */
.whatsapp-share-block #shareWhatsAppBtn {
    background-color: #25D366; /* Verde icónico de WhatsApp */
    border-color: #25D366;
    transition: transform 0.2s, background-color 0.2s;
}

.whatsapp-share-block #shareWhatsAppBtn:hover {
    background-color: #128C7E; /* Un verde más oscuro al pasar el mouse */
    border-color: #128C7E;
    transform: translateY(-2px); /* Pequeño efecto de levantamiento */
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.5);
}

.whatsapp-share-block h4 {
    color: #fff;
}


 
/* Estilo general del botón circular (usado en el header y ahora en sections) */
.arrow-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent); /* Rosa vibrante (o el color que prefieras) */
    color: var(--bg); /* Morado oscuro */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s;
    text-decoration: none;
}
.arrow-btn:hover {
    background: var(--ring); /* Naranja (o el color de hover) */
    color: white;
    transform: scale(1.05);
}

/* Contenedor para centrar el botón después de la sección */
.section-scroll-up {
    text-align: right;
    /* padding-top: 30px; */
    padding: 17px;
    /* padding-bottom: 30px; */
}

/* Estilos para la votación con estrellas */
.poll-stars {
    font-size: 1.8rem; /* Estrellas más grandes */
    cursor: pointer;
    display: flex;
    gap: 0.3rem;
}
.poll-star {
    color: #4a4a4a; /* Color inactivo */
    transition: transform 0.1s ease, color 0.2s ease;
}
.poll-star:hover {
    transform: scale(1.1);
}
.poll-star.active {
    color: var(--star-fill); /* Color activo (amarillo) */
}
/* Estilo para cuando ya se votó */
.poll-stars.voted .poll-star {
    cursor: default;
}
.poll-stars:not(.voted) .poll-star:hover ~ .poll-star {
    color: #4a4a4a; /* Desactiva estrellas a la derecha de la que se pasó el mouse */
}
.poll-stars:not(.voted) .poll-star:hover,
.poll-stars:not(.voted) .poll-star:hover ~ .poll-star.active {
    color: var(--star-fill);
}
.poll-stars:not(.voted) .poll-star:hover ~ .poll-star:not(.active) {
    color: #4a4a4a; 
}


/* Estilos del Ranking */
.ranking-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.ranking-item:last-child {
    border-bottom: none;
}
.ranking-item .rank-number {
    font-size: 2rem;
    font-weight: 800;
    width: 50px;
    text-align: center;
    color: var(--accent);
}
.ranking-item:nth-child(1) .rank-number { color: gold; }
.ranking-item:nth-child(2) .rank-number { color: silver; }
.ranking-item:nth-child(3) .rank-number { color: #cd7f32; /* Bronze */ }

.ranking-item .rank-song {
    flex-grow: 1;
    font-weight: 600;
}
.ranking-item .rank-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--warning);
}

/* ... (Código CSS Calculadora) ... */


:root{
    --bg: #3b0066; /* Fondo morado oscuro */
    --card: #5a189a; /* Tarjeta morada */
    --ring: #ff5722; /* Anillo aplausos naranja */
    --ring-inner: #ff9800;
    --accent: #ff8fab; /* Rosa vibrante */
    --star-fill: #ffd700; /* Color de las estrellas de votación */
    --nav-bg: rgba(10,6,22,0.75);
}

.lead {
    font-size: 1.1rem;
    line-height: 1.2rem;
    font-weight: 300;
}
 
 
 .app-nav{
      text-align: center;
      z-index:1030;
      border-top:1px solid #e9ecef;box-shadow:0 -8px 24px rgba(0,0,0,.06);
      padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    }
    .app-nav .nav-grid{ 
      display: inline-flex;
      list-style:none;padding:0;margin:0;
      grid-template-columns:repeat(2,1fr);
    }
    @media (min-width:576px){ .app-nav .nav-grid{grid-template-columns:repeat(4,1fr)} }
    .app-nav .nav-link{
      display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    background: var(--pill);
    color: var(--text);
    border-radius: 12px;
    padding: .5rem;
    margin: 0.3rem;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(13, 110, 253, .12) inset;
    border: 1px solid rgb(255 255 255 / 48%);
    min-height: 48px;
    transition: transform .15s 
ease, background-color .15s 
ease, box-shadow .15s 
ease;
    text-align: center;
    }
    .app-nav .nav-link:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(13,110,253,.12)}
    .app-nav .nav-link.active{
      background:linear-gradient(180deg,#0d6efd,#0b5ed7);
      color:#fff;border-color:transparent;
      box-shadow:0 10px 24px rgba(13,110,253,.35);
    }
    .app-nav .nav-link svg{width:18px;height:18px;flex:0 0 auto;opacity:.9}
    .app-nav .nav-link span{line-height:1}


.bg-white 
 {
    background-color: rgb(36 156 216) !important;
}

html,body {height:100%;}
body{
        background: linear-gradient(180deg, #2f0056, #2f0056);
    color:#f3e8ff;
    font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial;
}

 .list-group-item {
    color: #fff !important;
}

.bg-black {
    --bs-bg-opacity: 1;
    background-color: rgb(33 37 41) !important;
}

/* NAV */
.site-nav {
/* position: sticky;*/
    top: 0;
    z-index: 1050;
    background: var(--nav-bg);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.site-nav .nav-link{color:#f3e8ff}
.site-nav .nav-link:hover{color:var(--accent)}

/* HEADER HERO con SLIDER/VIDEO */
.hero {
  position: relative;
  height: 45vh;
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

/* Nuevo contenedor para el slider */
.hero .hero-slider-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Animación de fade */
    filter: brightness(0.45) saturate(1.05); /* Filtro de color y brillo */
    z-index: 1;
}
.hero-slide:not(.is-video) {
    background-size: cover;
    background-position: center;
}
.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero video {
    /* Mantenemos el video, pero el slider JS lo controla la opacidad */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none; /* Quitamos el filtro del video, ahora lo maneja .hero-slide */
}

.hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(25 4 73 / 82%), rgba(11, 7, 20, 0.15));
    z-index: -1;
}
.hero .hero-inner {
    max-width: 1100px;
    padding: 24px;
    z-index: 0; /* Asegurar que el contenido esté sobre el overlay */
}
.hero .page-title{
    font-weight:800;
    letter-spacing:.2px;
    font-size: clamp(1.75rem, 3.6vw, 3.2rem);
}
.hero .page-title .mc{color:var(--accent)}
.hero .lead {color: rgba(243,232,255,0.9)}

/* Flecha para seguir */
.arrow-btn {
    margin-top: 24px;
    display:inline-grid;
    place-items:center;
    width:56px;height:56px;border-radius:999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.06);
    color:var(--accent);
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s;
}
.arrow-btn:hover{
    transform: translateY(-4px);
    box-shadow:0 8px 26px rgba(0,0,0,.45);
}

/* Tarjetas y mesa */
.ec-card{
    color: #fff;
    background: #212529;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.ec-card .card-header{
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
}
.table-dark {
    --bs-table-bg: var(--card);
}
.table-hover>tbody>tr:hover>*{
    --bs-table-accent-bg: #8b40c4;
    cursor:pointer;
}
.table-hover>tbody>tr.playing>*{
    --bs-table-accent-bg: #8b40c4;
    cursor:pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .35);
}
.sticky-tools{
    position:sticky;
    top:72px;
    z-index:10;
    background:linear-gradient(180deg, rgba(27,0,62,0.95), rgba(59,0,102,0.8));
    backdrop-filter: blur(6px);
} 

/* Aros de intensidad (aplausos 1–5) */ 
.ring{
    width:46px; 
    height:46px; 
    border-radius:50%; 
    display:grid; 
    place-items:center; 
    font-weight:700; 
    color:#fff; 
    box-shadow: 0 0 12px var(--ring-inner); /* Añadido para glow */
} 
.ring::before{ 
    content:attr(data-value); 
    font-size:1rem; 
} 
.ring[data-value="1"]{ background:conic-gradient(var(--ring) 20%, transparent 0) padding-box, radial-gradient(circle at center, var(--ring-inner), transparent 60%) border-box; border:1px solid var(--ring); } 
.ring[data-value="2"]{ background:conic-gradient(var(--ring) 40%, transparent 0) padding-box, radial-gradient(circle at center, var(--ring-inner), transparent 60%) border-box; border:1px solid var(--ring); } 
.ring[data-value="3"]{ background:conic-gradient(var(--ring) 60%, transparent 0) padding-box, radial-gradient(circle at center, var(--ring-inner), transparent 60%) border-box; border:1px solid var(--ring); } 
.ring[data-value="4"]{ background:conic-gradient(var(--ring) 80%, transparent 0) padding-box, radial-gradient(circle at center, var(--ring-inner), transparent 60%) border-box; border:1px solid var(--ring); } 
.ring[data-value="5"]{ background:conic-gradient(var(--ring) 100%, transparent 0) padding-box, radial-gradient(circle at center, var(--ring-inner), transparent 60%) border-box; border:1px solid var(--ring); }


/* Lightbar: Diseño Aumentado (lightbar-wrapper) */
.lightbar-wrapper {
    /* Nuevo diseño ampliado */
    display: flex;
    flex-direction: column;
    align-items: center;
    /*border: 2px solid rgba(255,255,255,0.2);*/ /* Borde destacado */
    /*border-radius: 12px;*/
    /*padding: 8px 10px;*/ /* Más padding para 'campo de diseño' */
    background: rgba(0,0,0,0.3);
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.lightbar-wrapper .lightbar {
    height: 14px; /* Un poco más grueso */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Efecto de brillo */
}
.lightbar-wrapper .light-name {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 6px;
    font-weight: 600;
    color: var(--accent);
}

.progress {
    background-color: #4a4a4a;
    height: 18px;
    border-radius: 9px;
    overflow: hidden;
}
.progress-bar {
    background-color: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

/* Estilos de la encuesta (Se mantienen, aunque el HTML fue eliminado) */
.poll-star {
    color: var(--star-fill);
    cursor: pointer;
    font-size: 1.5rem;
    transition: transform 0.1s ease, color 0.2s ease;
}
.poll-star:hover {
    transform: scale(1.1);
}
.poll-star.inactive {
    color: #4a4a4a;
}

/* Estilos Calculadora */
.calc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.calc-item:last-child {
    border-bottom: none;
}
.calc-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.8rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.calc-btn:hover {
    background: var(--accent);
}
.calc-total {
    background: #2a0050;
    padding: 20px;
    border-radius: 1rem;
}
.calc-total h1 {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}