/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


/* === ADA LAB · Barra de progreso === */
.progress {
  background-color: #ecedf8;   /* azul muy claro de marca */
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  box-shadow: none;
}

.progress-bar {
  /* background-image: linear-gradient(90deg, #34abd4 0%, var(--primary-color) 100%); */
  background-color: var(--primary-color);   /* fallback */
  color: var(--primary-text-color);
  font-weight: 600;
  border-radius: 999px;
  transition: width .4s ease;
}



/* === ADA LAB · Opciones radio tipo píldora (solo preguntas list-radio) === */

/* Contenedor flex + separación de los bordes del box */
.list-radio .answers-list.radio-list > ul.list-unstyled {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 18px;      /* separación izq/der del box */
  margin: 0;
  list-style: none;
}

/* Cada opción */
.list-radio li.answer-item.radio-item {
  padding: 0;
  margin: 0;
  width: auto;
  flex: 0 0 auto;
  position: relative;
  min-height: 0;
}

/* Ocultar el círculo nativo del navegador */
.list-radio li.answer-item.radio-item input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none !important;
  appearance: none;
  -webkit-appearance: none;
}

/* Neutralizar el radio custom del tema (círculos ::before/::after) */
.list-radio li.answer-item.radio-item label.radio-label::before,
.list-radio li.answer-item.radio-item label.radio-label::after {
  display: none !important;
  content: none !important;
}

/* El label es la píldora */
.list-radio li.answer-item.radio-item label.radio-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 9px 18px;
  border: 1.5px solid #d7daf0;
  border-radius: 999px;
  background: #fff;
  color: var(--primary-color);
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  transition: all .18s ease;
  user-select: none;
}

/* Hover */
.list-radio li.answer-item.radio-item label.radio-label:hover {
  border-color: var(--primary-color);
  background: #ecedf8;
  color: var(--primary-color);
}

/* Seleccionado */
.list-radio li.answer-item.radio-item input[type="radio"]:checked + label.radio-label {
  /* background-image: linear-gradient(90deg, #34abd4 0%, var(--primary-color) 100%); */
  background-color: var(--primary-color);
  border-color: transparent;
  color: var(--primary-text-color);
  box-shadow: 0 6px 16px -6px rgba(46,60,138,.5);
}

/* Foco accesible (teclado) */
.list-radio li.answer-item.radio-item input[type="radio"]:focus-visible + label.radio-label {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* === Móvil: píldoras apiladas en vertical, ancho completo === */
@media (max-width: 767px) {
  .list-radio .answers-list.radio-list > ul.list-unstyled {
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
  }
  .list-radio li.answer-item.radio-item {
    width: 100%;
  }
  .list-radio li.answer-item.radio-item label.radio-label {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding: 12px 18px;
  }
}


/* === ADA LAB · Tipografía Helvetica global === */
body,
.survey-form-container,
.ls-label-question,
.question-text,
input, select, textarea, button, label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* === ADA LAB · Sombra ligera en el contenedor de la pregunta === */
.question-container {
  box-shadow: 0 8px 28px -12px rgba(46, 60, 138, .22);
  border-radius: 12px;
  border-color: #e7e9f5;
  background: #fff;
}

/* === Móvil: texto de la pregunta más grande === */
@media (max-width: 767px) {
  .question-text .ls-label-question,
  .ls-label-question {
    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }
}


/* === ADA LAB · Botón "Siguiente" / Enviar === */
#ls-button-submit.btn,
button.ls-move-next-btn.btn,
button.ls-move-submit-btn.btn {
  /* background-image: linear-gradient(135deg, #34abd4 0%, var(--primary-color) 92%) !important; */
  background-color: var(--primary-color) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: .2px;
  padding: 12px 34px !important;
  box-shadow: 0 14px 30px -12px rgba(46, 60, 138, .55) !important;
  transition: background .25s ease, color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}

/* Hover → degradado verde de acento ADA LAB */
#ls-button-submit.btn:hover,
button.ls-move-next-btn.btn:hover,
button.ls-move-submit-btn.btn:hover {
  /* background-image: linear-gradient(135deg, #c2ee2e 0%, #aadb00 45%, #6f8f00 100%) !important; */
  background-color: #d1d1d1 !important;
  color: #1a2300 !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 38px -12px rgba(136, 136, 136, 0.582) !important;
}

/* Active (al presionar) */
#ls-button-submit.btn:active,
button.ls-move-next-btn.btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -10px rgba(92, 92, 92, 0.55) !important;
}

