html {
    font-size: 80%;
}

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 75px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Colores que se ajustan por tema */
    --bg-sidebar: #1e293b;
    --bg-topbar: #ffffff;
    --sidebar-text: #94a3b8;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
}

/* --- OVERRIDES MODO OSCURO --- */
[data-bs-theme="dark"] {
    --bg-sidebar: #020617;
    --bg-topbar: #1e293b;
    --sidebar-text: #64748b;
}

/* --- MODO CLARO: layout y menú que resalta --- */
[data-bs-theme="light"] {
    --bg-sidebar: #f1f5f9;
    --bg-topbar: #ffffff;
    --sidebar-text: #475569;
    --sidebar-hover: rgba(0, 0, 0, 0.06);
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --sidebar-accent: #0f172a;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bs-body-bg);
    overflow: hidden;
    display: flex;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding-top: 0;
    /* El espacio lo maneja main-wrapper */
    box-sizing: border-box;
}

/* --- BARRA SUPERIOR FIJA --- */
#global-router-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: var(--bg-topbar);
    border-bottom: 1px solid var(--bs-border-color);
    z-index: 1060;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Modo claro: barra superior clara y borde sutil */
[data-bs-theme="light"] #global-router-bar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

#global-router-bar .bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
}

#global-router-bar .bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding-right: 15px;
    /* Compensa el padding del bar para alinear al borde */
}

/* Botón de toggle del sidebar en la barra fija */
#global-router-bar .bar-left button[onclick="cycleSidebarMode()"] {
    color: var(--bs-body-color) !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}

#global-router-bar .bar-left button[onclick="cycleSidebarMode()"]:hover {
    opacity: 1;
    background: var(--bs-secondary-bg) !important;
}

#global-router-bar .bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#global-router-bar .bar-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
}

/* Ocultar selector duplicado en headers de páginas y cualquier routerSelector local */
.top-navbar #routerSelector,
header #routerSelector,
.page-actions-bar #routerSelector,
#routerSelector {
    display: none !important;
}

/* Asegurar que solo el selector global sea visible */
#globalRouterSelector {
    display: block !important;
}

#globalRouterSelector .router-selector-container {
    display: flex !important;
}

/* media query 1 disabled */

/* --- SIDEBAR STRUCTURE --- */
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    color: white;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-top: 40px;
    height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
}

/* En modo claro: menú diferenciado (borde y sombra para identificar navegación) */
[data-bs-theme="light"] #sidebar {
    color: var(--sidebar-accent, #0f172a);
    border-right: 1px solid var(--sidebar-border, rgba(0, 0, 0, 0.08));
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}

body.sidebar-hidden #sidebar {
    transform: translateX(-100%);
    position: absolute;
    height: calc(100vh - 40px);
}

body.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width);
    transition: width 0.25s ease;
}

/* En modo iconos: al abrir un submenú (.collapse.show), expandir el sidebar solo lo necesario para los iconos */
body.sidebar-collapsed #sidebar:has(.collapse.show) {
    width: var(--sidebar-collapsed-width);
}

/* En modo iconos el submenú expansible muestra solo iconos (sin texto) */
body.sidebar-collapsed #sidebar .collapse .nav-text {
    display: none;
}

/* --- NAVIGATION LINKS --- */
.nav-link-custom {
    display: flex;
    align-items: center;
    padding: 10px 22px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    border-left: 4px solid transparent;
}

.nav-link-custom:hover {
    background: var(--sidebar-hover);
    color: white;
    transform: translateX(4px);
}

