/* MEJORAS DE CONTRASTE Y ESPACIADO PARA COMBINACION.HTML */

/* Solo aplicar estilos oscuros a los contenedores principales de formularios */
.bg-gray-800.bg-opacity-95 {
  background-color: rgba(55, 65, 81, 0.95) !important;
  color: white !important;
}

/* Los contenedores blancos de resultados deben mantenerse blancos SIEMPRE */
.bg-white {
  background-color: #ffffff !important;
  color: #111827 !important; /* gray-900 */
}

/* Asegurar colores consistentes en desktop y móvil - EXCLUIR mensajes de carga */
.bg-white *:not(.bg-blue-50):not(.bg-blue-50 *):not(.text-blue-800):not(.animate-pulse) {
  color: #111827 !important; /* Forzar texto oscuro en contenedores blancos */
}

/* GARANTIZAR que los mensajes de carga sean SIEMPRE visibles */
.text-blue-800, .animate-pulse.text-blue-800 {
  color: #1e40af !important; /* blue-800 forzado */
}

.bg-blue-50 {
  background-color: #eff6ff !important; /* blue-50 forzado */
}

.bg-white .text-gray-900 {
  color: #111827 !important;
}

.bg-white .text-gray-700 {
  color: #374151 !important;
}

.bg-white .text-gray-600 {
  color: #4b5563 !important;
}

.bg-white .text-blue-600 {
  color: #2563eb !important;
}

.bg-white .text-purple-800 {
  color: #6b21a8 !important;
}

/* Forzar consistencia en bordes */
.border-gray-300 {
  border-color: #d1d5db !important;
}

.border-blue-200 {
  border-color: #bfdbfe !important;
}

.border-purple-200 {
  border-color: #e9d5ff !important;
}

/* Estilos del Accordion */
.accordion-section {
  overflow: hidden;
}

.accordion-header {
  border-bottom: 1px solid rgba(156, 163, 175, 0.3);
}

.accordion-header:hover {
  background-color: rgba(55, 65, 81, 0.7) !important;
}

.accordion-content {
  transition: all 0.3s ease-in-out;
}

.accordion-icon {
  transition: transform 0.3s ease-in-out;
  font-family: monospace;
  font-weight: bold;
}

/* Mejorar la apariencia de los headers del accordion */
.accordion-header h2 {
  margin: 0;
  padding: 0;
}

.accordion-header h2 span:first-child {
  flex-grow: 1;
}

.accordion-header h2 .accordion-icon {
  margin-left: auto;
  min-width: 24px;
  text-align: center;
}

/* Asegurar que los inputs tengan fondo blanco y sean visibles */
.combo-input {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 2px solid #9ca3af !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  font-weight: bold !important;
}

.combo-input::placeholder {
  color: #9ca3af !important;
  font-weight: normal !important;
}

.combo-input:focus {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2) !important;
  font-weight: bold !important;
}

/* NUNCA desactivar botones - asegurar que funcionen */
button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#evaluar-numero-btn, #evaluar-combinacion-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Asegurar que el botón de volver funcione correctamente */
#btn-back {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Estados de validación para inputs - MEJORAR CONTRASTE */
.combo-input.valid {
  border-color: #10b981 !important;
  background-color: #ffffff !important;  /* Fondo SIEMPRE blanco */
  color: #065f46 !important;  /* Verde oscuro para mejor contraste */
  font-weight: bold !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

.combo-input.invalid {
  border-color: #ef4444 !important;
  background-color: #ffffff !important;  /* Fondo SIEMPRE blanco */
  color: #991b1b !important;  /* Rojo oscuro para mejor contraste */
  font-weight: bold !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.combo-input.duplicate {
  border-color: #f59e0b !important;
  background-color: #ffffff !important;  /* Fondo SIEMPRE blanco */
  color: #92400e !important;  /* Amarillo oscuro para mejor contraste */
  font-weight: bold !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

/* También aplicar a input de número individual */
#numero-individual {
  background-color: #ffffff !important;
  color: #111827 !important;
  font-weight: bold !important;
}

#numero-individual:focus {
  background-color: #ffffff !important;
  color: #111827 !important;
  font-weight: bold !important;
}

/* Colores de fondo consistentes */
.bg-blue-50 {
  background-color: #eff6ff !important;
}

.bg-purple-50 {
  background-color: #faf5ff !important;
}

.bg-purple-100 {
  background-color: #f3e8ff !important;
}

/* Optimización de espacios para móvil */
@media (max-width: 768px) {
  .p-6 {
    padding: 1rem !important;
  }
  
  .p-4 {
    padding: 0.75rem !important;
  }
  
  .p-3 {
    padding: 0.5rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1rem !important;
  }
  
  .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  
  .mb-4 {
    margin-bottom: 0.5rem !important;
  }
  
  .mb-3 {
    margin-bottom: 0.375rem !important;
  }
  
  .gap-4 {
    gap: 0.5rem !important;
  }
  
  .gap-3 {
    gap: 0.375rem !important;
  }
}

/* Optimización de espacios para desktop */
@media (min-width: 769px) {
  .max-w-6xl {
    max-width: 90% !important;
  }
  
  .gap-4 {
    gap: 0.75rem !important;
  }
  
  .gap-3 {
    gap: 0.5rem !important;
  }
  
  /* Reducir espacios verticales en desktop */
  .mb-4 {
    margin-bottom: 1rem !important;
  }
  
  .mb-3 {
    margin-bottom: 0.75rem !important;
  }
}

/* Mejoras específicas para inputs - mantener fondo blanco SIEMPRE */
.combo-input,
#numero-individual {
  background-color: #ffffff !important;
  color: #374151 !important; /* gray-700 */
  border-color: #d1d5db !important; /* gray-300 */
}

