/* Poll System Styles - BEM Architecture */

.ht-poll {
width: 100%;
}

/* Header */
.ht-poll__header {
text-align: center;
}

/* Answers */
.ht-poll__answer-wrapper {
margin-bottom: 1rem;
}

/* Navigation */

/* --- MIGRATED FROM web.css --- */

.btn-poll {
  color: white !important;
border: 1px solid white;
  /* text-transform: uppercase; */
}


/* --- Emoticonos y Valoraciones --- */

/*******************************
* POLL
*******************************/

.modal-poll-text {
font-size: var(--text-sm);
  line-height: 17px;
}

/* FIN POLL PAGE ESCRITORIO */

/* POLL PAGE VERSION MOVIL */

.tab-poll .tab-pane {
padding: 10px 10px 90px 10px !important;
}

/* Título de la Pregunta */
/* Merged: last wins for color/line-height/font-size/margin; text-align kept from earlier unique occurrence */
.poll-question-title {
  margin-bottom: 20px;
font-family: var(--font-family-body);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-light-text);
  text-align: left;
}

/* Inputs y Formulario de Datos */
.form-control {
  padding: 8px 8px !important;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary) !important;
  background-color: var(--color-bg-body) !important;
  border: 2px solid var(--color-bg-subtle) !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition-base);
}

.form-control:focus {
  background-color: var(--color-bg-card) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(26, 26, 63, 0.05) !important;
}



/* Texto secundario */
#sharepollresult .col-12:first-child {
  padding: 0 20px;
  margin-bottom: 20px;
font-size: 0.9rem;
  color: var(--color-text-subtle);
}

/* Logos dentro de los botones */
.btn-img,
.img-holidadycheck {
width: 32px !important;
  height: auto;
}

#sharepollresult .fa-google {
font-size: 26px;
}

/* Etiquetas de texto bajo los iconos (small text-muted) */
#sharepollresult .small.text-muted {
  margin-top: 5px;
font-size: 0.65rem !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-text-muted) !important;

letter-spacing: 0.8px;
}

/* Ajuste del contenedor de iconos para que respiren */
#sharepollresult.d-flex.mx-auto {
  gap: 1px;
  justify-content: center;
  /* Espacio entre los 3 botones */
}

/* =========================================
 1. TÍTULO Y PROGRESO=========================================*/
/* Merged: last wins for all properties */
.ht-poll__title {
  padding: 15px 20px 15px;
  margin-bottom: 25px;
font-family: var(--font-family-body);
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-text-heading);
  text-align: center;
  letter-spacing: -0.5px;
}

/* Barra de progreso moderna (delgada y sutil) */
/* Merged: last wins */
.ht-poll__progress {
  max-width: 90%;
height: 6px !important;
  margin: 0 auto 30px;
  margin-bottom: 30px;
  overflow: hidden;
  background-color: var(--color-border) !important;
  border-radius: var(--radius-sm);
}

/* =========================================
 2. TARJETAS DE PREGUNTA (Card Design)=========================================*/
/* Quitamos estilos de lista de bootstrap */



/* Título de la pregunta */
.ht-poll__question-title {
  margin-bottom: 25px;
font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--text-dark);
  text-align: center;
}



/* =========================================
 4. BOTÓN "OMITIR"
 =========================================*/
/* Merged: last wins for margin-top; last adds width */
.skip-container {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

/* Estilo del botón "Omitir" */
.btn-skip-link {
  padding: 5px 10px !important;
  margin: auto;
  /* Gris suave para que no distraiga */
  font-size: 0.85rem !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-muted) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
  background: none !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-pill) !important;
  transition: var(--transition-base) !important;
}

/* Efecto Hover/Active para Feedback */
.btn-skip-link:hover {
  color: var(--color-text-subtle) !important;
  background-color: var(--color-bg-subtle) !important;
  /* Aparece un fondo muy tenue al interactuar */
}

.btn-skip-link:active {
  transform: scale(0.95);
  /* Micro-interacción de pulsado */
}

.btn-skip-link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================
 5. TEXTAREA (Comentarios)=========================================*/
