/* General Body Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* Un gris muy claro para el fondo general */
    color: #333;
    position: relative; /* Necesario para el version-tag */
}

/* Header Styles */
header {
    background-color: #2c3e50; /* Azul oscuro */
    color: #ecf0f1; /* Blanco grisáceo */
    padding: 20px 0; /* Padding vertical, sin horizontal aquí para no afectar el ancho */
    text-align: center;
    position: relative; /* Para posicionar el version-tag si está dentro del header */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

header h1 {
    margin: 0;
    font-size: 2.5em; /* Título principal más grande */
    letter-spacing: 2px;
    color: #ecf0f1; /* Aseguramos que el color del texto del h1 sea claro */
}

/* Version Tag */
.version-tag {
    position: absolute;
    top: 15px; /* Ajusta la posición vertical */
    right: 15px; /* Ajusta la posición horizontal */
    font-size: 0.85em;
    color: #bdc3c7; /* Un gris más claro */
    background-color: rgba(0, 0, 0, 0.2); /* Fondo semitransparente */
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 1000;
}

/* Navigation Bar (Navbar) */
.navbar {
    background-color: transparent; /* Fondo transparente */
    overflow: hidden;
    padding: 15px 0; /* Un poco más de padding vertical para centrar mejor las cajas */
    text-align: center;
    box-shadow: none; /* Quitamos la sombra si ya no es necesaria con fondo transparente */
}

.navbar a {
    display: inline-block;
    color: #2c3e50; /* Color de texto oscuro para que contraste con el fondo claro de la caja */
    text-align: center;
    padding: 10px 20px; /* Padding para el contenido dentro de cada caja */
    margin: 0 8px; /* Margen entre cada caja para separarlas */
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #c0d9ed; /* Borde ligero para la caja */
    border-radius: 8px; /* Bordes redondeados */
    background-color: #e9f5ff; /* Un color de fondo claro para cada caja */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Transición suave para hover */
}

.navbar a:hover {
    background-color: #d0e8ff; /* Color de fondo más oscuro al pasar el ratón */
    border-color: #8bbade; /* Borde más oscuro al pasar el ratón */
    color: #1a2b3c; /* Texto ligeramente más oscuro al pasar el ratón */
}

/* Estilos para los títulos de sección (como "Registro de Documentos") */
h1, h2 {
    color: #2c3e50; /* Mismo color que el header para consistencia */
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* HR Separator */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 40px auto; /* Más espacio y centrado */
    width: 80%; /* Ancho reducido */
}

/* Styles for the Document Registration Form */
.document-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Más espacio entre columnas */
    max-width: 1200px;
    margin: 20px auto;
    padding: 30px; /* Más padding */
    background-color: #ffffff; /* Fondo blanco para el formulario */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.form-column {
    flex: 1 1 calc(25% - 15px); /* Cuatro columnas por fila, ajusta si quieres más o menos */
    min-width: 200px; /* Ancho mínimo para columnas en pantallas pequeñas */
    display: flex;
    flex-direction: column;
}

.full-width-field {
    width: 100%;
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 8px; /* Más espacio debajo de las etiquetas */
    font-weight: bold;
    color: #34495e; /* Color oscuro para las etiquetas */
}

/* Estilos para inputs de texto, fecha, número y textareas (sin la flecha) */
input[type="text"],
input[type="date"],
input[type="number"],
textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

/* Estilos específicos para el elemento select (con la flecha) */
select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-6.5H18.6c-5%200-9.3%201.8-13.2%206.5-3.9%204.7-5.9%2010.1-5.4%2016.3%200%206.2%202.1%2011.6%206.3%2015.6L129.5%20251c4.5%204.5%2010.1%206.7%2016.3%206.7s11.8-2.2%2016.3-6.7L285.9%20101.3c4.2-4%206.3-9.4%206.3-15.6-.4-6.2-2.5-11.6-6.8-16.3z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
}

select:focus,
input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: #8bbade;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

textarea {
    resize: vertical;
}

/* General button styles for submit inputs within forms (like the register form) */
input[type="submit"] {
    background-color: #27ae60; /* Verde */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 25px;
    width: auto; /* Ancho automático para no forzar full width */
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #229a56; /* Verde más oscuro al hover */
}


