/*ESTILOS PARA EL DASHBOARD DEL USUARIO*/
/* --- Estilos para el Encabezado Principal --- */
html {
    height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #15739e;
    color: #333; /* Color de texto base añadido */
}

/* --- ESTILOS ESPECÍFICOS PARA MOSTRAR_DECLARATORIA.PHP --- */

.carta-declaratoria-container {
    border: 1px solid #e0e0e0; /* Borde más suave */
    padding: 25px;             /* Más padding interno */
    background-color: #fdfdfd; /* Fondo muy claro */
    border-radius: 4px;
    max-height: 450px;         /* Altura máxima de la carta antes del scroll */
    overflow-y: auto;          /* Scroll si el contenido excede max-height */
    margin-bottom: 10px;       /* Pequeño margen antes de la zona de la barra de acciones */
    flex-shrink: 0;            /* Importante si main.container alguna vez es flex en columna */
}

.carta-declaratoria-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #004d40; /* Título de empresa oscuro */
    text-align: center; /* Centrar título de empresa si se ve mejor */
}

.carta-declaratoria-container p {
    line-height: 1.6;
    margin-bottom: 1em;
}

.carta-declaratoria-container strong {
    font-weight: 600;
}

/* En public/css/estilos.css */

.pagination-nav {
    margin-top: 25px;
    margin-bottom: 15px;
    text-align: center;
}

.pagination-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; /* Hace que los <li> se alineen bien y permite gap */
    gap: 5px; /* Espacio entre los ítems de la paginación */
    align-items: center; /* Alinea verticalmente los items (útil para los '...') */
}

/* .pagination-nav li { ya no se necesita display:inline-block aquí } */

.pagination-nav a.button,
.pagination-nav span.button { /* Para los botones desactivados */
    padding: 6px 12px; /* Ajusta el padding si button-small es muy pequeño/grande */
    font-size: 0.9em;
}

.pagination-nav span.disabled { /* Estilo para botones Anterior/Siguiente desactivados */
    cursor: default;
    opacity: 0.6;
    background-color: #e9ecef; /* Un fondo grisáceo para indicar desactivado */
    border-color: #dee2e6;
    color: #6c757d;
}
.pagination-nav span.disabled:hover {
    background-color: #e9ecef; /* Sin cambio en hover */
    border-color: #dee2e6;
    color: #6c757d;
    transform: none;
    box-shadow: none;
}

.pagination-nav .button:not(.button-outline) { /* Botón de la página actual */
    background-color: #0056b3; /* Un color diferente para la página actual, si lo deseas */
    border-color: #0056b3;
}

/* Estilo para la caja que muestra los periodos */
.periodos-display-box { /* Clase usada en el <pre> del PHP que te di */
    white-space: pre-wrap;
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 0.95em;
}

.lista-periodos-columnas {
    margin-top: 10px;
    margin-bottom: 10px;
}

.lista-periodos-columnas ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 20px;
}

.lista-periodos-columnas li {
    padding-bottom: 5px;
    font-size: 0.9em;
}

/* BARRA DE ACCIONES FIJA EN LA PARTE INFERIOR DE MAIN.CONTAINER */
.declaratoria-actions-bar {
    position: absolute; /* Se posiciona respecto a 'main.container' */
    bottom: 0;          /* Pegado al borde inferior de 'main.container' */
    left: 0;            /* Alineado al borde izquierdo de 'main.container' */
    right: 0;           /* Alineado al borde derecho de 'main.container' */
    
    height: auto;       /* Altura determinada por su contenido y padding */
    padding: 15px 25px; /* Espacio interno (vertical, horizontal) */
    background-color: #f0f2f5; /* Color de fondo para la barra */
    border-top: 1px solid #ced4da; /* Borde superior */
    text-align: center;
    box-sizing: border-box;
    z-index: 10;
}

.declaratoria-actions-bar form {
    margin: 0;
    padding: 0;
}

