/* =========================================================
   CUESTIONARIO 26 - TEMA OSCURO
   ========================================================= */

:root {
    --bg-principal: #0d1d34;
    --bg-secundario: #212c32;
    --amarillo: #fcd901;
    --texto: #ffffff;
    --texto-suave: #d5d9dc;
    --borde: #3a474e;
    --input-bg: #182832;
    --input-focus: #243841;
}

/* =========================================================
   GENERAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-principal);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
}

/* Bootstrap puede dejar fondos blancos */
.container,
.container-fluid {
    color: var(--texto);
}

/* =========================================================
   TITULOS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--amarillo);
    font-weight: 700;
}

p,
label,
span,
small,
.form-text {
    color: var(--texto);
}

/* =========================================================
   PLECAS / SEPARADORES
   ========================================================= */

.pleca,
.separador,
.titulo-seccion {
    background-color: var(--amarillo);
    color: #0d1d34;
    font-weight: 700;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Para títulos de sección usando hr */
hr {
    border: 0;
    border-top: 2px solid var(--amarillo);
    opacity: 1;
}

/* =========================================================
   TARJETAS
   ========================================================= */

.card {
    background-color: var(--bg-secundario);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 10px;
}

.card-header {
    background-color: var(--amarillo);
    color: var(--bg-principal);
    border-bottom: 1px solid var(--amarillo);
    font-weight: 700;
}

.card-body {
    background-color: var(--bg-secundario);
    color: var(--texto);
}

.card-footer {
    background-color: var(--bg-secundario);
    color: var(--texto);
    border-top: 1px solid var(--borde);
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

.form-label {
    color: var(--texto);
    font-weight: 600;
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    color: var(--texto);
    border: 1px solid var(--borde);
}

.form-control::placeholder {
    color: #9da7ad;
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-focus);
    color: var(--texto);
    border-color: var(--amarillo);
    box-shadow: 0 0 0 0.20rem rgba(252, 217, 1, 0.20);
}

/* Select */
.form-select {
    color: var(--texto);
}

.form-select option {
    background-color: var(--bg-secundario);
    color: var(--texto);
}

/* =========================================================
   CHECKBOX Y RADIO
   ========================================================= */

.form-check-label {
    color: var(--texto);
}

.form-check-input {
    background-color: var(--input-bg);
    border-color: var(--borde);
}

.form-check-input:checked {
    background-color: var(--amarillo);
    border-color: var(--amarillo);
}

.form-check-input:focus {
    border-color: var(--amarillo);
    box-shadow: 0 0 0 0.20rem rgba(252, 217, 1, 0.20);
}

/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary {
    background-color: var(--amarillo);
    border-color: var(--amarillo);
    color: var(--bg-principal);
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #e6c500 !important;
    border-color: #e6c500 !important;
    color: var(--bg-principal) !important;
}

.btn-outline-primary {
    color: var(--amarillo);
    border-color: var(--amarillo);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--amarillo) !important;
    border-color: var(--amarillo) !important;
    color: var(--bg-principal) !important;
}

/* =========================================================
   BLOQUES DE PREGUNTAS
   ========================================================= */

.pregunta {
    background-color: var(--bg-secundario);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.pregunta-titulo {
    color: var(--amarillo);
    font-weight: 700;
    margin-bottom: 15px;
}

/* Si las preguntas utilizan clases de Bootstrap */
.question,
.question-container {
    background-color: var(--bg-secundario);
    color: var(--texto);
}

/* =========================================================
   ALERTAS
   ========================================================= */

.alert {
    border-radius: 8px;
}

.alert-primary {
    background-color: #182d45;
    border-color: var(--amarillo);
    color: var(--texto);
}

.alert-primary strong {
    color: var(--amarillo);
}

/* =========================================================
   TABLAS
   ========================================================= */

.table {
    color: var(--texto);
    border-color: var(--borde);
}

.table > :not(caption) > * > * {
    background-color: var(--bg-secundario);
    color: var(--texto);
    border-color: var(--borde);
}

.table thead th {
    background-color: var(--amarillo);
    color: var(--bg-principal);
    font-weight: 700;
}

/* =========================================================
   TEXTOS SECUNDARIOS DE BOOTSTRAP
   ========================================================= */

.text-muted {
    color: var(--texto-suave) !important;
}

.text-dark {
    color: var(--texto) !important;
}

.bg-light {
    background-color: var(--bg-secundario) !important;
    color: var(--texto) !important;
}

.bg-white {
    background-color: var(--bg-secundario) !important;
    color: var(--texto) !important;
}

/* =========================================================
   BOTON DISABLED
   ========================================================= */

.btn:disabled,
.btn.disabled {
    opacity: 0.45;
}

/* =========================================================
   VALIDACION BOOTSTRAP
   ========================================================= */

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #5cb85c;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-principal);
}

::-webkit-scrollbar-thumb {
    background: #34444d;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--amarillo);
}

/* =========================================================
   SELECCION DE TEXTO
   ========================================================= */

::selection {
    background-color: var(--amarillo);
    color: var(--bg-principal);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 576px) {

    .card-body {
        padding: 15px;
    }

    .pregunta {
        padding: 15px;
    }

    .pleca,
    .separador,
    .titulo-seccion {
        padding: 8px 12px;
    }

}