/* Variables globales del sistema */
:root {
    /* Colores principales */
    --primary-color: #0099DC;
    --primary-hover: #007BB1;
    --secondary-color: #707070;
    --secondary-hover: #5a5a5a;
    --accent-color: #28a745;
    --text-color: #404040;
    --light-text: #707070;
    --background-color: #f9f9f9;
    --white: #ffffff;
    --border-color: #ced4da;
    --border-light: #f1f1f1;
    
    /* Colores adicionales del sistema */
    --danger-color: #dc3545;
    --danger-dark: #D50F2E;
    --success-color: #2FAC66;
    --warning-color: #F7931E;
    --info-color: #FFD23F;
    --orange-color: #FF6E06;
    --blue-light: #3b82f6;
    --gray-light: #F1F1F1;
    --gray-medium: #6c757d;
    --gray-dark: #6b7280;
    --gray-border: #dee2e6;
    --gray-placeholder: #6c757d;
    --gray-background: #f8f9fa;
    --primary-light: #ECF6FA;
    --primary-focus-shadow: rgba(0, 153, 220, 0.25);
    
    /* Dimensiones */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 64px;
    --header-height: 60px;
    
    /* Espaciado */
    --padding-sm: 10px;
    --padding-md: 20px;
    --padding-lg: 30px;
    --margin-sm: 5px;
    --margin-md: 10px;
    --margin-lg: 20px;
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-micro: 0.15s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Escalas para micro interacciones */
    --scale-hover: 1.02;
    --scale-active: 0.98;
    
     /* Sombras */
    --shadow-light: 0 0 4px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 4px 10px rgba(0, 0, 0, 0.15);
    
    /* Bordes redondeados */
    --border-radius-sm: 3px;
    --border-radius-md: 5px;
    --border-radius-lg: 10px;
    --border-radius-btn: 4px;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 100vh;
    overflow-x: hidden;
}

/* Estilos de scrollbar para modo claro */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
    border: 3px solid var(--background-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-medium);
}

::-webkit-scrollbar-corner {
    background: var(--background-color);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--background-color);
}

/* Panel izquierdo con imagen de fondo */
.left-panel {
    background-image: url('/static/img/bg-login.jpg');
    background-position: center;
    background-size: cover;
    height: 100vh;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    mix-blend-mode: multiply;
}

/* Contenedor del formulario de login */
.login-form-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 2rem;
    background-color: var(--white);
}

.login-form-wrapper {
    width: 100%;
    max-width: 450px;
    padding: 2rem;
}

.logo-mobile img {
    max-width: 180px;
    height: auto;
}

/* Estilos del formulario */
.login-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--light-text);
    margin-bottom: 1.5rem;
}

.form-label {
    color: var(--text-color);
}

.input-group-text {
    background-color: var(--white);
    border-right: none;
    color: var(--text-color);
}

.form-control {
    border-left: none;
}

/* Estilos globales del Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--white);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    border-right: 1px solid var(--border-light);
    z-index: 9999;
    box-shadow: var(--shadow-light);
    transition: var(--transition-normal);
}

.sidebar-logo {
    padding: var(--padding-md);
    padding-right: 10px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    gap: 8px;
}

.sidebar-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex: 1;
    min-width: 0;
}

/* Botón colapsar sidebar (solo desktop) */
.sidebar-collapse-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-normal);
    flex-shrink: 0;
    line-height: 1;
    font-size: 1rem;
}

.sidebar-collapse-btn:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

@media (min-width: 769px) {
    .sidebar-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Estado colapsado (solo icono, 64px) — SOLO DESKTOP ── */
@media (min-width: 769px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed-width);
        overflow: hidden;
    }

    body.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }

    body.sidebar-collapsed .seismic-footer {
        left: var(--sidebar-collapsed-width);
        width: calc(100% - var(--sidebar-collapsed-width));
    }

    /* Logo: ocultar imagen, centrar botón */
    body.sidebar-collapsed .sidebar-logo {
        justify-content: center;
        padding: var(--padding-sm);
        gap: 0;
    }

    body.sidebar-collapsed .sidebar-logo-img {
        display: none;
    }

    /* Botón flecha apunta hacia la derecha (expand) */
    body.sidebar-collapsed .sidebar-collapse-btn i {
        transform: rotate(180deg);
    }

    /* Ocultar etiquetas de texto y chevrons */
    body.sidebar-collapsed .sidebar-menu .nav-label {
        display: none;
    }

    body.sidebar-collapsed .sidebar-chevron {
        display: none;
    }

    /* Ocultar submenús */
    body.sidebar-collapsed .sidebar-submenu {
        display: none !important;
    }

    /* Centrar iconos */
    body.sidebar-collapsed .sidebar-menu a,
    body.sidebar-collapsed .sidebar-menu-toggle {
        justify-content: center;
        padding: var(--padding-sm);
        border-left: 3px solid transparent;
    }

    body.sidebar-collapsed .sidebar-menu a.active,
    body.sidebar-collapsed .sidebar-menu-toggle.active {
        border-left-color: var(--primary-color);
    }

    body.sidebar-collapsed .sidebar-menu a i,
    body.sidebar-collapsed .sidebar-menu-toggle i:first-child {
        margin-right: 0;
        width: auto;
    }

    /* Ocultar user menu y theme toggle en sidebar colapsado */
    body.sidebar-collapsed .sidebar .dropdown,
    body.sidebar-collapsed .sidebar .theme-toggle-btn {
        display: none !important;
    }

    /* ── Hover-expand cuando está colapsado ── */
    /* transition: none en hover = expansión instantánea.
       Al salir del hover, el navegador usa la transition del estado base (.sidebar),
       por lo que el colapso sí se anima suavemente (0.3s).
       Esto evita que el mouse "pierda" el sidebar mientras el ancho está animando. */
    body.sidebar-collapsed .sidebar:hover {
        width: var(--sidebar-width);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
        transition: none;
    }

    /* Restaurar logo */
    body.sidebar-collapsed .sidebar:hover .sidebar-logo {
        justify-content: space-between;
        padding: var(--padding-md);
        padding-right: 10px;
        gap: 8px;
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-logo-img {
        display: block;
    }

    /* Restaurar labels y chevrons */
    body.sidebar-collapsed .sidebar:hover .nav-label {
        display: inline;
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-chevron {
        display: inline-block;
    }

    /* Restaurar alineación de items */
    body.sidebar-collapsed .sidebar:hover .sidebar-menu a,
    body.sidebar-collapsed .sidebar:hover .sidebar-menu-toggle {
        justify-content: flex-start;
        padding: var(--padding-sm) var(--padding-md);
    }

    /* Restaurar indentación de submenús */
    body.sidebar-collapsed .sidebar:hover .sidebar-submenu a {
        padding-left: calc(var(--padding-md) + 20px);
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-menu a i,
    body.sidebar-collapsed .sidebar:hover .sidebar-menu-toggle i:first-child {
        margin-right: var(--margin-md);
        width: 20px;
    }

    /* Mostrar submenús abiertos o en animación Bootstrap */
    body.sidebar-collapsed .sidebar:hover .sidebar-submenu.show,
    body.sidebar-collapsed .sidebar:hover .sidebar-submenu.collapsing {
        display: block !important;
    }

    /* Padre activo cuando un hijo está activo (modo colapsado) */
    body.sidebar-collapsed .sidebar-menu-item:has(.sidebar-submenu a.active) > .sidebar-menu-toggle {
        background-color: var(--background-color);
        border-left-color: var(--primary-color);
    }

    body.sidebar-collapsed .sidebar-menu-item:has(.sidebar-submenu a.active) > .sidebar-menu-toggle i:first-child {
        color: var(--primary-color);
    }

    /* Sin animaciones en los elementos internos al hacer hover-expand */
    body.sidebar-collapsed .sidebar:hover .sidebar-menu a,
    body.sidebar-collapsed .sidebar:hover .sidebar-menu-toggle,
    body.sidebar-collapsed .sidebar:hover .sidebar-chevron {
        transition: none !important;
    }
}

.sidebar-menu {
    padding: 0;
    list-style: none;
    margin-top: var(--margin-lg);
}

/* Estilo unificado para todos los elementos del menú */
.sidebar-menu > li {
    margin-bottom: var(--margin-sm);
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition-normal);
    border-left: 3px solid transparent;
}

.sidebar-menu a:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.sidebar-menu a.active {
    background-color: var(--background-color) !important;
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 500;
}

.sidebar-menu a i {
    margin-right: var(--margin-md);
    width: 20px;
    text-align: center;
}

.sidebar-menu a:hover i {
    color: var(--primary-color);
}

.sidebar-menu a.active i {
    color: var(--primary-color);
}

.sidebar-menu-toggle {
    display: flex;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition-normal);
    border-left: 3px solid transparent;
    cursor: pointer;
    user-select: none;
}

