/* ====== ESTILOS GENERALES ====== */
/* Configuración base del documento HTML */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna y legible */
    margin: 0;
    padding: 0;
    background: #f3f6fa; /* Color de fondo suave azul grisáceo */
    color: #333; /* Color de texto principal */
}

/* Contenedor principal que centra y limita el ancho del contenido */
.container {
    max-width: 1400px; /* Ancho máximo para pantallas grandes */
    margin: 0 auto; /* Centrado horizontal */
    padding: 20px; /* Espaciado interno */
}

/* Estilos del encabezado principal */
header {
    text-align: center; /* Centrado del contenido */
    margin-bottom: 20px; /* Separación inferior */
}

/* Título principal de la aplicación */
header h1 {
    font-size: 1.8rem; /* Tamaño de fuente grande */
    margin-bottom: 5px; /* Separación mínima */
}

/* Subtítulo descriptivo */
header p {
    font-size: 0.9rem; /* Tamaño menor que el título */
    color: #555; /* Color más tenue */
}

/* ====== LAYOUT PRINCIPAL ====== */
/* Grid principal que divide la interfaz en dos columnas */
.main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Columna izquierda (parámetros) más ancha que la derecha (controles) */
    gap: 20px; /* Separación entre columnas */
    align-items: start; /* Alineación superior de elementos */
}

/* Estilos comunes para todos los paneles principales de la interfaz */
.parameters-panel,
.control-panel,
.status-panel,
.results-panel,
.geometry-panel {
    background: #fff; /* Fondo blanco */
    padding: 20px; /* Espaciado interno */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra sutil para efecto de elevación */
}

/* ====== PANEL DE PARÁMETROS ====== */
/* Título del panel de parámetros de simulación */
.parameters-panel h2 {
    margin-bottom: 15px; /* Separación inferior */
    color: #444; /* Color de texto oscuro */
}

/* Grid responsivo para organizar las secciones de parámetros */
.parameters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Columnas adaptables con ancho mínimo */
    gap: 20px; /* Separación entre secciones */
    align-items: stretch; /* Iguala las alturas de todas las secciones */
}

/* Contenedor individual para cada grupo de parámetros */
.parameter-section {
    border: 1px solid #e0e0e0; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 15px; /* Espaciado interno */
    background: #fdfdfd; /* Fondo ligeramente diferente al blanco */
    display: flex;
    flex-direction: column; /* Disposición vertical */
    justify-content: space-between; /* Distribuye el contenido uniformemente */
}

/* Título de cada sección de parámetros */
.parameter-section h3 {
    margin-top: 0; /* Sin margen superior */
    margin-bottom: 10px; /* Separación inferior */
    font-size: 1rem; /* Tamaño estándar */
    color: #555; /* Color intermedio */
}

/* Grid para organizar inputs en filas dentro de cada sección */
.parameter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Columnas adaptables */
    gap: 12px; /* Separación entre inputs */
}

/* Contenedor para cada campo de entrada con su etiqueta */
.input-group {
    display: flex;
    flex-direction: column; /* Etiqueta arriba, input abajo */
}

/* Etiquetas de los campos de entrada */
.input-group label {
    font-size: 0.85rem; /* Tamaño pequeño */
    margin-bottom: 4px; /* Separación mínima */
    color: #333; /* Color estándar */
}

/* Estilos para todos los campos de entrada */
.input-group input {
    padding: 6px 8px; /* Espaciado interno cómodo */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 6px; /* Bordes ligeramente redondeados */
    font-size: 0.9rem; /* Tamaño de fuente legible */
}

/* ====== PANEL DE CONTROL ====== */
/* Título del panel de controles de simulación */
.control-panel h2 {
    margin-bottom: 15px; /* Separación inferior */
    color: #444; /* Color de texto oscuro */
}

/* Contenedor flexible para los botones de control */
.control-buttons {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones se ajusten en múltiples líneas */
    gap: 10px; /* Separación entre botones */
}

/* Estilos base para todos los botones */
button {
    padding: 10px 16px; /* Espaciado interno cómodo */
    border: none; /* Sin borde por defecto */
    border-radius: 6px; /* Bordes redondeados */
    font-size: 0.95rem; /* Tamaño de fuente estándar */
    cursor: pointer; /* Cursor de mano al pasar por encima */
    transition: background 0.3s; /* Transición suave del color de fondo */
}

/* Botón principal (acciones importantes como iniciar simulación) */
.btn-primary {
    background: #3498db; /* Azul vibrante */
    color: #fff; /* Texto blanco */
}

/* Estado hover del botón principal */
.btn-primary:hover {
    background: #2980b9; /* Azul más oscuro al pasar el mouse */
}

/* Botón secundario (acciones menos importantes) */
.btn-secondary {
    background: #bdc3c7; /* Gris claro */
    color: #333; /* Texto oscuro */
}

/* Estado hover del botón secundario */
.btn-secondary:hover {
    background: #95a5a6; /* Gris más oscuro al pasar el mouse */
}

