:root {
   --bg: #03050d;
   --bg2: #071a3d;
   --card: #071127;
   --card2: #0a1835;
   --line: #173d7a;
   --text: #f4f8ff;
   --muted: #a8bad7;
   --blue: #00b7ff;
   --blue2: #006dff;
   --red: #ff1f3d;
   --red2: #ff5a00;
   --white: #fff;
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: Inter, Segoe UI, Arial, sans-serif;
   background: radial-gradient(circle at 18% 0%, rgba(0, 183, 255, .34), transparent 28%), radial-gradient(circle at 83% 8%, rgba(255, 31, 61, .27), transparent 30%), linear-gradient(180deg, #02040b, #061733 45%, #02040b);
   color: var(--text);
   min-height: 100vh
}

a {
   text-decoration: none;
   color: inherit
}

img {
   max-width: 100%
}

.glow {
   position: fixed;
   z-index: -1;
   filter: blur(80px);
   opacity: .58
}

.glow-red {
   right: 2%;
   top: 18%;
   width: 330px;
   height: 330px;
   background: var(--red)
}

.glow-blue {
   left: 0;
   top: 8%;
   width: 380px;
   height: 380px;
   background: var(--blue)
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 5%;
   background: rgba(2, 5, 13, .88);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(0, 183, 255, .28);
   box-shadow: 0 10px 35px rgba(0, 0, 0, .35)
}

.brand {
   display: flex;
   align-items: center;
   gap: 12px
}

.brand img {
   width: 64px;
   height: 64px;
   object-fit: cover;
   border-radius: 18px;
   border: 1px solid rgba(0, 183, 255, .45);
   box-shadow: 0 0 26px rgba(0, 183, 255, .28)
}

.brand span {
   display: flex;
   flex-direction: column
}

.brand strong {
   letter-spacing: 1px;
   font-size: 21px
}

.brand small {
   color: var(--muted)
}

nav {
   display: flex;
   gap: 18px;
   align-items: center
}

nav a {
   color: #ddecff;
   font-weight: 800;
   font-size: 14px
}

nav a:hover {
   color: var(--blue)
}

.menu-btn {
   display: none;
   background: linear-gradient(135deg, var(--blue2), var(--blue));
   border: 0;
   color: #fff;
   border-radius: 12px;
   padding: 10px 13px;
   font-size: 20px
}

.hero {
   padding: 44px 5% 24px
}

.tv-layout {
   display: grid;
   grid-template-columns: .82fr 1.18fr;
   gap: 28px;
   align-items: center
}

.hero-copy {
   padding: 26px;
   border-radius: 30px;
   background: linear-gradient(150deg, rgba(8, 25, 58, .78), rgba(5, 9, 20, .62));
   border: 1px solid rgba(0, 183, 255, .28);
   box-shadow: 0 28px 80px rgba(0, 0, 0, .42)
}

.hero-logo {
   width: 100%;
   max-width: 430px;
   border-radius: 22px;
   margin: 16px 0;
   border: 1px solid rgba(255, 255, 255, .12);
   box-shadow: 0 0 50px rgba(0, 183, 255, .18)
}

h1 {
   font-size: clamp(34px, 5.4vw, 74px);
   line-height: .94;
   margin: 10px 0 12px
}

.hero-copy p {
   font-size: 18px;
   color: var(--muted);
   line-height: 1.55
}

.live-pill {
   display: inline-block;
   padding: 10px 14px;
   border-radius: 99px;
   background: rgba(255, 31, 61, .15);
   border: 1px solid rgba(255, 31, 61, .65);
   color: #fff;
   font-weight: 1000;
   box-shadow: 0 0 28px rgba(255, 31, 61, .25)
}

.hero-actions,
.social-row,
.contact {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

.btn {
   border: 1px solid rgba(0, 183, 255, .28);
   border-radius: 14px;
   background: #0a1734;
   color: #fff;
   padding: 12px 16px;
   font-weight: 900;
   cursor: pointer
}

.btn.primary {
   border: 0;
   background: linear-gradient(135deg, var(--red), var(--blue2));
   box-shadow: 0 12px 30px rgba(0, 109, 255, .22)
}

.watch-card,
.panel,
.section {
   background: linear-gradient(145deg, rgba(7, 17, 39, .93), rgba(3, 7, 16, .9));
   border: 1px solid rgba(0, 183, 255, .26);
   border-radius: 28px;
   box-shadow: 0 28px 90px rgba(0, 0, 0, .45);
   overflow: hidden
}

.player-head {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding: 14px 16px;
   background: linear-gradient(90deg, rgba(255, 31, 61, .16), rgba(0, 183, 255, .16));
   border-bottom: 1px solid rgba(0, 183, 255, .23)
}

.player-head b {
   color: #fff
}

.player-head span {
   color: var(--muted)
}

.player-wrap {
   position: relative;
   background: #000
}

.player-wrap iframe {
   width: 100%;
   aspect-ratio: 16/9;
   display: block;
   border: 0
}

.player-info {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: rgba(0, 183, 255, .16)
}

.player-info div {
   padding: 14px;
   background: #071127
}

.player-info small {
   display: block;
   color: var(--muted);
   font-size: 12px
}

.player-info strong {
   display: block;
   margin-top: 4px
}

.ticker {
   margin: 0 5% 26px;
   padding: 13px 18px;
   border: 1px solid rgba(0, 183, 255, .25);
   background: rgba(7, 17, 39, .88);
   border-radius: 18px;
   color: #e9f5ff
}

.ticker b {
   color: var(--blue)
}

.content-grid {
   display: grid;
   grid-template-columns: 1fr 360px;
   gap: 22px;
   padding: 0 5% 26px
}

.panel,
.section {
   padding: 22px
}

.section {
   margin: 0 5% 26px
}

.section-title {
   display: flex;
   gap: 14px;
   align-items: center;
   margin-bottom: 18px
}

.section-title span {
   font-size: 34px
}

.section-title h2 {
   margin: 0;
   font-size: 30px
}

.section-title p {
   margin: 4px 0 0;
   color: var(--muted)
}

.radio-box {
   display: grid;
   grid-template-columns: 130px 1fr;
   gap: 20px;
   align-items: center
}

.vinyl {
   width: 130px;
   height: 130px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: conic-gradient(var(--red), var(--blue), var(--blue2), var(--red));
   animation: spin 10s linear infinite;
   box-shadow: 0 0 40px rgba(0, 183, 255, .25)
}

.vinyl img {
   width: 96px;
   height: 96px;
   object-fit: cover;
   border-radius: 50%;
   border: 4px solid #071127
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

audio {
   width: 100%;
   margin-top: 8px
}

.stations {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 12px
}

.chip {
   border: 1px solid rgba(0, 183, 255, .34);
   background: #081b41;
   color: #fff;
   padding: 9px 12px;
   border-radius: 99px;
   cursor: pointer;
   font-weight: 800
}

.chip.active {
   background: linear-gradient(135deg, var(--blue2), var(--blue))
}

.ad-box {
   border: 1px solid rgba(0, 183, 255, .25);
   background: linear-gradient(135deg, #0b1c40, #071127);
   padding: 18px;
   border-radius: 20px;
   margin-bottom: 14px
}

.ad-box b {
   display: block;
   color: var(--blue);
   font-size: 20px
}

.ad-box img {
   width: 100%;
   border-radius: 14px;
   margin-bottom: 10px
}

.program-grid,
.video-grid,
.news-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
}

.program-card,
.video-card,
.news-card {
   border: 1px solid rgba(0, 183, 255, .22);
   background: linear-gradient(180deg, #081a3b, #061025);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 16px 45px rgba(0, 0, 0, .24)
}

.program-card {
   padding: 18px
}

.program-card .tag {
   display: inline-block;
   color: #fff;
   background: linear-gradient(135deg, var(--red), var(--blue2));
   padding: 7px 10px;
   border-radius: 99px;
   font-size: 12px;
   font-weight: 1000
}

.program-card h3,
.news-card h3 {
   margin: 12px 0 8px
}

.program-card p,
.news-card p {
   color: var(--muted);
   line-height: 1.45
}

.program-meta {
   display: grid;
   gap: 8px;
   margin: 12px 0;
   color: #ddecff
}

.program-meta small {
   display: block;
   color: var(--blue);
   font-weight: 900
}

.table-wrap {
   overflow: auto;
   border-radius: 18px;
   border: 1px solid rgba(0, 183, 255, .25)
}

table {
   width: 100%;
   border-collapse: collapse;
   min-width: 850px
}

th,
td {
   padding: 14px;
   border-bottom: 1px solid rgba(0, 183, 255, .16);
   text-align: left
}

th {
   background: linear-gradient(90deg, rgba(0, 109, 255, .25), rgba(255, 31, 61, .18));
   color: #fff
}

td {
   color: #e7f2ff
}

.video-card {
   cursor: pointer
}

.video-thumb {
   position: relative
}

.video-card img {
   width: 100%;
   display: block;
   aspect-ratio: 16/9;
   object-fit: cover
}

.play-badge {
   position: absolute;
   inset: auto 12px 12px auto;
   background: rgba(255, 31, 61, .92);
   padding: 9px 12px;
   border-radius: 999px;
   font-weight: 1000
}

.video-card div:not(.video-thumb) {
   padding: 14px
}

.video-card b {
   display: block
}

.video-card p {
   color: var(--muted);
   margin: 6px 0 0
}

.video-view {
   display: none
}

.video-view.open {
   display: block
}

.social-row {
   margin: 14px 0
}

.comments-box {
   margin-top: 18px;
   border-top: 1px solid rgba(0, 183, 255, .18);
   padding-top: 18px
}

.comment-form {
   display: grid;
   gap: 10px;
   grid-template-columns: 220px 1fr auto
}

.comment-form input,
.comment-form textarea,
.admin-form input,
.admin-form textarea,
.admin-form select {
   width: 100%;
   background: #06142e;
   border: 1px solid rgba(0, 183, 255, .28);
   border-radius: 12px;
   color: #fff;
   padding: 12px;
   font: inherit
}

.comment-form textarea {
   min-height: 48px;
   resize: vertical
}

.comment {
   padding: 12px;
   border: 1px solid rgba(0, 183, 255, .16);
   border-radius: 14px;
   background: #06142e;
   margin-bottom: 10px
}

.comment b {
   color: var(--blue)
}

.category-tabs {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 18px
}

.tab {
   border: 1px solid rgba(0, 183, 255, .28);
   background: #071733;
   color: #fff;
   border-radius: 99px;
   padding: 10px 13px;
   font-weight: 900;
   cursor: pointer
}

.tab.active {
   background: linear-gradient(135deg, var(--red), var(--blue2))
}

.news-card img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover
}

.news-card .body {
   padding: 16px
}

.news-card .cat {
   color: var(--blue);
   font-weight: 1000
}

.float-wa {
   position: fixed;
   right: 20px;
   bottom: 20px;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #1fc75b;
   font-size: 28px;
   box-shadow: 0 12px 35px rgba(0, 0, 0, .45);
   z-index: 60
}

footer {
   text-align: center;
   color: var(--muted);
   padding: 34px
}

.contact {
   align-items: center
}

@media(max-width:960px) {

   .tv-layout,
   .content-grid {
      grid-template-columns: 1fr
   }

   .program-grid,
   .video-grid,
   .news-grid {
      grid-template-columns: 1fr
   }

   .player-info {
      grid-template-columns: 1fr
   }

   .comment-form {
      grid-template-columns: 1fr
   }

   .radio-box {
      grid-template-columns: 1fr
   }

   .vinyl {
      margin: auto
   }

   .menu-btn {
      display: block
   }

   nav {
      display: none;
      position: absolute;
      left: 5%;
      right: 5%;
      top: 92px;
      flex-direction: column;
      background: #06142e;
      border: 1px solid rgba(0, 183, 255, .28);
      padding: 18px;
      border-radius: 20px
   }

   nav.open {
      display: flex
   }

   .brand strong {
      font-size: 17px
   }
}

.news-img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   border-radius: 14px;
   margin-bottom: 10px;
}

.live-offline {
   position: absolute;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;
   padding: 28px;
   background: linear-gradient(145deg, rgba(2, 6, 14, .86), rgba(8, 25, 58, .84));
   backdrop-filter: blur(4px);
   z-index: 2
}

.live-offline.show {
   display: flex
}

.live-offline strong {
   font-size: clamp(24px, 4vw, 44px);
   font-weight: 1000
}

.live-offline span {
   max-width: 520px;
   margin-top: 10px;
   color: var(--muted);
   line-height: 1.5
}

.live-pill:has(+ .hero-logo) {
   transition: .25s ease
}

/* =========================================================
   BLOQUE PROFESIONAL DEBAJO DE LA RADIO
   ========================================================= */
.radio-extra {
   margin-top: 22px;
   display: grid;
   gap: 16px
}

.extra-hero-card {
   position: relative;
   overflow: hidden;
   border-radius: 24px;
   padding: 22px;
   background: linear-gradient(135deg, rgba(0, 109, 255, .25), rgba(255, 31, 61, .18)), radial-gradient(circle at 85% 30%, rgba(0, 183, 255, .28), transparent 34%), #06142e;
   border: 1px solid rgba(0, 183, 255, .25);
   box-shadow: 0 18px 45px rgba(0, 0, 0, .28)
}

.extra-hero-card:after {
   content: "";
   position: absolute;
   right: -40px;
   top: -40px;
   width: 170px;
   height: 170px;
   border-radius: 50%;
   background: rgba(255, 31, 61, .18);
   filter: blur(8px)
}

.extra-label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(255, 31, 61, .18);
   border: 1px solid rgba(255, 31, 61, .45);
   font-weight: 1000;
   font-size: 12px
}

.extra-hero-card h3 {
   font-size: clamp(24px, 3vw, 40px);
   margin: 12px 0 6px
}

.extra-hero-card p {
   color: var(--muted);
   max-width: 700px;
   line-height: 1.5
}

.extra-actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 14px
}