/* Contenedor animado */
#text_area_comments_container {
animation: slideDown 0.3s ease-out;
}


/* =========================================
6. FOOTER Y BOTÓN SIGUIENTE=========================================*/
/* Merged: last missing position/bottom/left/width/z-index/display/justify-content — kept from earlier; last adds border-top */
.fixed-footer {
position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  /* Efecto cristal */
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--color-bg-subtle);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
}


/* =========================================
 7. UTILIDADES=========================================*/
/* Animación simple para abrir el textarea */
@keyframes slideDown {
from {
    opacity: 0;
    transform: translateY(-10px);
  }
to {
  opacity: 1;
  transform: translateY(0);
}
}
/*******************************
* POLL
*******************************/
.heading-nps {
font-family: Urbanist;
  font-size: 1.2em;
  font-weight: var(--font-weight-bold);
  color: #3D6AB3;
  text-transform: capitalize;
}

div#text_area_comments_container.nps-obs {
margin-top: 40px !important;
  border: 1px solid #6767675c !important;

}

.poll-obs::placeholder {
color: #676767 !important;
}

/* NPS Widget Buttons */
.nps-widget button {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0;
  margin-left: -1px;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  background: none;
  border: none;
  border: 3px solid var(--color-border-light);
  border-radius: 21%;
  box-shadow: none;
  transform: scale(1);
transition: background 0.2s ease-in,
    color 0.2s ease-in,
    border-color 0.2s ease-in,
    transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);
}

.nps-widget button.detractor {
  color: white;
  background: #F44336b0;
border-color: #f66259;
  transform: scale(1.05);
}

.nps-widget button.passive {
  color: white;
  background: #F57C00b0;
border-color: #ff8f1a;
  transform: scale(1.05);
}

.nps-widget button.promoter {
  color: white;
  background: #4CAF50b0;
border-color: #5cb860;
  transform: scale(1.05);
}

.nps-widget button.detractor.active {
  color: white;
  background: #F44336;
border-color: #f66259;
  transform: scale(1.05);
}

.nps-widget button.passive.active {
  color: white;
  background: #F57C00;
border-color: #ff8f1a;
  transform: scale(1.05);
}

.nps-widget button.promoter.active {
  color: white;
  background: #4CAF50;
border-color: #5cb860;
  transform: scale(1.05);
}

/* NPS Widget Small */
.nps-widget.widget-sm {
  position: relative;
  box-sizing: border-box;
  padding: 20px 0;
}

.nps-widget.widget-sm .positive-text {
  position: absolute;
  right: 20px;
  bottom: -15px;
  text-align: right;
}

.nps-widget.widget-sm .negative-text {
  position: absolute;
  bottom: -15px;
  left: 20px;
  text-align: left;
}

.nps-widget.widget-sm button {
  display: inline-block;
  width: calc(100vw/14);
  max-width: 42px;
  height: calc(100vw/14);
  max-height: 42px;
  font-size: var(--text-base);
  font-weight: normal;
  text-align: center;
  border: none;
  transform: scale(1) !important;
}


/* =========================================================
 CONTEXTO: POLL SINGLE (VISTA HERO / OVERLAP) Se activa solo cuando el padre tiene la clase .poll-single=========================================================*/

/* --- 1. HEADER GIGANTE (HERO) --- */
/* Hacemos la foto más alta y preparamos el solapamiento */
.poll-single .ht-poll__header {
  /* Solo redondeado abajo */
  position: relative;
  z-index: 1;
height: 450px !important;
  /* Altura generosa para la foto */
  margin-bottom: 0 !important;
  /* Quitamos margen para que la tarjeta suba */
  border-radius: 24px 24px 32px 32px !important;
}

/* Posicionamiento del Título del Restaurante (05 Steak House) */
/* Lo subimos para que la tarjeta blanca no lo tape */
.poll-single .ht-poll__header .header-page-title {
  position: absolute;
  bottom: 100px !important;
  /* 100px desde abajo para salvar el overlap */
  left: 0;
  z-index: 5;
display: block !important;
  width: 100%;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text-inverse);