/* ====== PANEL DE ESTADO ====== */
/* Título del panel de estado de la simulación */
.status-panel h2 {
    margin-bottom: 15px; /* Separación inferior */
    color: #444; /* Color de texto oscuro */
}

/* Contenedor para la información de estado */
.status-info {
    display: flex;
    flex-direction: column; /* Disposición vertical */
    gap: 10px; /* Separación entre elementos */
}

/* Elemento individual de información de estado */
.status-item {
    display: flex;
    justify-content: space-between; /* Etiqueta a la izquierda, valor a la derecha */
    align-items: center; /* Alineación vertical centrada */
}

/* Valor numérico del estado (tiempo, iteraciones, etc.) */
.status-value {
    font-weight: bold; /* Texto en negrita para destacar */
    color: #2c3e50; /* Color azul oscuro */
}

/* Contenedor de la barra de progreso */
.progress-container {
    width: 100%; /* Ancho completo */
    height: 20px; /* Altura fija */
    background: #eee; /* Fondo gris claro */
    border-radius: 10px; /* Bordes muy redondeados */
    position: relative; /* Para posicionar el texto */
    overflow: hidden; /* Oculta el desbordamiento */
}

/* Barra de progreso que se llena gradualmente */
.progress-bar {
    height: 100%; /* Altura completa del contenedor */
    width: 0%; /* Inicia vacía */
    background: #27ae60; /* Verde para indicar progreso */
    transition: width 0.3s ease; /* Animación suave del llenado */
}

/* Texto de porcentaje sobre la barra de progreso */
.progress-text {
    position: absolute; /* Posicionamiento absoluto */
    top: 50%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajuste fino del centrado */
    font-size: 0.8rem; /* Tamaño pequeño */
    color: #fff; /* Texto blanco para contraste */
}

/* ====== PANEL DE RESULTADOS ====== */
/* Título del panel de resultados y gráficos */
.results-panel h2 {
    margin-bottom: 15px; /* Separación inferior */
    color: #444; /* Color de texto oscuro */
}

/* Grid responsivo para organizar los gráficos de resultados */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Columnas adaptables */
    gap: 20px; /* Separación entre gráficos */
}

/* Contenedor individual para cada gráfico */
.chart-container {
    background: #fafafa; /* Fondo gris muy claro */
    padding: 15px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    border: 1px solid #ddd; /* Borde sutil */
}

/* Título de cada gráfico individual */
.chart-container h3 {
    font-size: 1rem; /* Tamaño estándar */
    margin-bottom: 8px; /* Separación inferior mínima */
    text-align: center; /* Centrado del título */
}

/* ====== SECCIÓN DE EXPORTACIÓN ====== */
/* Área para botones de exportación de datos */
.export-section {
    text-align: center; /* Centrado del contenido */
    margin-top: 15px; /* Separación superior */
}

/* ====== PANEL DE INFORMACIÓN GEOMÉTRICA ====== */
/* Título del panel de información de la nanopartícula */
.geometry-panel h2 {
    margin-bottom: 15px; /* Separación inferior */
    color: #444; /* Color de texto oscuro */
}

/* Contenedor para la información geométrica */
.geometry-info {
    display: flex;
    flex-direction: column; /* Disposición vertical */
    gap: 8px; /* Separación entre elementos */
}

/* Elemento individual de información geométrica */
.info-item {
    display: flex;
    justify-content: space-between; /* Etiqueta a la izquierda, valor a la derecha */
    padding: 6px 10px; /* Espaciado interno */
    border-bottom: 1px solid #eee; /* Línea separadora sutil */
}

/* ====== SISTEMA DE MENSAJES ====== */
/* Contenedor base para mensajes de estado */
.message {
    margin-top: 20px; /* Separación superior */
    padding: 10px; /* Espaciado interno */
    border-radius: 6px; /* Bordes redondeados */
    display: none; /* Oculto por defecto */
    font-size: 0.9rem; /* Tamaño de fuente estándar */
}

/* Mensaje de éxito (operaciones completadas correctamente) */
.message.success {
    background: #dff0d8; /* Fondo verde claro */
    color: #3c763d; /* Texto verde oscuro */
}

/* Mensaje de error (problemas o fallos) */
.message.error {
    background: #f2dede; /* Fondo rojo claro */
    color: #a94442; /* Texto rojo oscuro */
}

/* ====== COLUMNA DERECHA ====== */
/* Contenedor para paneles de control, estado y resultados */
.right-column {
    display: flex;
    flex-direction: column; /* Disposición vertical */
    gap: 20px; /* Separación entre paneles */
}

/* ====== DISEÑO RESPONSIVO ====== */
/* Adaptación para pantallas pequeñas (tablets y móviles) */
@media (max-width: 900px) {
    .main-grid {
        grid-template-columns: 1fr; /* En pantallas pequeñas todo se apila en una columna */
    }
}