.mini-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 13px;
   border-radius: 12px;
   background: #081936;
   border: 1px solid rgba(0, 183, 255, .3);
   font-weight: 900
}

.mini-btn.primary {
   background: linear-gradient(135deg, var(--blue2), var(--blue));
   box-shadow: 0 12px 24px rgba(0, 109, 255, .2)
}

.extra-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px
}

.stat-tile {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px;
   border-radius: 18px;
   background: linear-gradient(180deg, #081936, #061127);
   border: 1px solid rgba(0, 183, 255, .2)
}

.stat-tile span {
   font-size: 24px
}

.stat-tile b {
   display: block
}

.stat-tile small {
   display: block;
   color: var(--muted)
}

.radio-mini-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px
}

.mini-panel {
   min-height: 190px;
   padding: 16px;
   border-radius: 22px;
   background: linear-gradient(180deg, rgba(7, 17, 39, .96), rgba(4, 9, 20, .96));
   border: 1px solid rgba(0, 183, 255, .22);
   box-shadow: 0 15px 40px rgba(0, 0, 0, .25)
}

.mini-title {
   font-weight: 1000;
   margin-bottom: 12px;
   color: #fff
}

.mini-list {
   display: grid;
   gap: 9px
}

.mini-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 10px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .035);
   border: 1px solid rgba(255, 255, 255, .07)
}