.declaratoria-actions-bar .button,
.declaratoria-actions-bar .button-outline {
    margin: 5px 8px;
}

/*OTROS ESTILOS*/

main.container { /* El <main class="container"> que abre header.php */
    width: 90%;
    max-width: 95%px;
    margin: 30px auto;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 5px;
    flex-grow: 1;
    padding-bottom: 90px;
    position: relative;

    /* Padding modificado para la barra de acciones */
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 90px; /* ¡NUEVO Y CRUCIAL! Espacio para la .declaratoria-actions-bar. Ajustar si es necesario. */
}

main.container.main-container-flex-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-scroll-container {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0 10px 10px 10px;
}

.filter-form fieldset {
    margin-bottom: 15px;
}

.file-table {
    margin-top: 0;
}

.status-descargado {
    color: green;
    font-weight: bold;
}

.status-pendiente {
    color: #777;
    font-style: italic;
}

.main-header {
    background-color: #e0f2f7;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #b2dfdb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
}

.main-header .logo img {
    max-height: 80px;
    display: block;
    margin-right: 15px;
}

.main-header .company-title {
    font-size: 1.6em;
    font-weight: bold;
    color: #004d40;
    margin: 0;
}

.user-welcome {
    margin-left: auto;
    text-align: right;
    font-size: 0.95em;
    color: #00695c;
    padding: 5px 0;
    line-height: 1.4;
}

.user-welcome span.welcome-message {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 1.1em;
    color: #00382d;
}

.user-welcome span { /* Este es un poco genérico, podría afectar al span.welcome-message si no se redefine después */
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 1.05em;
    color: #00382d;
}

.user-welcome a {
    color: #00695c;
    font-weight: 500;
    text-decoration: none;
    margin-left: 10px;
}
.user-welcome a:hover {
    text-decoration: underline;
    color: #004d40;
}

/* --- Estilos para el Contenedor Principal (hijos de main.container) --- */

main.container h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 25px;
    color: #333;
}

