/******************
    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
*/

/******************
    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
*/
/******************
  Tema personalizado: Oscuro compacto para LimeSurvey (iframe)
  Autor: Linda Villate
******************/

/* ==== Variables base ==== */
:root {
  --color-rojo: #C82333;
  --color-rojo-oscuro: #bd2130;
  --color-fondo: #1c1c1c;
  --color-texto: #ffffff;
}

/* ==== Fondo oscuro general y texto blanco ==== */
body,
#outerframeContainer,
.fruity .container,
.fruity .row,
.fruity .question-container,
.fruity .group-container {
  background-color: var(--color-fondo) !important;
  color: var(--color-texto) !important;
  border: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

/* ==== Ocultar navbar y título ==== */
.navbar,
.navbar-default,
.navbar-light,
body.fruity h1,
body.fruity .survey-welcome h1 {
  display: none !important;
}

/* ==== Descripción y textos informativos en blanco ==== */
body.fruity .survey-description,
body.fruity .question-container .text-info,
body.fruity .help-block,
body.fruity .ls-questionhelp,
body.fruity .text-info,
body.fruity .text-primary,
body.fruity .text-success,
body.fruity .alert-success,
body.fruity .glyphicon-info-sign,
body.fruity .fa-question-circle {
  color: var(--color-texto) !important;
}

/* ==== Inputs, selects y textareas ==== */
.form-control,
select,
textarea {
  background-color: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  font-size: 0.95rem !important;
  margin: 0 0 2px 0 !important;
  box-shadow: none !important;
}
.form-control:focus {
  box-shadow: 0 0 4px rgba(200, 35, 51, 0.3) !important;
  outline: none !important;
}

/* ==== Botones ==== */
.btn-primary,
.btn-secondary,
.btn-outline-secondary,
.btn.active,
.btn:active,
.btn-check:checked + .btn {
  background-color: var(--color-rojo) !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
}

/* ==== Radios y checkboxes ==== */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-rojo);
}
.checkbox-item input[type="checkbox"]:checked + label::after,
.radio-item input[type="radio"]:checked + label::after {
  background-color: var(--color-rojo) !important;
  color: #fff !important;
}
.checkbox-item label,
.radio-item label {
  color: var(--color-texto) !important;
  font-size: 0.95rem !important;
  margin-bottom: 2px !important;
}

/* ==== Espaciado reducido ==== */
.fruity .question-container,
.fruity .row.question-container,
.fruity .group-container,
.fruity .form-group,
.fruity .row,
.fruity .mb-3,
.fruity .mb-4 {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  box-shadow: none !important;
}
.fruity .form-group {
  margin-bottom: 2px !important;
}
.fruity .form-control {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}
.fruity .answer-container,
.question-title-container {
  margin: 0 !important;
  padding: 0 !important;
}
.fruity .question-container .question-title-container {
  margin-bottom: 0px !important;
  padding-bottom: 2px !important;
}
.ls-answers {
  padding: 7px 0 !important;
  margin-bottom: 0;
}

/* ==== Títulos y etiquetas de pregunta ==== */
.question-title-container,
.question-title {
  font-size: 0.95rem !important;
  color: var(--color-texto) !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}

/* ==== Ayudas de pregunta y validación ==== */
.help-block,
.ls-questionhelp {
  color: #bbbbbb !important;
  font-size: 0.85rem !important;
  margin-top: 2px !important;
}
.question-valid-container {
  color: #dc3545 !important;
  font-size: 0.9rem !important;
  margin-top: 2px !important;
}

/* ==== Tooltips ==== */
.tooltip-inner {
  background-color: var(--color-rojo) !important;
}
.tooltip-arrow {
  border-top-color: var(--color-rojo) !important;
}

/* ==== Enlaces ==== */
a, a:visited {
  color: #dc3545 !important;
}
a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ==== Placeholder más tenue ==== */
::placeholder {
  color: #666 !important;
}

/* ==== Botón de enviar ==== */
#ls-button-submit,
form .submit-wrapper {
  margin-bottom: 20px !important;
}

/* ==== Barra de progreso ==== */
.progress-bar {
  background-color: var(--color-rojo) !important;
}