.mini-item span {
   color: #fff;
   font-weight: 850;
   font-size: 13px;
   line-height: 1.25
}

.mini-item small {
   color: var(--muted);
   white-space: nowrap
}

.social-buttons-pro {
   display: grid;
   gap: 9px
}

.social-buttons-pro a {
   padding: 11px 12px;
   border-radius: 14px;
   background: #081936;
   border: 1px solid rgba(0, 183, 255, .24);
   font-weight: 900
}

.social-buttons-pro a.whatsapp {
   background: linear-gradient(135deg, #128c3a, #1fc75b);
   border-color: rgba(31, 199, 91, .5)
}

.bottom-live-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   border-radius: 20px;
   padding: 16px 18px;
   background: linear-gradient(90deg, rgba(0, 109, 255, .22), rgba(255, 31, 61, .18));
   border: 1px solid rgba(255, 255, 255, .1)
}

.request-box {
   display: grid;
   gap: 4px
}

.request-box strong {
   font-size: 18px
}

.request-box span {
   color: var(--muted)
}

@media(max-width:1180px) {
   .radio-mini-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:720px) {

   .extra-stats,
   .radio-mini-grid {
      grid-template-columns: 1fr
   }

   .bottom-live-row {
      align-items: flex-start;
      flex-direction: column
   }

   .stat-tile {
      align-items: flex-start
   }

   .mini-item {
      align-items: flex-start;
      flex-direction: column
   }

   .mini-item small {
      white-space: normal
   }
}