[data-bs-theme="light"] .nav-link-custom:hover {
    color: var(--sidebar-accent, #0f172a);
}

.nav-link-custom.active {
    background: rgba(13, 110, 253, 0.15);
    color: white;
    border-left-color: #0d6efd;
    transform: translateX(2px);
}

[data-bs-theme="light"] .nav-link-custom.active {
    color: #0d6efd;
}

.nav-link-custom i {
    font-size: 1.15rem;
    min-width: 34px;
}

body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .sidebar-header span,
body.sidebar-collapsed .nav-section-label {
    display: none;
}

body.sidebar-collapsed .nav-link-custom:hover {
    transform: none;
    /* Desactivar hover 3D al encoger el menú */
}

/* --- ANIMACIONES ELEGANTES SUBMENU --- */
[data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform 0.3s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
    transform: rotate(-180deg);
}

.collapse>div {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-left: 20px !important;
    padding-left: 10px !important;
    transition: border-color 0.3s ease;
}

[data-bs-theme="light"] .collapse>div {
    border-left-color: var(--sidebar-border, rgba(0, 0, 0, 0.1)) !important;
}

.collapse>div:hover {
    border-left-color: rgba(255, 255, 255, 0.2) !important;
}

.collapse .nav-link-custom {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.95em;
    opacity: 0.85;
}

.collapse .nav-link-custom:hover,
.collapse .nav-link-custom.active {
    opacity: 1;
}

.nav-section-label {
    padding: 12px 22px 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sidebar-text);
    letter-spacing: 0.05rem;
    opacity: 0.5;
}

[data-bs-theme="light"] .nav-section-label {
    opacity: 0.7;
}

.sidebar-header {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-header img {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
    margin-right: 8px;
}

/* --- MAIN WRAPPER --- */
#main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    /* Espacio para la barra fija */
    height: calc(100vh - 40px);
    /* Altura ajustada */
    overflow: hidden;
    transition: var(--transition);
    width: 100%;
    /* Asegurar que ocupe todo el espacio disponible */
}

/* Eliminar espacio adicional entre barra fija y contenido */
#main-wrapper .page-actions-bar {
    margin-top: 0;
}

.top-navbar {
    display: none;
    /* Fila negra eliminada completamente */
}

.content-area {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--bs-tertiary-bg);
    width: 100%;
    min-width: 0;
}

/* Barra de acciones de página (reemplaza top-navbar) */
.page-actions-bar {
    background: transparent;
    border-bottom: none;
    padding: 0 25px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 50px;
}

/* Botón de tema */
.theme-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: var(--transition);
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--bs-secondary-bg);
}

/* Estilos para elementos en la barra fija */
#global-router-bar .theme-toggle-btn {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
}

#global-router-bar .user-profile-icon {
    flex-shrink: 0;
}

/* Selector de Router */
.router-selector-container {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    background: var(--bs-secondary-bg);
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    transition: var(--transition);
    flex-grow: 1;
    min-width: 0;
}

.router-selector-container:hover {
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-tertiary-bg);
}

#routerSelectTrigger {
    border: none !important;
    background: transparent !important;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
}

/* Ajustes para cuando el sidebar está colapsado */
body.sidebar-collapsed #global-router-bar .bar-left {
    width: var(--sidebar-collapsed-width);
}


.router-selector-container select {
    min-width: 180px;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.8rem;
    padding: 2px 8px;
}

/* Selector más compacto en la barra fija */
#global-router-bar .router-selector-container {
    padding: 3px 8px;
    gap: 6px;
}

#global-router-bar .router-selector-container select {
    min-width: 160px;
    font-size: 0.75rem;
    padding: 2px 6px;
}

#global-router-bar .router-selector-container i {
    font-size: 0.9rem;
}

.router-selector-container .router-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.router-selector-container .router-status-dot.online {
    background-color: #198754;
    box-shadow: 0 0 4px rgba(25, 135, 84, 0.5);
}

.router-selector-container .router-status-dot.offline {
    background-color: #dc3545;
}

.router-selector-container .router-status-dot.unknown {
    background-color: #6c757d;
}

/* Fin de estilos del selector */

/* media query 2 disabled */

/* --- PREMIUM DROPDOWNS GLOBALES --- */
.dropdown-menu {
    border-radius: 12px !important;
    padding: 0.5rem !important;
    border: 1px solid var(--bs-border-color) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    z-index: 1070 !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    background: rgba(15, 23, 42, 0.85) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    color: var(--bs-body-color) !important;
    margin-bottom: 2px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bs-primary) !important;
    color: white !important;
    transform: none !important;
    /* Eliminamos el desplazamiento para mayor limpieza */
}

.dropdown-item i {
    margin-right: 8px;
}

