/**
 * Neuro-IA Theme - Tema Principal
 * Aplicación del tema corporativo al proyecto
 * 
 * Importa primero las variables y componentes
 */

@import url("neuroia-variables.css");
@import url("neuroia-components.css");

/* ========================================
   OVERRIDE UNIVERSAL - MÁXIMA PRIORIDAD
   ======================================== */

/* Forzar fondo oscuro en TODO */
* {
  background-color: transparent !important;
}

/* Excepciones: elementos que SÍ deben tener color */
.bg-verde,
.bg-naranjo,
.bg-electric,
.toast,
.btn,
button,
input,
select,
textarea,
#flotante,
.neuroia-card {
  background-color: revert !important;
}

/* Sobrescribir fondos blancos específicos de style.css */
.bg-blanco,
.bg-blanco-palabras,
.bg-blanco-palabras-50,
.bg-blanco-dibujos {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Botones dentro de fondos de color NO deben ser blancos */
.bg-verde .btn,
.bg-naranjo .btn,
.bg-gris .btn {
  background-color: var(--neuroia-electric) !important;
  color: var(--neuroia-dark) !important;
}

/* Spans dentro de títulos también deben usar el tema */
.titulo.fg-verde span,
.titulo.fg-azul span,
.titulo.fg-naranjo span,
.titulo.fg-gris span {
  background-color: var(--neuroia-electric) !important;
  color: var(--neuroia-dark) !important;
}

.bg-azul .titulo.fg-azul span,
.bg-verde .titulo.fg-blanco span {
  background-color: var(--neuroia-platinum) !important;
  color: var(--neuroia-dark) !important;
}

/* ========================================
   FONDO CON PATRÓN (Inspirado en ref)
   ======================================== */

body {
  background-color: var(--neuroia-dark2);
  background-image:
    radial-gradient(
      circle at 20% 50%,
      rgba(0, 175, 255, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(0, 175, 255, 0.03) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, var(--neuroia-dark2) 0%, rgba(6, 14, 25, 0.95) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Patrón de puntos sutil */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle,
    rgba(0, 175, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Asegurar que el contenido esté sobre el patrón */
.container,
.container-fluid,
#inic {
  position: relative;
  z-index: 1;
}

/* ========================================
   OVERRIDES GLOBALES DEL TEST
   ======================================== */

/* FORZAR FONDO OSCURO EN TODA LA PÁGINA */
html {
  background-color: var(--neuroia-dark2) !important;
}

body {
  background-color: var(--neuroia-dark2) !important;
}

/* Override agresivo para todos los divs, containers y elementos comunes */
div:not([class*="bg-verde"]):not([class*="bg-naranjo"]):not(.toast),
.container:not([class*="bg-verde"]),
.container-fluid:not([class*="bg-verde"]),
.row:not([class*="bg-verde"]),
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  background-color: transparent !important;
}

/* Eliminar fondos blancos de clases comunes */
.bg-white,
.bg-blanco,
.bg-blanco-dibujos,
.page-content,
#inic,
.padding100,
.parallax-window,
.align-center {
  background: transparent !important;
  background-color: transparent !important;
}

/* Fondo principal del test */
.bg-negro-dibujos {
  background: transparent !important;
}

.bg-negro-palabras {
  background: transparent !important;
}

.bg-gris {
  background: rgba(13, 40, 80, 0.3) !important;
}

/* Colores de fondo verde -> azul eléctrico */
.bg-verde {
  background: var(--neuroia-electric) !important;
}

.fg-blanco {
  color: var(--neuroia-platinum) !important;
}

.fg-verde {
  color: var(--neuroia-electric) !important;
}

/* ========================================
   TARJETAS Y CONTENEDORES
   ======================================== */

/* Tarjetas de presentación y preguntas */
#presentacion .row,
#registro .col-12,
#preguntas .container {
  background: var(--neuroia-dark-form) !important;
  border: none !important;
  box-shadow: none !important;
  transition: all var(--neuroia-transition-base);
}

#presentacion .row:hover,
#registro .col-12:hover {
  border: none !important;
  box-shadow: none !important;
}

/* ========================================
   TIPOGRAFÍA
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--neuroia-platinum);
}

p,
span,
label {
  color: var(--neuroia-platinum-soft);
}

.titulo {
  color: var(--neuroia-platinum) !important;
}

.subtitulo {
  color: var(--neuroia-platinum-soft) !important;
}

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

.form-control {
  background: var(--neuroia-dark-form) !important;
  border: 2px solid var(--neuroia-electric-dim) !important;
  color: var(--neuroia-platinum) !important;
  border-radius: var(--neuroia-border-radius);
  padding: var(--neuroia-spacing-sm) var(--neuroia-spacing-md);
  font-size: var(--neuroia-font-size-base);
  transition: all var(--neuroia-transition-base);
}

.form-control:focus {
  outline: none;
  border-color: var(--neuroia-electric) !important;
  box-shadow: 0 0 0 4px var(--neuroia-electric-glow) !important;
  background: var(--neuroia-dark-form) !important;
  transform: translateY(-2px);
}

.form-control::placeholder {
  color: var(--neuroia-platinum-subtle);
  font-style: italic;
}

.form-group {
  margin-bottom: var(--neuroia-spacing-md);
}

.form-group label {
  color: var(--neuroia-platinum);
  font-weight: var(--neuroia-font-weight-medium);
  margin-bottom: var(--neuroia-spacing-xs);
  display: block;
  font-size: var(--neuroia-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Estado de error en formularios */
.form-control.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
}

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

