.accordion-button:not(.collapsed){    
        background-color: #f2f2f2!important;
}
.tab-pane h1 {
  font-family: "Noto Serif", serif;
  font-weight: bold;
  font-size: 2.5em
}



section {
  max-width: 100%;
  padding: 24px 12px;
  margin: auto;
  text-align: center;
}

.card {
  border: none!important;
  text-align: center!important;
  display: inline-block!important;
  margin: 5px;
  vertical-align: top;
  width: 100%; 
background-color: none!important;
}


p {
  font-family: "Open Sans", sans-serif;
  font-size: 0.9em
}

.btn-secondary {
  width: 200px;
  height: 130px;
  background-color: white;
  background-image: url(img/ui/flag-3.svg);
  background-size: cover;
  border: none
}

.card-body {
  max-width: 800px !important;
    padding: 0!important
}


.accordion-body {
  text-align: left
}

footer {
  background-color: #404040;
  padding: 30px;
  text-align: center
}
footer p{
  color: #ffffff;
  margin: auto
}
footer li {
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 12px 24px;
  vertical-align: top
}

footer li img {
  width: 200px
}

footer li p {
  color: #ffffff;
  text-align: left;
  font-family: "Noto Serif", serif;
  font-size: 0.8em
}

.btn-secondary {
  width: 200px;
  height: 130px;
  background-color: white;
  background-image: url(../img/ui/flag-3.svg);
  background-size: cover;
  border: none
}

.accordion-body {
  text-align: left
}

.accordion-button {
  font-weight: bold
}

footer h2 {
  color: white
}
.form-check{
    text-align: right;
    max-width: 200px!important;
    padding-left: 0!important;
}
.form-check-input {
  float: right;
  height: 20px;
  height: 20px;
  width: 20px;
  border: 1px solid black;
  margin-left: 0!important
}

.d-inline-flex {
  display: inline-block!important;
  width: 100%
}

#myTab li.nav-item {
  padding: 12px 12px;
  margin: 0 15px;

  border-bottom: none!important
}


button a:any-link {
  color: #9a9898;
  text-decoration: none
}
.card-img-top{
width: 80%!important

}
.card-img-top:hover{
  opacity: 0.2;	 
  transition: opacity 1s;}
.card-img-top.selected{
  opacity: 0.2;	 
  transition: opacity 1s;}


.expanding-grid {
  width: 90%!important;
  margin: 25px auto 
}
.tab-content{
  max-width: 100%!important;
  margin: auto
      
}

@media only screen and (max-width: 600px) {
  #myTab li.nav-item { 
    display: table-cell !important;
  }
  .expanding-grid {
    margin: 0 !important;
    width: 98% !important;
  }
  section {
    padding: 0 !important;
    margin: 0 !important;
  }
  .card {
    margin: 5px !important;
    max-width: 150px !important;
  }
  .card-body {
    padding: 0 !important; /* Corregido */
  }
  .btn-dark {
    margin: 6px !important;
  }
  .d-inline-flex {
    width: 100% !important; /* Consolidado */
  }
  .btn-secondary {
    width: 150px !important;
    height: 100px !important;
  }
  .accordion .card {
    width: 100% !important;
  }
  .card-img-top {
    width: 120px !important;
  }

}
.candidato-opinion {
width:100%;
}
.scroller {
width:100%;
max-width: 1147px;
  min-width: 600px;
margin: auto
}
.content {
width:200px;
float:left;
}

/* ===== MOBILE (≤576px) – comparativa a dos columnas SIN solaparse ===== */
@media (max-width: 576px) {
#compareAnchorLi { --m-gap: 12px; }

/* 2 columnas en el header (foto + bio) */
#compareAnchorLi .candidato-opinion .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--m-gap) * -0.5);
  margin-right: calc(var(--m-gap) * -0.5);
}
#compareAnchorLi .candidato-opinion .row > .col {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: calc(var(--m-gap) / 2);
  padding-right: calc(var(--m-gap) / 2);
  min-width: 0; /* evita desbordes raros */
}