.combo-input:focus,
#numero-individual:focus {
  border-color: #93c5fd !important; /* blue-300 */
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.1) !important;
  background-color: #ffffff !important;
}

/* Estados de validación más visibles */
.combo-input.invalid {
  border-color: #ef4444 !important; /* red-500 */
  background-color: #fef2f2 !important; /* red-50 */
}

.combo-input.valid {
  border-color: #22c55e !important; /* green-500 */
  background-color: #f0fdf4 !important; /* green-50 */
}

.combo-input.duplicate {
  border-color: #f59e0b !important; /* amber-500 */
  background-color: #fffbeb !important; /* amber-50 */
}

/* Botones más visibles */
button {
  font-weight: 600 !important;
  min-height: 44px !important; /* Mínimo para accesibilidad táctil */
}

/* Reducir espaciado excesivo en desktop */
@media (min-width: 769px) {
  .space-y-1 > * + * {
    margin-top: 0.5rem !important;
  }
  
  .space-y-2 > * + * {
    margin-top: 0.75rem !important;
  }
}

/* Mejorar separación visual sin exceso */
.rounded-lg {
  border-radius: 0.5rem !important;
}

.shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Contenedores principales más compactos */
.min-h-screen {
  min-height: auto !important;
}

/* Reducir espacio vertical excesivo */
body {
  line-height: 1.4 !important;
}

/* Mejoras para la experiencia en dispositivos pequeños */
@media (max-width: 640px) {
  .text-3xl {
    font-size: 1.5rem !important;
  }
  
  .text-2xl {
    font-size: 1.25rem !important;
  }
  
  .text-xl {
    font-size: 1.125rem !important;
  }
  
  .text-lg {
    font-size: 1rem !important;
  }
}

/* ===== MEJORAS ESPECÍFICAS PARA ANALISIS.HTML EN MÓVIL ===== */

/* Forzar layout vertical en móvil para analisis.html con máxima especificidad */
@media (max-width: 767px) {
  
  /* FORZAR contenedor principal vertical con máxima especificidad */
  body #contenedor-principal,
  body div#contenedor-principal,
  #contenedor-principal.contenedor-principal-inicial {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 0 1rem !important;
    max-width: 100% !important;
    gap: 1rem !important;
  }
  
  /* FORZAR contenedor de cajas vertical con máxima especificidad */
  body #contenedor-cajas,
  body div#contenedor-cajas,
  #contenedor-cajas.contenedor-cajas-inicial,
  #contenedor-principal #contenedor-cajas,
  #contenedor-principal:not(.expanded) #contenedor-cajas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    padding: 0 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
  }
  
  /* FORZAR cada caja individual con máxima especificidad */
  body .caja-interactiva,
  body #contenedor-cajas .caja-interactiva,
  body #contenedor-cajas > div,
  .caja-interactiva.caja-interactiva,
  #contenedor-cajas > div.caja-interactiva,
  #contenedor-principal .caja-interactiva,
  #contenedor-principal:not(.expanded) .caja-interactiva,
  #contenedor-principal:not(.expanded) #contenedor-cajas > div {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  
  /* FORZAR botones de las cajas con máxima especificidad */
  body .caja-interactiva button,
  body #contenedor-cajas button,
  .caja-interactiva.caja-interactiva button,
  #contenedor-cajas.contenedor-cajas-inicial button {
    padding: 1.5rem 1rem !important;
    min-height: 80px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
  }
  
  /* FORZAR contenido interno vertical con máxima especificidad */
  body .caja-content,
  body .caja-interactiva .flex,
  body #contenedor-cajas .flex,
  .caja-content.caja-content,
  #contenedor-cajas .flex.items-center.justify-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* FORZAR emojis con máxima especificidad */
  body .caja-emoji,
  body .caja-interactiva .text-2xl,
  body #contenedor-cajas .text-2xl,
  .caja-emoji.caja-emoji,
  #contenedor-cajas .text-2xl {
    font-size: 1.75rem !important;
    line-height: 1 !important;
    margin: 0 0 0.25rem 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  
  /* FORZAR títulos con máxima especificidad */
  body .caja-titulo,
  body .caja-interactiva h3,
  body #contenedor-cajas h3,
  .caja-titulo.caja-titulo,
  #contenedor-cajas h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: unset !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }
  
  /* REGLA NUCLEAR - Si nada más funciona, forzar con JavaScript en mente */
  body[data-page="analisis"] #contenedor-cajas,
  html #contenedor-cajas {
    flex-direction: column !important;
  }
  
  body[data-page="analisis"] .caja-interactiva,
  html .caja-interactiva {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
}