.sidebar-menu-toggle:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.sidebar-menu-toggle:hover i {
    color: var(--primary-color);
}

.sidebar-menu-toggle:hover span {
    color: var(--primary-color);
}

.sidebar-menu-toggle span {
    flex: 1;
}

/* Padre activo cuando un hijo del submenú está activo */
.sidebar-menu-item:has(.sidebar-submenu a.active) > .sidebar-menu-toggle {
    background-color: var(--background-color);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.sidebar-menu-item:has(.sidebar-submenu a.active) > .sidebar-menu-toggle i {
    color: var(--primary-color);
}

.sidebar-chevron {
    margin-right: 0 !important;
    margin-left: auto;
    transition: transform var(--transition-normal);
    font-size: 0.875rem;
}

.sidebar-menu-toggle[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-menu-toggle[aria-expanded="false"] .sidebar-chevron {
    transform: rotate(0deg);
}

/* Estilos para submenús */
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-submenu > li {
    margin-bottom: var(--margin-sm);
}

.sidebar-submenu a {
    display: flex;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    padding-left: calc(var(--padding-md) + 20px);
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition-normal);
    font-size: 0.9rem;
    border-left: none !important;
}

.sidebar-submenu a:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
    border-left: none !important;
}

.sidebar-submenu a:hover i {
    color: var(--primary-color);
}

.sidebar-submenu a.active {
    background-color: var(--background-color) !important;
    color: var(--primary-color);
    font-weight: 500;
    border-left: none !important;
}

.sidebar-submenu a.active i {
    color: var(--primary-color);
}

.sidebar-submenu a i {
    margin-right: var(--margin-md);
    width: 20px;
    text-align: center;
}

/* Estilos globales del contenido principal */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--background-color);
    transition: var(--transition-normal);
}

.header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding-md);
    background-color: var(--white);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    gap: 16px;
    border-radius: var(--border-radius-lg);
}

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 12px;
}

.header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
}

.header h1 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
    color: var(--text-color);
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Estilos para el botón toggle mobile */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-right: 12px;
}

.mobile-toggle:hover {
    background-color: var(--gray-light);
    color: var(--primary-color);
}

/* Estilos para el menú de usuario */
.user-menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: 38px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.user-menu-button:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.user-menu-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.user-menu-button i {
    font-size: 1.2rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.user-menu-button:hover i {
    transform: scale(1.1);
}

.user-menu-button span {
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
}

/* Botón de toggle de tema (sol/luna) */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    position: relative;
}

.theme-toggle-btn:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

.theme-toggle-btn i {
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.theme-icon-dark {
    color: var(--text-color);
    display: block;
}

.theme-icon-light {
    color: var(--text-color);
    display: none;
    position: absolute;
}

body.dark-mode .theme-icon-dark {
    display: none;
}

body.dark-mode .theme-icon-light {
    display: block;
}

/* Dropdown del usuario */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px !important;
    min-width: 200px;
    animation: fadeInDown 0.3s ease;
    position: absolute !important;
    top: 100% !important;
    z-index: 1050;
    transform: none !important;
}