/* Styles for the Search Form (UPDATED SECTION) */
.search-form {
    margin: 20px auto;
    max-width: 90%;
    padding: 15px;
    background-color: #e9f5ff;
    border-radius: 8px;
    display: flex; /* Mantiene Flexbox */
    gap: 10px; /* Mantiene el espacio entre elementos */
    align-items: center; /* Centra verticalmente los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-form input[type="text"] {
    flex-grow: 1; /* Permite que el input de texto ocupe el espacio disponible */
    padding: 10px;
    border: 1px solid #a8d6ff;
    border-radius: 4px;
    font-size: 1em;
    min-width: 200px; /* Asegura que el input no se haga demasiado pequeño */
}

/* Contenedor para los botones de búsqueda (NUEVO) */
.search-buttons {
    display: flex; /* Aplica flexbox para alinear los botones entre sí */
    gap: 10px; /* Espacio entre el botón "Buscar" y "Mostrar Todos" */
    flex-shrink: 0; /* Evita que el grupo de botones se encoja */
}

/* Estilos para el botón "Buscar" (dentro del search-buttons) */
.search-form input[type="submit"] {
    padding: 10px 15px;
    background-color: #007bff; /* Azul */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    margin-top: 0; /* Reiniciar margin-top si lo hereda de otro lado */
}

.search-form input[type="submit"]:hover {
    background-color: #0056b3; /* Azul más oscuro al hover */
}

/* Estilos para el botón "Mostrar Todos" (usaremos una clase CSS en el <a>) */
.search-form .btn-show-all { /* Clase específica para el botón "Mostrar Todos" */
    padding: 10px 15px;
    border-radius: 4px;
    background-color: #e9f5ff; /* Color de fondo claro, similar al del navbar */
    color: #2c3e50; /* Color de texto oscuro, similar al del navbar */
    border: 1px solid #a8d6ff; /* Borde azul claro, similar al input de búsqueda */
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    margin-top: 0; /* Reset margin-top if inherited from elsewhere */
}

.search-form .btn-show-all:hover {
    background-color: #d0e8ff; /* Color de fondo más oscuro al pasar el ratón, similar al hover del navbar */
    border-color: #8bbade; /* Borde más oscuro al pasar el ratón */
    color: #1a2b3c; /* Texto ligeramente más oscuro al pasar el ratón */
}

/* Contenedor para la tabla que manejará el scroll horizontal y AHORA vertical */
.table-container {
    width: 95%; /* Ajusta este ancho según necesites, 95% o 100% */
    margin: 20px auto; /* Centrar el contenedor de la tabla */
    overflow-x: auto; /* ¡Esto habilita el scroll horizontal si el contenido desborda!*/
    -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en dispositivos táctiles */
    border: 1px solid #ddd; /* Opcional: un borde para el contenedor */
    border-radius: 8px; /* Opcional: bordes redondeados */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Opcional: sombra */
    background-color: #ffffff; /* Fondo blanco para el contenedor */

    /* ***** CAMBIOS CLAVE PARA EL SCROLL VERTICAL DENTRO DEL CONTENEDOR ***** */
    max-height: 500px; /* <--- AJUSTA ESTE VALOR: Altura máxima del contenedor.
                                 Si el contenido (la tabla) excede esta altura,
                                 aparecerá una barra de desplazamiento vertical interna. */
    overflow-y: auto; /* <--- Habilita el scroll vertical si el contenido excede max-height.*/
}

/* Styles for the Table (for ver_documentos.php) */
.table {
    width: 100%; /* La tabla ocupará el 100% del ancho de su contenedor. */
    min-width: 1800px; /* <--- AJUSTA ESTE VALOR. Define un ancho mínimo para la tabla.
                                   Esto es CRÍTICO para forzar el scroll horizontal.
                                   Empieza con 1800px y ajusta según tus columnas. */
    border-collapse: collapse; /* Para que los bordes de las celdas se unan */
}

.table th, .table td {
    border: 1px solid #e0e0e0;
    padding: 12px 15px; /* Relleno para celdas */
    text-align: left;
    font-size: 0.9em;
    vertical-align: top; /* Alinea el contenido de las celdas a la parte superior */
    white-space: nowrap; /* Fuerza el texto a una sola línea. CRÍTICO para mantener el ancho de columna.*/
    overflow: hidden; /* Oculta el contenido que se desborda de la celda*/
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto se desborda y se oculta*/
}

.table th {
    background-color: #f0f3f6; /* Fondo más claro para encabezados */
    color: #34495e; /* Color oscuro para el texto del encabezado */
    font-weight: bold;
    text-transform: uppercase; /* Mayúsculas para encabezados */
    position: sticky; /* Encabezados pegajosos al hacer scroll vertical*/
    top: 0; /* Pegar en la parte superior del contenedor de scroll*/
    z-index: 2; /* Asegurar que estén por encima del contenido y de la sombra de la tabla si hay*/
}