main.container .error,
main.container .success {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

main.container .error { 
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}
 
main.container .success { 
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

/* --- Estilos para la Tabla de Archivos --- */
.file-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.file-table th,
.file-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

.file-table thead th {
    background-color: #f2f7f6;
    font-weight: bold;
    color: #333;
}

.file-table tbody tr:nth-child(odd) {
    background-color: #f9fbfb;
}

.file-table tbody tr:hover {
    background-color: #eef6f5;
}

.button-download {
    display: inline-block;
    padding: 6px 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.button-download:hover {
    background-color: #0056b3;
    color: white;
    text-decoration: none;
}

/* --- Estilos para el Pie de Página --- */
footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #eee;
    font-size: 0.95em;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0; /* Para que el footer no se encoja */
}

/* --- CÓDIGO PARA ESTILOS EN LOGIN.PHP (Duplicado de body, se puede limpiar) --- */
/* body { ... } */ /* Esta regla de body está duplicada. La primera es más completa. */

.login-page-wrapper{
    display: flex;
    min-height: 100vh;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ... (resto de tus estilos de login.php, que no modifico) ... */
.info-column{
    background-color: #e0f2f7;
    color: #004d40;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.info-column h1{
    font-size: 2.5em;
    margin-bottom: 20px;
}

.info-column p{
    font-weight: 300;
}

.info-column .icon-container{
    margin: 30px 0;
}

.info-column .icon-container svg{
    width: 80px;
    height: 80px;
    stroke-width: 1.5;
    color: #00695c;
}

.info-column .company-logo-container {
    margin: 15px 0 20px 0;
    max-width: 80%;
    text-align: center;
}

.info-column .company-logo-container img {
    max-width: 400px;
    max-height: 350px;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
}

.info-column .tagline{
    font-size: 1.1em;
    margin-bottom: 40px;
    color: #0c554c;
}

.info-column .contact-info{
    margin-top: auto;
    font-size: 0.9em;
    border-top: 1px solid #b2dfdb;
    padding-top: 20px;
    width: 80%;
}

.info-column .contact-info p{
    margin: 5px 0;
}

.login-column{
    flex: 1;
    background-color: #ffffff;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form-container{ /* Debería ser .login-form-container h2 o similar para el texto "Iniciar Sesión" */
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8em; /* Este tamaño es para el h2 probablemente */
    color: #333;
}

.login-form .form-group{
    margin-bottom: 20px;
}

.login-form label{
    display: block;
    margin-bottom: 8px; /* Reducido el margen enorme */
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
    text-align: left; /* Alinear labels a la izquierda */
}

.login-form input[type="text"],
.login-form input[type="password"]{
    width: 100%;
    padding: 12px 15px;
    /* border: 1px solid #181616; */ /* Conflicto con estilos de input más abajo */
    /* border-color: #007bff; */
    /* background-color: #cfcbcb; */ /* Conflicto con estilos de input más abajo */
    /* color: #444141; */
    border: 1px solid #ced4da; /* Usando el estilo más general de abajo */
    border-radius: 4px; /* O 6px del estilo general */
    font-size: 1em; /* Ajustado desde 1.1em */
    box-sizing: border-box; /* Añadido para consistencia */
    /* cursor: pointer; No es común para inputs de texto */
    /* transition: background-color 0.3s ease; */
}

.login-form button{ /* Este es un botón muy específico, ¿quizás .login-form .button? */
    padding: 10px 80px; /* Muy ancho, quizás reducir padding horizontal */
    background-color: #004d40;
    color: #ffffff;
    border: none;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.login-form button:hover{
    background-color: #0056b3; /* Cambio de color en hover */
}

.login-form-container .error, /* Estos deben estar dentro del .login-form-container */
.login-form-container .success{
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em; /* Reducir tamaño para que no sea tan grande como el título */
}

.login-form-container .error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.login-form-container .success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.login-footer-attribution {
  width: 100%;
  text-align: center;
  padding: 20px 0;
}

.login-footer-attribution p {
  font-size: 0.85em;
  color: #eee;
  margin: 0;
}


/* --- ESTILOS GENERALES INPUTS Y BOTONES (Revisados y Consolidados) --- */
input.month-picker,
input[type="text"],
input[type="search"], /* Añadido por si usas Pico.css */
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"], /* Añadido */
input[type="url"], /* Añadido */
input[type="date"], /* Añadido */
input[type="time"], /* Añadido */
select,
textarea { /* Añadido textarea */
    width: 100%; /* Hacerlos ancho completo por defecto para formularios */
    box-sizing: border-box; /* Incluir padding y borde en el width/height */
    border-radius: 6px;
    border: 1px solid #ced4da; /* Un borde estándar */
    padding: 10px 12px;
    font-size: 1em; /* Tamaño de fuente estándar */
    line-height: 1.5; /* Espaciado de línea estándar */
    background-color: #fff; /* Fondo blanco por defecto */
    color: #495057; /* Color de texto estándar */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-bottom: 1rem; /* Espacio por defecto debajo de los inputs */
}
/* Quitar margen inferior si es el último hijo en un form-group, por ejemplo */
.form-group > *:last-child {
    margin-bottom: 0;
}


input.month-picker:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
    border-color: #00695c; /* Color de tu tema al enfocar */
    box-shadow: 0 0 0 0.2rem rgba(0, 105, 92, .25); /* Sombra de enfoque con tu tema */
    outline: none;
}

/* Estilos para placeholder */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #6c757d;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #6c757d;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #6c757d;
}


/* BOTONES - ESTILOS BASE Y VARIANTES */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block; /* Comportamiento inline-block */
    font-weight: 500; /* O 600 si prefieres más grueso */
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none; /* Evitar selección de texto en botones */
    background-color: #00695c; /* Color primario */
    border: 1px solid #00695c; /* Borde del mismo color */
    color: #fff; /* Texto blanco */
    padding: 10px 20px; /* Padding estándar */
    font-size: 1em; /* Tamaño de fuente estándar */
    line-height: 1.5; /* Altura de línea estándar */
    border-radius: 6px; /* Bordes redondeados */
    text-decoration: none; /* Para los <a> con clase .button */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.1s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Sombra sutil */
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    background-color: #004d40; /* Más oscuro al pasar el ratón */
    border-color: #004d40;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px); /* Efecto sutil */
    box-shadow: 0 2px 4px rgba(0,0,0,0.07);
}

.button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active {
    transform: translateY(0px);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 105, 92, .5); /* Sombra de enfoque con tu tema */
}