/* Dropdown en el sidebar */
.sidebar .dropdown-menu {
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

/* Theme toggle en sidebar */
.sidebar .theme-toggle-btn {
    width: 100%;
    height: 44px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 8px;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    transform: translateX(2px);
}

.dropdown-item i {
    font-size: 1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.dropdown-item span {
    white-space: nowrap;
}

.dropdown-item:hover i {
    transform: scale(1.1);
}

/* Selector de reportes mejorado */
.header .form-select {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    padding-right: 40px;
    height: 38px;
    font-size: 0.9rem;
    background-color: var(--white);
    color: var(--text-color);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23707070' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.header .form-select:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.header .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-focus-shadow);
    outline: none;
}

/* Estilos globales para todos los select */
.form-select,
select {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    background-color: var(--white);
    color: var(--text-color);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-select:hover,
select:hover {
    border-color: var(--primary-color);
}

.form-select:focus,
select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow);
    outline: none;
}

.form-select option,
select option {
    background-color: var(--white);
    color: var(--text-color);
}

/* Contenedor de botones del header */
.btns_header {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Modal Styles */
/*Estos son los estilos del modal /* Modal Styles */
.modal-content {
    width: 100%;
    max-width: 600px; /* Aumentar el ancho máximo */
    border-radius: 8px;
    border: none;
    box-shadow: var(--shadow-heavy);
}

.modal-header {
    padding: 20px 24px 0px;
    border: none;
}

.modal-title {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.modal-body {
    padding: 16px 16px 0px 16px;
}

.modal-footer {
    padding: 16px 24px;
    border: none;
    gap: 12px;
}

/*End style modal*/

/*Icon delete modal*/
.icon-wrap {
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  background-color: #c43f4515;
  justify-content: center;
}

.modal-backdrop {
    /* Backdrop must be above the sidebar so it covers it when modal opens */
    z-index: 10000 !important;
}

.modal {
    /* Ensure the modal dialog itself is above the backdrop and sidebar */
    z-index: 10001 !important;
}

.icon-wrap i {
  font-size: 28px;
  color: #DC3545;
}

.icon-circle {
  display: block;
}
/*End style icon delete modal*/

/* ============================================
   COMPONENTES GLOBALES (Spinner, Empty State)
   ============================================ */

/* Spinner estándar del sistema */
.spinner-border {
    color: var(--primary-color) !important;
}

.loading-standard {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.loading-container .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.25em;
}

.loading-container .loading-text {
    margin-top: 1rem;
    color: var(--light-text);
    font-size: 0.95rem;
    font-weight: 400;
}

/* Estado vacío estándar del sistema */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
}

.empty-state-container i {
    font-size: 3.5rem;
    color: var(--gray-medium);
    margin-bottom: 1rem;
    opacity: 0.8;
}

.empty-state-container p {
    color: var(--light-text);
    font-size: 1rem;
    margin: 0;
}

.active>.page-link, .page-link.active {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* Responsive header adjustments - Tablet */
@media (max-width: 992px) {
    .header {
        padding: 0 var(--padding-sm);
        gap: 12px;
    }
    
    .header h1 {
        font-size: 1.3rem;
        max-width: 300px;
    }
    
    .header-right {
        gap: 8px;
    }
    
    .btns_header {
        gap: 8px;
    }
    
    .header .form-select {
        min-width: 180px;
        max-width: 220px;
        font-size: 0.85rem;
    }
    
    .user-menu-button span {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Responsive header adjustments - Mobile */
@media (max-width: 768px) {
    .header {
        height: auto;
        min-height: var(--header-height);
        padding: var(--padding-sm);
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .header-left {
        width: 100%;
        flex: none;
    }
    
    .header-right {
        width: 100%;
        flex: none;
    }
    
    .header h1 {
        font-size: 1.2rem;
        max-width: calc(100% - 50px);
    }
    
    .btns_header {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px !important;
    }
    
    .btns_header > div:first-child {
        flex: 1 1 auto;
        order: 1;
        min-width: 0;
        max-width: calc(100% - 60px);
    }
    
    .btns_header > div:first-child form {
        width: 100%;
        min-width: 0;
    }
    
    .theme-toggle-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        order: 2;
    }
    
    .btns_header > div.dropdown {
        flex: 1 1 100%;
        min-width: 0;
        order: 3;
        margin-top: 0;
    }
    
    .header .form-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 0.875rem;
    }
    
    .header .form-select-sm {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        padding-left: 0.75rem;
        font-size: 0.875rem;
    }
    
    .mobile-toggle {
        display: block;
        flex-shrink: 0;
    }
    
    .user-menu-button {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 16px;
        height: auto;
        min-height: 44px;
        flex: 1;
    }
    
    .user-menu-button i {
        font-size: 1.3rem;
        flex-shrink: 0;
    }
    
    .user-menu-button span {
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dropdown-menu {
        width: 100%;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 8px !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .header {
        padding: 8px;
        gap: 8px;
    }
    
    .header-left {
        gap: 8px;
    }
    
    .header-right {
        gap: 6px;
    }
    
    .header h1 {
        font-size: 1rem;
        max-width: calc(100% - 45px);
    }
    
    .header .form-select,
    .header .form-select-sm {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        padding-left: 0.75rem;
        font-size: 0.875rem;
    }
    
    .btns_header {
        gap: 6px !important;
    }
    
    .btns_header > div:first-child {
        max-width: calc(100% - 50px);
    }
    
    .btns_header > div:first-child form {
        width: 100%;
        min-width: 0;
    }
    
    .theme-toggle-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .theme-toggle-btn i {
        font-size: 1.1rem;
    }
    
    .user-menu-button {
        font-size: 0.9rem;
        padding: 8px 12px;
        min-height: 40px;
    }
    
    .user-menu-button i {
        font-size: 1.2rem;
    }
    
    .user-menu-button span {
        font-size: 0.85rem;
        max-width: 100px;
    }
}

.user-info {
    display: flex;
    align-items: center;
    color: var(--secondary-color);
}



.user-details {
    display: flex;
    align-items: center;
}





.form-control:focus {
    box-shadow: none;
    border-color: var(--border-color);
}

.forgot-password {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.875rem;
}

.forgot-password:hover {
    text-decoration: underline;
}

.toggle-password {
    border-left: none;
    background-color: var(--white);
    color: var(--secondary-color);
    border-radius: 0 var(--border-radius-btn) var(--border-radius-btn) 0;
}

.toggle-password:hover {
    background-color: var(--white);
    color: var(--text-color);
}

/* Estilos globales para todos los botones */
.btn {
    border-radius: var(--border-radius-btn) !important;
}

.btn-close {
    border-radius: var(--border-radius-btn) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.btn-primary:hover, 
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--white) !important;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
    color: var(--white) !important;
}

/* ============================================
   MICRO INTERACCIONES PARA BOTONES
   ============================================ */

/* Ripple effect para botones principales */
.btn-primary,
.btn-secondary {
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-micro), background-color var(--transition-fast), border-color var(--transition-fast);
}

/* Ripple effect usando ::after pseudo-elemento */
.btn-primary::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width var(--transition-smooth), height var(--transition-smooth), opacity var(--transition-smooth);
    opacity: 0;
    pointer-events: none;
}

.btn-primary:active::after,
.btn-secondary:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

/* Scale feedback en :active para feedback táctil */
.btn-primary:active,
.btn-secondary:active {
    transform: scale(var(--scale-active));
}

/* Hover scale sutil (opcional, solo si no interfiere con otros estilos) */
.btn-primary:hover:not(:active),
.btn-secondary:hover:not(:active) {
    transform: scale(var(--scale-hover));
}

/* Icon animations en botones con iconos */
.btn i,
.btn [class*="icon"] {
    transition: transform var(--transition-normal), color var(--transition-fast);
    display: inline-block;
}

/* Rotación suave para iconos de refresh/reload */
.btn i.fa-sync,
.btn i.fa-sync-alt,
.btn i.fa-refresh,
.btn i.fa-redo,
.btn i.fa-rotate-right,
.btn [class*="refresh"],
.btn [class*="reload"] {
    transition: transform var(--transition-normal);
}

.btn:hover i.fa-sync,
.btn:hover i.fa-sync-alt,
.btn:hover i.fa-refresh,
.btn:hover i.fa-redo,
.btn:hover i.fa-rotate-right,
.btn:hover [class*="refresh"],
.btn:hover [class*="reload"] {
    transform: rotate(90deg);
}

/* Animación de rotación continua cuando está cargando */
.btn.loading i.fa-sync,
.btn.loading i.fa-sync-alt,
.btn.loading i.fa-refresh,
.btn.loading i.fa-redo,
.btn.loading i.fa-rotate-right,
.btn.loading [class*="refresh"],
.btn.loading [class*="reload"] {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Slide-in animation para iconos en dropdowns cuando se expanden */
.btn[data-bs-toggle="dropdown"] i.fa-chevron-down,
.btn[data-bs-toggle="dropdown"] i.fa-chevron-up,
.btn[aria-expanded="true"] i.fa-chevron-down,
.btn[aria-expanded="true"] i.fa-chevron-up {
    transition: transform var(--transition-normal);
}

.btn[aria-expanded="true"] i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Respetar prefers-reduced-motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-secondary,
    .btn-primary::after,
    .btn-secondary::after,
    .btn i,
    .btn [class*="icon"] {
        transition: none;
        animation: none;
    }
    
    .btn-primary:active,
    .btn-secondary:active {
        transform: none;
    }
    
    .btn-primary:hover:not(:active),
    .btn-secondary:hover:not(:active) {
        transform: none;
    }
    
    .btn.loading i.fa-sync,
    .btn.loading i.fa-sync-alt,
    .btn.loading i.fa-refresh,
    .btn.loading i.fa-redo,
    .btn.loading i.fa-rotate-right,
    .btn.loading [class*="refresh"],
    .btn.loading [class*="reload"] {
        animation: none;
    }
}

/* ============================================
   ESTILOS COMUNES PARA BOTONES DE PDF
   ============================================ */
#download-pdf-btn,
#generateReportBtn,
#download-report-btn {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
    position: relative;
    overflow: hidden;
}

#download-pdf-btn::after,
#generateReportBtn::after,
#download-report-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width var(--transition-smooth), height var(--transition-smooth), opacity var(--transition-smooth);
    opacity: 0;
    pointer-events: none;
}

#download-pdf-btn:active::after,
#generateReportBtn:active::after,
#download-report-btn:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

#download-pdf-btn:hover,
#generateReportBtn:hover,
#download-report-btn:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
    transform: scale(var(--scale-hover));
}

