/* public/css/style.css */

/* Variables de CSS para Bootstrap (tema claro) */
:root {
    --bs-primary: #3498db; /* Azul vibrante */
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    --bs-white: #fff;
    --bs-body-bg: #e9ecef; /* Fondo claro para el cuerpo */
    --bs-body-color: #212529; /* Color de texto oscuro */
    --bs-border-color: #dee2e6; /* Color de borde general */

    /* Colores personalizados para el tema */
    --app-primary: #3498db;
    --app-secondary: #6c757d;
    --app-background: #e9ecef;
    --app-foreground: #212529;
    --app-card-bg: #ffffff;
    --app-card-border: #dee2e6;
    --app-text-muted: #6c757d;

    /* Bordes redondeados */
    --app-border-radius: 0.75rem; /* Más redondeado */
}

/* Variables de CSS para Bootstrap (tema oscuro) */
.dark-mode {
    --bs-primary: #6ab0e7; /* Azul más claro para oscuro */
    --bs-secondary: #adb5bd;
    --bs-light: #495057;
    --bs-dark: #212529;
    --bs-body-bg: #343a40; /* Fondo oscuro para el cuerpo */
    --bs-body-color: #f8f9fa; /* Color de texto claro */
    --bs-border-color: #495057; /* Color de borde oscuro */

    /* Colores personalizados para el tema oscuro */
    --app-primary: #6ab0e7;
    --app-secondary: #adb5bd;
    --app-background: #343a40;
    --app-foreground: #f8f9fa;
    --app-card-bg: #212529;
    --app-card-border: #495057;
    --app-text-muted: #adb5bd;
}

body {
    background-color: var(--app-background);
    color: var(--app-foreground);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.card {
    background-color: var(--app-card-bg);
    border-color: var(--app-card-border);
    border-radius: var(--app-border-radius);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    border-radius: var(--app-border-radius);
}
.btn-primary:hover {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    filter: brightness(90%); /* Hace que el color sea un 10% más oscuro en hover */
}

.btn-secondary {
    background-color: var(--app-secondary);
    border-color: var(--app-secondary);
    border-radius: var(--app-border-radius);
}
.btn-secondary:hover {
    background-color: var(--app-secondary);
    border-color: var(--app-secondary);
    filter: brightness(90%); /* Hace que el color sea un 10% más oscuro en hover */
}

.form-control, .form-select {
    border-color: var(--app-card-border);
    background-color: var(--app-card-bg);
    color: var(--app-foreground);
    border-radius: var(--app-border-radius);
}
.form-control:focus, .form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-rgb), .25); /* Not perfect, requires JS for rgb conversion */
}

/* Navbar */
.navbar {
    background-color: var(--app-card-bg);
    border-bottom: 1px solid var(--app-card-border);
    border-radius: 0 0 var(--app-border-radius) var(--app-```css
border-radius) var(--app-border-radius); /* Redondeado solo abajo */
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.navbar-brand, .nav-link {
    color: var(--app-foreground);
}
.navbar-brand:hover, .nav-link:hover {    color: var(--app-primary);
}

.text-muted {
    color: var(--app-text-muted) !important;
}

/* Bordes redondeados para elementos comunes de Bootstrap */
.rounded-app {
    border-radius: var(--app-border-radius) !important;
}

.modal-content, .dropdown-menu {
    border-radius: var(--app-border-radius);
    background-color: var(--app-card-bg);
    border-color: var(--app-card-border);
}

/* Clases contenedoras responsivas para tablas de datos pesadas */
.table-responsive-md { /* O puedes usar .table-responsive si necesitas para todas las pantallas */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Asegurar que los contenedores responsivos funcionen en modo oscuro */
.dark-mode .table-responsive {
    background-color: var(--app-card-bg);
    color: var(--app-foreground);
    border-color: var(--app-card-border);
}

/* Personalización del interruptor de tema */
#theme-toggle-button {
    background-color: transparent;
    border: none;
    color: var(--app-foreground);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
#theme-toggle-button:hover {
    color: var(--app-primary);
}

/* Estilos para el footer */
.app-footer {
    background-color: var(--app-card-bg);
    border-top: 1px solid var(--app-card-border);
    border-radius: var(--app-border-radius) var(--app-border-radius) 0 0; /* Redondeado solo arriba */
    padding: 1rem 0;
    margin-top: auto; /* Empuja el footer hacia abajo */
    box-shadow: 0 -2px 4px rgba(0,0,0,.03);
}

/* Ajustes para encabezados */
h1, h2, h3, h4, h5, h6 {
    color: var(--app-foreground);
}

/* Estilos para el modal de visualización de documentos */
#documentViewerModal .modal-content {
    background-color: var(--app-card-bg);
    border-color: var(--app-card-border);
}

#documentViewerModal .modal-header {
    border-bottom: 1px solid var(--app-card-border);
}

#documentViewerModal .modal-footer {
    border-top: 1px solid var(--app-card-border);
}

.h-document-viewer {
    height: 80vh; /* Ocupa la mayor parte de la altura del viewport */
}

.mw-100 {
    max-width: 100%;
}

.mh-document-viewer {
    max-height: 80vh; /* Asegura que las imágenes no desborden */
}

/* Responsive adjustments for modal */
@media (max-width: 767.98px) {
    .h-document-viewer {
        height: 70vh; /* Ajuste para pantallas más pequeñas */
    }
    .mh-document-viewer {
        max-height: 70vh;
    }
}