text-align: center;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  /* Click-through */
}

/* --- 2. OCULTAR ELEMENTOS REDUNDANTES --- */
/* Ocultamos "Queremos saber su opinión..." en este modo */
.poll-single .ht-poll__title {
display: none !important;
}

/* --- 3. CONTENEDOR DE LA PÁGINA --- */
.poll-single .ht-poll__question_page {
  position: relative;
  z-index: 1;
display: block !important;
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 100px;
}

/* --- 4. LA TARJETA FLOTANTE (OVERLAP) --- */
.poll-single .ht-poll__question_page .ht-poll__question {

/* Dimensiones */
  width: 92%;
  max-width: 600px;
/* EL TRUCO: Margen negativo para subir sobre la foto */
  margin-top: -80px !important;
  margin-right: auto !important;
  margin-bottom: 40px !important;

/* Centrado */
  margin-left: auto !important;

/* Estética */
  background: var(--color-bg-card);
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* --- 5. RESPONSIVE (MÓVIL) PARA SINGLE --- */
@media (max-width: 576px) {

/* Header un poco menos alto en móvil */
  .poll-single .ht-poll__header {
    height: 350px !important;
  }

/* Ajuste texto título */
.poll-single .ht-poll__header .header-page-title {
  height: fit-content;
  font-size: 2rem !important;
}

/* La tarjeta sube un poco menos */
.poll-single .ht-poll__question_page .ht-poll__question {
  width: 94% !important;
  margin-top: -60px !important;
}
}
/* =========================================================
 AJUSTE DE LA IMAGEN DE FONDO EN MODO SINGLE=========================================================*/

/* Forzamos que la imagen ocupe todo el alto del contenedor padre (450px) */
.poll-single .header-page-image {
  /* Clave: Adiós al 15vh, hola al 100% del padre */
  width: 100% !important;
  /* Añado la -lg por si acaso usas esa variante */

height: 100% !important;

/* Centramos la imagen para que se vea la mejor parte */
  background-position: center !important;
  background-size: cover !important;

/* Aseguramos que los bordes coincidan con el header padre */
  border-radius: 0 0 32px 32px !important;
}
/* =========================================
 PANTALLA DE ÉXITO (THANKYOU PAGE)=========================================*/

/* 1. CONTENEDOR PRINCIPAL */

/* Merged: lines 520 unique properties (color, font-size, line-height) + later adds width/margin/justify-content */
#sharepollresult {
  justify-content: center !important;
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

/* 5. BOTONES DE REDES SOCIALES (Grid Moderno) */
#sharepollresult .d-flex {
  flex-wrap: wrap !important;
  gap: 15px !important;
  justify-content: center !important;
  width: 100%;
}


/* Etiquetas de texto debajo de los iconos */
.small.text-muted {
margin-top: 8px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted) !important;
}

/* =========================================================
 CENTRADO VERTICAL DE LA PANTALLA FINAL (STEP 3)=========================================================*/

/* 1. EL CONTENEDOR PADRE DIRECTO */
/* Buscamos el div que envuelve al step3 para hacerlo Flex */
/* Nota: Usamos el ID del contenedor padre si es único, o las clases tab-pane */
.tab-content .tab-pane.active {
display: flex !important;
  flex-direction: column;
  /* Centrado Vertical */
  align-items: center;
  /* Altura mínima para tener espacio donde centrar */
  justify-content: center;
  /* Centrado Horizontal */
}



/* 3. LA TARJETA FINAL (STEP 3) */


@keyframes popSuccess {
from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
to {
  opacity: 1;
  transform: scale(1) translateY(0);
}
}


/* =========================================
 ENCUESTAS PREMIUM (App Feedback)=========================================*/



/* Barra de Progreso */
.ht-poll__progress .progress-bar {
background-color: var(--primary);
  border-radius: var(--radius-sm);
}