/* Botón Outline */
.button.button-outline, button.button-outline { /* Más especificidad para <button class="button-outline"> */
    background-color: transparent;
    color: #00695c;
    border-color: #00695c; /* Borde del color primario */
    box-shadow: none;
}
.button.button-outline:hover, button.button-outline:hover {
    background-color: rgba(0, 105, 92, 0.05); /* Un fondo muy sutil al pasar el mouse */
    color: #004d40; /* Texto más oscuro */
    border-color: #004d40; /* Borde más oscuro */
    transform: none;
    box-shadow: none;
}

/* Ajustes específicos para botones de filtro */
.filter-toggle button.button-outline {
    margin-bottom: 20px;
}


/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    /* --- Layout General y Header/Footer --- */
    main.container {
        width: 95%;
        padding: 20px 15px 80px 15px; /* Padding: TOP, SIDES, BOTTOM (ajustado para barra acciones), SIDES */
        min-height: auto;
    }

    .main-header {
        padding: 10px 15px;
    }
    .main-header .company-title {
        font-size: 1.3em;
    }
    .user-welcome {
        font-size: 0.9em;
        margin-left: 10px;
        text-align: left;
        width: 100%;
        margin-top: 10px;
    }
    .user-welcome span.welcome-message {
        font-size: 1em;
    }
    footer {
        font-size: 0.9em;
        padding: 15px;
        margin-top: 20px;
    }

    /* --- Formularios --- */
    .filter-container .grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .filter-container .grid > div {
        display: flex;
        flex-direction: column;
    }
    .filter-container label {
        margin-bottom: 5px;
    }
    .filter-container button[type="submit"],
    .filter-container a.button-outline {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }
    .filter-container .grid > div:last-child {
        align-self: stretch;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }
    .form-group label {
        margin-bottom: 5px;
        text-align: left;
    }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="number"],
    .form-group select {
        margin-bottom: 10px; /* El estilo general de inputs ya tiene margin-bottom: 1rem */
    }
    .form-group button[type="submit"] {
        width: 100%;
        padding: 12px;
    }

    /* --- Tablas --- */
    .table-scroll-container {
        overflow-x: auto;
    }
    .file-table th,
    .file-table td {
        padding: 8px 10px;
        white-space: nowrap;
        font-size: 0.9em;
    }
    table.file-table th:first-child,
    table.file-table td:first-child {
        display: none; /* Oculta ID en tablas */
    }
    .file-table td a.button,
    .file-table td a.button-outline,
    .file-table td a.button-download {
        padding: 4px 8px;
        font-size: 0.8em;
        margin-right: 5px;
        margin-bottom: 5px;
        display: inline-block;
    }

    /* --- Login --- */
    .login-page-wrapper {
        flex-direction: column;
    }
    .info-column, .login-column {
        flex: none;
        width: 100%;
        min-height: auto;
        padding: 30px;
        box-sizing: border-box;
    }
    .info-column .contact-info {
        margin-top: 30px;
    }
    .login-form-container { /* Este es el h2 del login form */
        font-size: 1.5em;
    }
    .login-form label {
        margin-bottom: 8px; /* Ajustado desde 10px */
        text-align: left;
    }
}