.yt-fallback-btn {
   display: none;
   align-items: center;
   justify-content: center;
   position: absolute;
   right: 18px;
   bottom: 18px;
   z-index: 5;
   background: #e11d2e;
   color: #fff;
   text-decoration: none;
   font-weight: 900;
   padding: 10px 16px;
   border-radius: 999px;
   box-shadow: 0 12px 30px rgba(225, 29, 46, .35);
   border: 1px solid rgba(255, 255, 255, .18);
}

.yt-fallback-btn:hover {
   filter: brightness(1.1);
   transform: translateY(-1px)
}

/* =========================================================
   CAMBIO NUEVO: DÓLAR + IDIOMAS DEBAJO DE LA RADIO
   ========================================================= */
.language-switcher {
   display: flex;
   align-items: center;
   gap: 8px;
   border: 1px solid rgba(0, 183, 255, .28);
   background: rgba(6, 20, 46, .85);
   padding: 8px 10px;
   border-radius: 999px;
   box-shadow: 0 10px 26px rgba(0, 0, 0, .22)
}

.language-switcher select {
   background: transparent;
   color: #fff;
   border: 0;
   font-weight: 900;
   outline: none;
   cursor: pointer
}

.language-switcher option {
   background: #071127;
   color: #fff
}

.exchange-lang-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.exchange-card,
.language-card {
   position: relative;
   overflow: hidden;
   border-radius: 24px;
   padding: 22px;
   background: linear-gradient(135deg, rgba(0, 109, 255, .24), rgba(255, 31, 61, .14)), radial-gradient(circle at 90% 10%, rgba(0, 183, 255, .26), transparent 34%), #06142e;
   border: 1px solid rgba(0, 183, 255, .25);
   box-shadow: 0 18px 45px rgba(0, 0, 0, .28)
}