.dropdown-divider {
    border-top: 1px solid var(--bs-border-color);
    margin: 0.5rem 0;
    opacity: 0.3;
}

/* ========== MODO CLARO: contenido (Red Óptica y resto), tablas y texto legible ========== */
[data-bs-theme="light"] .text-light,
[data-bs-theme="light"] .text-white {
    color: #212529 !important;
}

[data-bs-theme="light"] .text-light-50,
[data-bs-theme="light"] .text-muted {
    color: #6c757d !important;
}

/* Tablas: en modo claro usan fondo claro y texto oscuro */
[data-bs-theme="light"] .table-dark,
[data-bs-theme="light"] .table-dark th,
[data-bs-theme="light"] .table-dark td {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .table-dark thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-bottom-color: #dee2e6 !important;
}

[data-bs-theme="light"] .table-dark.table-hover tbody tr:hover {
    background-color: #e9ecef !important;
}

/* Red Óptica: hover (fondo claro, texto oscuro) SOLO en modo claro; en modo oscuro se mantiene el original */
[data-bs-theme="light"] .content-area .table-dark.table-hover tbody tr:hover,
[data-bs-theme="light"] #ftth-dynamic-content .table-dark.table-hover tbody tr:hover {
    background-color: transparent !important;
}

[data-bs-theme="light"] .content-area .table-dark.table-hover tbody tr:hover td,
[data-bs-theme="light"] .content-area .table-dark.table-hover tbody tr:hover th,
[data-bs-theme="light"] #ftth-dynamic-content .table-dark.table-hover tbody tr:hover td,
[data-bs-theme="light"] #ftth-dynamic-content .table-dark.table-hover tbody tr:hover th {
    background-color: #e8f2f9 !important;
    color: #212529 !important;
}

[data-bs-theme="light"] .content-area .table-dark.table-hover tbody tr:hover td .text-muted,
[data-bs-theme="light"] #ftth-dynamic-content .table-dark.table-hover tbody tr:hover td .text-muted {
    color: #495057 !important;
}

[data-bs-theme="light"] #systemOnusTable.table-dark.table-hover tbody tr:hover {
    background-color: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: #212529 !important;
}
[data-bs-theme="light"] #systemOnusTable.table-dark.table-hover tbody tr:hover td,
[data-bs-theme="light"] #systemOnusTable.table-dark.table-hover tbody tr:hover th {
    background-color: #e8f2f9 !important;
    color: #212529 !important;
}
[data-bs-theme="light"] #systemOnusTable.table-dark.table-hover tbody tr:hover td .text-muted {
    color: #495057 !important;
}

[data-bs-theme="light"] #napsTable.table-dark.table-hover tbody tr:hover {
    background-color: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: #212529 !important;
}
[data-bs-theme="light"] #napsTable.table-dark.table-hover tbody tr:hover td,
[data-bs-theme="light"] #napsTable.table-dark.table-hover tbody tr:hover th {
    background-color: #e8f2f9 !important;
    color: #212529 !important;
}
[data-bs-theme="light"] #napsTable.table-dark.table-hover tbody tr:hover td .text-muted,
[data-bs-theme="light"] #napsTable.table-dark.table-hover tbody tr:hover td .text-light-50 {
    color: #495057 !important;
}

[data-bs-theme="light"] #profilesTable.table-dark.table-hover tbody tr:hover {
    background-color: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: #212529 !important;
}
[data-bs-theme="light"] #profilesTable.table-dark.table-hover tbody tr:hover td,
[data-bs-theme="light"] #profilesTable.table-dark.table-hover tbody tr:hover th {
    background-color: #e8f2f9 !important;
    color: #212529 !important;
}
[data-bs-theme="light"] #profilesTable.table-dark.table-hover tbody tr:hover td .text-muted,
[data-bs-theme="light"] #profilesTable.table-dark.table-hover tbody tr:hover td .text-light-50 {
    color: #495057 !important;
}

