/* ==================================================== */
/* IMPORTS Y ESTILOS GENERALES                          */
/* ==================================================== */

/* La importación de la fuente Inter se hace en el HTML, */
/* aquí solo la aplicamos.                               */

body {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}

/* Tailwind utiliza esta clase para suavizar las fuentes */
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==================================================== */
/* ESTILOS DE BOTONES Y CONTROLES                       */
/* ==================================================== */

/* Botón de acción principal (verde) */
.btn-primary {
    background-color: rgb(52, 235, 149);
    color: #000000;
    font-weight: 700;
    border-radius: 4px;
    padding: 12px 24px;
    transition: background-color 0.2s ease-in-out;
    border: none;
}

.btn-primary:hover {
    background-color: rgb(40, 210, 130);
}

.btn-primary:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
}

/* Botón de acción secundario (gris) */
.btn-secondary {
    background-color: #f0f0f0;
    color: #000000;
    font-weight: 500;
    border-radius: 4px;
    padding: 8px 16px;
    transition: background-color 0.2s ease-in-out;
    border: none;
}

.btn-secondary:hover {
    background-color: #dcdcdc;
}

/* Estilo para los menús desplegables de selección de columnas */
.column-select {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 8px;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Estilo para los campos de entrada (inputs) sin flecha */
.input-field {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 8px;
    background-color: white;
}


/* ==================================================== */
/* ESTILOS DE LA TABLA DE RESULTADOS                    */
/* ==================================================== */

/* Contenedor de la tabla para permitir scroll y encabezado fijo */
#table-container {
    overflow: auto;
    background-color: white;
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    max-height: 65vh;
}

/* Encabezado de la tabla fijo */
#results-table-head th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f9fafb; /* Corresponde a bg-gray-50 de Tailwind */
    text-transform: uppercase;
    color: #4b5563; /* Corresponde a text-gray-600 */
    padding: 0.75rem; /* 12px */
}


/* ==================================================== */
/* CLASES DE UTILIDAD (similares a Tailwind)            */
/* ==================================================== */

.hidden {
    display: none;
}

/* Clases de Tailwind que se aplican con JS. 
   No es necesario definirlas aquí ya que se usa el CDN,
   pero se dejan como referencia de lo que se manipula.
   .bg-gray-300 {}
   .border-green-400 {}
   .bg-green-50 {}
*/