#download-pdf-btn:active,
#generateReportBtn:active,
#download-report-btn:active {
    transform: scale(var(--scale-active));
}

#download-pdf-btn:disabled,
#generateReportBtn:disabled,
#download-report-btn:disabled {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #ffffff !important;
    cursor: not-allowed;
    opacity: 1;
}

#download-pdf-btn i,
#generateReportBtn i,
#download-report-btn i {
    font-size: 16px;
}

/* Modo oscuro para botones de PDF */
body.dark-mode #download-pdf-btn,
body.dark-mode #generateReportBtn,
body.dark-mode #download-report-btn {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

body.dark-mode #download-pdf-btn:hover,
body.dark-mode #generateReportBtn:hover,
body.dark-mode #download-report-btn:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
}

body.dark-mode #download-pdf-btn:disabled,
body.dark-mode #generateReportBtn:disabled,
body.dark-mode #download-report-btn:disabled {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #ffffff !important;
}


/* Estilos globales para inputs de texto */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
textarea {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    background-color: var(--white);
    color: var(--text-color);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    transition: all 0.2s ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
textarea:hover {
    border-color: var(--primary-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow);
    outline: none;
}

/* Estilos para checkboxes y radios */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--primary-color);
}

.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow);
    outline: none;
}

.login-btn {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 0.75rem 1rem;
    font-weight: 500;
    margin-top: 1rem;
    transition: var(--transition-normal);
    border-radius: var(--border-radius-btn);
    position: relative;
    overflow: hidden;
}

.login-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width var(--transition-smooth), height var(--transition-smooth), opacity var(--transition-smooth);
    opacity: 0;
    pointer-events: none;
}

.login-btn:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

.login-btn:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px) scale(var(--scale-hover));
    box-shadow: var(--shadow-medium);
}

.login-btn:active {
    transform: translateY(0) scale(var(--scale-active));
    box-shadow: var(--shadow-light);
}

.register-text {
    color: var(--light-text);
    font-size: 0.9rem;
}

.register-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.register-link:hover {
    text-decoration: underline;
}
.login-title  {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0;
}

.logo-sm {
    width: 300px;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .login-form-container {
        padding: 1rem;
    }
    
    .login-form-wrapper {
        padding: 1.5rem;
    }
    
    .login-title {
        font-size: 1.75rem;
    }

    .logo-sm{
        width: 250px;
        height: auto;
        margin-bottom: 20px;
    }
}

/* Ocultar selector de usuario en tablet y mobile (<= 992px) */
@media (max-width: 992px) {
    .btns_header > div.dropdown {
        display: none !important;
    }
}

/* ============================================
   MODO OSCURO Y BRANDING DINÁMICO
   ============================================ */

