/* ============================================================
   v2.0 – Layout sidebars + 3-col ANUNCIA + nuevas secciones
   ============================================================ */

/* ── Layout con sidebars ─────────────────────────────────── */
.page-with-sidebars {
  display: flex;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto;
}
.page-main-col { flex: 1; min-width: 0; }
.sidebar-col {
  width: 160px;
  flex-shrink: 0;
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.sidebar-left  { border-right: 1px solid var(--gris-borde); }
.sidebar-right { border-left:  1px solid var(--gris-borde); }
.sidebar-banner-img img { width: 148px; border-radius: var(--radio-sm); object-fit: cover; }

/* ANUNCIA lateral (vertical) */
.sidebar-anuncia-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 148px;
  min-height: 300px;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
  border: 2px dashed #f97316;
  border-radius: var(--radio);
  text-decoration: none;
  padding: 20px 8px;
  text-align: center;
  gap: 8px;
  transition: background .15s, box-shadow .15s;
}
.sidebar-anuncia-link:hover { background: #fff7ed; box-shadow: 0 2px 12px rgba(249,115,22,.2); text-decoration: none; }
.side-anuncia-text {
  font-size: 12px;
  font-weight: 700;
  color: #f97316;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 2px;
}
.side-anuncia-sub { font-size: 10px; color: #9a3412; writing-mode: vertical-lr; transform: rotate(180deg); }

@media (max-width: 1100px) { .sidebar-col { display: none; } }

/* ── 3 columnas ANUNCIA horizontal ───────────────────────── */
.anuncia-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0;
}
.anuncia-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  background: linear-gradient(135deg, #fff7ed, #fff);
  border: 2px dashed #f97316;
  border-radius: var(--radio);
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
  text-align: center;
  min-height: 80px;
}
.anuncia-box:hover { background: #fff7ed; box-shadow: 0 2px 12px rgba(249,115,22,.2); text-decoration: none; }
.anuncia-box-icon { font-size: 20px; }
.anuncia-box-text { font-size: 13px; font-weight: 700; color: #f97316; }
.anuncia-box-sub  { font-size: 11px; color: #9a3412; }
@media (max-width: 600px) { .anuncia-3col { grid-template-columns: 1fr; } }

/* ── Tagline bar ─────────────────────────────────────────── */
.tagline-bar {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 40%, #dc2626 70%, #ef4444 100%);
  color: #fff;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.tagline-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(255,255,255,.04) 18px,
    rgba(255,255,255,.04) 36px
  );
  pointer-events: none;
}
.tagline-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.tagline-icono {
  font-size: 40px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.tagline-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tagline-principal {
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 800;
  color: #fde68a;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  line-height: 1.2;
  letter-spacing: .3px;
}
.tagline-secundario {
  font-size: clamp(13px, 2vw, 15px);
  color: #fee2e2;
  line-height: 1.4;
}
.tagline-secundario strong {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tagline-cta {
  flex-shrink: 0;
  background: #fde68a;
  color: #7f1d1d;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 22px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: background .15s, transform .1s;
}
.tagline-cta:hover { background: #fff; transform: scale(1.04); text-decoration: none; color: #7f1d1d; }

@media (max-width: 560px) {
  .tagline-inner { flex-wrap: wrap; justify-content: center; text-align: center; }
  .tagline-icono { font-size: 30px; }
  .tagline-cta   { width: 100%; text-align: center; }
}

/* ── Banner wrapper ──────────────────────────────────────── */
.banner-wrapper { padding: 0; background: #fff; border-bottom: 1px solid var(--gris-borde); }
.banner-wrapper a { display: block; }
.banner-wrapper img { width: 100%; height: auto; max-height: none; display: block; }
.banner-2col a.banner-2col-item { display: block; }
.banner-2col-item img { width: 100%; height: auto; max-height: none; display: block; }

/* ── Conoce candidatos strip ─────────────────────────────── */
.conoce-strip {
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.conoce-strip-label { font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.conoce-strip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  padding: 2px 0;
}
.conoce-strip-scroll::-webkit-scrollbar { display: none; }
.conoce-candidato-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.15);
  border-radius: 100px;
  padding: 4px 14px 4px 4px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
  flex-shrink: 0;
}
.conoce-candidato-chip:hover { background: rgba(255,255,255,.3); text-decoration: none; color: #fff; }
.conoce-chip-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.5); }
.conoce-strip-vermas {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 10px;
  background: rgba(255,255,255,.12);
  border-radius: 8px;
}
.conoce-strip-vermas:hover { color: #fff; background: rgba(255,255,255,.2); }

/* ── Progreso de cédulas ─────────────────────────────────── */
.cedulas-progreso {
  background: #fff;
  border-bottom: 2px solid var(--gris-borde);
  padding: 14px 20px;
  overflow-x: auto;
}
.progreso-pasos {
  display: flex;
  align-items: flex-start;
  min-width: 420px;
  max-width: 680px;
  margin: 0 auto;
}
.paso-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  position: relative;
}
.paso-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--gris-borde);
  z-index: 0;
}
.paso-item.completado:not(:last-child)::after { background: var(--verde); }
.paso-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--gris-borde);
  color: var(--gris-texto);
  z-index: 1;
  position: relative;
  transition: all .25s;
  border: 2px solid transparent;
}
.paso-item.activo    .paso-num { background: var(--rojo);  color: #fff; border-color: var(--rojo-dark); }
.paso-item.completado .paso-num { background: var(--verde); color: #fff; }
.paso-label { font-size: 10px; color: var(--gris-texto); text-align: center; line-height: 1.2; max-width: 72px; }
.paso-item.activo    .paso-label { color: var(--rojo); font-weight: 600; }
.paso-item.completado .paso-label { color: var(--verde); }

/* ── Cédulas secuenciales ────────────────────────────────── */
.cedula-seccion { display: none; background: #f1f5f9; padding-bottom: 32px; min-height: 200px; }
.cedula-seccion.visible { display: block; }

.cedula-tipo-header {
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cedula-tipo-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  flex-shrink: 0;
}
.cedula-tipo-titulo  { font-size: 15px; font-weight: 700; }
.cedula-tipo-subtipo { font-size: 12px; opacity: .8; }

.cedula-acciones-nuevo {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--gris-borde);
  background: #fafafa;
  align-items: center;
}
.seleccion-hint { flex: 1; font-size: 13px; color: var(--gris-texto); }
.btn-blanco  { background: #f3f4f6; color: #374151; border: 2px solid #d1d5db; }
.btn-blanco:hover  { background: #e5e7eb; text-decoration: none; color: #374151; }
.btn-viciado { background: #fff7ed; color: #c2410c; border: 2px solid #fed7aa; }
.btn-viciado:hover { background: #ffedd5; text-decoration: none; color: #c2410c; }
.btn-omitir  { background: #f0fdf4; color: #15803d; border: 2px solid #bbf7d0; }
.btn-omitir:hover  { background: #dcfce7; text-decoration: none; color: #15803d; }

/* Botón Confirmar grande y destacado */
.btn-confirmar-grande {
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--rojo) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(220,38,38,.35);
  transition: background .15s, box-shadow .15s, transform .1s;
  min-width: 150px;
}
.btn-confirmar-grande:hover:not(:disabled) {
  background: var(--rojo-dark) !important;
  box-shadow: 0 6px 18px rgba(220,38,38,.45);
  transform: translateY(-1px);
}
.btn-confirmar-grande:disabled {
  background: #d1d5db !important;
  color: #9ca3af !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Pantalla de resumen ─────────────────────────────────── */
.resumen-pantalla { padding: 48px 24px; text-align: center; }
.resumen-icon   { font-size: 64px; margin-bottom: 16px; }
.resumen-titulo { font-size: 26px; font-weight: 700; color: var(--verde); margin-bottom: 8px; }
.resumen-tabla-wrap { max-width: 620px; margin: 24px auto; overflow-x: auto; }
.resumen-tabla { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm); }
.resumen-tabla th { background: #f3f4f6; padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--gris-texto); }
.resumen-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--gris-borde); }
.resumen-tabla tr:last-child td { border-bottom: none; }
.voto-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.voto-badge-normal  { background: #dcfce7; color: #166534; }
.voto-badge-blanco  { background: #f3f4f6; color: #6b7280; }
.voto-badge-viciado { background: #fef2f2; color: #dc2626; }

/* ── Voto Informado ──────────────────────────────────────── */
.vi-hero { background: linear-gradient(135deg,#0f172a,#1e3a8a); color:#fff; padding:48px 24px; text-align:center; }
.vi-hero h1 { font-size:clamp(22px,4vw,36px); margin-bottom:12px; }
.vi-hero p  { opacity:.85; max-width:540px; margin:0 auto 24px; }
.vi-badge { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); padding:5px 16px; border-radius:100px; font-size:12px; margin-bottom:20px; }
.vi-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; padding:40px 0 24px; }
.vi-feature-card { background:#fff; border-radius:var(--radio); padding:24px; text-align:center; box-shadow:var(--sombra-sm); border:1px solid var(--gris-borde); }
.vi-feature-icon { font-size:36px; margin-bottom:12px; }
.vi-feature-card h3 { font-size:15px; margin-bottom:8px; }
.vi-feature-card p  { font-size:13px; color:var(--gris-texto); }
.vi-iframe-wrapper { background:#fff; border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra-lg); border:1px solid var(--gris-borde); margin:24px 0; }
.vi-iframe-header { background:#0f172a; color:#fff; padding:10px 20px; display:flex; align-items:center; gap:10px; font-size:12px; }
.vi-iframe-dots { display:flex; gap:5px; }
.vi-iframe-dot { width:11px; height:11px; border-radius:50%; }
.vi-iframe-dot.red{background:#ef4444} .vi-iframe-dot.yellow{background:#f59e0b} .vi-iframe-dot.green{background:#22c55e}
.vi-iframe-url { background:rgba(255,255,255,.1); border-radius:4px; padding:4px 12px; font-family:monospace; font-size:12px; flex:1; }
.vi-iframe-wrapper iframe { width:100%; height:620px; border:none; display:block; }
.vi-fallback { text-align:center; padding:60px 24px; }

/* ── Modal compartir ─────────────────────────────────────── */
.compartir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.compartir-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  color: #fff;
}
.compartir-btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; color: #fff; }
.compartir-wa { background: #25d366; }
.compartir-fb { background: #1877f2; }
.compartir-tw { background: #000; }
.compartir-tg { background: #229ed9; }

/* ── Layout cédula + columna lateral ────────────────────── */
.cedula-layout-outer {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.cedula-col-main {
  flex: 1;
  min-width: 0;
}
.cedula-col-lateral {
  width: 240px;
  flex-shrink: 0;
  padding: 24px 12px 24px 16px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* Galería rotativa */
.lateral-rotativo {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  border: 1px solid var(--gris-borde);
}
.lateral-slide { display: none; }
.lateral-slide.lateral-slide-active { display: block; }
.lateral-slide img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.lateral-slide-titulo {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--gris-texto);
  text-align: center;
  margin: 0;
  background: #f8fafc;
  border-top: 1px solid var(--gris-borde);
}
.lateral-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: #f8fafc;
}
.lateral-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.lateral-dot.lateral-dot-active { background: var(--rojo); transform: scale(1.3); }

/* Placeholder ANUNCIA si no hay imágenes */
.lateral-anuncia-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 12px;
  background: linear-gradient(135deg,#fff7ed,#fff);
  border: 2px dashed #f97316;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  aspect-ratio: 3/4;
  transition: background .15s;
}
.lateral-anuncia-placeholder:hover { background: #fff7ed; text-decoration: none; }
.lateral-anuncia-icon { font-size: 36px; }
.lateral-anuncia-text { font-size: 18px; font-weight: 800; color: #f97316; line-height: 1.1; }
.lateral-anuncia-sub  { font-size: 11px; color: #9a3412; }

/* En tablet/mobile: lateral va debajo de la cédula */
@media (max-width: 860px) {
  .cedula-layout-outer { flex-direction: column; }
  .cedula-col-lateral {
    width: 100%;
    padding: 0 16px 24px;
    position: static;
    max-height: none;
  }
  .lateral-rotativo { max-width: 400px; margin: 0 auto; }
  .lateral-slide img { aspect-ratio: 16/9; }
  .lateral-anuncia-placeholder { aspect-ratio: 16/5; flex-direction: row; }
}

/* ── Foto + recuadro agrupados en cédula ─────────────────── */
.cedula-foto-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── 1 sección ANUNCIA ancho completo (header) ───────────── */
.anuncia-box-wide {
  width: 100%;
  min-height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fff7ed, #fff);
  border: 2px dashed #f97316;
  border-radius: var(--radio);
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
  text-align: center;
}
.anuncia-box-wide:hover { background: #fff7ed; box-shadow: 0 2px 12px rgba(249,115,22,.2); text-decoration: none; }

/* ── 2 columnas ANUNCIA inferiores ───────────────────────── */
.anuncia-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 0;
}
@media (max-width: 480px) { .anuncia-2col { grid-template-columns: 1fr; } }

/* ── Candidatos page ─────────────────────────────────────── */
.candidatos-page-header { background:linear-gradient(135deg,var(--rojo-dark),var(--rojo)); color:#fff; padding:36px 0; text-align:center; }
.candidatos-page-header h1 { font-size:clamp(20px,4vw,30px); margin-bottom:8px; }
.candidatos-page-header p  { opacity:.85; font-size:14px; }
.candidatos-grid-page { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; padding:32px 0; }

/* ── Banner inferior 2 columnas ─────────────────────────── */
.banner-2col {
  display: flex;
  gap: 12px;
  padding: 12px;
}
.banner-2col-item {
  flex: 1 1 50%;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
}
.banner-2col-item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 540px) {
  .banner-2col { flex-direction: column; }
}

/* ── Virtual 2da Vuelta ─────────────────────────────────── */
.segunda-vuelta-wrap {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border-radius: 0 0 var(--radio) var(--radio);
  padding: 20px 24px 24px;
  margin-bottom: 24px;
  color: #fff;
  font-family: sans-serif;
}
.segunda-vuelta-titulo {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 16px;
}
.segunda-vuelta-grid {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sv-candidato {
  flex: 1;
  text-align: center;
}
.sv-foto {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.sv-nombre { font-size: 14px; font-weight: 700; line-height: 1.2; }
.sv-partido { font-size: 11px; opacity: .75; margin: 3px 0 10px; }
.sv-barra-wrap {
  background: rgba(255,255,255,.2);
  border-radius: 100px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 4px;
}
.sv-barra { height: 100%; border-radius: 100px; transition: width .6s ease; }
.sv-barra-1 { background: #fbbf24; }
.sv-barra-2 { background: #34d399; }
.sv-porc { font-size: 22px; font-weight: 900; }
.sv-vs {
  font-size: 22px; font-weight: 900;
  opacity: .6;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .sv-foto { width: 56px; height: 56px; }
  .sv-nombre { font-size: 12px; }
  .sv-porc { font-size: 18px; }
}

/* ── Gráfica Top 10 ─────────────────────────────────────── */
.grafica-top10-wrap {
  background: #fff;
  border-radius: var(--radio);
  padding: 20px 16px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.grafica-top10 {
  display: flex;
  align-items: flex-end;
  gap: 18px;                  /* más separación entre barras */
  height: 240px;
  padding-top: 60px;          /* espacio para logos encima */
  position: relative;
  overflow-x: auto;
  justify-content: center;
}
.gt10-item {
  flex: 0 0 auto;
  width: 52px;                /* ancho fijo por ítem */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}
.gt10-logo-wrap {
  position: absolute;
  top: -54px;
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.gt10-logo { width: 100%; height: 100%; object-fit: cover; }
.gt10-barra-outer {
  width: 40px;                /* doble del anterior (20→40px) */
  margin: 0 auto;
  flex: 1;
  background: #e5e7eb;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.gt10-barra-fill {
  width: 100%;
  border-radius: 6px 6px 0 0;
  transition: height .8s ease;
  min-height: 4px;
}
.gt10-porc {
  font-size: 11px; font-weight: 700;
  color: #374151;
  margin-top: 4px;
  font-family: sans-serif;
}
.gt10-nombre {
  font-size: 10px; color: #6b7280;
  text-align: center;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
}
/* Ganador centrado — corona y destaque */
.gt10-winner .gt10-barra-outer {
  width: 44px;
}
.gt10-logo-winner {
  width: 46px !important;
  height: 46px !important;
  top: -60px !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px #fef3c7, 0 2px 8px rgba(245,158,11,.35) !important;
}
.gt10-crown {
  font-size: 13px;
  margin-top: 2px;
  line-height: 1;
}
@media (max-width: 600px) {
  .grafica-top10 { gap: 10px; padding-top: 50px; }
  .gt10-item { width: 40px; }
  .gt10-logo-wrap { width: 32px; height: 32px; top: -40px; }
  .gt10-barra-outer { width: 28px; }
  .gt10-winner .gt10-barra-outer { width: 32px; }
  .gt10-logo-winner { width: 36px !important; height: 36px !important; top: -44px !important; }
}

/* ── Live Activity – Badge y Toasts ─────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: sans-serif;
  white-space: nowrap;
  cursor: default;
}
.live-dot {
  width: 8px; height: 8px;
  background: #f87171;
  border-radius: 50%;
  animation: livePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* Toast de actividad */
#liveToastContainer {
  position: fixed;
  bottom: 90px;
  left: 16px;
  z-index: 9500;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.live-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-left: 4px solid #b91c1c;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  padding: 10px 14px;
  font-family: sans-serif;
  font-size: 13px;
  color: #111;
  max-width: 300px;
  pointer-events: auto;
  animation: toastIn .35s ease forwards;
  line-height: 1.3;
}
.live-toast.saliendo { animation: toastOut .3s ease forwards; }
.live-toast-icon { font-size: 20px; flex-shrink: 0; }
.live-toast-texto strong { display: block; font-size: 13px; }
.live-toast-texto span   { font-size: 11px; color: #6b7280; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}
@media (max-width: 480px) {
  #liveToastContainer { left: 8px; right: 8px; bottom: 80px; }
  .live-toast { max-width: 100%; }
}