/* TARJETAS DE PREGUNTA */
.poll-item {
  padding: 25px;
  margin-bottom: 20px;
background: var(--color-bg-card);
  border: 1px solid var(--color-bg-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* INPUTS Y SELECTS */
/* Merged: last wins for border/background/padding/font-size; unique from earlier: color, width, resize */
.poll-obs {
  width: 100%;
  height: auto !important;
  padding: 12px 15px !important;
  font-size: 0.95rem !important;
  color: var(--text-dark);
  resize: none;
  background-color: var(--color-bg-body) !important;
  border: 1px solid var(--color-border) !important;
border-radius: var(--radius-sm) !important;
  transition: var(--transition-fast);
}

.poll-obs:focus {
  background-color: var(--color-text-inverse) !important;
border-color: var(--color-success) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

/* BOTONES SI/NO (Chips) */
.btn-group-modern {
display: flex;
  gap: 12px;
}

.btn-chip {
flex: 1;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-subtle);
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-chip.btn-primary {
  color: var(--color-text-inverse) !important;
background-color: var(--color-text-heading) !important;
  /* Negro Luxury */
  border-color: var(--color-text-heading) !important;
}

/* VALORACIÓN EMOTION (Emojis) */

/* =========================================
 CUSTOM SELECT (Con Icono Chevron)=========================================*/

.input-wrapper {
position: relative;
  /* Necesario para posicionar elementos internos si fuera necesario */
}

.custom-select-poll {
  width: 100% !important;
  height: 52px !important;
  padding: 12px 40px 12px 15px !important;
  /* Más espacio a la derecha para el icono */
font-family: var(--font-family-body) !important;
  font-size: 0.95rem !important;
  color: var(--color-text-heading) !important;
appearance: none;
  /* Elimina la flecha nativa de Chrome/Safari/Firefox */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Altura táctil cómoda */
  cursor: pointer;

background-color: var(--color-bg-body) !important;

/* ICONO CHEVRON PERSONALIZADO (SVG) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 18px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;

transition: var(--transition-fast);
}

/* Efecto al hacer foco o abrir */
.custom-select-poll:focus {
outline: none !important;
  /* Verde Esmeralda acorde a tu botón Enviar */
  background-color: var(--color-text-inverse) !important;
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

/* Ajuste del Label superior */
.form-label-small {
display: block;
  margin-bottom: 8px;
  margin-left: 4px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* --- Tarjeta Blanca (Card) que envuelve las preguntas --- */
/* --- Barra de Progreso --- */
.progress {
  height: 10px !important;
  margin-bottom: 30px !important;
  overflow: hidden;
  background-color: var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
}

.progress-bar {
  background: linear-gradient(90deg, #3b82f6, #007bff) !important;
  border-radius: var(--radius-pill) !important;
}

/* --- Estilo de los Inputs y Textareas --- */

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Emoticonos y Valoraciones --- */

/* --- Botón Omitir --- */
.skip-button button {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary) !important;
  text-decoration: underline;
  background: transparent !important;
  border: none !important;
}

/* =========================================
   MODAL: ENCUESTA DUPLICADA (Allow Multiple)
   ========================================= */

/* 1. Ajustes de la tarjeta principal */
#modal_allow_multiple .modal-content {
  padding: 30px 24px 24px 24px !important;
  background-color: var(--color-text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* 2. Ocultar la cabecera vacía que rompe el espaciado */
#modal_allow_multiple .modal-header {
  display: none !important;
}

/* 3. Icono Superior (Alerta Premium) */
#modal_allow_multiple .modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fondo rojo muy pastel */
  width: 72px;
  height: 72px;
  margin: 0 auto 24px auto !important;
  background-color: var(--color-danger-soft) !important;
  border-radius: 50%;
  animation: htPulseAlert 2s infinite;
  /* Latido sutil */
}

#modal_allow_multiple .modal-icon i {
  margin: 0 !important;
  /* Rojo vibrante */
  font-size: 36px !important;
  color: var(--color-danger) !important;
}

/* 4. Textos centrados y legibles */
#modal_allow_multiple .modal-body {
  padding: 0 10px 24px 10px !important;
  text-align: center;
}

#modal_allow_multiple .modal-body p {
  margin: 0 !important;
  font-family: var(--font-family-body) !important;
  font-size: 1.05rem !important;
  /* Slate 700 (Gris oscuro) */
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.6 !important;
  color: var(--color-light-text) !important;
}

/* 5. Footer sin bordes */
#modal_allow_multiple .modal-footer {
  padding: 0 !important;
  border: none !important;
}


/* Micro-animación para el icono de alerta */
@keyframes htPulseAlert {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* =========================================
   PASO 3: AGRADECIMIENTO Y REDES SOCIALES
   ========================================= */

/* 1. Contenedor Principal (Full Screen Flexbox) */
#step3 {
  display: flex;
  align-items: center !important;
  /* Centrado Vertical */
  justify-content: center !important;
  /* Altura pantalla menos header */
  width: 100% !important;
  /* Centrado Horizontal */
  min-height: calc(100vh - 100px) !important;
  padding: 20px !important;
  animation: htFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. La Tarjeta Blanca Flotante */
/* Merged: last adds min-height, display flex, flex-direction, align-items, justify-content */
#step3 .ht-poll-success-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* Centra los elementos horizontalmente */
  justify-content: center !important;
  width: 100%;
  max-width: 500px;
  /* Evita que la tarjeta sea gigante en PC */

  /* Magia para el alto mínimo y centrado vertical */
  min-height: 300px !important;
  padding: 40px 24px 30px 24px !important;
  text-align: center;
  background-color: var(--color-text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
  /* Centra los elementos verticalmente */
}

/* 3. Círculo y Check de Éxito */
#step3 .ht-poll-sucess-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px auto;
  background-color: var(--color-success-soft) !important;
  /* Verde esmeralda muy claro */
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.1) !important;
  /* Halo suave */
}