/* Variables para modo oscuro */
body.dark-mode,
html.dark-mode {
    --background-color: #1a1a1a;
    --white: #2d2d2d;
    --text-color: #e0e0e0;
    --light-text: #b0b0b0;
    --border-color: #404040;
    --border-light: #333333;
    --gray-light: #2d2d2d;
    --gray-medium: #808080;
    --gray-dark: #707070;
    --gray-border: #404040;
    --gray-placeholder: #808080;
    --gray-background: #252525;
    --primary-light: #1a3a4a;
    --shadow-light: 0 0 4px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Aplicar modo oscuro también al html */
html.dark-mode body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Aplicar modo oscuro a elementos específicos */
body.dark-mode .sidebar {
    background-color: var(--white) !important;
    border-right-color: var(--border-light) !important;
}

body.dark-mode .sidebar-logo {
    border-bottom-color: var(--border-light) !important;
}

body.dark-mode .sidebar-menu a {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-menu a:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-menu a.active {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-menu-toggle {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-menu-toggle:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-menu-item:has(.sidebar-submenu a.active) > .sidebar-menu-toggle {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-left-color: var(--primary-color) !important;
}

body.dark-mode .sidebar-menu-item:has(.sidebar-submenu a.active) > .sidebar-menu-toggle i {
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-submenu a {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-submenu a:hover {
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-submenu a.active {
    color: var(--primary-color) !important;
}

/* Íconos del sidebar en modo oscuro */
body.dark-mode .sidebar-menu a i {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-menu a:hover i {
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-menu a.active i {
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-menu-toggle i {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-menu-toggle:hover i {
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-menu-toggle:hover span {
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-submenu a i {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-submenu a:hover i {
    color: var(--primary-color) !important;
}

body.dark-mode .sidebar-submenu a.active i {
    color: var(--primary-color) !important;
}

body.dark-mode .header {
    background-color: var(--white) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .header h1 {
    color: var(--text-color) !important;
}

body.dark-mode .mobile-toggle {
    color: var(--text-color) !important;
}

body.dark-mode .mobile-toggle:hover {
    background-color: var(--gray-background) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .user-menu-button {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

body.dark-mode .user-menu-button:hover {
    background-color: var(--gray-light) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .user-menu-button i {
    color: var(--primary-color) !important;
}

body.dark-mode .user-menu-button span {
    color: var(--text-color) !important;
}

body.dark-mode .theme-toggle-btn {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

body.dark-mode .theme-toggle-btn:hover {
    background-color: var(--gray-light) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .dropdown-menu {
    background-color: var(--white) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .dropdown-item {
    color: var(--text-color) !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .header .form-select {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

body.dark-mode .header .form-select:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

body.dark-mode .header .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-focus-shadow) !important;
}

body.dark-mode .main-content {
    background-color: var(--background-color) !important;
}

body.dark-mode .card {
    background-color: var(--white) !important;
    border-color: var(--border-light) !important;
    color: var(--text-color) !important;
    border-radius: var(--border-radius-lg) !important;
    overflow: hidden;
}

body.dark-mode .card-body {
    background-color: var(--white) !important;
    color: var(--text-color) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode select,
body.dark-mode option {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode select:focus {
    background-color: var(--gray-background) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
    color: var(--gray-placeholder) !important;
}

body.dark-mode .dropdown-menu {
    background-color: var(--white) !important;
    border-color: var(--border-light) !important;
}

body.dark-mode .dropdown-item {
    color: var(--text-color) !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--gray-background) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .dropdown-toggle {
    color: var(--text-color) !important;
}

body.dark-mode .dropdown-divider {
    border-top-color: var(--border-light) !important;
}

body.dark-mode .modal-content {
    background-color: var(--white) !important;
    color: var(--text-color) !important;
}

body.dark-mode .modal-header {
    border-bottom-color: var(--border-light) !important;
    background-color: var(--white) !important;
}

body.dark-mode .modal-body {
    background-color: var(--white) !important;
    color: var(--text-color) !important;
}

body.dark-mode .modal-footer {
    border-top-color: var(--border-light) !important;
    background-color: var(--white) !important;
}

body.dark-mode .modal-title {
    color: var(--text-color) !important;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .alert {
    background-color: var(--white) !important;
    border-color: var(--border-light) !important;
    color: var(--text-color) !important;
}

body.dark-mode .table {
    color: var(--text-color);
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--gray-background);
}

body.dark-mode .pagination .page-link {
    background-color: var(--white);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .pagination .page-link:hover {
    background-color: var(--gray-background);
    color: var(--primary-color);
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .login-form-container {
    background-color: var(--white);
}

body.dark-mode .login-form-wrapper {
    background-color: transparent;
    border-radius: var(--border-radius-lg);
}

/* ============================================
   ESTILOS COMPLETOS DE MODO OSCURO
   ============================================ */

/* Textos y tipografía */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-color);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode label,
body.dark-mode small {
    color: var(--text-color);
}

body.dark-mode .text-muted {
    color: var(--light-text) !important;
}

body.dark-mode .text-secondary {
    color: var(--light-text) !important;
}

/* Botones primarios/secundarios: en modo oscuro --white es gris; forzar texto e iconos blancos */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active,
body.dark-mode .btn-primary i,
body.dark-mode .btn-secondary,
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus,
body.dark-mode .btn-secondary:active,
body.dark-mode .btn-secondary i {
    color: #ffffff !important;
}

body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus,
body.dark-mode .btn-outline-primary:active,
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-secondary:active {
    color: #ffffff !important;
}

body.dark-mode .btn-danger,
body.dark-mode .btn-danger i,
body.dark-mode .btn-success,
body.dark-mode .btn-success i,
body.dark-mode .btn-warning,
body.dark-mode .btn-warning i {
    color: #ffffff !important;
}

/* Botones outline en modo oscuro */
body.dark-mode .btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus,
body.dark-mode .btn-outline-primary:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

body.dark-mode .btn-outline-secondary {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    background-color: transparent;
}

body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-secondary:active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--white) !important;
}

body.dark-mode .btn-link {
    color: var(--primary-color);
}

body.dark-mode .btn-link:hover {
    color: var(--primary-hover);
}

body.dark-mode .btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--white);
}

body.dark-mode .btn-danger:hover {
    background-color: var(--danger-dark) !important;
    border-color: var(--danger-dark) !important;
}

body.dark-mode .btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--white);
}

body.dark-mode .btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--white);
}

/* Inputs y formularios - Todos los tipos */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="search"],
body.dark-mode textarea {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode input[type="time"]:focus,
body.dark-mode input[type="datetime-local"]:focus,
body.dark-mode input[type="search"]:focus,
body.dark-mode textarea:focus {
    background-color: var(--gray-background) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important;
}

body.dark-mode input[type="text"]::placeholder,
body.dark-mode input[type="email"]::placeholder,
body.dark-mode input[type="password"]::placeholder,
body.dark-mode input[type="number"]::placeholder,
body.dark-mode input[type="search"]::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--gray-placeholder) !important;
}

body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    background-color: var(--gray-background);
    border-color: var(--border-color);
}

body.dark-mode input[type="checkbox"]:checked,
body.dark-mode input[type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .input-group-text {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .toggle-password {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .toggle-password:hover {
    background-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Tablas - Estilos completos y específicos para modo oscuro */
body.dark-mode .table,
body.dark-mode table {
    color: var(--text-color) !important;
    background-color: var(--white) !important;
}

body.dark-mode .table thead,
body.dark-mode table thead {
    background-color: var(--gray-background) !important;
}

body.dark-mode .table thead th,
body.dark-mode table thead th,
body.dark-mode .table th,
body.dark-mode table th {
    background-color: var(--gray-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .table tbody,
body.dark-mode table tbody {
    background-color: var(--white) !important;
}

body.dark-mode .table tbody td,
body.dark-mode table tbody td,
body.dark-mode .table td,
body.dark-mode table td {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    background-color: var(--white) !important;
}

body.dark-mode .table tbody tr,
body.dark-mode table tbody tr,
body.dark-mode .table tr,
body.dark-mode table tr {
    background-color: var(--white) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th,
body.dark-mode table tbody tr:nth-child(odd) td,
body.dark-mode table tbody tr:nth-child(odd) th {
    background-color: var(--gray-background) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > th,
body.dark-mode table tbody tr:nth-child(even) td,
body.dark-mode table tbody tr:nth-child(even) th {
    background-color: var(--white) !important;
}

body.dark-mode .table-hover > tbody > tr:hover > td,
body.dark-mode .table-hover > tbody > tr:hover > th,
body.dark-mode table tbody tr:hover td,
body.dark-mode table tbody tr:hover th {
    background-color: var(--gray-background) !important;
    color: var(--text-color) !important;
}

body.dark-mode .table-bordered {
    border-color: var(--border-color) !important;
}

body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
    border-color: var(--border-color) !important;
}

/* Badges */
body.dark-mode .badge {
    color: var(--white);
}

body.dark-mode .badge.bg-primary {
    background-color: var(--primary-color) !important;
}

body.dark-mode .badge.bg-secondary {
    background-color: var(--secondary-color) !important;
}

body.dark-mode .badge.bg-success {
    background-color: var(--success-color) !important;
}

body.dark-mode .badge.bg-danger {
    background-color: var(--danger-color) !important;
}

body.dark-mode .badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: var(--text-color) !important;
}

/* Cards y contenedores */
body.dark-mode .card-header {
    background-color: var(--gray-background) !important;
    border-bottom-color: var(--border-light) !important;
    color: var(--text-color) !important;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}

body.dark-mode .card-footer {
    background-color: var(--gray-background) !important;
    border-top-color: var(--border-light) !important;
    color: var(--text-color) !important;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg) !important;
}

body.dark-mode .list-group-item {
    background-color: var(--white) !important;
    border-color: var(--border-light) !important;
    color: var(--text-color) !important;
}

body.dark-mode .list-group-item.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Breadcrumbs */
body.dark-mode .breadcrumb {
    background-color: var(--gray-background);
}

body.dark-mode .breadcrumb-item a {
    color: var(--primary-color);
}

body.dark-mode .breadcrumb-item.active {
    color: var(--text-color);
}

/* Navs y Tabs */
body.dark-mode .nav-link {
    color: var(--text-color);
}

body.dark-mode .nav-link:hover {
    color: var(--primary-color);
}

body.dark-mode .nav-link.active {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

body.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color);
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--white);
    border-color: var(--border-color) var(--border-color) var(--white);
    color: var(--text-color);
}

/* Progress bars */
body.dark-mode .progress {
    background-color: var(--gray-background);
}

body.dark-mode .progress-bar {
    background-color: var(--primary-color);
}

/* Spinners y loading states */
body.dark-mode .spinner-border {
    border-color: var(--border-light) !important;
    border-right-color: transparent !important;
}

body.dark-mode .spinner-border::after {
    border-top-color: var(--primary-color) !important;
}

body.dark-mode .spinner-grow {
    background-color: var(--primary-color) !important;
}

body.dark-mode .loading-container {
    background-color: var(--white) !important;
}

body.dark-mode .loading-container .loading-text {
    color: var(--light-text) !important;
}

body.dark-mode .loading-standard {
    background-color: var(--white) !important;
}

body.dark-mode .loading-spinner {
    border-color: var(--border-light) !important;
    border-top-color: var(--primary-color) !important;
}

body.dark-mode .spinner-container {
    background: var(--white) !important;
    color: var(--text-color) !important;
}

body.dark-mode .loading-text {
    color: var(--text-color) !important;
}

/* Scrollbar en modo oscuro */
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--gray-dark) !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color) !important;
    border-color: var(--gray-dark) !important;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--light-text) !important;
}

body.dark-mode ::-webkit-scrollbar-corner {
    background: var(--gray-dark) !important;
}

/* Firefox scrollbar en modo oscuro */
body.dark-mode * {
    scrollbar-color: var(--border-color) var(--gray-dark) !important;
}

/* Prevenir transiciones durante la carga inicial para evitar flash */
body.dark-mode-ready:not(.transitions-enabled),
body.dark-mode-ready:not(.transitions-enabled) *,
body.dark-mode-ready:not(.transitions-enabled) *::before,
body.dark-mode-ready:not(.transitions-enabled) *::after {
    transition: none !important;
}

/* Transiciones suaves para cambios de tema (solo después de la carga inicial) */
body.transitions-enabled,
body.transitions-enabled html,
body.transitions-enabled .sidebar,
body.transitions-enabled .header,
body.transitions-enabled .card,
body.transitions-enabled .form-control,
body.transitions-enabled .form-select,
body.transitions-enabled .btn,
body.transitions-enabled input,
body.transitions-enabled textarea,
body.transitions-enabled select,
body.transitions-enabled .table,
body.transitions-enabled .table th,
body.transitions-enabled .table td {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Excluir summary-cards de las transiciones para evitar parpadeo en modo oscuro */
.summary-card,
.summary-card-active,
.summary-card-inactive,
.summary-card .summary-icon,
.summary-card .summary-count,
.summary-card .summary-label {
    transition: none !important;
}

/* ============================================
   TABLES - MICRO INTERACCIONES Y ANIMACIONES
   ============================================ */

/* Transiciones suaves para filas de tabla */
.table tbody tr,
table tbody tr,
.table-hover > tbody > tr {
    transition: background-color var(--transition-normal), 
                border-left-color var(--transition-normal),
                box-shadow var(--transition-normal);
    position: relative;
    border-left: 3px solid transparent;
}

/* Hover effect con borde izquierdo destacado */
.table tbody tr:hover,
table tbody tr:hover,
.table-hover > tbody > tr:hover {
    background-color: var(--gray-background) !important;
    border-left-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px rgba(0, 153, 220, 0.1);
}

/* Transiciones suaves para celdas */
.table tbody td,
table tbody td,
.table tbody th,
table tbody th {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal);
}

/* Mejora para tablas con clase table-hover de Bootstrap */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--gray-background) !important;
    color: var(--text-color);
}

/* Modo oscuro - Tablas con hover mejorado */
body.dark-mode .table tbody tr,
body.dark-mode table tbody tr,
body.dark-mode .table-hover > tbody > tr {
    transition: background-color var(--transition-normal), 
                border-left-color var(--transition-normal),
                box-shadow var(--transition-normal);
    border-left: 3px solid transparent;
}

body.dark-mode .table tbody tr:hover,
body.dark-mode table tbody tr:hover,
body.dark-mode .table-hover > tbody > tr:hover {
    background-color: var(--gray-background) !important;
    border-left-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px rgba(0, 153, 220, 0.15);
}

body.dark-mode .table-hover > tbody > tr:hover > td,
body.dark-mode .table-hover > tbody > tr:hover > th,
body.dark-mode table tbody tr:hover td,
body.dark-mode table tbody tr:hover th {
    background-color: var(--gray-background) !important;
    color: var(--text-color) !important;
}

/* Respetar prefers-reduced-motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .table tbody tr,
    table tbody tr,
    .table-hover > tbody > tr,
    .table tbody td,
    table tbody td,
    .table tbody th,
    table tbody th,
    body.dark-mode .table tbody tr,
    body.dark-mode table tbody tr,
    body.dark-mode .table-hover > tbody > tr {
        transition: none;
    }
}

/* ============================================
   PAGINATION SYSTEM - PROFESSIONAL DESIGN
   ============================================ */

/* Contenedor principal de paginación */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    clear: both;
    margin-top: 0;
}

/* Asegurar que el nuevo sistema tenga prioridad sobre estilos antiguos */
#logsPagination .pagination-container,
#paginationContainer .pagination-container,
#seismicEventsPagination .pagination-container,
#estacionesPaginationContainer .pagination-container,
#collaboratorsPagination .pagination-container {
    position: relative;
    clear: both;
}

/* Asegurar que los contenedores de paginación siempre estén debajo de las tablas */
#logsPagination,
#paginationContainer,
#seismicEventsPagination,
#estacionesPaginationContainer,
#collaboratorsPagination {
    position: relative;
    clear: both;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 0;
    display: block;
}

/* Asegurar que las tablas no interfieran con la paginación */
.table-container,
.table-wrapper,
.notifications-table-container,
.estaciones-table-container,
.logs-card {
    position: relative;
    margin-bottom: 0;
}

/* Asegurar que la paginación dentro de table-container esté al final */
.table-container > #seismicEventsPagination {
    margin-top: 20px;
    order: 999;
}

/* Asegurar que las tablas tengan espacio para la paginación */
.table-container .table-wrapper,
.table-container .events-table {
    margin-bottom: 0;
}

/* Información de registros */
.pagination-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
}

.pagination-info strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Controles de paginación (botones) */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.pagination-buttons {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.pagination-buttons .page-item {
    display: inline-block;
}

.pagination-buttons .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background-color: var(--white);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
}

/* Hover effect mejorado con scale sutil */
.pagination-buttons .page-link:hover {
    background-color: var(--gray-background);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Active state con animación */
.pagination-buttons .page-link:active {
    transform: translateY(0) scale(0.98);
    transition: transform var(--transition-micro);
}

.pagination-buttons .page-link i {
    font-size: 12px;
    transition: transform var(--transition-normal);
}

/* Icon animation en hover */
.pagination-buttons .page-link:hover i {
    transform: scale(1.1);
}

.pagination-buttons .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 153, 220, 0.3);
    animation: activePulse 0.3s ease-out;
}

/* Animación sutil cuando se activa una página */
@keyframes activePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 153, 220, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 153, 220, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 153, 220, 0.3);
    }
}

.pagination-buttons .page-item.active .page-link:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 153, 220, 0.4);
}

