* { box-sizing: border-box; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f4f2ff;
    margin: 0;
    padding: 20px;
    color: #2d2d2d;
}
.contenedor { max-width: 480px; margin: 0 auto; }
.centro { text-align: center; margin-top: 40px; }
h1 { font-size: 1.6rem; margin-bottom: 8px; }
h2 { font-size: 1.2rem; margin: 24px 0 8px; }
.subtitulo { color: #666; margin-bottom: 24px; }
.codigo-grande {
    background: #6c5ce7; color: white; padding: 8px 16px;
    border-radius: 8px; display: inline-block; margin-bottom: 16px; font-size: 1.1rem;
}
.tarjeta {
    background: white; border-radius: 16px; padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 12px;
}
input[type="text"], select, textarea, input[type="file"] {
    padding: 12px; border-radius: 10px; border: 1px solid #ddd; font-size: 1rem; font-family: inherit;
}
button, .opcion-btn, .boton-link {
    padding: 14px; border-radius: 10px; border: none;
    background: #6c5ce7; color: white; font-size: 1rem; cursor: pointer;
    transition: background 0.2s; text-decoration: none; display: inline-block; text-align: center;
}
button:hover, .opcion-btn:hover, .boton-link:hover { background: #5a4bd6; }
button:disabled, .opcion-btn:disabled { background: #ccc; cursor: not-allowed; }
label { font-weight: 600; margin-top: 8px; font-size: 0.9rem; color: #444; }
.error { color: #d63031; font-weight: 600; }
.enlace-admin { margin-top: 20px; }
.enlace-admin a { color: #6c5ce7; text-decoration: none; }
input[type="range"] { width: 100%; accent-color: #6c5ce7; }

/* --- Lista de slides en el editor --- */
.lista-slides { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.mini-slide {
    display: flex; align-items: center; gap: 10px; background: white;
    padding: 10px 14px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.mini-num { font-weight: bold; color: #6c5ce7; width: 24px; }
.mini-tipo { font-size: 0.75rem; background: #eee; padding: 2px 8px; border-radius: 6px; }
.mini-titulo { flex: 1; }

/* --- Modo presentador (pantalla grande) --- */
.modo-presentador { padding: 0; }
.barra-superior {
    display: flex; justify-content: space-between; padding: 12px 24px;
    background: #f4f2ff; font-size: 0.9rem; color: #444;
}
.escenario {
    height: calc(100vh - 130px); display: flex; align-items: center; justify-content: center;
    padding: 40px; text-align: center;
}
.controles {
    display: flex; justify-content: center; gap: 20px; padding: 16px;
    background: #f4f2ff;
}
.controles button { background: transparent; border: 1px solid #ccc; color: #333; }
.controles span { color: #666; }
.slide h1 { font-size: 2.4rem; color: inherit; }
.cuerpo-slide { font-size: 1.4rem; line-height: 1.5; color: inherit; }
.media-slide { max-height: 60vh; border-radius: 12px; }
iframe.media-slide { width: 80%; height: 60vh; }

/* --- Modo audiencia (celular) --- */
.modo-audiencia { max-width: 480px; margin: 0 auto; }
.escenario-movil { min-height: 200px; margin-bottom: 16px; }
.escenario-movil .media-slide { width: 100%; border-radius: 12px; }
.escenario-movil iframe.media-slide { width: 100%; height: 220px; }

/* --- Panel de administrador --- */
.lista-presentaciones { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tarjeta-pres {
    display: flex; gap: 14px; background: white; border-radius: 12px;
    padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); align-items: center;
}
.qr-mini { width: 64px; height: 64px; border-radius: 6px; flex-shrink: 0; }
.info-pres { flex: 1; }
.titulo-pres { font-weight: 500; margin: 0; }
.codigo-pres { font-size: 0.85rem; color: #777; margin: 2px 0 8px; }
.acciones-pres { display: flex; gap: 14px; font-size: 0.85rem; }
.acciones-pres a { color: #6c5ce7; text-decoration: none; }

.caja-qr { align-items: center; text-align: center; margin: 16px 0; }
.boton-lanzar { width: 100%; font-size: 1.1rem; padding: 16px; }

/* --- Termometro real (tubo + bulbo) --- */
.termo-real { display: flex; flex-direction: column; align-items: center; margin-top: 10px; }
.termo-tubo {
    width: 34px; height: 160px; border: 3px solid #999; border-radius: 17px;
    background: #eee; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
}
.termo-relleno {
    width: 100%; height: 50%; background: #0056e0;
    transition: height 0.7s ease, background 0.7s ease;
}
.termo-bulbo {
    width: 56px; height: 56px; border-radius: 50%; border: 3px solid #999;
    margin-top: -8px; background: #0056e0; transition: background 0.7s ease;
}
.termo-lectura { font-size: 1.1rem; font-weight: 500; color: #1a1a1a; margin-top: 10px; }
.termo-frases {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 16px; max-width: 80%;
}
.termo-chip {
    background: #f0f0f0; color: #333; font-size: 0.85rem;
    padding: 6px 12px; border-radius: 20px;
}

/* --- Animaciones de entrada --- */
.anim-fade { animation: fade 0.5s ease; }
.anim-slide { animation: desliza 0.5s ease; }
.anim-zoom { animation: acerca 0.4s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes desliza { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes acerca { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- Elección con imágenes --- */
.opcion-img { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; }
.op-thumb { width:100%; max-height:120px; object-fit:cover; border-radius:8px; }
.op-img-fila { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.op-img-fila input[type="text"] { flex:1; }

/* --- Nube de palabras en el presentador --- */
.nube-cont { position:relative; width:90%; height:60vh; margin:0 auto; }
.nube-espera { display:flex; align-items:center; justify-content:center; height:100%; color:#bbb; }

/* --- Rueda de la fortuna --- */
.rueda-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }
.rueda-cont { position:relative; width:376px; height:376px; }
.rueda-puntero { position:absolute; top:-12px; left:50%; transform:translateX(-50%); z-index:4; width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:24px solid #1a1a1a; filter:drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.rueda-anillo { position:absolute; inset:0; border-radius:50%; background:#1a1a2e; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.rueda-anillo canvas { border-radius:50%; display:block; background:#fff; }
.rueda-centro { position:absolute; top:50%; left:50%; width:38px; height:38px; background:#fff; border:3px solid #1a1a1a; border-radius:50%; transform:translate(-50%,-50%); z-index:3; box-shadow:0 2px 5px rgba(0,0,0,0.25); }
.rueda-ganador { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(255,255,255,0.96); border-radius:50%; overflow:hidden; z-index:5; }
.rueda-ganador-texto { font-size:34px; font-weight:800; color:#1a1a1a; animation:pop-ganador 0.5s ease; z-index:2; }
.boton-girar { font-size:1.1rem; padding:14px 40px; }
@keyframes brillo-rueda { 0%,100%{filter:drop-shadow(0 0 4px #f0997b);} 50%{filter:drop-shadow(0 0 20px #ffd23f) drop-shadow(0 0 8px #e0143c);} }
.girando { animation:brillo-rueda 0.35s infinite; }
@keyframes pop-ganador { 0%{transform:scale(0.3);opacity:0;} 60%{transform:scale(1.15);opacity:1;} 100%{transform:scale(1);opacity:1;} }
@keyframes confeti-vuelo { 0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;} 100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0.4) rotate(var(--rot));opacity:0;} }
.confeti { position:absolute; top:50%; left:50%; width:10px; height:10px; animation:confeti-vuelo 1.3s ease-out forwards; z-index:1; }

/* --- Pista de controles del presentador --- */
.pista-controles { text-align:center; font-size:0.8rem; color:#999; padding:8px; margin:0; background:#f4f2ff; }
.version-sistema { font-size:0.75rem; color:#bbb; text-align:center; margin-top:20px; }

/* ============ MODO PRESENTACIÓN LIMPIO (cuadrado, título arriba) ============ */
.modo-limpio { margin:0; padding:0; background:transparent; overflow:hidden; }
.modo-limpio .escenario {
    position:fixed; inset:0; width:100vw; height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:3vh 3vw; margin:0;
}
/* El slide es un CUADRADO CENTRAL: título arriba, contenido cuadrado debajo */
.modo-limpio .slide {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:min(96vh, 96vw); height:96vh; gap:2vh; margin:0 auto;
}
.modo-limpio .slide h1 { font-size:clamp(1.6rem, 3.5vh, 3rem); margin:0; flex-shrink:0; text-align:center; }
.modo-limpio .cuerpo-slide { font-size:clamp(1.2rem, 3vh, 2.4rem); }
.modo-limpio .media-slide { max-height:82vh; max-width:100%; object-fit:contain; }
.modo-limpio iframe.media-slide { width:100%; height:80vh; }
/* Imagen y video: centrados en el cuadro, título flotando arriba */
.modo-limpio .slide-tipo-imagen, .modo-limpio .slide-tipo-video {
    justify-content:center; gap:0; position:relative;
}
.modo-limpio .slide-tipo-imagen h1, .modo-limpio .slide-tipo-video h1 {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:90%; z-index:2;
}
.modo-limpio .slide-tipo-imagen .media-slide, .modo-limpio .slide-tipo-video .media-slide {
    max-height:92vh;
}
/* Contenido visual: cuadrado que llena el ancho del cuadro central */
.modo-limpio .grafico-wrap { width:100%; height:auto; aspect-ratio:1/1; max-height:82vh; position:relative; }
.modo-limpio .nube-cont { width:100%; height:78vh; max-height:78vh; position:relative; }
.modo-limpio .muro-cont { width:100%; height:78vh; max-height:78vh; }
.modo-limpio .rueda-wrap { width:100%; max-width:82vh; }

/* Ayuda flotante: invisible hasta mover el mouse */
.ayuda-flotante {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    display:flex; align-items:center; gap:14px;
    background:rgba(0,0,0,0.7); padding:10px 18px; border-radius:30px;
    opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:100;
}
.ayuda-flotante.visible { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.ayuda-flotante button {
    background:transparent; border:none; color:#fff; font-size:1.2rem;
    cursor:pointer; padding:4px 10px; border-radius:6px;
}
.ayuda-flotante button:hover { background:rgba(255,255,255,0.15); }
.ayuda-flotante span { color:#fff; font-size:0.9rem; min-width:50px; text-align:center; }

/* ============ EDITOR CON VISTA PREVIA (dos columnas) ============ */
.editor-body { margin:0; background:#eef0f5; }
.editor-topbar {
    display:flex; align-items:center; gap:16px; padding:12px 20px;
    background:#fff; border-bottom:1px solid #ddd; position:sticky; top:0; z-index:10;
}
.editor-back { color:#6c5ce7; text-decoration:none; font-size:0.9rem; }
.editor-titulo { font-weight:600; }
.editor-codigo { font-size:0.85rem; color:#777; }
.editor-lanzar { margin-left:auto; padding:8px 18px; }

.editor-layout { display:flex; gap:0; height:calc(100vh - 57px); }
.editor-panel { width:42%; max-width:520px; overflow-y:auto; padding:20px; }
.editor-preview { flex:1; background:#dfe2ea; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }

.editor-seccion { background:#fff; border-radius:12px; padding:16px; margin-bottom:16px; }
.editor-seccion-titulo { font-weight:600; margin-bottom:10px; font-size:0.95rem; }
.editor-panel form { display:flex; flex-direction:column; gap:10px; }

.mini-slide { cursor:pointer; transition:background 0.15s; }
.mini-slide:hover { background:#f0eefc; }
.mini-slide.activo { background:#e8e4ff; box-shadow:inset 3px 0 0 #6c5ce7; }
.mini-borrar { margin-left:auto; text-decoration:none; }

/* Marco de vista previa: CUADRADO, igual que el proyector real */
.preview-titulo { font-size:0.85rem; color:#666; margin-bottom:10px; align-self:flex-start; }
.preview-marco {
    width:100%; max-width:560px; aspect-ratio:1/1; background:#fff;
    border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.12); overflow:hidden;
    margin:0 auto;
}
.preview-escenario { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5%; text-align:center; box-sizing:border-box; }
.preview-slide { width:100%; display:flex; flex-direction:column; align-items:center; }
.preview-slide h1 { font-size:clamp(1.1rem,3vw,1.8rem); margin:0 0 12px; }
.preview-slide .cuerpo-slide { font-size:clamp(0.9rem,2vw,1.3rem); }
.preview-nota { margin-top:12px; }

.preview-barras { display:flex; flex-direction:column; gap:8px; width:80%; margin:0 auto; }
.preview-barra-fila { text-align:left; font-size:0.85rem; }
.preview-barra { background:#eee; border-radius:4px; height:10px; margin-top:2px; overflow:hidden; }
.preview-barra > div { background:#6c5ce7; height:100%; }
.preview-grid-img { display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:10px; }
.preview-op-img img { width:100%; height:70px; object-fit:cover; border-radius:6px; }
.preview-op-img span { font-size:0.8rem; display:block; margin-top:4px; }
.preview-sin-img { height:70px; background:#eee; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:#999; }
.preview-termo { display:flex; flex-direction:column; align-items:center; }
.preview-termo-tubo { width:22px; height:90px; border:2px solid #999; border-radius:11px; background:#eee; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.preview-termo-relleno { width:100%; height:55%; background:linear-gradient(#e0143c,#0056e0); }
.preview-termo-bulbo { width:34px; height:34px; border-radius:50%; border:2px solid #999; margin-top:-6px; background:#e0143c; }
.preview-nube { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.preview-rueda { font-size:64px; }

/* Responsive: en móvil el editor se apila */
@media (max-width:800px) {
    .editor-layout { flex-direction:column; height:auto; }
    .editor-panel { width:100%; max-width:none; }
    .editor-preview { min-height:300px; }
}

/* Pantalla de arranque de la presentación */
.arranque { position:fixed; inset:0; background:#1a1a2e; display:flex; align-items:center; justify-content:center; z-index:200; }
.arranque-caja { text-align:center; color:#fff; padding:20px; }
.arranque-titulo { font-size:2rem; font-weight:600; margin-bottom:24px; }
.arranque-boton { font-size:1.3rem; padding:18px 48px; background:#6c5ce7; border:none; border-radius:12px; color:#fff; cursor:pointer; }
.arranque-boton:hover { background:#5a4bd6; }
.arranque-nota { color:#aaa; font-size:0.9rem; margin-top:20px; }

/* ============ VISTA DEL PARTICIPANTE (móvil) — rediseñada ============ */
.modo-audiencia {
    margin:0; padding:0; min-height:100vh;
    display:flex; flex-direction:column; justify-content:flex-start;
    background:#fff;
}
.escenario-movil {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:32px 18px 12px; text-align:center;
}
.slide-movil { width:100%; max-width:600px; }
.slide-movil h2 { font-size:clamp(1.4rem, 6vw, 2.2rem); margin:0 0 16px; color:#1a1a1a; line-height:1.2; }
.cuerpo-movil { font-size:clamp(1.1rem, 4.5vw, 1.6rem); line-height:1.5; color:#333; }
.img-movil { width:100%; max-width:100%; max-height:60vh; object-fit:contain; border-radius:12px; }
.video-movil { width:100%; aspect-ratio:16/9; border-radius:12px; }
.espera-msg { color:#999; font-size:1.1rem; padding:40px; }

/* Zona de interacción: pegada abajo, cómoda para el pulgar */
#zona-voto { padding:0 16px 24px; }
.panel-interaccion {
    display:flex; flex-direction:column; gap:12px;
    max-width:600px; margin:0 auto;
    background:#f7f6ff; border-radius:16px; padding:18px;
}
.int-label { font-size:1rem; color:#555; text-align:center; }
.termo-escala { display:flex; justify-content:space-between; font-size:1rem; color:#555; font-weight:600; }

/* Botones e inputs grandes para dedo en móvil */
.modo-audiencia .opcion-btn,
.panel-interaccion button {
    width:100%; padding:18px; font-size:1.15rem; border-radius:12px;
    border:none; background:#6c5ce7; color:#fff; cursor:pointer; font-weight:500;
}
.modo-audiencia .opcion-btn:active,
.panel-interaccion button:active { background:#5a4bd6; }
.modo-audiencia .opcion-btn:disabled { opacity:0.5; }
.panel-interaccion input[type="text"] {
    width:100%; padding:16px; font-size:1.1rem; border-radius:12px; border:1px solid #ccc;
}
.panel-interaccion input[type="range"] { width:100%; height:36px; accent-color:#6c5ce7; }

.opcion-img { display:flex; flex-direction:column; align-items:center; gap:8px; }
.opcion-img .op-thumb { width:100%; max-height:140px; object-fit:cover; border-radius:10px; }

.confirmado {
    max-width:600px; margin:0 auto; text-align:center;
    background:#e7f7ed; color:#1a7a3f; padding:20px; border-radius:16px;
    font-size:1.15rem; font-weight:500;
}
.err-msg { text-align:center; color:#d63031; font-size:0.95rem; margin:8px 0 0; }

/* Modal QR y botón editar en el editor */
.editor-qr-btn { background:#0a9396; padding:8px 16px; }
.modal-qr { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:300; align-items:center; justify-content:center; }
.modal-qr-caja { background:#fff; border-radius:16px; padding:30px; text-align:center; max-width:90%; }
.modal-qr-titulo { font-size:1.2rem; font-weight:600; margin-bottom:16px; }
.modal-qr-caja img { width:280px; max-width:70vw; border-radius:8px; }
.modal-qr-codigo { font-size:1rem; margin:12px 0 4px; }
.modal-qr-acciones { display:flex; gap:10px; justify-content:center; margin-top:20px; }
.mini-editar { text-decoration:none; margin-left:auto; margin-right:8px; }
.mini-borrar { text-decoration:none; }

/* Resultados en vivo en el celular del participante */
.resultados-vivo { max-width:600px; margin:0 auto; background:#f7f6ff; border-radius:16px; padding:18px; }
.res-titulo { font-size:1rem; color:#1a7a3f; font-weight:600; text-align:center; margin-bottom:14px; }
.res-fila { margin-bottom:10px; }
.res-label { display:flex; justify-content:space-between; font-size:0.95rem; color:#333; margin-bottom:3px; }
.res-barra { background:#e5e5e5; border-radius:6px; height:14px; overflow:hidden; }
.res-barra > div { background:#6c5ce7; height:100%; border-radius:6px; transition:width 0.5s ease; }
.res-total { text-align:center; font-size:0.85rem; color:#888; margin-top:8px; }
.res-espera { text-align:center; color:#666; padding:20px; }
.res-nube { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; padding:10px; }
.res-termo { display:flex; flex-direction:column; align-items:center; padding:10px; }
.res-termo-tubo { width:28px; height:120px; border:2px solid #999; border-radius:14px; background:#eee; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.res-termo-relleno { width:100%; transition:height 0.6s ease, background 0.6s ease; }
.res-termo-bulbo { width:44px; height:44px; border-radius:50%; border:2px solid #999; margin-top:-6px; transition:background 0.6s ease; }
.res-termo-num { font-size:1.2rem; font-weight:600; margin-top:8px; }
.rueda-aviso { text-align:center; color:#333; font-size:1rem; padding:20px; line-height:1.5; }

/* Rueda en el celular del participante */
.rueda-movil-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; }
.rueda-movil-cont { position:relative; width:256px; height:256px; }
.rueda-movil-puntero { position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:4; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:20px solid #1a1a1a; }
#rueda-movil-canvas { border-radius:50%; background:#fff; border:6px solid #1a1a2e; box-sizing:border-box; }
.rueda-movil-centro { position:absolute; top:50%; left:50%; width:28px; height:28px; background:#fff; border:3px solid #1a1a1a; border-radius:50%; transform:translate(-50%,-50%); z-index:3; }
.rueda-movil-ganador { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(255,255,255,0.94); border-radius:50%; z-index:5; }
.rueda-movil-ganador-texto { font-size:1.5rem; font-weight:800; color:#1a1a1a; text-align:center; padding:10px; }
.rueda-movil-nota { font-size:0.85rem; color:#888; text-align:center; }

/* ============ HIPERVÍNCULOS (imágenes con link) ============ */
/* Proyector: grid de imágenes */
.hl-grid { display:grid; gap:3vw; justify-items:center; align-items:center; width:100%; max-width:1100px; margin:0 auto; }
.hl-grid-1 { grid-template-columns:1fr; }
.hl-grid-2 { grid-template-columns:repeat(2,1fr); }
.hl-grid-3 { grid-template-columns:repeat(2,1fr); }
.hl-grid-4 { grid-template-columns:repeat(2,1fr); }
.hl-item { text-align:center; }
.hl-img { max-width:100%; max-height:34vh; object-fit:contain; border-radius:12px; }
.hl-grid-1 .hl-img { max-height:62vh; }
.hl-texto { margin-top:10px; font-size:1.4rem; font-weight:500; color:#1a1a1a; }
.hl-nota { margin-top:24px; }

/* Móvil: botones tappables */
.hl-grid-movil { display:grid; gap:14px; width:100%; max-width:600px; margin:0 auto; }
.hl-grid-movil-1 { grid-template-columns:1fr; }
.hl-grid-movil-2 { grid-template-columns:repeat(2,1fr); }
.hl-grid-movil-3 { grid-template-columns:repeat(2,1fr); }
.hl-boton {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:#f7f6ff; border-radius:16px; padding:16px; text-decoration:none;
    border:2px solid transparent; transition:border 0.15s;
}
.hl-boton:active { border-color:#6c5ce7; }
.hl-boton-img { width:100%; max-height:130px; object-fit:contain; border-radius:10px; }
.hl-boton-texto { font-size:1rem; font-weight:600; color:#6c5ce7; text-align:center; }
.hiperlink-fila { flex-wrap:wrap; }
.hiperlink-fila input[type="text"] { flex:1; min-width:120px; }

/* ============ REACCIONES Y ANIMACIONES ============ */
/* Barra de emojis en el celular (discreta, abajo, fija) */
/* Barra de emojis en el celular (dentro del rotador) */
#barra-emojis-cont { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; z-index:50; pointer-events:none; }
.barra-emojis { display:flex; gap:10px; background:rgba(255,255,255,0.9); backdrop-filter:blur(6px); border-radius:30px; padding:6px 10px; box-shadow:0 3px 12px rgba(0,0,0,0.12); pointer-events:auto; }
.emoji-btn { background:transparent; border:none; font-size:1.5rem; cursor:pointer; padding:4px 8px; border-radius:20px; display:flex; align-items:center; gap:3px; transition:transform 0.1s; }
.emoji-btn:active { transform:scale(1.3); }
.emoji-num { font-size:0.75rem; color:#666; font-weight:600; }

/* Barra de conteo en el proyector (discreta, esquina inferior) */
.barra-emojis-proyector { position:fixed; bottom:16px; right:20px; display:flex; gap:16px; background:rgba(0,0,0,0.06); border-radius:20px; padding:8px 16px; z-index:50; }
.emoji-conteo { font-size:1.1rem; color:#555; }
.emoji-conteo b { font-weight:700; }

/* Emojis flotantes que suben difuminados */
.emoji-flotante { position:fixed; bottom:60px; font-size:2rem; pointer-events:none; z-index:60; animation:subir-emoji 2.5s ease-out forwards; }
.emojis-flotantes-proyector { position:fixed; inset:0; pointer-events:none; z-index:40; }
.emojis-flotantes-proyector .emoji-flotante { font-size:3rem; bottom:70px; }
@keyframes subir-emoji {
    0% { transform:translateY(0) translateX(0) scale(0.6); opacity:0; filter:blur(0); }
    15% { opacity:0.9; transform:translateY(-20px) scale(1); }
    100% { transform:translateY(-70vh) translateX(var(--deriva,0)) scale(1.4); opacity:0; filter:blur(3px); }
}

/* Animaciones de recompensa al enviar (overlay breve) */
.recompensa-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:70; }
.rec-check { font-size:6rem; color:#1a7a3f; animation:rec-pop 0.9s ease; }
.rec-estrella { font-size:6rem; color:#f0a020; animation:rec-giro 1s ease; }
.rec-onda { position:absolute; width:60px; height:60px; border:4px solid #0056e0; border-radius:50%; animation:rec-onda-anim 1.2s ease-out; }
.rec-onda:nth-child(2){ animation-delay:0.2s; }
.rec-onda:nth-child(3){ animation-delay:0.4s; }
.rec-chispas { font-size:3rem; color:#7b2fc9; animation:rec-chispa 1.1s ease; letter-spacing:12px; }
@keyframes rec-pop { 0%{transform:scale(0);opacity:0;} 50%{transform:scale(1.3);opacity:1;} 100%{transform:scale(1);opacity:0;} }
@keyframes rec-giro { 0%{transform:scale(0) rotate(0);opacity:0;} 50%{transform:scale(1.4) rotate(200deg);opacity:1;} 100%{transform:scale(1) rotate(360deg);opacity:0;} }
@keyframes rec-onda-anim { 0%{transform:scale(0);opacity:1;} 100%{transform:scale(6);opacity:0;} }
@keyframes rec-chispa { 0%{transform:scale(0.3);opacity:0;} 50%{transform:scale(1.2);opacity:1;} 100%{transform:scale(1);opacity:0;} }

/* dejar espacio abajo para que la barra de emojis no tape contenido */
#zona-voto { padding-bottom:70px; }

/* Aviso de reseteo exitoso en el panel */
.aviso-ok { background:#e7f7ed; color:#1a7a3f; padding:14px 18px; border-radius:12px; font-weight:500; margin:12px 0; }

/* ============ NUEVO PARTICIPANTE: bienvenida + rotación software ============ */
/* Pantalla de bienvenida */
.bienvenida { display:flex; position:fixed; inset:0; z-index:500; background:#1a1a2e; color:#fff; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.bienvenida-caja { max-width:400px; }
.bienvenida-titulo { font-size:2rem; font-weight:700; margin-bottom:28px; }
.bienvenida-boton { font-size:1.4rem; padding:18px 52px; background:#6c5ce7; border:none; border-radius:14px; color:#fff; cursor:pointer; }
.bienvenida-boton:active { background:#5a4bd6; }
.bienvenida-nota { color:#aaa; font-size:0.95rem; margin-top:20px; }

/* Botón de salir en la esquina */
.btn-salir { position:fixed; top:12px; right:12px; z-index:600; width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,0.45); color:#fff; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* Rotador: ahora es solo un contenedor vertical con scroll natural */
.rotador { position:relative; width:100%; min-height:100vh; }

/* Zona de interacción (antes de votar) — vertical, scroll natural */
.zona-interaccion { width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px 16px 80px; box-sizing:border-box; }
.int-caja { width:100%; max-width:600px; }
.int-titulo { font-size:clamp(1.3rem,5vw,2rem); text-align:center; margin:0 0 20px; }
.int-opciones { display:flex; flex-direction:column; gap:12px; }
.int-opciones-img { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.int-label { text-align:center; font-size:1.1rem; color:#555; margin-bottom:10px; }
.zona-interaccion .opcion-btn { width:100%; padding:18px; font-size:1.15rem; border-radius:12px; border:none; background:#6c5ce7; color:#fff; cursor:pointer; }
.zona-interaccion .opcion-img { display:flex; flex-direction:column; align-items:center; gap:8px; }
.zona-interaccion .op-thumb { width:100%; max-height:130px; object-fit:cover; border-radius:10px; }
.zona-interaccion input[type="text"] { width:100%; padding:16px; font-size:1.1rem; border-radius:12px; border:1px solid #ccc; margin-bottom:12px; box-sizing:border-box; }
.zona-interaccion input[type="range"] { width:100%; height:40px; accent-color:#6c5ce7; }
.zona-interaccion button:not(.opcion-btn) { width:100%; padding:16px; font-size:1.15rem; border-radius:12px; border:none; background:#6c5ce7; color:#fff; cursor:pointer; }
.termo-escala { display:flex; justify-content:space-between; font-size:1.1rem; font-weight:600; color:#555; margin-bottom:8px; }
.espera-msg { color:#999; font-size:1.2rem; text-align:center; }

/* Escenario réplica (después de votar): CUADRADO centrado, título arriba */
.escenario-replica { width:100%; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:20px 12px 80px; box-sizing:border-box; }
.escenario-replica .slide { width:100%; max-width:600px; display:flex; flex-direction:column; align-items:center; }
.escenario-replica .slide h1 { font-size:clamp(1.3rem,5vw,2rem); margin:10px 0 16px; text-align:center; }
/* imagen/video centrados verticalmente en la réplica del celular */
.escenario-replica .slide-tipo-imagen, .escenario-replica .slide-tipo-video {
    min-height:80vh; justify-content:center;
}
.escenario-replica .nube-cont { position:relative; width:100%; aspect-ratio:1/1; }
.escenario-replica .muro-cont { width:100%; aspect-ratio:1/1; }
.escenario-replica .grafico-wrap { width:100%; aspect-ratio:1/1; position:relative; }
.escenario-replica .media-slide { width:100%; max-height:80vh; object-fit:contain; border-radius:10px; }
.escenario-replica .termo-real { transform:scale(1.1); margin:20px 0; }
.escenario-replica .rueda-wrap { width:100%; max-width:340px; }
.escenario-replica .hl-item-link { text-decoration:none; }

/* Emojis flotantes en el celular */
.emojis-flotantes-movil { position:absolute; inset:0; pointer-events:none; z-index:60; }

/* Drag and drop de slides en el editor */
.mini-arrastre { cursor:grab; color:#bbb; font-size:1.1rem; padding:0 6px; user-select:none; }
.mini-arrastre:active { cursor:grabbing; }
.mini-slide.arrastrando { opacity:0.4; background:#e8e4ff; }
.mini-slide { transition:background 0.15s; }
.hint-arrastre { text-align:center; margin-top:8px; font-size:0.8rem; }

/* ============ MURO DE FRASES ============ */
.muro-cont {
    width:100%; height:100%;
    display:grid;
    grid-template-columns:repeat(var(--muro-cols,2), 1fr);
    gap:2%; align-content:center; justify-content:center;
    padding:1%; box-sizing:border-box;
}
.muro-caja {
    background:#f7f6ff; border:2px solid #e0dcff; border-radius:14px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:3%; cursor:pointer; overflow:hidden;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    aspect-ratio:1.3/1;
}
.muro-caja:hover { border-color:#6c5ce7; }
.muro-texto {
    font-weight:600; color:#2a2a3a; line-height:1.2;
    font-size:clamp(0.75rem, 2.2vw, 1.4rem);
    word-break:break-word;
}
/* Cuadro agrandado: ocupa casi toda la pantalla por encima de los demás */
.muro-caja.muro-grande {
    position:absolute; inset:6%; z-index:20; aspect-ratio:auto;
    background:#fff; border-color:#6c5ce7; border-width:3px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
.muro-caja.muro-grande .muro-texto { font-size:clamp(1.8rem, 6vw, 4rem); }
.muro-cont { position:relative; }
.muro-espera { grid-column:1/-1; text-align:center; color:#bbb; font-size:1.2rem; }

/* Preview del muro en el editor */
.preview-muro { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:90%; }
.preview-muro-caja { background:#f7f6ff; border:1.5px solid #e0dcff; border-radius:8px; padding:12px 8px; font-size:0.8rem; font-weight:600; color:#2a2a3a; text-align:center; }

/* Selector de color de fondo en la barra del editor */
.editor-color { display:flex; align-items:center; gap:6px; font-size:0.85rem; color:#fff; cursor:pointer; }
.editor-color input[type="color"] { width:32px; height:32px; border:none; border-radius:6px; cursor:pointer; background:none; padding:0; }

/* Nota de instrucción del muro (debajo del título) */
.muro-nota { text-align:center; color:#6c5ce7; font-size:clamp(0.85rem,2vw,1.1rem); font-weight:600; margin-bottom:2%; opacity:0.85; }

/* Barras HTML para encuestas en celular (texto completo + barra) */
.barras-html { display:flex; flex-direction:column; gap:14px; width:100%; padding:10px 0; justify-content:center; height:100%; }
.barra-fila { width:100%; }
.barra-texto { font-size:1rem; font-weight:600; color:inherit; margin-bottom:6px; line-height:1.25; }
.barra-pista { position:relative; background:#eee; border-radius:10px; height:34px; overflow:hidden; display:flex; align-items:center; }
.barra-relleno { height:100%; border-radius:10px; transition:width 0.5s ease; min-width:4px; }
.barra-valor { position:absolute; right:10px; font-weight:700; color:#2a2a3a; font-size:0.95rem; background:rgba(255,255,255,0.75); padding:1px 6px; border-radius:6px; }

/* Destello visual de confirmación al enviar (feedback garantizado) */
#destello-envio { position:fixed; inset:0; z-index:900; pointer-events:none; display:flex; align-items:center; justify-content:center; opacity:0; }
#destello-envio.activo { animation:destello-anim 0.6s ease-out; }
.destello-check { width:120px; height:120px; border-radius:50%; background:#178a5c; color:#fff; font-size:64px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 40px rgba(23,138,92,0.5); }
@keyframes destello-anim {
    0% { opacity:0; }
    15% { opacity:1; }
    40% { opacity:1; }
    100% { opacity:0; }
}
#destello-envio.activo .destello-check { animation:destello-check-anim 0.6s ease-out; }
@keyframes destello-check-anim {
    0% { transform:scale(0.3); }
    30% { transform:scale(1.1); }
    50% { transform:scale(1); }
    100% { transform:scale(1); }
}

/* Video propio */
.video-espera { color:#fff; font-size:1.4rem; text-align:center; opacity:0.8; }
.modo-limpio .video-propio { width:auto; max-width:100%; max-height:92vh; background:#000; border-radius:4px; }
.escenario-replica .video-espera { color:#333; }

/* ============ TARJETA DE PERFIL (compartible) ============ */
.perfil-cont { width:100%; display:flex; flex-direction:column; align-items:center; padding:10px 0; }
.perfil-espera { color:#999; font-size:1.1rem; text-align:center; padding:40px 0; }
.tarjeta-perfil {
    width:100%; max-width:340px; aspect-ratio:9/16; max-height:60vh;
    background:linear-gradient(160deg,#1a1035,#2d1b4e 50%,#0d0620);
    border:1px solid #c9a961; border-radius:16px;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    padding:8% 7%; box-sizing:border-box; text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,0.3);
}
.tp-marca { color:#c9a961; font-size:0.7rem; letter-spacing:3px; font-weight:600; }
.tp-frase { color:#fff; font-size:clamp(1.1rem,4.5vw,1.5rem); font-weight:700; font-style:italic; line-height:1.3; }
.tp-linea { width:36px; height:2px; background:#c9a961; }
.tp-tag { color:#c9a961; font-size:0.65rem; }
.perfil-botones { width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.pb-descargar { background:#c9a961; color:#1a1035; border:none; padding:14px; border-radius:12px; font-size:1rem; font-weight:700; cursor:pointer; }
.pb-compartir { background:#6c5ce7; color:#fff; border:none; padding:14px; border-radius:12px; font-size:1rem; font-weight:700; cursor:pointer; }
.perfil-nota { color:#999; font-size:0.75rem; text-align:center; margin-top:10px; max-width:340px; }

/* Perfil en el proyector (invitación a responder en el celular) */
.perfil-proyector { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3vh; height:100%; }
.pp-icono { font-size:8vh; }
.pp-texto { font-size:clamp(1.5rem,4vh,3rem); text-align:center; max-width:80%; }

/* ============ VERSUS (tira y afloja): arena blanca + barra abajo ============ */
.vs-cont { display:flex; flex-direction:column; width:100%; height:100%; gap:12px; }
/* Arena superior: fondo blanco, división fija al centro, emojis por lado */
.vs-arena { position:relative; flex:1; display:flex; background:#fff; border-radius:12px; overflow:hidden; border:2px solid #eee; }
.vs-lado { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.vs-nombre { font-weight:800; font-size:clamp(1rem,3.2vw,2.2rem); text-align:center; padding:14px 8px 4px; z-index:3; }
.vs-personas { position:relative; flex:1; width:100%; }
.vs-persona { position:absolute; font-size:clamp(1.3rem,3.2vw,2.4rem); animation:vs-aparece 0.4s ease-out; }
@keyframes vs-aparece { from { transform:scale(0) translateY(20px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }
/* División fija al centro (no se mueve) */
.vs-divisor-fijo { position:absolute; top:6%; bottom:6%; width:3px; background:#ddd; left:50%; transform:translateX(-50%); z-index:2; border-radius:2px; }
/* Barra inferior: el tire y jale con los colores */
.vs-barra { display:flex; width:100%; height:clamp(28px,7vh,60px); border-radius:10px; overflow:hidden; box-shadow:inset 0 2px 6px rgba(0,0,0,0.15); }
.vs-barra-izq, .vs-barra-der { height:100%; width:50%; transition:width 0.6s cubic-bezier(.5,0,.3,1); }

/* Botones del versus en el celular */
.vs-botones { display:flex; gap:12px; width:100%; height:60vh; max-height:420px; }
.vs-btn { flex:1; border:none; border-radius:16px; color:#fff; font-size:1.3rem; font-weight:800; cursor:pointer; text-shadow:0 2px 8px rgba(0,0,0,0.3); transition:transform 0.15s; padding:16px; }
.vs-btn:active { transform:scale(0.96); }
.vs-btn:disabled { opacity:0.6; }