/* Animación de dibujo del SVG (Tick verde) */
#step3 .checkmark {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  stroke: var(--color-success) !important;
  stroke-width: 3;
  /* Verde Esmeralda */
  stroke-miterlimit: 10;
}

#step3 .checkmark__circle {
  fill: none;
  stroke: var(--color-success) !important;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: htStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

#step3 .checkmark__check {
  stroke: var(--color-success) !important;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  transform-origin: 50% 50%;
  animation: htStroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes htStroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes htFadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. Textos Principales */
#step3 .h5.text-center {
  /* Negro Slate */
  margin-bottom: 12px !important;
  font-family: var(--font-family-body) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--color-text-heading) !important;
}

#sharepollresult .col-12 {
  padding: 0 10px;
  margin-bottom: 24px !important;
  font-family: var(--font-family-body) !important;
  /* Gris intermedio */
  font-size: 0.95rem !important;
  line-height: 1.6;
  color: var(--color-text-body) !important;
}

/* Contenedor individual de cada red social */
#sharepollresult .d-flex>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
}

/* El botón táctil (Squircle) */
#sharepollresult .btn-icon {
  /* Gris ultra claro */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px auto !important;
  /* Curvatura estilo Apple */
  background: var(--color-bg-body) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: var(--transition-fast) !important;
}

#sharepollresult .btn-icon:hover {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-4px);
}

#sharepollresult .btn-icon:active {
  transform: scale(0.92);
}

/* Ajuste de los logotipos dentro de los botones */
#sharepollresult .btn-img,
#sharepollresult .img-holidadycheck {
  width: 32px !important;
  height: auto !important;
  object-fit: contain;
}

#sharepollresult .btn-google i {
  /* Rojo de Google */
  font-size: 28px !important;
  color: #ea4335 !important;
}

/* Nombres de las redes sociales debajo de los botones */
#sharepollresult .text-muted {
  padding: 0 !important;
  font-family: var(--font-family-body) !important;
  font-size: 0.75rem !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-subtle) !important;
  text-align: center;
}

@media (min-width: 992px) {
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px;
    background: transparent;
    border-top: 1px solid var(--color-bg-subtle);
    box-shadow: none;
    backdrop-filter: none;
}
.header-page-image, .header-page-image-lg {
        display:none !important;
    }
    .tab-content.tab-poll {
    padding-top: 30px;
}
.ht-poll__header {
    display:none !important;
}
}