/* theme-tokens.css - Labsys Modern Design System */

:root {
    /* MODO CLARO (Default) */
    --primary: #337ab7;
    --primary-hover: #286090;
    --primary-light: #e0f2fe;
    
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    
    --text-main: #1e293b;
    --text-muted: #64748b;
    --text-on-primary: #ffffff;
    
    --border-color: #e2e8f0;
    --border-soft: #f1f5f9;
    
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
    --radius: 12px;
    --radius-sm: 8px;

    /* Badges */
    --badge-active-bg: #dcfce7;
    --badge-active-text: #15803d;
    --badge-inactive-bg: #fee2e2;
    --badge-inactive-text: #b91c1c;

    /* Status Colors */
    --info: #0ea5e9;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

/* Transiciones suaves */
body, .modern-card, .panel, .panel-heading, .form-control, .table, .btn, td, th {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

[data-theme='dark'] {
    /* MODO OSCURO REFINADO */
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-light: #1e3a8a;
    
    --bg-page: #0f172a;
    --bg-card: #1e293b;
    --bg-input: #1e293b;
    
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;
    
    --border-color: #334155;
    --border-soft: #2d3a4f; /* Un poco más claro que bg-card */
    
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    /* Badges */
    --badge-active-bg: #064e3b;
    --badge-active-text: #4ade80;
    --badge-inactive-bg: #7f1d1d;
    --badge-inactive-text: #fca5a5;

    /* Status Colors (Dark Mode) */
    --info: #38bdf8;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
}

/* Aplicación global de tokens básicos */
body {
    background-color: var(--bg-page);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.modern-card, .query-card, .table-container, .info-card, .panel {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main);
}

.card-header-custom, .panel-heading {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.form-control, select, input, textarea {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Navbar Dark Mode Overrides */
[data-theme='dark'] .navbar-default {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme='dark'] .navbar-default .navbar-nav > li > a {
    color: #f1f5f9 !important;
}
[data-theme='dark'] .navbar-default .navbar-nav > .open > a,
[data-theme='dark'] .navbar-default .navbar-nav > .open > a:hover,
[data-theme='dark'] .navbar-default .navbar-nav > .open > a:focus {
    background-color: var(--bg-card) !important;
    color: var(--primary) !important;
}
[data-theme='dark'] .navbar-default .navbar-nav > li > a:hover {
    color: var(--primary) !important;
}
/* Dropdown Menus en Modo Oscuro */
[data-theme='dark'] .dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}
[data-theme='dark'] .dropdown-menu > li > a {
    color: var(--text-main) !important;
}
[data-theme='dark'] .dropdown-menu > li > a:hover,
[data-theme='dark'] .dropdown-menu > li > a:focus,
[data-theme='dark'] .dropdown-menu > li > a:active {
    background-color: var(--border-soft) !important;
    color: var(--primary) !important;
    outline: none !important;
}
[data-theme='dark'] .dropdown-menu .divider {
    background-color: var(--border-color) !important;
}
[data-theme='dark'] .dropdown-header {
    color: var(--text-muted) !important;
}
[data-theme='dark'] .navbar-brand {
    filter: brightness(0) invert(1);
}

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

/* Compatibilidad con Bootstrap Panels y Tablas clásicas */
.panel {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.panel-heading {
    background-color: var(--border-soft) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.panel-title {
    color: var(--text-main) !important;
    font-weight: 700;
}

.panel-footer {
    background-color: var(--border-soft) !important;
    border-color: var(--border-color) !important;
}

.table {
    color: var(--text-main) !important;
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--primary) !important;
    background-color: var(--primary-light) !important;
    color: var(--text-main) !important;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--border-color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--border-soft) !important;
    opacity: 1;
}

.alert {
    border-radius: var(--radius-sm);
}

.well {
    background-color: var(--border-soft) !important;
    border-color: var(--border-color) !important;
}

/* Info Box Support */
.info-box {
    background-color: var(--border-soft) !important;
    border: 1px solid var(--border-color) !important;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 12px;
    color: var(--text-main) !important;
}
.info-box-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

/* Footer Dark Mode Support */
footer, .footer-personalizado {
    background-color: var(--bg-page) !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 20px 0;
    margin-top: 40px;
}
.footer-personalizado p {
    color: var(--text-muted) !important;
}

/* jQuery UI Autocomplete & Menus Support */
.ui-autocomplete {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow) !important;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999 !important;
}

.ui-menu-item {
    color: var(--text-main) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    transition: background-color 0.2s ease;
}

.ui-menu-item:last-child {
    border-bottom: none !important;
}

.ui-menu-item .ui-menu-item-wrapper {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.ui-menu-item .ui-state-active, 
.ui-menu-item .ui-state-hover {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    margin: 0 !important;
}

/* Web Labsys - Landing Page Support */
[data-theme='dark'] .content-section-a {
    background-color: var(--bg-card) !important;
}

[data-theme='dark'] .content-section-b {
    background-color: var(--bg-page) !important;
    border-color: var(--border-color) !important;
}

[data-theme='dark'] .section-heading-spacer {
    border-color: var(--border-color) !important;
}

/* Bootstrap Table Contextual Classes Dark Mode Support */
[data-theme='dark'] .table > tbody > tr.active > td,
[data-theme='dark'] .table > tbody > tr > td.active {
    background-color: var(--border-soft) !important;
}

[data-theme='dark'] .table > tbody > tr.info > td,
[data-theme='dark'] .table > tbody > tr > td.info {
    background-color: var(--primary-light) !important; /* Azul oscuro */
    color: var(--text-main) !important;
}

[data-theme='dark'] .table > tbody > tr.success > td,
[data-theme='dark'] .table > tbody > tr > td.success {
    background-color: var(--badge-active-bg) !important; /* Verde oscuro */
    color: var(--text-main) !important;
}

[data-theme='dark'] .table > tbody > tr.warning > td,
[data-theme='dark'] .table > tbody > tr > td.warning {
    background-color: #78350f !important; /* Naranja/Ambar oscuro */
    color: var(--text-main) !important;
}

[data-theme='dark'] .table > tbody > tr.danger > td,
[data-theme='dark'] .table > tbody > tr > td.danger {
    background-color: var(--badge-inactive-bg) !important; /* Rojo oscuro */
    color: var(--text-main) !important;
}

/* Soporte Hover para Tablas en Dark Mode */
[data-theme='dark'] .table-hover > tbody > tr:hover > td,
[data-theme='dark'] .table-hover > tbody > tr:hover > th {
    background-color: var(--border-color) !important;
}

[data-theme='dark'] .table-hover > tbody > tr.active:hover > td,
[data-theme='dark'] .table-hover > tbody > tr:hover > td.active {
    background-color: var(--border-soft) !important;
    filter: brightness(1.2);
}

[data-theme='dark'] .table-hover > tbody > tr.info:hover > td,
[data-theme='dark'] .table-hover > tbody > tr:hover > td.info {
    background-color: var(--primary-light) !important;
    filter: brightness(1.2);
}

[data-theme='dark'] .table-hover > tbody > tr.success:hover > td,
[data-theme='dark'] .table-hover > tbody > tr:hover > td.success {
    background-color: var(--badge-active-bg) !important;
    filter: brightness(1.2);
}

[data-theme='dark'] .table-hover > tbody > tr.warning:hover > td,
[data-theme='dark'] .table-hover > tbody > tr:hover > td.warning {
    background-color: #78350f !important;
    filter: brightness(1.2);
}

[data-theme='dark'] .table-hover > tbody > tr.danger:hover > td,
[data-theme='dark'] .table-hover > tbody > tr:hover > td.danger {
    background-color: var(--badge-inactive-bg) !important;
    filter: brightness(1.2);
}

/* Formularios genéricos - Soporte Modo Oscuro */
[data-theme='dark'] .form-container {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.6) !important;
}

/* Soporte para canvas de firmas y botones por defecto */
[data-theme='dark'] .canvas-con-borde {
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
}

/* Tarjetas de Información Genéricas */
[data-theme='dark'] .info-card,
[data-theme='dark'] .modern-card,
[data-theme='dark'] .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme='dark'] .card h3 {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme='dark'] .btn-default {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
[data-theme='dark'] .btn-default:hover {
    background-color: var(--border-soft) !important;
}

/* Quitar el borde de selección (focus outline) del botón de tema */
.navbar-nav a[onclick="toggleTheme()"]:focus,
.navbar-nav a[onclick="toggleTheme()"]:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Soporte global para Modales (Modals) de Bootstrap en Dark Mode */
[data-theme='dark'] .modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,.5) !important;
}

[data-theme='dark'] .modal-header {
    border-bottom-color: var(--border-color) !important;
}

[data-theme='dark'] .modal-footer {
    border-top-color: var(--border-color) !important;
    background-color: var(--border-soft) !important;
}

[data-theme='dark'] .close {
    color: var(--text-main) !important;
    text-shadow: none !important;
    opacity: 0.7;
}

[data-theme='dark'] .close:hover {
    color: #fff !important;
    opacity: 1;
}