/* ESTILOS PARA LA SECCIÓN "METEORITOS PRÓXIMOS"                  */

/* 
 * Este archivo contiene todos los estilos para mostrar las Cards
 * de meteoritos que se acercan a la Tierra. Incluye:
 * - Diseño de Cards con efecto vidrio
 * - Animaciones suaves al pasar el mouse
 * - Diseño responsive para móviles
 * - Colores de alerta según el nivel de riesgo
 */


/* Hace que el fondo de la sección sea completamente transparente */
#proximos {
  background-color: transparent !important; /* !important fuerza este estilo */
}


/* CONTENEDOR PRINCIPAL DE LAS CARDS */


/* Organiza las Cards una debajo de la otra con espacio entre ellas */
.meteorite-next {
  display: flex;              
  flex-direction: column;     
  gap: 2rem;                 /* Espacio de 2rem entre cada Card
 */
  margin-top: 2rem;          /* Espacio arriba del contenedor */
}


/* DISEÑO DE CADA CARD DE METEORITO */


/* Estilo principal de cada Card individual */
.meteorite-card-next {
  display: flex;                              /* Flexbox para organizar contenido interno */
  flex-wrap: wrap;                           /* Permite que el contenido se ajuste en pantallas chiquitas */
  align-items: stretch;                      /* Ambos lados tengan la misma altura */
  background: rgba(255, 255, 255, 0.05);        
  border: 1px solid rgba(255, 255, 255, 0.1); 
  border-radius: 15px;                       
  overflow: hidden;                          /* Esconde contenido que se salga de la Card*/
  box-shadow: 0 0 25px rgba(30, 144, 255, 0.15); 
  backdrop-filter: blur(10px);                
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación suave */
  min-height: 220px;                         
}

/* Efecto cuando el usuario pasa el cursor */
.meteorite-card-next:hover {
  transform: translateY(-4px);               /* Levanta la Card */
  box-shadow: 0 0 35px rgba(30, 144, 255, 0.35); 
}


/* LADO IZQUIERDO: CONTENEDOR DEL MODELO 3D */

/* Área donde se muestra el modelo 3D del meteorito */
.model-container-next {
  flex: 0 0 40%;               
  min-height: 220px;           
  width: 100%;
  height: 300px;
  position: relative;
  background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
  border-radius: 10px;
  overflow: hidden;
}

/* El elemento canvas donde se renderiza el modelo 3D */
.model-container-next canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


/* LADO DERECHO: INFORMACIÓN DEL METEORITO */


/* Área donde se muestra toda la información textual */
.data-container-next {
  flex: 1;                     
  padding: 1.5rem 1.8rem;       
  display: flex;                
  flex-direction: column;       
  justify-content: center;     
}

/* Título del meteorito (ej: "2025 QZ1") */
.data-container-next h3 {
  font-family: 'Space Grotesk', sans-serif; 
  font-size: 1.4rem;            
  color: #1e90ff;               
  margin: 0 0 0.8rem 0;         /* Sin margen arriba, 0.8rem abajo */
  text-transform: uppercase;    
  letter-spacing: 0.5px;        
}

/* Párrafos con información del meteorito */
.data-container-next p {
  margin: 0.4rem 0;           
  line-height: 1.6;            
  font-size: 1rem;            
  color: #eaeaea;             
}


/* SISTEMA DE COLORES PARA NIVELES DE RIESGO */


/* Estilos base para todas las etiquetas de alerta */
.alerta-baja,
.alerta-media,
.alerta-alta {
  font-weight: 700;            
  font-size: 1rem;             
  margin-top: 0.6rem;          }

/* Riesgo bajo - */
.alerta-baja { 
  color: #00ff7f;             
}

/* Riesgo medio - */
.alerta-media { 
  color: #ffd700;             
}

/* Riesgo alto - */
.alerta-alta { 
  color: #ff4d4d;            
}