[data-bs-theme="light"] #devicesTable.table-dark.table-hover tbody tr:hover {
    background-color: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: #212529 !important;
}
[data-bs-theme="light"] #devicesTable.table-dark.table-hover tbody tr:hover td,
[data-bs-theme="light"] #devicesTable.table-dark.table-hover tbody tr:hover th {
    background-color: #e8f2f9 !important;
    color: #212529 !important;
}
[data-bs-theme="light"] #devicesTable.table-dark.table-hover tbody tr:hover td .text-muted,
[data-bs-theme="light"] #devicesTable.table-dark.table-hover tbody tr:hover td .text-light-50 {
    color: #495057 !important;
}

/* Tabla Comunicaciones (Historial de Envíos): mismo hover legible solo en modo claro */
[data-bs-theme="light"] #communicationsHistoryTable.table-dark.table-hover tbody tr:hover {
    background-color: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: #212529 !important;
}
[data-bs-theme="light"] #communicationsHistoryTable.table-dark.table-hover tbody tr:hover td,
[data-bs-theme="light"] #communicationsHistoryTable.table-dark.table-hover tbody tr:hover th {
    background-color: #e8f2f9 !important;
    color: #212529 !important;
}
[data-bs-theme="light"] #communicationsHistoryTable.table-dark.table-hover tbody tr:hover td .text-muted,
[data-bs-theme="light"] #communicationsHistoryTable.table-dark.table-hover tbody tr:hover td .text-light-50 {
    color: #495057 !important;
}

/* Tamaño de texto de tablas: referencia Gestión FTTH (0.9rem cabeceras, 0.85rem cuerpo) */
.content-area .table thead th {
    font-size: 0.9rem !important;
}
.content-area .table tbody td,
.content-area .table tbody th {
    font-size: 0.85rem !important;
}
#ftth-dynamic-content .table thead th {
    font-size: 0.9rem !important;
}
#ftth-dynamic-content .table tbody td,
#ftth-dynamic-content .table tbody th {
    font-size: 0.85rem !important;
}