.pagination-buttons .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selector de elementos por página */
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.page-size-label {
    font-size: 14px;
    color: var(--text-color);
    margin: 0;
}

.page-size-select {
    min-width: 80px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background-color: var(--white);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-size-select:hover {
    border-color: var(--primary-color);
}

.page-size-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-focus-shadow);
}

/* Dark Mode - Paginación */
body.dark-mode .pagination-info {
    color: var(--text-color);
}

body.dark-mode .pagination-info strong {
    color: var(--primary-color);
}

body.dark-mode .pagination-buttons .page-link {
    background-color: var(--white);
    border-color: var(--border-color);
    color: var(--text-color);
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .pagination-buttons .page-link:hover {
    background-color: var(--gray-background);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .pagination-buttons .page-link:active {
    transform: translateY(0) scale(0.98);
    transition: transform var(--transition-micro);
}

body.dark-mode .pagination-buttons .page-link:hover i {
    transform: scale(1.1);
}

body.dark-mode .pagination-buttons .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    animation: activePulse 0.3s ease-out;
}

body.dark-mode .pagination-buttons .page-item.active .page-link:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 153, 220, 0.4);
}

body.dark-mode .page-size-label {
    color: var(--text-color);
}

body.dark-mode .page-size-select {
    background-color: var(--card-background);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .page-size-select:hover {
    border-color: var(--primary-color);
}

body.dark-mode .page-size-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-focus-shadow);
}