.exchange-card:after,
.language-card:after {
   content: "";
   position: absolute;
   right: -45px;
   top: -45px;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: rgba(255, 31, 61, .15);
   filter: blur(8px)
}

.exchange-card h3,
.language-card h3 {
   font-size: clamp(24px, 3vw, 38px);
   margin: 12px 0 6px
}

.exchange-card p,
.language-card p {
   color: var(--muted);
   line-height: 1.45
}

.rate-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 16px
}

.rate-grid div {
   padding: 14px;
   border-radius: 18px;
   background: rgba(0, 0, 0, .25);
   border: 1px solid rgba(255, 255, 255, .08)
}

.rate-grid small {
   display: block;
   color: var(--muted);
   font-weight: 900
}

.rate-grid b {
   display: block;
   font-size: 22px;
   margin-top: 4px
}

.lang-buttons {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 14px
}

.lang-btn {
   border: 1px solid rgba(0, 183, 255, .3);
   background: #081936;
   color: #fff;
   padding: 10px 13px;
   border-radius: 999px;
   font-weight: 900;
   cursor: pointer
}

.lang-btn.active,
.lang-btn:hover {
   background: linear-gradient(135deg, var(--blue2), var(--blue));
   border-color: transparent;
   box-shadow: 0 10px 24px rgba(0, 109, 255, .22)
}

@media(max-width:860px) {
   .exchange-lang-row {
      grid-template-columns: 1fr
   }

   .language-switcher {
      order: 3
   }

   .site-header {
      gap: 10px
   }
}


/* =========================================================
   ENCUESTA EN VIVO PRO
========================================================= */
.poll-live-card {
   margin-top: 22px;
   padding: 22px;
   border: 1px solid rgba(0, 183, 255, .25);
   border-radius: 22px;
   background: linear-gradient(135deg, rgba(7, 23, 58, .95), rgba(31, 10, 55, .92));
   box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
   overflow: hidden
}