/* Foco accesible (teclado) */
#ls-button-submit.btn:focus-visible,
button.ls-move-next-btn.btn:focus-visible {
  outline: 3px solid rgba(129, 129, 128, 0.55) !important;
  outline-offset: 2px;
}


/* === ADA LAB · Móvil: botón "Siguiente" al 80% del ancho, centrado === */
@media (max-width: 767px) {
  /* Reducir el espacio alrededor de la pregunta y la navegación */
  #navigator-container.navigator {
    margin-top: 6px !important;
  }
  .group-outer-container.space-col,
  .group-container.space-col {
    margin-bottom: 10px !important;
  }
  .question-container {
    margin-bottom: 0 !important;
  }

  /* Navigator en columna centrada */
  #navigator-container.row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  #navigator-container .col-xs-6 {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* Botón al 80% del ancho, centrado */
  #ls-button-submit.btn,
  button.ls-move-next-btn.btn {
    display: block !important;
    width: 80% !important;
    margin: 0 auto !important;
    float: none !important;
  }
}

/* === ADA LAB · Botones Sí/No (preguntas yes-no) === */

/* Separar los dos botones (quitar el group pegado) */
.yes-no .yesno-button.btn-group-justified {
  display: flex !important;
  gap: 12px !important;
  border: none !important;
}

/* Cada botón */
.yes-no .yesno-button .button-item.btn {
  flex: 1 1 0 !important;
  background-image: none !important;
  background-color: #fff !important;
  border: 1.5px solid #d7daf0 !important;
  border-radius: 999px !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  transition: all .18s ease !important;
  float: none !important;
}

.yes-no .yesno-button .button-item.btn label,
.yes-no .yesno-button .button-item.btn .glyphicon,
.yes-no .yesno-button .button-item.btn i {
  color: inherit !important;
}

/* Hover → degradado verde lima de acento */
.yes-no .yesno-button .button-item.btn:hover {
  /* background-image: linear-gradient(135deg, #c2ee2e 0%, #aadb00 45%, #6f8f00 100%) !important; */
  background-color: #aadb00 !important;
  border-color: transparent !important;
  color: #1a2300 !important;
  box-shadow: 0 10px 24px -12px rgba(111, 143, 0, .55) !important;
}

/* Seleccionado (active) → gradiente azul de marca */
.yes-no .yesno-button .button-item.btn.active,
.yes-no .yesno-button .button-item.btn:active {
  /* background-image: linear-gradient(135deg, #34abd4 0%, var(--primary-color) 92%) !important; */
  background-color: var(--primary-color) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -12px rgba(46, 60, 138, .55) !important;
}




/* ============================================================
   ADA LAB · Pregunta de escala 1-7 (array-flexible-row)
   ============================================================ */

