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

/* ========== CUSTOM CSS: Tema Rojo para LimeSurvey (Fruity) ========== */

/* ==== Navbar y Logo ==== */
.navbar,
.navbar-default,
.navbar-light,
.navbar-default .navbar-brand {
    background-color: #C82333 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
    margin-bottom: 15px;
}
.navbar .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: #fff !important;
}

/* ==== Botones primarios en rojo ==== */
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #C82333 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}

.btn-secondary,
.btn-outline-secondary {
    background-color: #C82333 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    box-shadow: 0 0 0 0.2rem rgba(200, 35, 51, 0.5) !important;
}

/* ==== Enlaces en rojo ==== */
a,
.navbar-default .navbar-nav > li > a {
    color: #C82333 !important;
}
a:hover,
.navbar-default .navbar-nav > li > a:hover {
    color: #a71d2a !important;
    text-decoration: underline;
}

/* ==== Hover de filas ==== */
.table-col-hover col.hover,
.ls-answers > tbody > tr.ls-even:hover {
    background-color: #f8d7da !important;
}

/* ==== Progreso ==== */
.progress-bar {
    background-color: #C82333 !important;
}

/* ==== Íconos de ayuda y textos ==== */
.ls-questionhelp:before {
    color: #C82333 !important;
}

.help-block,
.ls-questionhelp,
.text-success,
.fa-question-circle,
.alert-success,
.glyphicon-info-sign {
    color: #C82333 !important;
}

/* Tooltips */
.tooltip-inner {
    background-color: #C82333 !important;
}
.tooltip-arrow {
    border-top-color: #C82333 !important;
}

/* ==== Radios y Checkboxes personalizados (Fruity) ==== */
.checkbox-item input[type="checkbox"]:checked + label::before,
.radio-item input[type="radio"]:checked + label::before {
    background-color: #C82333 !important;
    border-color: #bd2130 !important;
}

.checkbox-item input[type="checkbox"]:focus + label::before,
.radio-item input[type="radio"]:focus + label::before {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(200, 35, 51, 0.25);
    border-color: #bd2130 !important;
}

.checkbox-item input[type="checkbox"]:checked + label::after,
.radio-item input[type="radio"]:checked + label::after {
    color: #fff !important;
}

.form-check-input:checked {
    background-color: #C82333 !important;
    border-color: #bd2130 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #C82333 !important;
    border-color: #bd2130 !important;
}

.checkbox-item label:hover::before,
.radio-item label:hover::before {
    border-color: #bd2130 !important;
}

/* ==== Formularios (bordes) ==== */
select,
option,
.form-control {
    border-color: #C82333 !important;
}

/* ==== Alertas informativas ==== */
.alert-info {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* ==== Dropdown de índice ==== */
#index-menu ul.dropdown-menu {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

/* ==== Otros elementos generales ==== */
.text-info {
    color: #C82333 !important;
}

/* Reemplazar fondo verde de los checkboxes/radios marcados del tema sea_green.css */
.checkbox-item input[type="checkbox"]:checked + label::after,
.radio-item input[type="radio"]:checked + label::after {
    background-color: #C82333 !important;
    color: #fff !important;
}

/* Estilo más neutro para textos informativos y descripciones */

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 {
  color: #C82333 !important;
}

/* Sobrescribir textos en verde del tema fruity */
body.fruity .survey-description {
  color: #333333 !important;
}

/* Reemplazar color azul por rojo en radios seleccionados */
.radio-item input[type="radio"]:checked + label::after {
    background-color: #C82333 !important;
    border-color: #C82333 !important;
    color: #fff !important;
}

/* Si se usan radios con clases de Bootstrap tipo botón */
.btn.active, 
.btn:active, 
.btn-check:checked + .btn {
    background-color: #C82333 !important;
    border-color: #C82333 !important;
    color: #fff !important;
}

/* Cambiar color de radios seleccionados (estilo nativo del navegador) */
input[type="radio"]:checked {
    accent-color: #C82333;
}

/* Cambiar también el color de checkboxes, por si acaso */
input[type="checkbox"]:checked {
    accent-color: #C82333;
}

.fruity .input-group-addon,
.fruity .input-group-text {
    background-color: #cc0000 !important; /* rojo intenso */
    color: #ffffff !important;
}

/* Estructura o espaciado entre las preguntas */
.question-title-container {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.space-col {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

/*.text-center {
    text-align: left !important;
}*/

.h2, .h3, h2, h3 {
    text-decoration: underline;
    text-decoration-color: #C82333;
    text-align: left !important;
}

/* Espacio adicional debajo del botón de enviar */
#ls-button-submit,
.ls-group-dynamic .ls-buttons,
form .submit-wrapper {
    margin-bottom: 40px !important; /* puedes ajustar el valor */
}

/* Estilo para el título principal del formulario */
body.fruity h1,
body.fruity .survey-welcome h1 {
    font-size: 2.6rem !important;  /* Aumenta el tamaño (ajusta si quieres más) */
    font-weight: bold !important;
    margin-top: 1.3em !important;
    margin-bottom: 1.3em !important;
}

.fruity .form-control:focus {
    border-color: #C82333 !important;
    box-shadow: 0 0 6px 2px rgba(200, 35, 51, 0.25) !important;
    outline: none !important;
}

/* Reducir espacio entre preguntas */
.fruity .question-container,
.fruity .row.question-container,
.fruity .group-container {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}

/* Reducir espacio inferior en campos de entrada */
.fruity .form-control {
    margin-bottom: 4px !important;
}

/* Eliminar espacio extra entre filas internas */
.fruity .row {
    margin-bottom: 4px !important;
}

/* Reducir espacio entre etiquetas y campos */
.fruity .form-group {
    margin-bottom: 6px !important;
}

/* Reducir espacio entre títulos de grupo y las preguntas */
.fruity .group-title,
.fruity h1,
.fruity h2,
.fruity h3 {
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}

/* Evitar espaciados inesperados de Bootstrap */
.fruity .mb-3,
.fruity .mb-4 {
    margin-bottom: 6px !important;
}

/* Reducir altura de los textareas en el tema Fruity */
.fruity textarea.form-control {
    min-height: 100px !important; /* Altura más compacta */
    max-height: 150px !important; /* Altura máxima si el usuario expande */
    resize: vertical; /* Permite que el usuario ajuste si lo necesita */
}

/* ==== Corrección de botones Sí/No activos ==== */

/* Estilo por defecto de los botones no seleccionados */
div.yes-no .btn-group .btn {
  background-color: #3a3a3a !important;  /* gris oscuro */
  color: #fff !important;
  border: 1px solid #444 !important;
}

/* Botón seleccionado (activo) */
div.yes-no .btn-group .btn.active,
div.yes-no .btn-group .btn:active,
div.yes-no .btn-group .btn-check:checked + .btn {
  background-color: #C82333 !important;  /* rojo */
  border-color: #bd2130 !important;
  color: #fff !important;
  z-index: 2;
}

/* Botón al pasar el mouse (hover) */
div.yes-no .btn-group .btn:hover {
  background-color: #505050 !important;
  color: #fff !important;
  border-color: #666 !important;
}

.fruity .question-container .question-title-container {
    margin-bottom: 0px !important;
    padding-bottom: 2px !important;
}

.ls-answers {
    padding-top: 0px !important;
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}