body.dark-mode .page-size-select option {
    background-color: var(--card-background);
    color: var(--text-color);
}

/* Respetar prefers-reduced-motion para paginación */
@media (prefers-reduced-motion: reduce) {
    .pagination-buttons .page-link,
    .pagination-buttons .page-link i,
    body.dark-mode .pagination-buttons .page-link,
    body.dark-mode .pagination-buttons .page-link i {
        transition: none;
        animation: none;
    }
    
    .pagination-buttons .page-link:hover,
    .pagination-buttons .page-link:active,
    body.dark-mode .pagination-buttons .page-link:hover,
    body.dark-mode .pagination-buttons .page-link:active {
        transform: none;
    }
    
    .pagination-buttons .page-item.active .page-link,
    body.dark-mode .pagination-buttons .page-item.active .page-link {
        animation: none;
    }
}

/* Dark Mode - Indicador de página simplificado */
body.dark-mode .pagination-buttons .page-indicator-text {
    color: var(--text-color);
    background-color: transparent;
    border: none;
}

body.dark-mode .pagination-buttons .page-item.page-indicator .page-link {
    background-color: transparent;
    border: none;
    color: var(--text-color);
}

/* ============================================
   RESPONSIVE DESIGN - PAGINACIÓN
   ============================================ */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .pagination-container {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .pagination-info {
        justify-content: center;
        order: 1;
    }

    .pagination-controls {
        order: 2;
    }

    .page-size-selector {
        justify-content: center;
        order: 3;
    }

    .pagination-buttons .page-link {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .pagination-container {
        gap: 12px;
        width: 100%;
        overflow: hidden;
    }

    .pagination-info {
        font-size: 13px;
        text-align: center;
    }

    .pagination-controls {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .pagination-controls::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .pagination-buttons {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 2px;
        min-width: fit-content;
    }

    .pagination-buttons .page-link {
        min-width: 32px;
        height: 34px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .pagination-buttons .page-link i {
        font-size: 11px;
    }

    /* Ocultar texto "Anterior" y "Siguiente" en móvil, solo mostrar íconos */
    .pagination-buttons .page-item:first-child .page-link .pagination-text,
    .pagination-buttons .page-item:last-child .page-link .pagination-text {
        display: none;
    }

    .pagination-buttons .page-item:first-child .page-link,
    .pagination-buttons .page-item:last-child .page-link {
        min-width: 36px;
        padding: 6px 8px;
    }

    /* Ocultar ellipsis en móvil */
    .pagination-buttons .page-item.page-ellipsis {
        display: none;
    }

    /* Indicador de página en modo simplificado */
    .pagination-buttons .page-item.page-indicator {
        display: flex;
        align-items: center;
    }

    .pagination-buttons .page-indicator-text {
        font-size: 12px;
        font-weight: 500;
        padding: 6px 12px;
        white-space: nowrap;
    }

    .page-size-selector {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .page-size-label {
        font-size: 13px;
    }

    .page-size-select {
        width: 100%;
        max-width: 200px;
    }
}

/* Extra Small (<576px) */
@media (max-width: 575px) {
    .pagination-container {
        gap: 10px;
    }

    .pagination-info {
        font-size: 12px;
    }

    .pagination-buttons .page-link {
        min-width: 28px;
        height: 32px;
        padding: 4px 6px;
        font-size: 11px;
    }

    /* Ocultar números de página, mostrar solo indicador */
    .pagination-buttons .page-item:not(:first-child):not(:last-child):not(.page-indicator) {
        display: none;
    }

    /* Mostrar indicador de página */
    .pagination-buttons .page-item.page-indicator {
        display: flex !important;
    }

    .pagination-buttons .page-indicator-text {
        font-size: 11px;
        padding: 4px 10px;
    }

    /* Botones Anterior/Siguiente más compactos */
    .pagination-buttons .page-item:first-child .page-link,
    .pagination-buttons .page-item:last-child .page-link {
        min-width: 32px;
        padding: 4px 6px;
    }

    .page-size-label {
        font-size: 12px;
    }

    .page-size-select {
        font-size: 12px;
        height: 36px;
    }
}

/* Footer con logo SeismicMonitor */
.seismic-footer {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    width: calc(100% - var(--sidebar-width));
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    z-index: 10;
    background-color: var(--background-color);
    pointer-events: none; /* Permite hacer clic a través del footer excepto en el logo */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    transition: left var(--transition-normal), width var(--transition-normal);
}

.seismic-footer .footer-content {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto; /* Permite interacción con el contenido del footer */
}

.seismic-footer .footer-text {
    font-size: 13px;
    color: #d0d0d0;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.seismic-footer .footer-logo-container {
    display: inline-flex;
    align-items: center;
}

.seismic-footer .footer-logo {
    height: 20px;
    width: auto;
    filter: grayscale(100%) brightness(1.2);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

.seismic-footer .footer-logo:hover {
    filter: grayscale(0%) saturate(1.2);
    opacity: 1;
}

/* Modo oscuro para el footer */
body.dark-mode .seismic-footer .footer-text {
    color: #a0a0a0;
}

body.dark-mode .seismic-footer .footer-logo {
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.6;
}

body.dark-mode .seismic-footer .footer-logo:hover {
    filter: grayscale(0%) saturate(1.3);
    opacity: 1;
}

body.dark-mode .seismic-footer {
    background-color: var(--background-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

/* Asegurar que el contenido principal no quede oculto detrás del footer */
.main-content {
    padding-bottom: 70px;
    min-height: calc(100vh - 70px);
}

.content-area {
    padding-bottom: 20px;
}

/* Ocultar padding en páginas de login */
body:has(.login-form-container) .main-content {
    padding-bottom: 0;
    min-height: 100vh;
}

body:has(.login-form-container) .content-area {
    padding-bottom: 0;
}

/* Responsive: ajustar footer en móviles */
@media (max-width: 767px) {
    .seismic-footer {
        left: 0;
        width: 100%;
        padding: 12px 15px;
    }
    
    .seismic-footer .footer-text {
        font-size: 11px;
    }
    
    .seismic-footer .footer-logo {
        height: 16px;
    }
    
    .main-content {
        padding-bottom: 50px;
    }
}