/* ================= DESKTOP (> 760px) ================= */
@media (min-width: 761px) {
  .array-flexible-row thead th.answer-text {
    background: transparent !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    text-align: center !important;
    vertical-align: bottom !important;
    padding: 8px 6px !important;
    border: none !important;
  }
  .array-flexible-row table.radio-array,
  .array-flexible-row table.radio-array th,
  .array-flexible-row table.radio-array td,
  .array-flexible-row table.radio-array tr,
  .array-flexible-row table.radio-array tbody tr.ls-even,
  .array-flexible-row table.radio-array tbody tr.ls-odd {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  .array-flexible-row tbody td.answer-item {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 14px 6px !important;
  }
  .array-flexible-row tbody td.answer-item label {
    width: 28px !important;
    height: 28px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
    display: inline-block !important;
    font-size: 0 !important;
    color: transparent !important;
  }
  .array-flexible-row tbody td.answer-item label::before {
    width: 28px !important;
    height: 28px !important;
    border: 2px solid #b2b7e1 !important;
    background: #fff !important;
    transition: all .15s ease !important;
    margin: 0 auto !important;
  }
  .array-flexible-row tbody td.answer-item:hover label::before {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(52,171,212,.15) !important;
  }
  .array-flexible-row tbody td.answer-item label::after {
    background: var(--primary-color) !important;
    width: 14px !important;
    height: 14px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
  .array-flexible-row tbody td.answer-item input[type=radio]:checked ~ label::before,
  .array-flexible-row tbody td.answer-item input[type=radio]:checked + label::before {
    border-color: var(--primary-color) !important;
  }
}

/* ================= MÓVIL (<= 760px) ================= */
@media (max-width: 760px) {
  /* --- Opciones convertidas en botones píldora centrados --- */
  .array-flexible-row tbody td.answer-item label::before,
  .array-flexible-row tbody td.answer-item label::after { display:none !important; content:none !important; }

  .array-flexible-row tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 0 10px !important;
  }
  .array-flexible-row tbody td.answer-item {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
  }
  .array-flexible-row tbody td.answer-item input[type=radio] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important; height: 1px !important;
    pointer-events: none !important;
  }
  .array-flexible-row tbody td.answer-item label.ls-label-xs-visibility {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 1.5px solid #d7daf0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all .18s ease;
  }
  .array-flexible-row tbody td.answer-item label.ls-label-xs-visibility:hover {
    border-color: var(--primary-color) !important;
    background: #ecedf8 !important;
    color: var(--primary-color) !important;
  }
  .array-flexible-row tbody td.answer-item input[type=radio]:checked + label.ls-label-xs-visibility {
    /* background-image: linear-gradient(135deg, #34abd4 0%, var(--primary-color) 92%) !important; */
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -10px rgba(46,60,138,.5) !important;
  }

  /* --- Eliminar fondo y bordes de la tabla en móvil (tu bloque) --- */
  .array-flexible-row table.radio-array,
  .array-flexible-row table.radio-array > tbody,
  .array-flexible-row table.radio-array > tbody > tr {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .array-flexible-row table.radio-array td,
  .array-flexible-row table.radio-array th {
    border: none !important;
    background-color: transparent !important;
  }

  /* --- Atributo evaluado: banner destacado y centrado (tu bloque) --- */
  .array-flexible-row tbody th.answertext.control-label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 16px !important;
    padding: 14px 18px !important;
    border: none !important;
    border-radius: 12px !important;
    /* background: linear-gradient(135deg, #34abd4 0%, var(--primary-color) 92%) !important; */
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: .2px !important;
    box-shadow: 0 10px 26px -12px rgba(46, 60, 138, .55) !important;
  }
}

/* ====== ADA LAB · Opciones checkbox como tarjetas seleccionables (sin casilla) ====== */
.multiple-opt .checkbox-list.answers-list{ list-style:none; margin:0; padding:0; }

/* Tarjeta de cada opción */
.multiple-opt li.checkbox-item,
.multiple-opt .othertext-label-checkox-container{
  position:relative;
  margin:0 0 10px 0;
  padding:0;
  background:#ffffff;
  border:1.5px solid #d7daf0;
  border-radius:12px;
  transition:all .18s ease;
  box-shadow:0 1px 2px rgba(27,35,78,.04);
  overflow:hidden;
}
.multiple-opt li.checkbox-item:hover,
.multiple-opt .othertext-label-checkox-container:hover{
  border-color:var(--primary-color);
  background:#f4f8fc;
}

/* Etiqueta clicable (sin espacio para casilla) */
.multiple-opt li.checkbox-item label.checkbox-label,
.multiple-opt .othertext-label-checkox-container label.answertext{
  display:block;
  width:100%;
  margin:0;
  padding:15px 20px;
  font-weight:600;
  color:var(--primary-color);
  cursor:pointer;
  line-height:1.35;
}

/* Ocultar el input nativo */
.multiple-opt li.checkbox-item input[type=checkbox],
.multiple-opt .othertext-label-checkox-container input.other-checkbox{
  position:absolute; opacity:0; width:0; height:0; margin:0;
}

/* Eliminar por completo la casilla y palomitas */
.multiple-opt li.checkbox-item label.checkbox-label::before,
.multiple-opt li.checkbox-item label.checkbox-label::after,
.multiple-opt .othertext-label-checkox-container label.answertext::before,
.multiple-opt .othertext-label-checkox-container label.answertext::after{
  content:none !important;
  display:none !important;
}

/* Estado seleccionado: tarjeta completa con gradiente de marca */
.multiple-opt li.checkbox-item:has(input:checked),
.multiple-opt .othertext-label-checkox-container:has(input:checked){
  border-color:var(--primary-color);
  /* background:linear-gradient(135deg, #34abd4 0%, var(--primary-color) 92%); */
  box-shadow:0 4px 12px rgba(46,60,138,.22);
}
.multiple-opt li.checkbox-item:has(input:checked) label.checkbox-label,
.multiple-opt .othertext-label-checkox-container:has(input:checked) label.answertext{
  color:#ffffff;
}