.btn {
  border-radius: var(--neuroia-border-radius);
  font-weight: var(--neuroia-font-weight-medium);
  transition: all var(--neuroia-transition-base);
  padding: var(--neuroia-spacing-sm) var(--neuroia-spacing-lg);
  font-size: var(--neuroia-font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn-success {
  background: var(--neuroia-electric) !important;
  border-color: var(--neuroia-electric) !important;
  color: var(--neuroia-dark) !important;
  font-weight: var(--neuroia-font-weight-bold);
}

.btn-success:hover {
  background: var(--neuroia-electric-bright) !important;
  box-shadow: 0 8px 20px var(--neuroia-electric-glow);
  transform: translateY(-3px);
}

.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}

.btn-danger:hover {
  background: #dc2626 !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
  transform: translateY(-3px);
}

.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: var(--neuroia-dark) !important;
}

.btn-warning:hover {
  background: #d97706 !important;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
  transform: translateY(-3px);
}

.btn-lg {
  padding: var(--neuroia-spacing-md) var(--neuroia-spacing-xl);
  font-size: var(--neuroia-font-size-lg);
}

/* ========================================
   CRONÓMETRO - REPOSICIONADO COMO ESTÁTICO
   ======================================== */

#flotante {
  /* Removido position: fixed/sticky - ahora es parte del flujo normal */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 auto var(--neuroia-spacing-lg);
  background: linear-gradient(
    135deg,
    rgba(13, 40, 80, 0.95) 0%,
    rgba(10, 31, 63, 0.98) 100%
  ) !important;
  border: 2px solid var(--neuroia-electric) !important;
  border-radius: var(--neuroia-border-radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 30px var(--neuroia-electric-glow),
    inset 0 1px 0 rgba(0, 175, 255, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 0 !important;
  overflow: hidden;
  z-index: 1 !important;
}

#tempo {
  background: transparent !important;
  padding: var(--neuroia-spacing-md) var(--neuroia-spacing-lg) !important;
  /* margin: 0 !important; */
}

#tempo h3 {
  color: var(--neuroia-electric) !important;
  font-weight: var(--neuroia-font-weight-bold) !important;
  font-size: 2.5rem !important;
  letter-spacing: 0.15em !important;
  text-shadow:
    0 0 15px var(--neuroia-electric-glow),
    0 0 30px var(--neuroia-electric-glow),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Courier New", "Consolas", monospace !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.25rem !important;
  line-height: 1 !important;
}

#tempo h3 .cell,
#tempo h3 span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 65px !important;
  height: 60px !important;
  padding: 0 var(--neuroia-spacing-xs) !important;
  background: rgba(0, 175, 255, 0.12) !important;
  border-radius: var(--neuroia-border-radius) !important;
  border: 1px solid var(--neuroia-electric-dim) !important;
  transition: all var(--neuroia-transition-fast) !important;
  margin: 0 0.2rem !important;
}

#tempo h3 .cell:hover,
#tempo h3 span:hover {
  background: rgba(0, 175, 255, 0.2) !important;
  border-color: var(--neuroia-electric) !important;
  transform: scale(1.08) !important;
}

/* Animación de pulso para el cronómetro */
@keyframes chrono-glow-pulse {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.6),
      0 0 30px var(--neuroia-electric-glow),
      inset 0 1px 0 rgba(0, 175, 255, 0.3);
  }

  50% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.6),
      0 0 45px var(--neuroia-electric-strong),
      inset 0 1px 0 rgba(0, 175, 255, 0.4);
  }
}

#flotante {
  animation: chrono-glow-pulse 3s ease-in-out infinite;
}

/* ========================================
   RESULTADOS
   ======================================== */

#donutschart .bg-verde {
  background: var(--neuroia-dark-lighter) !important;
  border: 1px solid var(--neuroia-electric);
  box-shadow: var(--neuroia-shadow-lg);
}

