/*   BASE   */
body {
  background-color: #0b1220;
  color: #e6eefc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
}

/* Ajuste para la navbar */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/*   DROPDOWNS POR HOVER   */
/* Mantener abierto el menú mientras el puntero está sobre .dropdown */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Evita el "salto" entre el botón y el menú */
.dropdown-menu {
  margin-top: 0 !important;
}

/* Mejora visual de los menús oscuros */
.dropdown-menu-dark {
  background-color: #1a1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/*   BOTÓN "Empezar test"   */
.btn-cta {
  font-weight: 700;
  box-shadow: 0 0 10px rgba(91, 188, 255, 0.25);
  transition: all 0.2s ease-in-out;
}

.btn-cta:hover {
  box-shadow: 0 0 18px rgba(91, 188, 255, 0.4);
  transform: translateY(-1px);
}

/*   SEPARADOR VERTICAL   */
.sep-vertical {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 12px;
}

/*   CONTENEDOR PRINCIPAL   */
main.container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/*   FORMULARIOS (login/registro)   */
.formulario {
  max-width: 420px;
  margin: 2rem auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.formulario label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
}

.formulario input {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background-color: #111a2b;
  color: #e6eefc;
}

.formulario input:focus {
  outline: none;
  border-color: #5bbcff;
  box-shadow: 0 0 0 0.2rem rgba(91, 188, 255, 0.25);
}

.formulario button {
  width: 100%;
  margin-top: 0.5rem;
  font-weight: 700;
}

/* === HERO / INICIO === */
.hero {
  text-align: center;
  padding: 4rem 1rem;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero p {
  color: #a7b3ca;
  max-width: 600px;
  margin: 0 auto;
}

/* Tabs oscuras con subrayado */
.nav-tabs.nav-tabs-dark {
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.nav-tabs.nav-tabs-dark .nav-link {
  color: #a7b3ca;
  background: transparent;
  border: none;
  margin: 0 .75rem;
  padding: .5rem 0;
  position: relative;
}
.nav-tabs.nav-tabs-dark .nav-link:hover {
  color: #e6eefc;
}
.nav-tabs.nav-tabs-dark .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background .2s ease, height .2s ease, bottom .2s ease;
}
.nav-tabs.nav-tabs-dark .nav-link.active {
  color: #e6eefc;
}
.nav-tabs.nav-tabs-dark .nav-link.active::after {
  background: var(--bs-primary, #0d6efd);
  height: 3px;
  bottom: -2px;
}

.card .display-6,
.card .fs-5,
.card .h6 { color: #e6eefc; }
.progress { background-color: rgba(255,255,255,.12); }

/* Mejor contraste en números dentro de cards */
.card .fs-4.fw-bold { color: #e6eefc; }

/* Tablas más compactas */
.table-sm td, .table-sm th { padding-top: .5rem; padding-bottom: .5rem; }

#nav-preguntas {
  max-height: 420px;
  overflow: auto;
}

/*   Grid de preguntas   */
.qgrid {
  display: grid;
  /* Botones más pequeños para que quepan muchos */
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 6px;
}


/*   Botón cuadrado   */
.qbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: #1a1f2e;
  color: #e6eefc;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
  user-select: none;
}

/* Estados con relleno de color */
.qbtn.is-correct    { background: #1f5f3b; border-color: #2b7a50; }
.qbtn.is-wrong      { background: #5b1f28; border-color: #7f2b37; }
.qbtn.is-unanswered { background: #5e4b1a; border-color: #826726; }

/* Hover con tono diferente */
.qbtn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Pregunta actual */
.qbtn.is-current {
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 2px;
}

/* Asegura visibilidad de labels y textos en formularios oscuros */
form label,
.form-label {
  color: #eaeaea !important;
  font-weight: 500;
}

.form-text {
  color: #aaa !important;
}

/* Checkbox texto */
.form-check-label {
  color: #ddd !important;
}

/* Para dar algo de contraste al borde de los inputs */
.form-control,
.form-select {
  background-color: #1b1f29;
  border-color: #3a3f4a;
  color: #f1f1f1;
}

.form-control:focus,
.form-select:focus {
  background-color: #232733;
  border-color: #0d6efd;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}

/* Título principal visible y con buen contraste */
h1.h4, h1.h5, .card-body h1 {
  color: #f8f9fa;
  font-weight: 600;
}

/* Placeholders más visibles */
::placeholder {
  color: #aaa !important;
  opacity: 1;
}

/* Mejora contraste de campos */
.form-control,
.form-select {
  background-color: #1c202b;
  border-color: #3a3f4a;
  color: #f1f1f1;
}

.form-control:focus,
.form-select:focus {
  background-color: #242837;
  border-color: #0d6efd;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}

/* Label color y espaciado */
.form-label {
  color: #eaeaea !important;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

/* Texto de ayuda */
.form-text {
  color: #a0a0a0 !important;
  font-size: 0.875rem;
}

.list-group-item.active {
  background-color: rgba(var(--bs-primary-rgb, 13,110,253), .20) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
  color: #fff !important;
}
.list-group-item.active .badge {
  background-color: var(--bs-primary, #0d6efd) !important;
}

.qbtn:focus-visible {
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

.table-sm td, .table-sm th { vertical-align: middle; }
.sticky-top.bg-dark { position: sticky; top: 0; z-index: 5; }
.badge { font-weight: 500; }
.table .btn-group .btn { min-width: 64px; }

/*   Ajustes de modo oscuro para Bootstrap   */

/* Paneles claros que en oscuro se ven grises */
.bg-secondary-subtle,
.bg-dark-subtle {
  background-color: #1a1d22 !important;
  color: #e5e7eb !important;
}

/* Bordes y separadores */
.border-secondary {
  border-color: #2a2e34 !important;
}

/* Formularios */
.form-control,
.form-select {
  background-color: #1b1e23 !important;
  color: #f0f2f5 !important;
  border-color: #2c3037 !important;
}
.form-control::placeholder {
  color: #8a8f98 !important;
}
.form-control:focus,
.form-select:focus {
  background-color: #1b1e23;
  color: #fff;
  border-color: #3b82f6; /* azul Bootstrap */
  box-shadow: 0 0 0 0.15rem rgba(59,130,246,.25);
}

/* Listas */
.list-group-item {
  background-color: transparent !important;
  color: #e5e7eb !important;
  border-color: #2a2e34 !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(255,255,255,0.05) !important;
}

/* Tablas */
.table-dark {
  --bs-table-bg: #121417;
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-hover-bg: rgba(255,255,255,0.07);
  color: #e5e7eb;
  border-color: #2c3037;
}
.table-dark thead {
  background-color: #16191e;
}

/* Nav tabs oscuras */
.nav-tabs-dark .nav-link {
  color: #9ca3af;
  border: 0;
  border-bottom: 2px solid transparent;
}
.nav-tabs-dark .nav-link:hover {
  color: #f3f4f6;
}
.nav-tabs-dark .nav-link.active {
  color: #fff;
  background-color: transparent;
  border-bottom-color: #0d6efd; /* azul Bootstrap */
}

/* Modales */
.modal-content {
  background-color: #181b20 !important;
  color: #f1f1f1 !important;
  border-color: #2c3037 !important;
}
.modal-header,
.modal-footer {
  border-color: #2c3037 !important;
}

/* Botones outline (para que resalten más en fondo oscuro) */
.btn-outline-light {
  border-color: #3a3f47 !important;
  color: #e5e7eb !important;
}
.btn-outline-light:hover {
  background-color: rgba(255,255,255,0.1) !important;
  border-color: #3a3f47 !important;
  color: #fff !important;
}

/* Badges */
.badge.text-bg-secondary {
  background-color: #374151 !important;
  color: #f9fafb !important;
}
.badge.text-bg-dark {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

/* Scrollbars (opcional, se integra en oscuro) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #2f353d;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #3d444c;
}

/*   Contraste y jerarquía visual en oscuro (Bootstrap)   */

/* Paleta base más "escalonada" */
:root{
  --surface-0:#0b0f14;      /* fondo app */
  --surface-1:#131821;      /* tarjetas / panel principal */
  --surface-2:#19202a;      /* secciones internas / headers */
  --surface-3:#1f2733;      /* bloques destacados */
  --border:#2f3844;          /* bordes regulares */
  --border-soft:#24303b;    /* bordes suaves */
  --border-strong:#415164;    /* bordes fuertes */
}

/* Fondo general */
body.bg-dark{ background:var(--surface-0)!important; }

/*   TARJETAS / PANEL   */
.card{
  background:var(--surface-1)!important;
  border-color:var(--border)!important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 6px 18px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
.card .card-header{
  background:var(--surface-2)!important;
  border-bottom:1px solid var(--border)!important;
}
.card .card-footer{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))!important;
  border-top:1px solid var(--border)!important;
}

.bg-secondary-subtle,
.bg-dark-subtle{
  background:var(--surface-2)!important;
  color:#e9edf2!important;
  border:1px solid var(--border-soft)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

/* Delineado claro al pasar el ratón por bloques clickables */
.card:hover{ outline:1px solid rgba(255,255,255,.06); outline-offset:0; }

/*   LIST GROUPS   */
.list-group-item{
  background:transparent!important;
  color:#e6eaee!important;
  border-color:var(--border)!important;
}
.list-group-flush>.list-group-item{
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}
.list-group-flush>.list-group-item:nth-child(odd){
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

/*   TABLAS   */
.table-dark{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  color:#e6eaee;
  border-color:var(--border);
}
.table-dark thead{
  background:var(--surface-2);
  box-shadow:0 1px 0 0 var(--border);
}
.table-dark th, .table-dark td{ border-color:var(--border)!important; }

/* Delgada línea superior/inferior en tablas para "encajarlas" visualmente */
.table-responsive{
  border:1px solid var(--border-soft);
  border-radius:.5rem;
  overflow:hidden;
  background:linear-gradient(0deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}

/*   FORMULARIOS (mejor separación)   */
.form-control, .form-select{
  background:var(--surface-1)!important;
  border-color:var(--border)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.form-control:focus, .form-select:focus{
  border-color:#3b82f6!important;
  box-shadow:0 0 0 .2rem rgba(59,130,246,.2)!important;
}

/* Agrupa inputs con una placa más clara para diferenciar áreas */
.card .form-control.form-control-sm,
.card .form-select.form-select-sm{
  background:var(--surface-2)!important;
}

/*   TABS   */
.nav-tabs-dark{
  border-bottom:1px solid var(--border)!important;
}
.nav-tabs-dark .nav-link{
  color:#aab2bc; border:0; border-bottom:2px solid transparent;
}
.nav-tabs-dark .nav-link.active{
  color:#fff; border-bottom-color:#0d6efd;
}
.nav-tabs-dark .nav-link:hover{ color:#e6eaee; }

/*   MODALES   */
.modal-content{
  background:var(--surface-1)!important;
  border:1px solid var(--border)!important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
.modal-header, .modal-footer{ border-color:var(--border)!important; }

/*   BADGES y BOTONES OUTLINE   */
.badge.text-bg-secondary{ background:#3b4654!important; color:#f7fafc!important; }
.badge.text-bg-dark{ background:#25303c!important; color:#f7fafc!important; }

.btn-outline-light{
  border-color:var(--border-strong)!important;
  color:#f0f3f7!important;
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.08)!important;
}

/*   DIVISORES   */
hr{ border-color:var(--border)!important; opacity:.8!important; }

/*   INSPECTOR   */
#inspectorModal .card{ background:var(--surface-1)!important; }
#inspectorModal .card-header{ background:var(--surface-3)!important; }
#insp-filters .border{
  border-color:var(--border)!important;
  background:var(--surface-2)!important;
  box-shadow:inset 3px 0 0 0 rgba(13,110,253,.35);
}
#insp-thead{ background:var(--surface-2); }
#insp-tbody tr:hover{ background:rgba(255,255,255,.07); }

/*   DATOS   */
#pane-datos .card{ background:var(--surface-1)!important; }
#pane-datos .card .form-label{ color:#c7ced6; }

.text-secondary{ color:#9cabb9!important; }

/* Paginación bajo el grid de preguntas */
#grid-preguntas-pages .page-link {
  background-color: transparent;
  border-color: rgba(255,255,255,.18);
  color: #e6eefc;
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
}

#grid-preguntas-pages .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

#grid-preguntas-pages .page-link:hover {
  background-color: rgba(255,255,255,0.08);
}


/* RESPONSIVE */
@media (max-width: 991px) {
  .sep-vertical {
    display: none;
  }
}