/* avatar responsivo: ocupa el ancho de la columna, con límite */
#compareAnchorLi .hero .avatar {
  /* 42vw ≈ la mitad del viewport menos padding; máx 150px para no chocar */
  width: min(42vw, 150px) !important;
  height: min(42vw, 150px) !important;
  border-width: 4px;
  display: block;
  margin: 0 auto 8px;
}
#compareAnchorLi .hero .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* textos del header */
#compareAnchorLi .hero .name-pill{
  font-size: clamp(12px, 3.6vw, 14px);
  line-height: 1.2;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#compareAnchorLi .hero .party{ font-size: 12px; line-height: 1.2; margin-top: 4px; }
#compareAnchorLi p{ font-size: 14px; line-height: 1.45; }

/* barra de tópicos */
#compareAnchorLi .topic-bar{ margin-top: 8px;padding: 0!important }

#compareAnchorLi #topicBodies .collapse .row{
  display: grid !important;               /* sustituye flex de Bootstrap */
  grid-template-columns: 1fr 1fr;         /* A | B */
  gap: 12px;                              /* espacio entre columnas */
  margin: 0;                              /* sin márgenes laterales */
}

/* Cada columna como “tarjeta” ligera */
#compareAnchorLi #topicBodies .collapse .row > .col{
  display: block !important;              /* neutraliza flex de .col */
  flex: initial !important;
  max-width: unset !important;
  width: auto;
  background: #f8f8f8;
  border-radius: 12px;
  padding: 12px;
  min-width: 0;                           /* evita desbordes raros */
}

/* Tipografía y cortes de palabras (sin guiones agresivos) */
#compareAnchorLi #topicBodies p,
#compareAnchorLi #topicBodies li{
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  hyphens: none;               /* estándar */
  -webkit-hyphens: none;       /* Safari iOS */
  word-break: normal;
  overflow-wrap: break-word;   /* por si hay términos largos */
}

/* Lista numerada de Q&A más limpia */
#compareAnchorLi ol.qa-list{ margin-left: 1rem; }
#compareAnchorLi ol.qa-list li strong{
  display:block;
  margin-bottom:6px;
}

/* Barra de búsqueda cómoda (evita zoom en iOS) */
#compareAnchorLi .topic-search .form-control{
  font-size: 16px;
  padding: 10px 12px;
}
}

/* === Paired Q&A layout (solo móviles) === */
@media (max-width: 576px) {
/* Contenedor de pares Q/A */
#compareAnchorLi .qa-paired {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}
/* Tarjeta por pregunta */
#compareAnchorLi .qa-paired .qa-item {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
}
/* Pregunta (título único) */
#compareAnchorLi .qa-paired .q {
  font-weight: 800;
  margin: 0 0 8px 0;
  line-height: 1.3;
}
/* Dos columnas de respuesta */
#compareAnchorLi .qa-paired .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* A | B */
  gap: 12px;
}
#compareAnchorLi .qa-paired .ans {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
}
#compareAnchorLi .qa-paired .ans p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Evita scroll horizontal accidental */
#compareAnchorLi .candidato-opinion { overflow-x: visible; }
}


/* Centrar y ajustar ancho del buscador de tópicos en desktop */
#compareAnchorLi .topic-search.input-group.mb-2 {
  display: flex;
  justify-content: center; /* centra horizontalmente */
}

#compareAnchorLi .topic-search.input-group.mb-2 .form-control {
  max-width: 400px; /* ancho máximo en desktop */
  width: 100%;
}

/* En móviles se mantiene al 100% */
@media (max-width: 768px) {
  #compareAnchorLi .topic-search.input-group.mb-2 .form-control {
    max-width: 100%;
  }
}