/* Campo de texto "Otro" */
.multiple-opt .other-text-item{ margin-top:2px; }
.multiple-opt .other-text-item input.form-control{
  border:1.5px solid #d7daf0;
  border-radius:12px;
  padding:14px 18px;
  color:var(--primary-color);
  font-weight:500;
  box-shadow:none;
  transition:all .18s ease;
}
.multiple-opt .other-text-item input.form-control:focus{
  border-color:var(--primary-color);
  background:#f4f8fc;
  box-shadow:0 0 0 3px rgba(52,171,212,.18);
  outline:none;
}

/* Móvil */
@media (max-width:767px){
  .multiple-opt li.checkbox-item label.checkbox-label,
  .multiple-opt .othertext-label-checkox-container label.answertext{
    padding:14px 16px;
  }
}


/* ====== ADA LAB · Respetar filtro/relevancia en móvil (array) ====== */
@media (max-width:760px){
  .array-flexible-row tbody tr.ls-hidden,
  .array-flexible-row tbody tr.ls-irrelevant{
    display:none !important;
  }
}

/* ====== ADA LAB · Concepto destacado (strong) con verde del hover ====== */
.question-text .ls-label-question strong,
.ls-label-question strong,
.question-text strong{
  display:inline-block;
  color:#1a2300;
  /* background:linear-gradient(135deg, #c2ee2e 0%, #aadb00 45%, #6f8f00 100%); */
  padding:1px 10px;
  border-radius:6px;
  font-weight:800;
  line-height:1.5;
}

@media (max-width:767px){
  .question-text .ls-label-question strong,
  .ls-label-question strong,
  .question-text strong{
    padding:2px 10px;
  }
}


/* ====== ADA LAB · Aviso de validación de correo ====== */
.ada-email-msg{
  display:block; margin-top:6px; font-size:13px; font-weight:600;
  line-height:1.3; transition:all .15s ease;
}
.ada-email-msg.ok{ color:#6f8f00; }
.ada-email-msg.err{ color:#c0392b; }
input.form-control.ada-email-ok{
  border-color:#aadb00 !important;
  box-shadow:0 0 0 3px rgba(170,219,0,.18) !important;
}
input.form-control.ada-email-err{
  border-color:#c0392b !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.15) !important;
}



/* ====== ADA LAB · Encabezado ====== */
/* Ocultar menú superior derecho (Continuar después + hamburguesa) */
.navbar .navbar-collapse,
.navbar #navbar,
.navbar .navbar-toggle,
.navbar .navbar-right{
  display:none !important;
}

/* Logo centrado y visible también en móvil */
.navbar .navbar-header{
  float:none !important;
  text-align:center;
  width:100%;
}
.navbar .navbar-brand.logo-container,
.navbar .navbar-brand.logo-container.hidden-xs{   /* anula hidden-xs en móvil */
  float:none !important;
  display:inline-block !important;
  padding:8px 0;
}
.navbar .navbar-brand .logo{
  display:inline-block;
  max-height:77px;
  width:auto;
}
.logo-container > img {
  padding: 0px;
}
@media (max-width:767px){
  .navbar .navbar-brand.logo-container,
  .navbar .navbar-brand.logo-container.hidden-xs{
    display:inline-block !important;
    float:none !important;
    margin:0 auto;
  }
  .navbar .navbar-brand .logo{ max-height:44px; }
}


/* ====== ADA LAB · Footer fijo "Desarrollado por ADA LAB" ====== */
#ada-footer-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1050;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 16px;
  background:#ffffff;
  border-top:1.5px solid #d7daf0;
  box-shadow:0 -2px 10px rgba(27,35,78,.08);
  font-family:Helvetica, Arial, sans-serif;
}
#ada-footer-banner a{ display:flex; align-items:center; gap:8px; text-decoration:none; }
#ada-footer-banner img{ height:22px; width:auto; display:block; }
#ada-footer-banner span{
  font-size:13px; font-weight:600; color:var(--primary-color); letter-spacing:.2px;
}
/* Evita que el contenido quede tapado por el footer */
body{ padding-bottom:52px !important; }
@media (max-width:767px){
  #ada-footer-banner{ padding:7px 12px; }
  #ada-footer-banner img{ height:18px; }
  #ada-footer-banner span{ font-size:12px; }
  body{ padding-bottom:46px !important; }
}


/* Ocultar el texto de ayuda en todas las preguntas */
.question-help-container {
    display: none !important;
}


.ls-questionhelp {
    display: none !important;
}

.fruity .text-info, .fruity .text-primary, .fruity .text-success {
  color: var(--primary-color) !important;
}

.fruity .form-control:focus {
  border:1px solid  var(--primary-color) !important;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--primary-color);
}