@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;800;900&family=Roboto:wght@400;500;600&display=swap');

.encpro-vote-box *,
.encpro-resultados-wrap *,
.encpro-nueva-pregunta-banner * { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════
   BANNER NUEVA PREGUNTA
══════════════════════════════════════════════════════ */
.encpro-nueva-pregunta-banner {
    display: flex; align-items: center; gap: 10px;
    background: #1a1f36; color: #fff;
    border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(67,97,238,.35);
    animation: encpro-banner-in .4s cubic-bezier(.34,1.56,.64,1);
    font-family: 'Roboto', sans-serif;
}
@keyframes encpro-banner-in { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
.encpro-banner-icon  { font-size: 1.3rem; flex-shrink: 0; }
.encpro-banner-texto { flex: 1; font-size: .95rem; font-weight: 600; }
.encpro-banner-btn {
    background: #4361ee; color: #fff; border: none; border-radius: 8px;
    padding: 7px 16px; font-family: 'Roboto', sans-serif;
    font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   VOTE FORM
══════════════════════════════════════════════════════ */
.encpro-vote-box {
    --c-primary: #4361ee;
    --c-bg:      #f8faff;
    --c-text:    #1a1f36;
    --c-muted:   #64748b;
    --c-border:  #e2e8f0;
    font-family: 'Roboto', sans-serif;
    background: var(--c-bg); border-radius: 20px; padding: 28px;
    max-width: 680px; margin: 0 auto; border: 1.5px solid var(--c-border);
    position: relative;
}
.encpro-vote-box.encpro-pausa {
    text-align: center;
    padding: 48px 24px;
}
.encpro-pausa-icon {
    display: block;
    margin: 0 auto 16px;
    line-height: 1;
    font-size: 0;   /* neutraliza cualquier emoji residual */
}
.encpro-vote-box.encpro-pausa p {
    color: var(--c-muted);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.encpro-pregunta-titulo {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.1rem, 4vw, 1.7rem); font-weight: 800;
    color: var(--c-text); text-transform: uppercase; letter-spacing: -.01em;
    line-height: 1.25; margin: 0 0 20px; padding-bottom: 16px;
    border-bottom: 2px solid var(--c-border);
}

/* Pantalla gracias */
.encpro-gracias { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px 8px; gap: 14px; }
.encpro-check-wrap { width: 90px; height: 90px; flex-shrink: 0; }
.encpro-check-svg  { width: 100%; height: 100%; }
.encpro-check-circle { stroke-dasharray: 230; stroke-dashoffset: 230; animation: encpro-draw-circle .6s ease forwards; }
@keyframes encpro-draw-circle { to { stroke-dashoffset: 0; } }
.encpro-check-tick { stroke-dasharray: 60; stroke-dashoffset: 60; animation: encpro-draw-tick .4s ease .55s forwards; }
@keyframes encpro-draw-tick { to { stroke-dashoffset: 0; } }
.encpro-gracias-titulo { font-family: 'Poppins', sans-serif; font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 800; text-transform: uppercase; color: var(--c-text); margin: 0; line-height: 1.2; }
.encpro-gracias-sub { color: var(--c-muted); font-size: .95rem; margin: 0; }
.encpro-tu-voto { width: 100%; background: #f0fdf4; border: 2px solid #6ee7b7; border-radius: 12px; padding: 14px 16px; margin-top: 4px; }
.encpro-tu-voto-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #065f46; display: block; margin-bottom: 8px; }
.encpro-tu-voto-opciones { display: flex; flex-direction: column; gap: 6px; }
.encpro-tu-voto-opcion { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; color: #1f2937; }
.encpro-tu-voto-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.encpro-hint { font-size: .8rem; color: var(--c-muted); margin: 0 0 14px; }
.encpro-opciones { display: flex; flex-direction: column; gap: 10px; }
.encpro-opcion-label {
    display: flex; align-items: center; gap: 14px; padding: 13px 16px;
    border-radius: 10px; border: 2px solid var(--c-border); background: #fafbff;
    cursor: pointer; transition: all .2s; user-select: none;
}
.encpro-opcion-label:hover { border-color: var(--color, var(--c-primary)); background: color-mix(in srgb, var(--color, var(--c-primary)) 6%, white); transform: translateX(3px); }
.encpro-opcion-input { display: none; }
.encpro-opcion-check { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid #d1d5db; transition: all .2s; display: flex; align-items: center; justify-content: center; }
.encpro-opcion-check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; opacity: 0; transition: opacity .15s; }
.encpro-opcion-input:checked ~ .encpro-opcion-check { background: var(--color, var(--c-primary)); border-color: var(--color, var(--c-primary)); }
.encpro-opcion-input:checked ~ .encpro-opcion-check::after { opacity: 1; }
.encpro-opcion-label:has(.encpro-opcion-input:checked) { border-color: var(--color, var(--c-primary)); background: color-mix(in srgb, var(--color, var(--c-primary)) 8%, white); }
.encpro-opcion-text { font-size: .95rem; font-weight: 500; color: var(--c-text); }

.encpro-submit-wrap { display: flex; justify-content: center; margin-top: 22px; }
.encpro-submit-btn { padding: 13px 38px; background: var(--c-primary); color: #fff; border: none; border-radius: 50px; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: all .25s; box-shadow: 0 4px 15px rgba(67,97,238,.3); }
.encpro-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(67,97,238,.4); }
.encpro-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.encpro-form-msg { text-align: center; margin-top: 14px; padding: 11px 16px; border-radius: 10px; font-weight: 600; }
.encpro-form-msg.success { background: #ecfdf5; color: #065f46; }
.encpro-form-msg.error   { background: #fef2f2; color: #991b1b; }

.encpro-confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; display: none; }

/* Temas vote */
.encpro-vote-box.encpro-tema-purpura { --c-primary: #7209b7; }
.encpro-vote-box.encpro-tema-verde   { --c-primary: #06d6a0; }
.encpro-vote-box.encpro-tema-rojo    { --c-primary: #ef233c; }
.encpro-vote-box.encpro-tema-dorado  { --c-primary: #f77f00; }
.encpro-vote-box.encpro-tema-oscuro  { --c-primary: #4361ee; --c-bg: #0d0f1a; --c-text: #f0f4ff; --c-muted: #8b93b8; --c-border: rgba(255,255,255,.1); }
.encpro-vote-box.encpro-tema-oscuro .encpro-opcion-label { background: #1a1d33; }
.encpro-vote-box.encpro-tema-oscuro .encpro-opcion-text  { color: #f0f4ff; }
.encpro-vote-box.encpro-tema-oscuro .encpro-pregunta-titulo { color: #f0f4ff; border-color: rgba(255,255,255,.1); }
.encpro-vote-box.encpro-tema-oscuro .encpro-gracias-titulo { color: #f0f4ff; }

/* ══════════════════════════════════════════════════════
   RESULTS — DOS COLUMNAS
══════════════════════════════════════════════════════ */
.encpro-resultados-wrap {
    --c-bg:     #0a0c18;
    --c-border: rgba(255,255,255,.07);
    --c-text:   #f0f4ff;
    --c-muted:  #7b83aa;
    --c-accent: #4361ee;
    font-family: 'Roboto', sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Altura: escala con el ancho manteniendo ~16:9, techo en 90vh */
    min-height: 300px;
    max-height: 90vh;
    height: min(56.25vw, 90vh);
    display: flex;
    flex-direction: column;
}

/* Orbes de fondo */
.encpro-bg-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.encpro-bg-orb  { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .18; animation: encpro-orb-float 14s ease-in-out infinite alternate; }
.encpro-bg-orb-1 { width: 55%; height: 110%; top: -30%; left: -10%; background: var(--c-accent); }
.encpro-bg-orb-2 { width: 40%; height: 80%;  bottom: -20%; right: -5%; background: #f72585; animation-delay: -7s; }
@keyframes encpro-orb-float { from{transform:translate(0,0) scale(1)} to{transform:translate(4%,6%) scale(1.08)} }

/* Sin activa */
.encpro-sin-activa { display: flex; align-items: center; justify-content: center; }
.encpro-sin-votos  { text-align: center; padding: 40px 20px; color: var(--c-muted); }
.encpro-sin-votos span { font-size: 3rem; display: block; margin-bottom: 10px; opacity: .4; }

/* ── Header ────────────────────────────────────────── */
.encpro-res-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: nowrap;
    padding: clamp(8px, 1.5%, 18px) clamp(12px, 2.5%, 32px);
    border-bottom: 1px solid var(--c-border);
    position: relative; z-index: 2; flex-shrink: 0;
}
.encpro-res-pregunta-txt {
    font-family: 'Poppins', sans-serif; font-weight: 800;
    font-size: clamp(.75rem, 2vw, 1.7rem);
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--c-text); margin: 0; line-height: 1.2;
    flex: 1; min-width: 0;
    /* Texto largo: hasta 2 líneas */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.encpro-res-controles { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Total en header */
.encpro-total-header {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    background: rgba(255,255,255,.06); border: 1px solid var(--c-border);
    border-radius: 8px; padding: 4px 12px; flex-shrink: 0;
}
.encpro-total-num {
    font-family: 'Poppins', sans-serif; font-weight: 900; line-height: 1;
    font-size: clamp(.9rem, 2vw, 1.8rem); color: #fff; letter-spacing: -.02em;
}
.encpro-total-label {
    font-family: 'Poppins', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--c-muted); font-size: clamp(.4rem, .7vw, .58rem);
}

/* Live badge */
.encpro-live-badge {
    display: flex; align-items: center; gap: 6px;
    background: rgba(239,68,68,.15); color: #fca5a5;
    border: 1px solid rgba(239,68,68,.3); border-radius: 50px;
    padding: 4px 12px; font-family: 'Poppins', sans-serif;
    font-size: clamp(.45rem, .9vw, .7rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.encpro-live-dot-anim { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: encpro-blink 1.2s ease-in-out infinite; flex-shrink: 0; }
@keyframes encpro-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Botones control */
.encpro-ctrl-btn {
    width: clamp(28px, 2.8vw, 40px); height: clamp(28px, 2.8vw, 40px);
    border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--c-border);
    color: var(--c-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0;
}
.encpro-ctrl-btn svg { width: 45%; height: 45%; }
.encpro-ctrl-btn:hover { background: rgba(255,255,255,.13); color: var(--c-text); }
.encpro-ctrl-btn:active { transform: scale(.9); }
.encpro-refresh-btn.spinning svg { animation: encpro-spin .6s linear; }
@keyframes encpro-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ── Body: dos columnas ────────────────────────────── */
.encpro-res-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 2%, 24px);
    padding: clamp(8px, 1.5%, 20px) clamp(12px, 2.5%, 32px);
    /* flex: 1 con min-height: 0 es clave para que el grid no desborde */
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative; z-index: 2;
    align-items: stretch;
}

/* ── Columna izquierda: SOLO gráfico ───────────────── */
.encpro-col-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}
.encpro-chart-container {
    position: relative;
    /* Cuadrado que cabe dentro de la columna */
    width:  100%;
    height: 100%;
    max-width: 100%;
}
.encpro-chart-container canvas {
    display: block;
    width:  100% !important;
    height: 100% !important;
}

/* ── Columna derecha: porcentajes ──────────────────── */
.encpro-col-pct {
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(4px, 1.2%, 14px);
    min-height: 0; overflow: hidden;
}

.encpro-pct-item {
    --item-color: #4361ee;
    padding-bottom: clamp(3px, .6%, 8px);
    border-bottom: 1px solid rgba(255,255,255,.04);
    /* Entrada escalonada */
    opacity: 0; transform: translateX(16px);
    animation: encpro-item-enter .45s ease forwards;
}
.encpro-pct-item:last-child { border-bottom: none; padding-bottom: 0; }
.encpro-pct-item:nth-child(1) { animation-delay: .12s; }
.encpro-pct-item:nth-child(2) { animation-delay: .24s; }
.encpro-pct-item:nth-child(3) { animation-delay: .36s; }
.encpro-pct-item:nth-child(4) { animation-delay: .48s; }
.encpro-pct-item:nth-child(5) { animation-delay: .60s; }
.encpro-pct-item:nth-child(6) { animation-delay: .72s; }
@keyframes encpro-item-enter { to { opacity: 1; transform: translateX(0); } }

.encpro-pct-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: clamp(2px, .4%, 5px); }

.encpro-pct-label {
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: clamp(.55rem, 1.3vw, 1.1rem); text-transform: uppercase; letter-spacing: .03em;
    color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.encpro-pct-value {
    font-family: 'Poppins', sans-serif; font-weight: 900;
    font-size: clamp(1rem, 3vw, 2.8rem); line-height: 1;
    color: var(--item-color); letter-spacing: -.02em; flex-shrink: 0;
    text-shadow: 0 0 24px color-mix(in srgb, var(--item-color) 40%, transparent);
}
.encpro-pct-bar-track { height: clamp(3px, .6%, 8px); background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; margin-bottom: clamp(2px, .3%, 4px); }
.encpro-pct-bar-fill  { height: 100%; width: 0%; border-radius: 999px; background: var(--item-color); transition: width 1.3s cubic-bezier(.16,1,.3,1); }
.encpro-pct-votos     { font-size: clamp(.45rem, .9vw, .75rem); font-weight: 500; color: var(--c-muted); }

/* ── Footer ────────────────────────────────────────── */
.encpro-res-footer {
    padding: clamp(4px, .6%, 8px) clamp(12px, 2.5%, 32px);
    border-top: 1px solid var(--c-border);
    display: flex; justify-content: flex-end;
    flex-shrink: 0; position: relative; z-index: 2;
}
.encpro-tiempo-wrap { font-size: clamp(.4rem, .8vw, .65rem); color: var(--c-muted); }
.encpro-tiempo { color: var(--c-text); }

/* Fullscreen */
.encpro-resultados-wrap:fullscreen,
.encpro-resultados-wrap:-webkit-full-screen { border-radius: 0; width: 100vw; height: 100vh; max-height: 100vh; }

/* ── Temas results ──────────────────────────────────── */
.encpro-resultados-wrap.encpro-tema-purpura { --c-accent: #7209b7; }
.encpro-resultados-wrap.encpro-tema-purpura .encpro-bg-orb-1 { background: #7209b7; }
.encpro-resultados-wrap.encpro-tema-verde   { --c-accent: #06d6a0; --c-bg: #031a12; }
.encpro-resultados-wrap.encpro-tema-verde   .encpro-bg-orb-1 { background: #06d6a0; }
.encpro-resultados-wrap.encpro-tema-dorado  { --c-accent: #f77f00; --c-bg: #130e00; }
.encpro-resultados-wrap.encpro-tema-dorado  .encpro-bg-orb-1 { background: #f77f00; }
.encpro-resultados-wrap.encpro-tema-rojo    { --c-accent: #ef233c; --c-bg: #130007; }
.encpro-resultados-wrap.encpro-tema-rojo    .encpro-bg-orb-1 { background: #ef233c; }

/* ── Animaciones generales ──────────────────────────── */
@keyframes encpro-slide-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.encpro-res-header { animation: encpro-slide-up .35s ease both; }
.encpro-res-body   { animation: encpro-slide-up .45s ease .1s both; }

/* ══════════════════════════════════════════════════════
   OPCIÓN GANADORA — glow en barra + badge
══════════════════════════════════════════════════════ */
.encpro-pct-item.es-lider .encpro-pct-bar-fill {
    animation: encpro-bar-glow 2s ease-in-out infinite;
}
@keyframes encpro-bar-glow {
    0%,100% { box-shadow: 0 0 8px  color-mix(in srgb, var(--item-color) 50%, transparent); }
    50%      { box-shadow: 0 0 20px color-mix(in srgb, var(--item-color) 80%, transparent), 0 0 40px color-mix(in srgb, var(--item-color) 35%, transparent); }
}
.encpro-pct-item.es-lider .encpro-pct-bar-track { height: clamp(5px, .9%, 10px); }
.encpro-pct-item.es-lider .encpro-pct-value     { filter: brightness(1.2); }

.encpro-pct-item.es-lider .encpro-pct-label::after {
    content: 'OPCIÓN GANADORA';
    display: inline-block; margin-left: 7px;
    padding: 2px 6px; border-radius: 4px; vertical-align: middle;
    background: linear-gradient(90deg, #b8860b, #daa520, #b8860b);
    background-size: 200% 100%;
    animation: encpro-gold-shimmer 2.5s linear infinite;
    color: #fff; font-size: clamp(.35rem, .7vw, .55rem);
    font-weight: 800; letter-spacing: .08em;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
@keyframes encpro-gold-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Latido del total ───────────────────────────────── */
.encpro-total-pulse { animation: encpro-pulse-num .7s cubic-bezier(.36,.07,.19,.97); }
@keyframes encpro-pulse-num {
    0%  { transform: scale(1);    color: #fff; }
    25% { transform: scale(1.2);  color: #4cc9f0; text-shadow: 0 0 20px #4cc9f0; }
    100%{ transform: scale(1);    color: #fff; text-shadow: none; }
}