/* Site.css - Estilos mejorados y más llamativos */

/* Importar fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght=300;400;600&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 30px;
    background-color: #eef2f7; /* Un azul claro muy suave */
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1000px; /* Un poco más ancho */
    margin: 0 auto;
    background-color: #ffffff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
}

h1 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #2c3e50; /* Gris oscuro para el título principal */
    margin-bottom: 40px;
    font-size: 2.5em; /* Tamaño de fuente más grande */
    position: relative;
    padding-bottom: 15px;
}

    h1::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-color: #3498db; /* Línea decorativa azul */
        border-radius: 2px;
    }

.query-section {
    background-color: #fcfcfc;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 35px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave para secciones */
}

    .query-section:last-of-type {
        margin-bottom: 0;
    }

    .query-section h2 {
        font-family: 'Montserrat', sans-serif;
        color: #34495e; /* Azul oscuro para los subtítulos */
        border-bottom: 2px solid #aec6cf; /* Línea divisoria más visible */
        padding-bottom: 10px;
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 1.6em;
    }

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Espacio entre botones */
}

.btn {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600; /* Texto de botón más grueso */
    cursor: pointer;
    border: none;
    border-radius: 7px; /* Bordes más redondeados */
    background-color: #3498db; /* Azul primario */
    color: white;
    transition: all 0.3s ease; /* Transición suave para hover */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* Sombra para botones */
}

    .btn:hover {
        background-color: #2980b9; /* Azul más oscuro al pasar el ratón */
        transform: translateY(-2px); /* Efecto de "levantar" */
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
    }

.grid-container {
    margin-top: 40px;
    background-color: #fcfcfc;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

    .grid-container h2 {
        font-family: 'Montserrat', sans-serif;
        color: #34495e;
        border-bottom: 2px solid #aec6cf;
        padding-bottom: 10px;
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 1.6em;
    }

/* Estilos para el GridView */
.grid-view {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden; /* Asegura que las esquinas redondeadas del contenedor funcionen */
}

    .grid-view th {
        background-color: #5D7B9D; /* Un tono de gris azulado para los encabezados */
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: 600;
        font-family: 'Montserrat', sans-serif;
    }

    .grid-view td {
        padding: 10px 12px;
        border: 1px solid #e7ecef; /* Bordes suaves entre celdas */
        color: #4a4a4a;
    }

    .grid-view tr:nth-child(even) {
        background-color: #f8faff; /* Fondo ligeramente azulado para filas pares */
    }

    .grid-view tr:hover {
        background-color: #eef7ff; /* Resaltar fila al pasar el ratón */
        cursor: pointer;
    }