.poll-head {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   align-items: flex-start;
   margin-bottom: 16px
}

.poll-head h2 {
   margin: 12px 0 6px
}

.live-pill.small {
   font-size: 12px;
   padding: 7px 10px;
   display: inline-flex
}

.poll-total {
   min-width: 92px;
   text-align: center;
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 18px;
   padding: 13px;
   background: rgba(0, 0, 0, .22)
}

.poll-total b {
   font-size: 30px;
   display: block
}

.poll-total small {
   opacity: .8
}

.poll-gallery {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding: 6px 2px 12px;
   margin: 8px 0 14px
}

.poll-gallery img {
   height: 190px;
   min-width: 280px;
   max-width: 360px;
   object-fit: cover;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, .12);
   scroll-snap-align: start
}

.poll-no-img,
.poll-empty {
   padding: 28px;
   border: 1px dashed rgba(255, 255, 255, .22);
   border-radius: 18px;
   text-align: center;
   color: #cfe7ff
}

.poll-empty {
   display: grid;
   gap: 8px
}

.poll-options {
   display: grid;
   gap: 10px;
   margin: 14px 0
}

.poll-option {
   display: flex;
   gap: 10px;
   align-items: center;
   padding: 13px 15px;
   border-radius: 15px;
   border: 1px solid rgba(0, 183, 255, .18);
   background: rgba(1, 10, 27, .55);
   cursor: pointer;
   transition: .2s
}

.poll-option:hover {
   border-color: #00b7ff;
   transform: translateY(-1px)
}

.poll-option input {
   width: 18px;
   height: 18px
}

.poll-vote-btn {
   width: 100%;
   justify-content: center
}

.poll-msg {
   min-height: 24px;
   color: #9ee7ff;
   font-weight: 700
}

.poll-results-wrap {
   margin-top: 16px
}

.poll-results {
   display: grid;
   gap: 13px;
   margin-top: 12px
}

.poll-result-top {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   font-size: 14px;
   margin-bottom: 8px
}

.poll-result-top span {
   color: #cfe7ff
}

.poll-bar {
   height: 15px;
   background: rgba(255, 255, 255, .09);
   border-radius: 999px;
   overflow: hidden
}

.poll-bar i {
   display: block;
   height: 100%;
   border-radius: 999px;
   background: linear-gradient(90deg, #008cff, #00d4ff, #ff1f3d);
   box-shadow: 0 0 18px rgba(0, 183, 255, .55);
   transition: width .5s ease
}

.admin-form label {
   color: #d7e8ff;
   font-weight: 700
}

.admin-form input[type="checkbox"] {
   width: auto;
   margin-right: 8px
}

@media(max-width:700px) {
   .poll-head {
      display: block
   }

   .poll-gallery img {
      min-width: 240px;
      height: 155px
   }

   .poll-result-top {
      display: block
   }

   .poll-total {
      margin-top: 12px
   }
}

/* =========================================================
   ENCUESTAS PRO MEJORADAS: IMÁGENES VOTABLES
   ========================================================= */
.upload-drop {
   border: 1px dashed rgba(0, 183, 255, .55);
   border-radius: 18px;
   padding: 18px;
   background: rgba(0, 140, 255, .08);
   display: grid;
   gap: 8px;
   color: #d9efff
}

.upload-drop strong {
   font-size: 18px
}

.upload-drop span {
   opacity: .85
}

.check-line {
   display: flex;
   align-items: center;
   gap: 8px
}

.poll-preview-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
   gap: 12px
}

.poll-preview-card {
   border: 1px solid rgba(0, 183, 255, .25);
   border-radius: 16px;
   background: rgba(2, 15, 38, .75);
   padding: 10px;
   display: grid;
   gap: 6px
}

.poll-preview-card img {
   width: 100%;
   height: 110px;
   object-fit: cover;
   border-radius: 12px
}

.poll-preview-card small {
   color: #b9d8ff
}

.poll-admin-thumbs {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-top: 10px
}

