body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #1e1e1e;
    color: #e0e0e0;
}

h1, h2 {
    color: #e0e0e0;
}

p {
    font-size: 14px;
    color: #b0b0b0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background-color: #2c2c2c;
}

table, th, td {
    border: 1px solid #444;
}

th, td {
    padding: 8px;
    text-align: left;
    color: #e0e0e0;
}

th {
    background-color: #3b3b3b;
}

td {
    background-color: #2c2c2c;
}

.sub-explanation {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

.diff-positive {
    color: #00ff00; /* Verde para diferencias positivas */
}

.diff-negative {
    color: #ff4500; /* Rojo para diferencias negativas */
}

.diff-zero {
    color: #e0e0e0; /* Color neutral para diferencias de cero */
}

/* Ajuste de ancho de las columnas */
td:nth-child(1), td:nth-child(2), td:nth-child(3), td:nth-child(4) {
    width: 15%;
}

td:nth-child(5) {
    width: 40%; /* Explicación */
}

/* Estilo para los encabezados de grupo */
.group-header {
    background-color: #003366; /* Azul oscuro */
    color: #e0e0e0; /* Color del texto del encabezado del grupo */
    font-weight: bold; /* Texto en negrita */
    text-align: left; /* Alineación a la izquierda */
    height: 40px; /* Altura para el encabezado del grupo */
}

/* Espaciado adicional para las filas de encabezado */
.group-header td {
    padding: 10px;
}

/* Separador visual entre grupos */
.separator {
    height: 10px; /* Espacio entre grupos */
    background-color: #1e1e1e; /* Color de fondo para el espacio */
    border: none; /* Sin borde */
}

/* Espaciado adicional para las filas de datos */
tbody tr {
    border-bottom: 1px solid #444; /* Línea separadora entre filas */
}



/* Estilo para centrar el título */
h1 {
    text-align: center; /* Centra el texto del título */
}

/* Estilo para el contenedor de carga */
.upload-container {
    display: flex; /* Utiliza flexbox para alinear los cuadros */
    justify-content: center; /* Centra los cuadros horizontalmente */
    gap: 20px; /* Espacio entre los cuadros */
    margin-bottom: 20px; /* Espacio debajo de los cuadros */
}

/* Estilo para las zonas de arrastre */
.drop-zone {
    background-color: #2c2c2c;
    border: 2px dashed #444;
    border-radius: 8px;
    width: 250px; /* Ancho de cada cuadro */
    height: 250px; /* Altura igual al ancho para hacerlos cuadrados */
    padding: 20px;
    display: flex; /* Usar flex para centrar el contenido */
    flex-direction: column; /* Coloca el contenido en columna */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    cursor: pointer;
}

/* Etiqueta de la zona de arrastre */
.drop-zone__label {
    color: #e0e0e0;
}

/* Ocultar el input de archivo */
input[type="file"] {
    display: none; /* Oculta el input de tipo file */
}

/* Estilo para el contenedor del botón */
.button-container {
    display: flex; /* Usar flexbox para centrar el botón */
    justify-content: center; /* Centra el botón horizontalmente */
    margin-top: 20px;
}

/* Estilo para el botón de comparar */
.compare-button {
    background-color: #007BFF; /* Color azul para el botón */
    color: white; /* Texto blanco */
    border: none;
    border-radius: 5px;
    padding: 15px 40px; /* Aumentar el tamaño del botón */
    font-size: 16px; /* Aumentar el tamaño de la fuente */
    cursor: pointer;
}

.compare-button:hover {
    background-color: #0056b3; /* Cambia el color al pasar el ratón */
}