#donutschart h3,
#donutschart h4 {
  color: var(--neuroia-electric);
  text-shadow: var(--neuroia-glow-sm);
}

#textoVelocidad,
#test {
  color: var(--neuroia-electric);
  font-weight: var(--neuroia-font-weight-bold);
  text-shadow: var(--neuroia-glow-sm);
  font-size: 3.5rem !important;
}

/* ========================================
   PREGUNTAS
   ======================================== */

.step-list li {
  border-left: 3px solid var(--neuroia-electric-dim);
  padding-left: var(--neuroia-spacing-md);
  margin-bottom: var(--neuroia-spacing-md);
  transition: all var(--neuroia-transition-base);
}

.step-list li:hover {
  border-left-color: var(--neuroia-electric);
  background: rgba(0, 175, 255, 0.05);
  padding-left: calc(var(--neuroia-spacing-md) + 0.5rem);
}

.step-list li h3 {
  color: var(--neuroia-platinum);
}

.input-control.radio {
  color: var(--neuroia-platinum-soft);
  transition: all var(--neuroia-transition-base);
  cursor: pointer;
}

.input-control.radio:hover {
  color: var(--neuroia-platinum);
  /* Animation removed as requested */
  /* background: rgba(0, 175, 255, 0.05); */
  /* padding-left: 0.5rem; */
  /* border-radius: var(--neuroia-border-radius); */
}

.input-control.radio input:checked + .check {
  border-color: var(--neuroia-electric);
  background: var(--neuroia-electric);
  box-shadow: 0 0 10px var(--neuroia-electric-glow);
}

/* ========================================
   DIVISORES Y LÍNEAS
   ======================================== */

hr {
  background: linear-gradient(
    to right,
    transparent,
    var(--neuroia-electric),
    transparent
  );
  border: none;
  height: 2px;
  margin: var(--neuroia-spacing-lg) 0;
}

.bg-red {
  background: var(--neuroia-electric) !important;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.toast.bg-success {
  background: #10b981 !important;
  border: 1px solid #10b981;
}

.toast.bg-warning {
  background: #f59e0b !important;
  border: 1px solid #f59e0b;
}

.toast.bg-danger {
  background: #ef4444 !important;
  border: 1px solid #ef4444;
}

.toast.bg-info {
  background: var(--neuroia-electric) !important;
  border: 1px solid var(--neuroia-electric);
}

/* ========================================
   PÁGINA DE SELECCIÓN (INDEX)
   ======================================== */

/* Títulos de selección de test */
.text-center.py-4 h1 {
  font-size: 3rem;
  font-weight: var(--neuroia-font-weight-bold);
  margin-bottom: var(--neuroia-spacing-sm);
}

/* Tarjetas de selección con hover effect */
/* Tarjetas de selección con hover effect */
figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--neuroia-border-radius-lg);
  transition: all var(--neuroia-transition-base);
  width: 100%; /* Ensure full width */
  margin: 0;
}

figure:hover {
  transform: scale(1.02); /* More discrete scale */
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 0 20px var(--neuroia-electric-glow);
}

figure img {
  transition: all var(--neuroia-transition-slow);
  width: 100%; /* Force image to fill container */
  height: auto;
  object-fit: cover;
}

figure:hover img {
  filter: brightness(1.1) saturate(1.1); /* More discrete filter */
  transform: scale(1.03); /* More discrete scale */
}

figcaption {
  transition: all var(--neuroia-transition-base);
}

figure:hover figcaption {
  transform: translateY(-5px);
}

/* Naranja -> Azul eléctrico */
.bg-naranjo {
  background: var(--neuroia-electric) !important;
}

/* ========================================
   ANIMACIONES Y EFECTOS
   ======================================== */

.cell.anima {
  background: var(--neuroia-electric);
  box-shadow: var(--neuroia-glow-md);
}

/* Efecto de pulso para elementos importantes */
@keyframes neuroia-pulse-border {
  0%,
  100% {
    border-color: var(--neuroia-electric-dim);
  }

  50% {
    border-color: var(--neuroia-electric);
  }
}

.neuroia-pulse-border {
  animation: neuroia-pulse-border 2s ease-in-out infinite;
}

/* Animación de entrada suave */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container,
.container-fluid {
  animation: fadeInUp 0.6s ease-out;
}

/* Botón WhatsApp */
.btn-whatsapp {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: white !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative; /* Ensure stacking context */
    overflow: hidden; /* Ensure no spill */
}

/* Disable the theme's ripple/circle effect */
.btn-whatsapp::before {
    display: none !important;
    content: none !important;
}

.btn-whatsapp:hover {
    background: #128C7E !important;
    border-color: #128C7E !important;
    transform: scale(1.05);
    color: white !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    text-decoration: none;
}