/* Cards y paneles con fondo oscuro → claro */
[data-bs-theme="light"] .content-area .bg-dark,
[data-bs-theme="light"] .content-area .card.bg-dark,
[data-bs-theme="light"] .content-area .card-header.bg-dark {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .content-area .bg-dark-subtle {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-bs-theme="light"] .content-area .card.bg-dark .card-title,
[data-bs-theme="light"] .content-area .card.bg-dark .card-text,
[data-bs-theme="light"] .content-area .card-header.bg-dark {
    color: #212529 !important;
}

[data-bs-theme="light"] .content-area .border-secondary {
    border-color: #dee2e6 !important;
}

/* Modales en modo claro */
[data-bs-theme="light"] .modal-content.bg-dark {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .modal-content.bg-dark .modal-header,
[data-bs-theme="light"] .modal-content.bg-dark .modal-body,
[data-bs-theme="light"] .modal-content.bg-dark .modal-footer {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .modal-content.bg-dark .modal-title,
[data-bs-theme="light"] .modal-content.bg-dark .form-label,
[data-bs-theme="light"] .modal-content.bg-dark .text-light,
[data-bs-theme="light"] .modal-content.bg-dark .text-light-50 {
    color: #212529 !important;
}

[data-bs-theme="light"] .modal-content.bg-dark .form-control.bg-dark,
[data-bs-theme="light"] .modal-content.bg-dark .form-control.bg-dark-subtle,
[data-bs-theme="light"] .modal-content.bg-dark .form-select.bg-dark,
[data-bs-theme="light"] .modal-content.bg-dark .form-select.bg-dark-subtle {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

/* Contenido principal: fondos y texto */
[data-bs-theme="light"] .content-area h1,
[data-bs-theme="light"] .content-area h2,
[data-bs-theme="light"] .content-area h5,
[data-bs-theme="light"] .content-area h6,
[data-bs-theme="light"] .content-area .fw-bold {
    color: #212529 !important;
}

[data-bs-theme="light"] .content-area .card,
[data-bs-theme="light"] .content-area .card-body {
    color: #212529;
}

/* Filtros y cajas de estadísticas en modo claro */
[data-bs-theme="light"] .content-area .stats-filter-box,
[data-bs-theme="light"] .content-area .bg-dark.border {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .content-area .stats-filter-box.active {
    background-color: #e9ecef !important;
}

/* Alertas y badges mantienen contraste; solo texto blanco genérico */
[data-bs-theme="light"] .content-area .alert {
    color: inherit;
}

[data-bs-theme="light"] .content-area .btn-outline-light {
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .content-area .btn-outline-light:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Filas de filtro en tablas (Red Óptica): fondo y texto legibles */
[data-bs-theme="light"] .content-area .filter-row.bg-dark,
[data-bs-theme="light"] .content-area tr.filter-row.bg-dark {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-bs-theme="light"] .content-area tr.filter-row th,
[data-bs-theme="light"] .content-area .filter-row .col-filter,
[data-bs-theme="light"] .content-area .filter-row .form-control {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* Pestañas Gestión FTTH (#onuTabs): evitar sombreado blanco, texto siempre legible */
[data-bs-theme="light"] .content-area #onuTabs .nav-link {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

[data-bs-theme="light"] .content-area #onuTabs .nav-link:hover {
    background-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-bs-theme="light"] .content-area #onuTabs .nav-link.active {
    background-color: #0d6efd !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .content-area #onuTabs .nav-link {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .content-area #onuTabs .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .content-area #onuTabs .nav-link.active {
    background-color: #0d6efd !important;
    color: #fff !important;
}

[data-bs-theme="light"] .content-area .bg-dark.bg-opacity-25 {
    background-color: rgba(248, 249, 250, 0.9) !important;
}

/* Dropdowns dentro de contenido (Red Óptica) */
[data-bs-theme="light"] .content-area .dropdown-menu-dark {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

[data-bs-theme="light"] .content-area .dropdown-menu-dark .dropdown-item {
    color: #212529 !important;
}

[data-bs-theme="light"] .content-area .dropdown-menu-dark .dropdown-item:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Botón COLUMNAS y menú (Clientes, Billing, PPP): misma apariencia en las tres páginas */
[data-bs-theme="light"] .content-area .columnas-dropdown .btn-outline-dark,
[data-bs-theme="light"] .content-area .columnas-dropdown .btn-outline-dark:hover,
[data-bs-theme="light"] .content-area .columnas-dropdown .btn-outline-dark:focus,
[data-bs-theme="light"] .content-area .columnas-dropdown .btn-outline-dark.show {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .content-area .columnas-dropdown .btn-outline-dark:hover {
    background-color: #e9ecef !important;
}
[data-bs-theme="light"] .content-area #columnToggleMenu.dropdown-menu {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}
[data-bs-theme="light"] .content-area #columnToggleMenu .form-check-label {
    color: #212529 !important;
}
[data-bs-theme="light"] .content-area #columnToggleMenu .form-check-input {
    background-color: #fff !important;
    border-color: #adb5bd !important;
}
[data-bs-theme="light"] .content-area #columnToggleMenu .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Cualquier elemento con texto blanco/claro en área de contenido */
[data-bs-theme="light"] .content-area [class*="text-light"],
[data-bs-theme="light"] .content-area [class*="text-white"] {
    color: #212529 !important;
}

/* Inputs y selects con fondo oscuro en contenido */
[data-bs-theme="light"] .content-area input.bg-dark,
[data-bs-theme="light"] .content-area select.bg-dark,
[data-bs-theme="light"] .content-area textarea.bg-dark {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

/* Pestañas (tabs) en contenido */
[data-bs-theme="light"] .content-area .nav-link {
    color: #495057 !important;
}

[data-bs-theme="light"] .content-area .nav-link.active {
    color: #0d6efd !important;
    background-color: transparent !important;
}

[data-bs-theme="light"] .content-area .tab-pane {
    color: #212529;
}

/* Catálogo de equipos (Red Óptica): fondo claro para imágenes en modo claro */
[data-bs-theme="light"] .model-img-container {
    background-color: #e9ecef !important;
}

/* Elevar el z-index de la fila que tiene un menú desplegable abierto para que no quede detrás de otras filas */
tr:has(.dropdown-toggle[aria-expanded="true"]),
tr:has(.dropdown-menu.show) {
    position: relative !important;
    z-index: 1050 !important;
}