/* public/css/style.css */

    /* === Reseteo Básico y Variables de Color === */
    :root {
        --primary-color: #3498db;
        --success-color: #27ae60;
        --error-color: #c0392b;
        --light-gray: #f4f4f4;
        --dark-gray: #333;
        --border-color: #ddd;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* === Estilos Generales del Body === */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        line-height: 1.6;
        background-color: var(--light-gray);
        color: var(--dark-gray);
        display: flex;
        flex-direction: column; /* <-- La clave: organiza los elementos en columna */
        min-height: 100vh;      /* <-- Asegura que el body ocupe toda la altura de la pantalla */
    }

    /* === Estilo para el contenido principal === */
    main {
        flex: 1; /* <-- La magia: hace que el contenido principal crezca y ocupe el espacio disponible */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }


    /* === Estilos para el Footer === */
    .main-footer {
        width: 100%;
        text-align: center;
        padding: 1rem;
        background-color: #fff;
        border-top: 1px solid var(--border-color);
        margin-top: auto; /* Empuja el footer hacia abajo */
        font-size: 0.9rem;
        color: #555;
    }

    /* === Contenedor Principal === */
    .container {
        background-color: #fff;
        padding: 2rem 2.5rem;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 700px;
        text-align: center;
    }

    h1 {
        color: #2c3e50;
        margin-bottom: 1.5rem;
    }

    p {
        margin-bottom: 1rem;
    }

    /* === Estilos para Formularios === */
    .form-container {
        text-align: left;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: bold;
    }

    .form-group .required {
        color: var(--error-color);
        margin-left: 0.25rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 1rem;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    fieldset.form-section {
        border: 1px solid var(--border-color);
        border-radius: 5px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    fieldset.form-section legend {
        font-size: 1.2rem;
        font-weight: bold;
        padding: 0 0.5rem;
        color: var(--primary-color);
    }


    /* === Estilos para Botones === */
    button {
        cursor: pointer;
        border: none;
        padding: 0.8rem 1.5rem;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: bold;
        transition: background-color 0.3s, transform 0.1s;
    }

    button[type="submit"], #submitBtn {
        background-color: var(--primary-color);
        color: white;
    }

    button[type="submit"]:hover, #submitBtn:hover {
        background-color: #2980b9;
    }

    #prevBtn, #nextBtn {
        background-color: #ecf0f1;
        color: var(--dark-gray);
        border: 1px solid var(--border-color);
    }

    #prevBtn:hover, #nextBtn:hover {
        background-color: #bdc3c7;
    }

    button:active {
        transform: translateY(1px);
    }

    .form-navigation {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }


    /* === Clases de Estado y Ayuda === */
    .status-success {
        color: var(--success-color);
        font-weight: bold;
        background-color: #eafaf1;
        border: 1px solid var(--success-color);
        padding: 1rem;
        border-radius: 4px;
    }

    .status-error {
        color: var(--error-color);
        font-weight: bold;
        background-color: #fbecec;
        border: 1px solid var(--error-color);
        padding: 1rem;
        border-radius: 4px;
    }

    /* === Estilos para el Modal de Alertas === */
    .modal {
        display: none; /* Oculto por defecto */
        position: fixed; /* Se queda fijo en la pantalla */
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.5); /* Fondo semitransparente */
        animation: fadeIn 0.3s;
    }

    .modal-content {
        background-color: #fff;
        margin: 15% auto;
        padding: 2rem;
        border: 1px solid #888;
        width: 90%;
        max-width: 500px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        position: relative;
        animation: slideIn 0.3s;
    }

    .modal-close-btn {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .modal-close-btn:hover,
    .modal-close-btn:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    @keyframes slideIn {
        from {transform: translateY(-50px);}
        to {transform: translateY(0);}
    }

    /* === Estilos para el campo de subida de archivos (fotografía) === */
    .form-group input[type="file"] {
        display: none; /* Ocultamos el input feo por defecto */
    }

    .file-upload-label {
        display: inline-block;
        padding: 0.8rem 1.5rem;
        background-color: #ecf0f1;
        color: var(--dark-gray);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .file-upload-label:hover {
        background-color: #bdc3c7;
    }

    #fileName {
        margin-left: 1rem;
        font-style: italic;
        color: #555;
    }

    /* === Estilos para el Dashboard Layout === */
    .dashboard-wrapper {
        display: flex;
        width: 100%;
        min-height: 100vh;
        background-color: var(--light-gray);
    }

    .sidebar {
        width: 250px;
        background-color: #2c3e50;
        color: #ecf0f1;
        display: flex;
        flex-direction: column;
    }

    .sidebar-header {
        padding: 1.5rem;
        text-align: center;
        border-bottom: 1px solid #34495e;
    }

    .sidebar-nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-nav a {
        display: block;
        padding: 1rem 1.5rem;
        color: #ecf0f1;
        text-decoration: none;
        transition: background-color 0.3s;
        border-left: 3px solid transparent;
    }

    .sidebar-nav a:hover {
        background-color: #34495e;
        border-left-color: var(--primary-color);
    }

    .main-content {
        flex: 1; /* Ocupa el resto del espacio */
        padding: 2rem;
        overflow-y: auto; /* Permite scroll si el contenido es largo */
    }

    /* === Estilos para el Perfil en el Sidebar === */
    .user-profile {
        padding: 1rem 1.5rem;
        text-align: center;
        border-bottom: 1px solid #34495e;
    }
    .profile-thumbnail {
        width: 80px;
        height: 80px;
        border-radius: 50%; /* Hace la imagen redonda */
        object-fit: cover;   /* Asegura que la imagen cubra el espacio sin deformarse */
        border: 3px solid #ecf0f1;
        margin-bottom: 0.5rem;
    }
    .user-profile span {
        display: block;
        font-weight: bold;
        color: #ecf0f1;
    }
        
    .hamburger-btn {
        display: none;
    }

    /* ----------------------------------------------------- */
    /* --- PARA TABLETS Y MÓVILES GRANDES (ej. <= 1024px) --- */
    /* Podemos añadir un breakpoint intermedio si queremos que el menú se vuelva más compacto antes de desaparecer */
    @media (max-width: 1024px) {
        .sidebar {
            width: 200px; /* Hacemos el sidebar un poco más estrecho */
        }
        .user-profile span { /* Ocultamos el nombre para ahorrar espacio */
            display: none;
        }
        .sidebar-header h3 {
            font-size: 1.2rem;
        }
        .sidebar-nav a {
            padding: 0.8rem 1rem;
            font-size: 0.9rem;
        }
    }


    /* ---------------------------------------------------------------------------------- */
    /* --- PARA MÓVILES Y PANTALLAS PEQUEÑAS (ej. <= 768px) ---                         */
    /* Aquí el sidebar completo desaparece y el botón de hamburguesa aparece.         */
    /* ---------------------------------------------------------------------------------- */
    @media (max-width: 768px) {
        .dashboard-wrapper {
            flex-direction: column; /* Apila el menú y el contenido */
        }

        /* Dentro de @media (max-width: 768px) { ... } */

        .sidebar {
            width: 100%;
            height: auto; /* Asegura que el sidebar no tenga una altura fija que oculte contenido */
            flex-direction: row; /* Los elementos del sidebar-header se ponen en fila */
            justify-content: space-between; /* Espacia el título y la hamburguesa */
            align-items: center;
            padding: 1rem; /* Añadir padding para que la hamburguesa no esté pegada */
            /* Asegúrate de que el background-color sea el mismo que el del sidebar general */
            background-color: #2c3e50; 
        }

        .sidebar-header {
            display: flex; /* <-- ASEGÚRATE DE ESTO: Hace que sus hijos se organicen */
            justify-content: space-between; /* <-- Clave: Separa el h3 y el botón */
            align-items: center;
            width: auto; /* Permite que el header tome su ancho normal */
            border-bottom: none; /* Quitamos el borde inferior si no lo quieres en móvil */
        }

        .sidebar-header h3 { /* Aseguramos que el título del proyecto se vea */
            display: block; 
            margin: 0; /* Asegura que no tenga márgenes extra que causen problemas */
        }

        .hamburger-btn {
            display: block; /* <-- ESTO YA DEBERÍA ESTAR ASÍ */
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .user-profile {
            display: none; /* Ocultamos el perfil para ahorrar espacio en la barra superior */
        }

        .sidebar-nav {
            /* Estilos para el menú que se despliega */
            display: none; /* <-- Oculto por defecto en móviles hasta que se active */
            position: absolute; /* Para que no afecte el layout del main */
            top: 60px; /* Ajusta según la altura de tu sidebar-header */
            left: 0;
            width: 100%;
            background-color: #2c3e50; /* Mismo fondo que el sidebar */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 999;
            flex-direction: column; /* Los elementos del menú se apilan */
            padding: 0.5rem 0;
        }
        
        .sidebar-nav.is-active {
            display: flex; /* <-- La clase 'is-active' lo hará visible y en columna */
        }

        .sidebar-nav ul {
            flex-direction: column; /* Aseguramos que los ítems del menú se apilen */
            width: 100%;
        }
        
        .sidebar-nav a {
            text-align: center;
            border-bottom: 1px solid #34495e;
            border-left: none; /* Quitamos el borde izquierdo */
        }
    }



    /* Clase para contenedores que deben ocupar todo el ancho disponible */
    .container-full-width {
        max-width: none; /* Anula el límite de 700px */
    }

    /* Contenedor para tablas, permite scroll horizontal en móviles */
    .table-container {
        position: relative; /* Necesario para que z-index funcione */
        z-index: 2;         /* Un valor mayor a 1 lo pondrá por encima del contenido normal */
        background-color: #fff; /* Un fondo para asegurar que no sea transparente */
        padding: 1rem; /* Un poco de padding para que se vea mejor */
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .action-icon {
        display: inline-flex;
        padding: 0.5rem;
        border-radius: 50%;
        transition: background-color 0.2s;
    }
    .action-icon:hover {
        background-color: #ecf0f1;
    }
    .action-icon svg {
        color: var(--primary-color);
    }

    /* === Estilos para Navegación con Pestañas === */
    .nav-tabs {
        display: flex;
        border-bottom: 2px solid var(--border-color);
        margin-bottom: 1.5rem;
    }
    .tab-link {
        padding: 0.8rem 1.5rem;
        cursor: pointer;
        border: none;
        background: none;
        font-size: 1rem;
        border-bottom: 3px solid transparent;
    }
    .tab-link.active {
        font-weight: bold;
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
    }
    .tab-content {
        display: none; /* Oculto por defecto */
    }
    .tab-content.active {
        display: block; /* La clase active lo muestra */
    }

    /* === Estilos para el Logo en Formularios === */
    .form-logo-container {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .form-logo {
        max-width: 180px; /* Controla el tamaño máximo del logo en la página */
        height: auto;     /* Mantiene la proporción */
    }

    .form-header {
    text-align: center;
    margin-bottom: 2rem; /* Añade un espacio extra debajo del párrafo */
    }

    /* === Estilos para Dashboard de Monitoreo === */
    .charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 1.5rem;
    }
    .chart-container {
        background: #fff;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }
    .chart-container h4 {
        text-align: center;
        margin-bottom: 1rem;
    }


    /* === AJUSTES DE ESTILO PARA DATATABLES === */
    /* Estilo para el botón de exportación de DataTables */
    .dt-buttons .button-excel {
        background-color: var(--success-color) !important;
        color: white !important;
        border-radius: 4px;
        border: none;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }
    /* Alinea el contenedor de botones de DataTables a la derecha */
    div.dt-buttons {
        float: right;
        margin-left: 1rem; /* Añade un pequeño espacio a la izquierda del botón */
    }

    /* Contenedor de controles superiores de DataTables (Mostrar filas y Buscador) */
    .dt-layout-row:first-child {
        display: flex;
        justify-content: space-between; /* Separa los elementos a los extremos */
        align-items: center;
        margin-bottom: 1rem;
    }

    .dt-layout-row.dt-bottom {
        display: flex;
        justify-content: center; /* La clave: centra los elementos horizontalmente */
        align-items: center;     /* Centra los elementos verticalmente */
        gap: 2rem;               /* Añade un espacio entre el texto "Mostrando..." y los botones */
        margin-top: 10rem;        /* Un poco de espacio arriba */
    }

    /* Estilos para el selector de "Mostrar X filas" */
    .dt-length {
        text-align: left; /* Alinea el texto y el selector a la izquierda */
    }

    .dt-length select {
        width: 75px; /* Hacemos el menú desplegable más pequeño y compacto */
        display: inline-block; /* Permite que se alinee correctamente con el texto "Mostrar..." */
        margin: 0 0.5rem; /* Añade un pequeño espacio alrededor */
    }

    /* Estilos para el buscador "Filtrar" */
    .dt-search {
        text-align: right; /* Alinea el texto y el campo de búsqueda a la derecha */
    }









    /* Estilos para el formulario de filtro de fechas */
    .filter-form {
        display: flex; /* La clave: convierte el formulario en un contenedor flexible */
        align-items: flex-end; /* Alinea los elementos por su parte inferior */
        gap: 1rem; /* Crea un espacio entre los campos */
        flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea en pantallas pequeñas */
    }

    /* Ajuste para que los grupos de formulario no ocupen todo el ancho */
    .filter-form .form-group {
        flex-grow: 1; /* Permite que los campos crezcan y ocupen el espacio disponible */
    }

    /* Estilo unificado para botones y enlaces que parecen botones */
    .button, button {
        display: inline-block; /* Permite que el enlace tenga padding */
        cursor: pointer;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 2px;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        text-decoration: none; /* Quita el subrayado del enlace */
        transition: background-color 0.3s;
        background-color: var(--success-color); /* Color azul primario */
        color: white; /* Texto blanco */
    }

    .button:hover, button:hover {
        background-color: #0d75c5; /* Azul un poco más oscuro */
    }