.poll-admin-thumbs img {
   width: 54px;
   height: 54px;
   object-fit: cover;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, .14)
}
.poll-options{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:22px;
    align-items:stretch;
}

.poll-image-option{
    border:2px solid rgba(0,183,255,.25);
    border-radius:22px;
    background:linear-gradient(180deg,#0c1634,#050b18);
    overflow:hidden;
    cursor:pointer;
    transition:.30s;
    box-shadow:0 18px 45px rgba(0,0,0,.30);
}

.poll-image-option:hover{
    transform:translateY(-6px);
    border-color:#00d4ff;
    box-shadow:0 25px 55px rgba(0,174,255,.35);
}

.poll-image-option.selected{
    border-color:#00d4ff;
    box-shadow:0 0 0 3px rgba(0,212,255,.35);
}

.poll-image-option.voted{
    border-color:#1dff8a;
}

.poll-img-wrap{
    width:100%;
    height:320px;
    background:#071225;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    padding:12px;
}

.poll-img-wrap img{

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;
    object-position:center;

    border-radius:14px;

    transition:.35s;
}

.poll-image-option:hover img{
    transform:scale(1.03);
}

.poll-image-info{

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:14px;
}

.poll-image-info b{

    font-size:18px;

    font-weight:700;

    line-height:1.3;

    color:#fff;

    text-align:center;
}

.poll-single-vote{

    width:100%;

    height:48px;

    border-radius:14px;

    font-size:17px;

    font-weight:bold;
}

.poll-result-row-pro .poll-result-name{

    display:flex;

    align-items:center;

    gap:12px;
}

.poll-result-row-pro .poll-result-name img{

    width:55px;

    height:55px;

    object-fit:contain;

    background:#081225;

    padding:4px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.12);
}

@media(max-width:700px){

.poll-options{

grid-template-columns:1fr;

}

.poll-img-wrap{

height:360px;

}

}