@media (max-width: 600px) {
    /* --- Layout General --- */
    main.container {
        width: 100%;
        padding: 15px 10px 120px 10px; /* Padding: TOP, SIDES, BOTTOM (más espacio para botones apilados), SIDES */
        margin: 10px 0 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* --- Tipografía y Header/Footer --- */
    body { font-size: 14px; line-height: 1.5; }
    h2 { font-size: 1.3em; margin-bottom: 15px; }
    .main-header { padding: 8px 10px; }
    .main-header .logo img { max-height: 40px; margin-right: 8px; }
    .main-header .company-title { font-size: 1.1em; }
    .user-welcome { font-size: 0.8em; }
    .user-welcome span.welcome-message { font-size: 1em; }
    .user-welcome a { font-size: 0.9em; margin-left: 8px; }
    footer { padding: 10px; font-size: 0.8em; margin-top: 10px; }
    .login-footer-attribution p { font-size: 0.75em; }


    /* --- DECLARATORIA ACCIONES EN MÓVIL --- */
    .declaratoria-actions-bar {
        padding: 10px 15px; /* Menos padding en la barra misma */
    }
    .declaratoria-actions-bar .button,
    .declaratoria-actions-bar .button-outline {
        display: block;
        width: 100%; 
        margin: 10px 0; /* Espacio vertical, resetea horizontal para centrar */
        box-sizing: border-box;
    }
    .declaratoria-actions-bar .button-outline {
        margin-left: 0 !important; /* Resetea margen inline */
    }
    .lista-periodos-columnas ul {
        column-count: 1; /* Una sola columna para periodos en móviles */
    }


    /* --- Formularios Generales y Login --- */
    .filter-container label, .form-group label { font-size: 0.85em; }
    input, select, textarea { /* Aplicando a todos los inputs, selects, textareas */
        padding: 8px 10px;
        font-size: 0.95em;
    }
    .filter-container small { font-size: 0.75em; }
    .filter-container button[type="submit"],
    .filter-container a.button-outline,
    .form-group button[type="submit"] {
        padding: 10px; font-size: 0.9em;
    }
    
    /* Login específico */
    .login-column { padding: 20px; }
    .login-form-container h2 { font-size: 1.5em; } /* Este selector es para el h2 */
    .login-form label { margin-bottom: 5px; }
    .login-form input[type="text"], .login-form input[type="password"] {
         margin-bottom: 12px; /* Espacio debajo de inputs login */
    }
    .login-form button { /* Botón específico de login */
        padding: 10px 20px;
        font-size: 1em;
        width: 100%;
    }
    .info-column { padding: 25px 20px; }
    .info-column h1 { font-size: 1.6em; margin-bottom: 10px; }
    .info-column .icon-container { margin: 10px 0; }
    .info-column .icon-container svg { width: 45px; height: 45px; }
    .info-column .tagline { font-size: 0.9em; margin-bottom: 20px; }
    .info-column .company-logo-container { margin: 15px 0; max-width: 60%; }
    .info-column .company-logo-container img { max-height: 100px; }
    .info-column .contact-info { font-size: 0.75em; padding-top: 10px; width: 90%; margin-top: 15px; }
    .info-column .contact-info p { margin: 2px 0; }

    /* --- Tablas --- */
    .file-table th, .file-table td {
        padding: 5px 6px;
        font-size: 0.75em;
    }
    .file-table td a.button,
    .file-table td a.button-outline,
    .file-table td a.button-download {
        padding: 3px 5px;
        font-size: 0.7em;
    }
}

/* La media query para 480px que tenías para .declaratoria-actions-bar .button ya está integrada
   en la media query de @media (max-width: 600px) porque 480px es menor que 600px,
   así que las reglas para los botones de la declaratoria en móvil aplicarán bien.
   Si necesitas estilos DIFERENTES específicamente a 480px que no estén en 600px,
   puedes añadir un @media (max-width: 480px) separado con solo esas diferencias.
*/