.row.no-gutters-fix {
  margin-left: 0;
  margin-right: 0;
}

.encuesta-wrapper {
  background-image: url('../img/endotrivia.jpg');
  /* tu imagen */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.encuesta-body .encuesta-placeholder,
.encuesta-access-link,
.encuesta-list {
  min-height: 390px;
}


.encuesta-placeholder {
  background-color: #ac7e9a;
  color: white;
  padding: 2rem;
  font-family: 'Gotham Book';
  max-width: 100%;
  overflow-x: auto;
}

/*
.encuesta-access-link{
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    align-items: center !important;
    justify-content: center !important;
}
*/
.encuesta-access-link {
  text-align: center;
  margin-bottom: 1.5rem;
  min-height: 100%;
  /* asegura altura completa si lo necesitás */
}

.enc-question p {
  font-family: 'Gotham Bold Italic';
  font-weight: bold;
  font-style: italic;
  font-size: 2rem;
  line-height: 37px;
}

form.enc-form ul {
  padding: 0;
  margin: 0;
}

form.enc-form ul li {
  list-style-type: none;
  margin-top: 3px;
  font-family: 'Gotham Book';
  font-size: 1.2rem;
}

.bi-opcion-enc {
  color: #fff;
  font-size: 1.0rem;
}

.opcion-icon {
  width: 38px;
  height: 38px;
  stroke: #fff;
  stroke-width: 0.5;
}

.opcion-text {
  padding-left: 0.2rem;
}

/*
div.enc-resultados ul li{
	
}
*/
/* columna izquierda */
.big-encuesta-icon {
  font-size: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: rgb(71, 83, 97);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
  /* transition: background-color 0.3s, color 0.3s; */
}

/*
.big-encuesta-icon:hover {
    background-color: rgb(71, 83, 97);
    color: white;
}
    */


.link-white-encuesta,
.link-white-big-encuesta {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  font-family: 'Gotham Book';
}

.link-white-big-encuesta {
  font-size: 3rem;
}

.link-white-encuesta:hover,
.link-white-big-encuesta:hover {
  color: white;
  text-decoration: underline;
}

/* Botón 'VER RESULTADOS': transparente con borde y texto blancos */
.btn-blanco-encuesta,
.btn-votar-encuesta,
.related-article a {
  font-size: 1.1rem;
  font-family: 'Gotham Book';
}

.btn-blanco-encuesta,
.btn-votar-encuesta {
  padding: 1.2rem 2rem;
}

.btn-blanco-encuesta {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 500;
  margin-top: 1rem;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}

.btn-blanco-encuesta:hover {
  background-color: #ffffff;
  color: #B5829C;
  /* mismo color que el texto del botón ENVIAR */
}

/* Botón 'ENVIAR': fondo blanco, texto rosado */
.btn-votar-encuesta {
  background-color: #ffffff;
  border: 2px solid #ffffff;
  color: #B5829C;
  border-radius: 999px;
  margin-top: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}

.btn-votar-encuesta:hover {
  background-color: transparent;
  color: #ffffff;
}

/* Enlace 'AMPLIAR EL TEMA': texto blanco sin fondo */
.related-article a {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 3rem;
}

.related-article a:hover {
  text-decoration: underline;
  color: #ffffff;
}

.enc-botones {
  max-width: 250px;
  /* ancho fijo para los botones si querés */
  width: 100%;
}

.enc-btn button {
  width: 100%;
}

/* Clase que se aplica temporalmente durante la votación */
.voting {
  font-size: 1.4rem;
  /* aumentás el tamaño relativo del contenido */
  padding: 1.4rem 2rem;
}

/* Ajuste visual para el spinner dentro del botón */
.voting .spinner-border {
  width: 1.6rem;
  height: 1.6rem;
  border-width: 0.2em;
}

/* Resultado de encuestas */
.enc-resultados {
  padding: 1rem 0;
  color: #f8f9fa;
  /* texto claro si el fondo es oscuro */
}

.enc-resultados ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.enc-resultados li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

span.respuesta {
  flex: 0 0 35%;
  font-weight: 500;
  font-size: 1.1rem;
}

span.bar-container {
  flex: 1;
  position: relative;
  background-color: #BA8CA7;
}

span.opcion-de-voto {
  position: absolute;
  top: 0;
  left: 0.75rem;
  font-size: 0.9rem;
  z-index: 2;
  color: #fff;
  line-height: 1.8rem;
}

span.bar {
  display: block;
  height: 1.8rem;
  background-color: #6c63ff;
  /* violeta Bootstrap modern */
  border-radius: 0.25rem;
  transition: width 0.5s ease;
  z-index: 1;
  position: relative;
}

/* Alternativa de color si querés distinguir por opción */
/* Paleta de 20 colores para distinguir cada opción */
span.bar[data-index="1"] {
  background-color: #00bcd4;
}

/* cyan */
span.bar[data-index="2"] {
  background-color: #4caf50;
}

/* verde */
span.bar[data-index="3"] {
  background-color: #ff9800;
}

/* naranja */
span.bar[data-index="4"] {
  background-color: #f44336;
}

/* rojo */
span.bar[data-index="5"] {
  background-color: #9c27b0;
}

/* violeta */
span.bar[data-index="6"] {
  background-color: #3f51b5;
}

/* índigo */
span.bar[data-index="7"] {
  background-color: #795548;
}

/* marrón */
span.bar[data-index="8"] {
  background-color: #2196f3;
}

/* azul brillante */
span.bar[data-index="9"] {
  background-color: #8bc34a;
}

/* lima */
span.bar[data-index="10"] {
  background-color: #e91e63;
}

/* rosado fuerte */
span.bar[data-index="11"] {
  background-color: #607d8b;
}

/* gris azulado */
span.bar[data-index="12"] {
  background-color: #ff5722;
}

/* naranja oscuro */
span.bar[data-index="13"] {
  background-color: #009688;
}

/* teal */
span.bar[data-index="14"] {
  background-color: #cddc39;
}

/* amarillo lima */
span.bar[data-index="15"] {
  background-color: #673ab7;
}

/* púrpura */
span.bar[data-index="16"] {
  background-color: #ffc107;
}

/* ámbar */
span.bar[data-index="17"] {
  background-color: #ff1744;
}

/* rojo neón */
span.bar[data-index="18"] {
  background-color: #00e676;
}

/* verde neón */
span.bar[data-index="19"] {
  background-color: #651fff;
}

/* violeta neón */
span.bar[data-index="20"] {
  background-color: #64ffda;
}

/* aqua claro */

/* <= 1366px */
@media (max-width: 1366px) {

  .enc-question p {
    font-size: 27px;
  }
}