.table tr:nth-child(even) {
    background-color: #f9fcff; /* Fondo más claro para filas pares */
}

.table tr:hover {
    background-color: #e6f7ff; /* Color de hover más notorio */
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE REPORTES --- */

/* Contenedor principal de los reportes */
.report-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-align: center;
    max-width: 90%; /* Ajusta el ancho máximo del contenedor del reporte */
    margin: 40px auto; /* Centra el contenedor y añade margen */
}

.report-section h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-align: center;
}

/* Estilos para las tablas dentro de la página de reportes */
.report-table {
    width: auto; /* Permite que la tabla se ajuste al contenido */
    min-width: 400px; /* Ancho mínimo para la tabla de reporte combinada */
    max-width: 100%; /* Asegura que no se desborde */
    border-collapse: collapse;
    margin: 20px auto; /* Centra la tabla */
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* Sombra suave para las tablas de reporte */
}

.report-table th, .report-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    font-size: 0.9em;
    vertical-align: middle;
    white-space: normal; /* Permite que el texto se envuelva en las celdas de reporte */
    overflow: visible; /* Asegura que el contenido sea visible */
    text-overflow: clip; /* No usar puntos suspensivos */
    max-width: none; /* Elimina restricciones de ancho máximo */
    min-width: unset; /* Elimina restricciones de ancho mínimo */
}

.report-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
}

.report-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.report-table tr:hover {
    background-color: #f1f1f1;
}

/* Mensajes de éxito/error (ya definidos en ver_documentos.php, pero los mantengo aquí como respaldo) */
/* .success-message {
    color: green;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

.error-message {
    color: red;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
} */

/* Media Queries para responsividad */
@media (max-width: 992px) {
    .form-column {
        flex: 1 1 calc(33% - 15px); /* Tres columnas en tablets */
    }
}

@media (max-width: 768px) {
    .form-column {
        flex: 1 1 calc(50% - 15px); /* Dos columnas en móviles */
    }
    /* .report-table ya se ajusta con width: 100% y min-width: unset en este breakpoint */
    .navbar a {
        margin: 5px; /* Reduce el margen entre los botones de navegación */
        padding: 8px 15px; /* Reduce el padding */
    }
    /* En pantallas más pequeñas, los botones de búsqueda pueden saltar a una nueva línea si es necesario */
    .search-form {
        flex-direction: column; /* Apila los elementos en columnas */
        align-items: stretch; /* Estira los elementos para que ocupen todo el ancho */
    }
    .search-form input[type="text"] {
        width: 100%; /* Asegura que el input ocupe todo el ancho */
    }
    .search-buttons {
        width: 100%; /* Asegura que el grupo de botones ocupe todo el ancho */
        justify-content: space-around; /* Distribuye los botones equitativamente */
    }
    .search-form input[type="submit"],
    .search-form .btn-show-all {
        flex-grow: 1; /* Permite que los botones dentro del grupo crezcan */
    }
    /* Para el scroll horizontal de la tabla de documentos en pantallas pequeñas */
    .table-container {
        width: 100%; /* Ocupa todo el ancho disponible */
        margin: 10px auto; /* Menos margen en móviles */
        border-radius: 0; /* Bordes rectos para ocupar todo el ancho */
        /* Asegurarse de que max-height y overflow-y: auto se mantienen para móviles */
        max-height: 400px; /* Puedes ajustar una altura menor para móviles si lo deseas */
        overflow-y: auto; /* Mantener el scroll vertical interno para móviles también */
    }
    .table th, .table td {
        padding: 8px 10px; /* Reducir padding en celdas para ahorrar espacio */
        font-size: 0.8em; /* Fuente un poco más pequeña */
    }
    /* La min-width de la tabla principal se mantiene para forzar el scroll */
}

@media (max-width: 480px) {
    .form-column {
        flex: 1 1 100%; /* Una sola columna en móviles muy pequeños */
    }
    .document-form, .search-form, .table-container, .report-section {
        padding: 10px; /* Reducir padding general */
        margin: 5px auto; /* Reducir margen general */
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.8em;
    }
    .navbar a {
        font-size: 0.8em; /* Texto de navegación aún más pequeño */
        padding: 5px 8px; /* Padding de navegación más pequeño */
    }
}