/* =========================================================
   ENCUESTA ELECTORAL PRO - MEDIOS ILUSTRADOS
========================================================= */
.poll-live-card{background:radial-gradient(circle at 50% 0%,rgba(0,105,255,.22),transparent 35%),linear-gradient(145deg,#03142d,#07091d 55%,#12082b);border:1px solid rgba(0,183,255,.4);padding:clamp(18px,3vw,34px)}
.poll-head{align-items:center;text-align:left}.poll-head h2{font-size:clamp(28px,4vw,58px);line-height:.95;text-transform:uppercase;letter-spacing:-1px;max-width:900px}.poll-head p{color:#c8d9f4;font-size:16px}.poll-total{background:linear-gradient(145deg,#0b1734,#160c2b);box-shadow:0 0 30px rgba(0,183,255,.15)}
.poll-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin:24px 0;align-items:stretch}
.election-candidate-card{position:relative;display:flex;flex-direction:column;min-width:0;border:2px solid color-mix(in srgb,var(--candidate-color),white 28%);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--candidate-color),#061025 73%),#061025 58%);box-shadow:0 20px 50px rgba(0,0,0,.35);transition:.25s}
.election-candidate-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px color-mix(in srgb,var(--candidate-color),transparent 72%)}
.election-candidate-card.voted{outline:4px solid #24ff8f;outline-offset:3px}
.candidate-number-badge{position:absolute;z-index:3;top:0;left:0;width:82px;height:82px;display:grid;place-items:center;background:var(--candidate-color);border-radius:0 0 24px 0;font-size:42px;font-weight:1000;color:white;text-shadow:0 2px 8px #000;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.candidate-photo-wrap{height:390px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--candidate-color),white 18%),#030917 72%)}
.candidate-photo{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35))}
.candidate-no-photo{margin:auto;color:#b8cae8}
.candidate-identity{padding:16px 15px 12px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--candidate-color),black 24%),#070d1d)}
.candidate-identity h3{margin:0;font-size:clamp(24px,2.3vw,36px);line-height:1;text-transform:uppercase;letter-spacing:.4px}.candidate-identity p{margin:8px 0 0;color:color-mix(in srgb,var(--candidate-color),white 58%);font-weight:1000;text-transform:uppercase;font-size:13px}
.candidate-party-box{min-height:105px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:14px;background:#fff;color:var(--candidate-color);font-size:30px;font-weight:1000;text-transform:uppercase}.candidate-party-box img{width:74px;height:74px;object-fit:contain}
.candidate-live-result{padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;background:#050b18}.candidate-live-result b{font-size:25px}.candidate-live-result span{font-weight:800;color:#c9daf4}.candidate-mini-bar{grid-column:1/-1;height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.candidate-mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--candidate-color),#fff);transition:width .45s ease}
.candidate-vote-button{margin:0;border:0;padding:16px;background:linear-gradient(135deg,var(--candidate-color),#056dff);color:white;font-size:18px;font-weight:1000;cursor:pointer}.candidate-vote-button:disabled{opacity:.65;cursor:not-allowed}.candidate-vote-button:not(:disabled):hover{filter:brightness(1.15)}
.poll-results{gap:12px}.election-result-row{display:grid;grid-template-columns:42px 56px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(2,10,28,.65)}.election-result-row>img{width:56px;height:56px;object-fit:contain;border-radius:12px;background:#071225}.result-rank{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ffbf00,#ff5a00);font-weight:1000}.result-candidate{min-width:0}.result-candidate b,.result-candidate small{display:block}.result-candidate small{color:#a9bad5;margin:3px 0 8px}.result-numbers{text-align:right}.result-numbers b{display:block;font-size:22px}.result-numbers span{color:#b9cbe7;font-size:13px}
.poll-candidate-admin-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.poll-candidate-admin-card{border:1px solid rgba(0,183,255,.3);border-radius:18px;overflow:hidden;background:#06142e}.poll-candidate-admin-card>img{width:100%;height:250px;object-fit:contain;background:#020917}.candidate-admin-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}.candidate-admin-fields label{display:grid;gap:5px;font-size:12px}.candidate-admin-fields label:nth-child(2),.candidate-admin-fields label:nth-child(3),.candidate-admin-fields label:last-child{grid-column:1/-1}.candidate-admin-fields input{width:100%}.poll-admin-thumbs span{display:grid;gap:4px;text-align:center;width:80px}.poll-admin-thumbs span img{margin:auto}
@media(max-width:760px){.poll-head{display:grid}.poll-total{width:100%}.candidate-photo-wrap{height:360px}.election-result-row{grid-template-columns:36px 48px 1fr}.result-numbers{grid-column:2/-1;text-align:left}.candidate-admin-fields{grid-template-columns:1fr}.candidate-admin-fields label{grid-column:1!important}}

/* ADMIN: CARGA INDIVIDUAL DE CANDIDATOS */
.poll-individual-head{align-items:start}
.poll-individual-head .btn{width:max-content;margin-top:6px}
.poll-candidate-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.poll-candidate-admin-card{border:1px solid rgba(0,183,255,.35);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#071a3d,#041024);box-shadow:0 16px 38px rgba(0,0,0,.28)}
.candidate-image-picker{padding:14px;display:grid;gap:12px;background:#020917}
.candidate-photo-preview{width:100%;height:290px;object-fit:contain;background:#02050d;border-radius:14px;border:1px solid rgba(255,255,255,.1)}
.candidate-photo-button{position:relative;text-align:center;justify-content:center;overflow:hidden}
.candidate-photo-button input{position:absolute;inset:0;opacity:0;cursor:pointer}
.candidate-admin-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:15px}
.candidate-admin-fields label{display:grid;gap:6px;font-size:12px;color:#d7e8ff;font-weight:800}
.candidate-admin-fields label:nth-child(2),.candidate-admin-fields label:nth-child(3),.candidate-admin-fields label:nth-child(6),.remove-poll-candidate{grid-column:1/-1}
.candidate-logo-preview{width:82px;height:58px;object-fit:contain;background:white;border-radius:10px;padding:4px;margin-top:6px}
.remove-poll-candidate{width:100%}
@media(max-width:700px){.poll-candidate-admin-grid{grid-template-columns:1fr}.candidate-admin-fields{grid-template-columns:1fr}.candidate-admin-fields>*{grid-column:1!important}.candidate-photo-preview{height:340px}}