/* Limpia el halo de los topics sin afectar otros .btn-light del sitio */
#compareAnchorLi #topicButtons .btn-light{
  /* Quita fondo/borde sombreados de Bootstrap */
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  color: inherit;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Mantén accesible el foco sin sombra difusa */
#compareAnchorLi #topicButtons .btn-light:focus-visible{
  outline: 2px solid #0d6efd;   /* o el color de marca */
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Evita el “gap” bajo el SVG que parece línea */
#compareAnchorLi #topicButtons .btn .topic-icon{
  display: block;
}

/* ===== Topic bar: scroll horizontal SIEMPRE que haga falta (mobile + desktop) ===== */
#compareAnchorLi #topicButtons{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legacy */
}
#compareAnchorLi #topicButtons{ scrollbar-width: thin; }
#compareAnchorLi #topicButtons::-webkit-scrollbar{ display:block; height:6px; }

/* Los botones no deben encogerse (si encogen, “parece” que no hay scroll) */
#compareAnchorLi #topicButtons .btn{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Si algún padre seguía cortando, liberamos solo lo necesario */
#compareAnchorLi .candidato-opinion{ overflow-x: visible !important; }
#compareAnchorLi #topicBodies{ overflow-x: hidden !important; } /* para evitar scroll accidental del contenido */
/* ===========================
   FIX SCROLL HORIZONTAL TOPICS
   =========================== */

/* 1) Desactiva el "mata-scroll" en desktop (sin borrar tu idea, solo lo corregimos) */
@media (min-width: 992px){
  /* NO uses #compareAnchorLi * { overflow:hidden } porque mata el scroll interno */
  #compareAnchorLi { overflow: visible !important; }
  #compareAnchorLi .container { overflow: visible !important; }
  #compareAnchorLi .candidato-opinion { overflow-x: visible !important; }
}

/* 2) El scroller REAL es #topicButtons (también tiene class topic-bar) */
#compareAnchorLi #topicButtons{
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
}
#compareAnchorLi #topicButtons{ scrollbar-width: thin; }
#compareAnchorLi #topicButtons::-webkit-scrollbar{ display:block; height:6px; }

/* 3) Los botones NO deben encogerse (si se encogen, nunca hay overflow -> no hay scroll) */
#compareAnchorLi #topicButtons .btn{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* 4) Overwrite directo a tus media queries que ponían overflow:hidden en #topicButtons */
@media (min-width: 992px){
  #compareAnchorLi #topicButtons{ overflow-x:auto !important; }
}
@media (min-width: 1400px){
  #compareAnchorLi #topicButtons{ overflow-x:auto !important; }
}
@media (min-width: 992px) and (max-width: 1399px){
  #compareAnchorLi #topicButtons{ flex-wrap: nowrap !important; overflow-x:auto !important; }
}

#compareAnchorLi #topicButtons{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  width:100% !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
#compareAnchorLi #topicButtons{ scrollbar-width: thin; }
#compareAnchorLi #topicButtons::-webkit-scrollbar{ display:block; height:6px; }

#compareAnchorLi #topicButtons .btn{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* ===== FORCE HORIZONTAL SCROLL (AGRESIVO) ===== */
#compareAnchorLi #topicButtons{
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: scroll !important;      /* forzado */
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;                /* permite drag horizontal */
  scrollbar-gutter: stable both-edges;/* reserva espacio de scrollbar */
}

#compareAnchorLi #topicButtons .btn{
  flex: 0 0 auto !important;
  min-width: 56px !important;         /* <- CLAVE: crea overflow aunque sean solo íconos */
  padding: 0 !important;
}

/* scrollbar visible (para que “se vea” sí o sí) */
#compareAnchorLi #topicButtons{
  scrollbar-width: thin !important;   /* Firefox */
}
#compareAnchorLi #topicButtons::-webkit-scrollbar{
  display: block !important;
  height: 8px !important;
}