/* ==========================================
   TEMA APPLE — panel interno (base.html)
   Se activa con la clase .ap-theme en <body>.
   Sobrescribe Bootstrap y el chrome de base.html sin tocar el HTML.
   ========================================== */

/* ---------- Tokens de color (claro / oscuro) ---------- */
:root {
    color-scheme: light;
    --ap-bg: #f5f5f7;
    --ap-surface: #ffffff;
    --ap-fill: #e8e8ed;
    --ap-fill-2: #f2f2f5;
    --ap-fill-3: #dcdce1;
    --ap-hover: #fafafc;
    --ap-ink: #1d1d1f;
    --ap-ink-2: #6e6e73;
    --ap-ink-3: #86868b;
    --ap-line: #e5e5ea;
    --ap-line-soft: #f0f0f3;
    --ap-line-strong: #d2d2d7;
    --ap-glass: rgba(255, 255, 255, .78);
    --ap-glass-strong: rgba(255, 255, 255, .92);
    --ap-glass-green: rgba(236, 250, 240, .85);
    --ap-tint-rgb: 0, 0, 0;
    --ap-contrast-bg: #1d1d1f;
    --ap-contrast-fg: #ffffff;
    --ap-blue: #0071e3;
    --ap-blue-hover: #0077ed;
    --ap-blue-active: #006edb;
    --ap-link: #0066cc;
    --ap-green: #34c759;
    --ap-soft-blue: #e8f0fe;
    --ap-soft-green: #e3f6e8;
    --ap-soft-orange: #fff1e0;
    --ap-soft-red: #fdeceb;
    --ap-shadow: rgba(0, 0, 0, .18);
}
html[data-theme="dark"] {
    color-scheme: dark;
    --ap-bg: #000000;
    --ap-surface: #1c1c1e;
    --ap-fill: #3a3a3c;
    --ap-fill-2: #2c2c2e;
    --ap-fill-3: #48484a;
    --ap-hover: #232325;
    --ap-ink: #f5f5f7;
    --ap-ink-2: #a1a1a6;
    --ap-ink-3: #8e8e93;
    --ap-line: #38383a;
    --ap-line-soft: #2c2c2e;
    --ap-line-strong: #48484a;
    --ap-glass: rgba(22, 22, 23, .78);
    --ap-glass-strong: rgba(36, 36, 38, .92);
    --ap-glass-green: rgba(16, 46, 26, .85);
    --ap-tint-rgb: 255, 255, 255;
    --ap-contrast-bg: #f5f5f7;
    --ap-contrast-fg: #1d1d1f;
    --ap-blue: #0a84ff;
    --ap-blue-hover: #409cff;
    --ap-blue-active: #0071e3;
    --ap-link: #2997ff;
    --ap-green: #30d158;
    --ap-soft-blue: rgba(10, 132, 255, .18);
    --ap-soft-green: rgba(48, 209, 88, .18);
    --ap-soft-orange: rgba(255, 159, 10, .18);
    --ap-soft-red: rgba(255, 69, 58, .18);
    --ap-shadow: rgba(0, 0, 0, .6);
}

body.ap-theme {
    --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Variables de Bootstrap */
    --bs-body-font-family: var(--ap-font);
    --bs-body-color: var(--ap-ink);
    --bs-body-bg: var(--ap-bg);
    --bs-primary: #0071e3;
    --bs-primary-rgb: 0, 113, 227;
    --bs-success: #28a745;
    --bs-success-rgb: 40, 167, 69;
    --bs-danger: #e0352b;
    --bs-danger-rgb: 224, 53, 43;
    --bs-warning: #ff9f0a;
    --bs-warning-rgb: 255, 159, 10;
    --bs-info: #32ade6;
    --bs-info-rgb: 50, 173, 230;
    --bs-secondary: #8e8e93;
    --bs-secondary-rgb: 142, 142, 147;
    --bs-dark-rgb: 29, 29, 31;
    --bs-link-color: var(--ap-link);
    --bs-link-hover-color: var(--ap-link);
    --bs-emphasis-color: var(--ap-ink);
    --bs-tertiary-bg: var(--ap-fill-2);
    --bs-secondary-bg: var(--ap-fill);
    --bs-border-color: var(--ap-line);
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-secondary-color: var(--ap-ink-2);

    font-family: var(--ap-font);
    color: var(--ap-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}
body.ap-theme.bg-light { background-color: var(--ap-bg) !important; }

body.ap-theme h1, body.ap-theme .h1,
body.ap-theme h2, body.ap-theme .h2,
body.ap-theme h3, body.ap-theme .h3 { font-weight: 700; letter-spacing: -0.025em; }
body.ap-theme h4, body.ap-theme .h4,
body.ap-theme h5, body.ap-theme .h5,
body.ap-theme h6, body.ap-theme .h6 { font-weight: 600; letter-spacing: -0.015em; }
body.ap-theme .text-muted { color: var(--ap-ink-2) !important; }
body.ap-theme .lead { color: var(--ap-ink-2); font-weight: 400; }

/* ---------- Barra superior ---------- */
body.ap-theme > nav.navbar {
    background: var(--ap-glass) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(var(--ap-tint-rgb), .08);
    box-shadow: none;
    padding-top: .3rem;
    padding-bottom: .3rem;
    --bs-navbar-color: var(--ap-ink);
    --bs-navbar-hover-color: var(--ap-ink);
    --bs-navbar-active-color: var(--ap-ink);
    --bs-navbar-brand-color: var(--ap-ink);
    --bs-navbar-brand-hover-color: var(--ap-ink);
}
/* Jornada activa: cristal con tinte verde */
body.ap-theme > nav.navbar.bg-success {
    background: var(--ap-glass-green) !important;
    border-bottom: 2px solid var(--ap-green);
}
body.ap-theme > nav.navbar.bg-success .navbar-brand i { color: #1f9d48; }
body.ap-theme > nav.navbar .navbar-brand {
    color: var(--ap-ink) !important;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
body.ap-theme > nav.navbar .nav-link {
    color: var(--ap-ink) !important;
    font-size: .84rem;
    font-weight: 400;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
body.ap-theme > nav.navbar .nav-link:hover { color: var(--ap-ink) !important; background: rgba(var(--ap-tint-rgb), .05); }
body.ap-theme > nav.navbar .nav-link.active,
body.ap-theme > nav.navbar .nav-link.show { color: var(--ap-ink) !important; font-weight: 500; background: rgba(var(--ap-tint-rgb), .06); }
body.ap-theme > nav.navbar .navbar-toggler { border: none; }
body.ap-theme > nav.navbar .navbar-toggler:focus { box-shadow: none; }
body.ap-theme > nav.navbar .navbar-toggler-icon { filter: invert(1) brightness(.2); }
html[data-theme="dark"] body.ap-theme > nav.navbar .navbar-toggler-icon { filter: none; }
body.ap-theme > nav.navbar .btn-sm { border-radius: 980px; }

/* ---------- Menús desplegables ---------- */
body.ap-theme .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ap-blue);
    --bs-dropdown-link-hover-bg: rgba(var(--ap-tint-rgb), .05);
    border: 1px solid rgba(var(--ap-tint-rgb), .06);
    border-radius: 14px;
    padding: 6px;
    background: var(--ap-surface);
    color: var(--ap-ink);
    box-shadow: 0 12px 40px -8px var(--ap-shadow), 0 2px 6px rgba(0, 0, 0, .06);
    font-size: .86rem;
}
body.ap-theme .dropdown-item {
    border-radius: 8px;
    padding: .42rem .75rem;
    color: var(--ap-ink);
}
body.ap-theme .dropdown-item i { color: var(--ap-ink-3); width: 1.2em; }
body.ap-theme .dropdown-item.active,
body.ap-theme .dropdown-item:active { background: var(--ap-blue); color: #fff; }
body.ap-theme .dropdown-item.active i,
body.ap-theme .dropdown-item:active i { color: #fff; }
body.ap-theme .dropdown-header {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ap-ink-3);
    padding: .5rem .75rem .25rem;
}
body.ap-theme .dropdown-divider { border-color: var(--ap-line-soft); margin: .3rem .25rem; }

/* ---------- Tarjetas ---------- */
body.ap-theme .card {
    --bs-card-border-radius: 18px;
    --bs-card-inner-border-radius: 17px;
    --bs-card-cap-bg: var(--ap-surface);
    --bs-card-border-color: transparent;
    border: none;
    box-shadow: 0 1px 2px rgba(var(--ap-tint-rgb), .04);
}
body.ap-theme .card:hover { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .16); }
body.ap-theme .card-header {
    border-bottom: 1px solid var(--ap-line-soft);
    padding: 1rem 1.25rem;
    font-weight: 600;
}
body.ap-theme .card-header .card-title,
body.ap-theme .card-header h5,
body.ap-theme .card-header h6 { font-weight: 600; letter-spacing: -0.015em; }
body.ap-theme .card-footer { background: var(--ap-surface); border-top: 1px solid var(--ap-line-soft); }

/* Cabeceras de color (bg-primary, bg-success, degradados…) → cabecera blanca
   con título oscuro; el color original pasa al icono. Aplica a todas las
   páginas interiores sin tocar sus plantillas. */
body.ap-theme .card-header[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-transparent),
body.ap-theme .card-header[style*="background"],
body.ap-theme .modal-header[class*="bg-"]:not(.bg-white):not(.bg-light),
body.ap-theme .modal-header[style*="background"] {
    background: var(--ap-surface) !important;
    color: var(--ap-ink) !important;
    --ap-accent: var(--ap-blue);
}
body.ap-theme .card-header.bg-primary, body.ap-theme .modal-header.bg-primary { --ap-accent: #0a84ff; }
body.ap-theme .card-header.bg-success, body.ap-theme .modal-header.bg-success { --ap-accent: #30d158; }
body.ap-theme .card-header.bg-danger, body.ap-theme .modal-header.bg-danger { --ap-accent: #ff453a; }
body.ap-theme .card-header.bg-warning, body.ap-theme .modal-header.bg-warning { --ap-accent: #ff9f0a; }
body.ap-theme .card-header.bg-info, body.ap-theme .modal-header.bg-info { --ap-accent: #32ade6; }
body.ap-theme .card-header.bg-secondary, body.ap-theme .modal-header.bg-secondary { --ap-accent: #8e8e93; }
body.ap-theme .card-header.bg-dark, body.ap-theme .modal-header.bg-dark { --ap-accent: var(--ap-ink); }

body.ap-theme .card-header[class*="bg-"]:not(.bg-white):not(.bg-light) :is(h1, h2, h3, h4, h5, h6, .card-title, .modal-title, span, strong, div, a:not(.btn)),
body.ap-theme .card-header[style*="background"] :is(h1, h2, h3, h4, h5, h6, .card-title, span, strong, div, a:not(.btn)),
body.ap-theme .modal-header[class*="bg-"]:not(.bg-white):not(.bg-light) :is(h1, h2, h3, h4, h5, h6, .modal-title, span, strong),
body.ap-theme .modal-header[style*="background"] :is(h1, h2, h3, h4, h5, h6, .modal-title, span, strong) {
    color: var(--ap-ink) !important;
}
body.ap-theme .card-header[class*="bg-"]:not(.bg-white):not(.bg-light) :is(small, .small, .text-white-50, .opacity-75),
body.ap-theme .card-header[style*="background"] :is(small, .small, .text-white-50, .opacity-75) {
    color: var(--ap-ink-3) !important;
    opacity: 1 !important;
}
body.ap-theme .card-header[class*="bg-"]:not(.bg-white):not(.bg-light) :is(h1, h2, h3, h4, h5, h6, .card-title, .modal-title) > i:first-child,
body.ap-theme .card-header[style*="background"] :is(h1, h2, h3, h4, h5, h6, .card-title) > i:first-child,
body.ap-theme .modal-header[class*="bg-"]:not(.bg-white):not(.bg-light) .modal-title > i:first-child {
    color: var(--ap-accent) !important;
}
/* Los badges conservan su propio color */
body.ap-theme .card-header .badge { color: #fff !important; }
body.ap-theme .card-header .badge.bg-light,
body.ap-theme .card-header .badge.bg-white,
body.ap-theme .card-header .badge.text-dark { color: var(--ap-ink) !important; }
/* Botones pensados para fondo oscuro */
body.ap-theme .card-header .btn-outline-light,
body.ap-theme .modal-header .btn-outline-light {
    --bs-btn-color: var(--ap-ink);
    --bs-btn-border-color: var(--ap-line-strong);
    --bs-btn-hover-color: var(--ap-ink);
    --bs-btn-hover-bg: var(--ap-fill-2);
    --bs-btn-hover-border-color: var(--ap-line-strong);
}
body.ap-theme .card-header .btn-light,
body.ap-theme .modal-header .btn-light {
    --bs-btn-bg: var(--ap-fill-2);
    --bs-btn-border-color: var(--ap-fill-2);
    --bs-btn-hover-bg: var(--ap-fill);
    --bs-btn-hover-border-color: var(--ap-fill);
}
body.ap-theme .modal-header .btn-close-white { filter: none; }

/* Cabecera de página: iconos y títulos de color se vuelven sobrios */
body.ap-theme main > .container > .row:first-child h1.text-primary,
body.ap-theme main h1.text-primary,
body.ap-theme main h2.text-primary { color: var(--ap-ink) !important; }
body.ap-theme main h1 > i:first-child,
body.ap-theme main h2 > i:first-child { color: var(--ap-blue); }

/* ---------- Botones ---------- */
body.ap-theme .btn {
    --bs-btn-border-radius: 10px;
    --bs-btn-font-weight: 500;
    letter-spacing: -0.01em;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
body.ap-theme .btn:active { transform: scale(.98); }
body.ap-theme .btn-sm { --bs-btn-border-radius: 8px; }
body.ap-theme .btn-lg { --bs-btn-border-radius: 12px; }
body.ap-theme .btn-primary {
    --bs-btn-bg: var(--ap-blue);
    --bs-btn-border-color: var(--ap-blue);
    --bs-btn-hover-bg: var(--ap-blue-hover);
    --bs-btn-hover-border-color: var(--ap-blue-hover);
    --bs-btn-active-bg: var(--ap-blue-active);
    --bs-btn-active-border-color: var(--ap-blue-active);
    --bs-btn-disabled-bg: var(--ap-blue);
    --bs-btn-disabled-border-color: var(--ap-blue);
}
body.ap-theme .btn-outline-primary {
    --bs-btn-color: var(--ap-blue);
    --bs-btn-border-color: var(--ap-blue);
    --bs-btn-hover-bg: var(--ap-blue);
    --bs-btn-hover-border-color: var(--ap-blue);
    --bs-btn-active-bg: var(--ap-blue-active);
    --bs-btn-active-border-color: var(--ap-blue-active);
}
body.ap-theme .btn-secondary {
    --bs-btn-color: var(--ap-ink);
    --bs-btn-bg: var(--ap-fill);
    --bs-btn-border-color: var(--ap-fill);
    --bs-btn-hover-color: var(--ap-ink);
    --bs-btn-hover-bg: var(--ap-fill-3);
    --bs-btn-hover-border-color: var(--ap-fill-3);
    --bs-btn-active-color: var(--ap-ink);
    --bs-btn-active-bg: var(--ap-fill-3);
    --bs-btn-active-border-color: var(--ap-fill-3);
}
body.ap-theme .btn-outline-secondary,
body.ap-theme .btn-outline-dark {
    --bs-btn-color: var(--ap-ink);
    --bs-btn-border-color: var(--ap-line-strong);
    --bs-btn-hover-color: var(--ap-ink);
    --bs-btn-hover-bg: var(--ap-fill-2);
    --bs-btn-hover-border-color: var(--ap-line-strong);
    --bs-btn-active-color: var(--ap-ink);
    --bs-btn-active-bg: var(--ap-fill);
    --bs-btn-active-border-color: var(--ap-line-strong);
}
body.ap-theme .btn-success {
    --bs-btn-bg: #28a745;
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #23963d;
    --bs-btn-hover-border-color: #23963d;
}
body.ap-theme .btn-danger {
    --bs-btn-bg: #e0352b;
    --bs-btn-border-color: #e0352b;
    --bs-btn-hover-bg: #c92e25;
    --bs-btn-hover-border-color: #c92e25;
}
body.ap-theme .btn-link { --bs-btn-color: var(--ap-link); text-decoration: none; }
body.ap-theme .btn:focus-visible { box-shadow: 0 0 0 4px rgba(0, 113, 227, .25); }

/* ---------- Formularios ---------- */
body.ap-theme .form-control,
body.ap-theme .form-select {
    border-radius: 10px;
    border: 1px solid var(--ap-line-strong);
    background-color: var(--ap-surface);
    color: var(--ap-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.ap-theme .form-control-sm, body.ap-theme .form-select-sm { border-radius: 8px; }
body.ap-theme .form-control:focus,
body.ap-theme .form-select:focus {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .15);
}
body.ap-theme .form-control::placeholder { color: #a1a1a6; }
body.ap-theme .form-label { font-weight: 500; font-size: .88rem; color: var(--ap-ink); margin-bottom: .35rem; }
body.ap-theme .form-text { color: var(--ap-ink-3); }
body.ap-theme .form-check-input:checked { background-color: var(--ap-blue); border-color: var(--ap-blue); }
body.ap-theme .form-check-input:focus { box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
body.ap-theme .form-switch .form-check-input:checked { background-color: var(--ap-green); border-color: var(--ap-green); }
body.ap-theme .input-group-text { background: var(--ap-fill-2); border-color: var(--ap-line-strong); color: var(--ap-ink-2); }

/* ---------- Tablas ---------- */
body.ap-theme .table {
    --bs-table-border-color: var(--ap-line-soft);
    --bs-table-hover-bg: var(--ap-hover);
    --bs-table-striped-bg: var(--ap-hover);
    font-size: .9rem;
}
body.ap-theme .table > thead > tr > th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ap-ink-3);
    border-bottom: 1px solid var(--ap-line);
    white-space: nowrap;
}
body.ap-theme .table > :not(caption) > * > * { padding-top: .75rem; padding-bottom: .75rem; }
body.ap-theme .table-light { --bs-table-bg: var(--ap-hover); --bs-table-color: var(--ap-ink); }
body.ap-theme .table-hover tbody tr:hover { background-color: var(--ap-hover); }

/* ---------- Badges, alertas, modales ---------- */
body.ap-theme .badge {
    border-radius: 980px;
    font-weight: 500;
    padding: .35em .7em;
    letter-spacing: 0;
}
body.ap-theme .alert {
    border: none;
    border-radius: 14px;
    font-size: .92rem;
}
body.ap-theme .alert-primary, body.ap-theme .alert-info { background: #e8f2fd; color: #0a4a8f; }
body.ap-theme .alert-success { background: #e6f6ea; color: #1b6b32; }
body.ap-theme .alert-warning { background: #fff4e0; color: #8a4b00; }
body.ap-theme .alert-danger { background: #fdeceb; color: #a1251d; }
body.ap-theme .modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35);
}
body.ap-theme .modal-header { border-bottom: 1px solid var(--ap-line-soft); padding: 1.1rem 1.4rem; }
body.ap-theme .modal-footer { border-top: 1px solid var(--ap-line-soft); }
body.ap-theme .modal-title { font-weight: 600; letter-spacing: -0.02em; }
body.ap-theme .modal-backdrop.show { opacity: .35; }

/* ---------- Navegación secundaria ---------- */
body.ap-theme .nav-pills .nav-link { border-radius: 980px; color: var(--ap-ink); font-weight: 500; }
body.ap-theme .nav-pills .nav-link.active { background: var(--ap-contrast-bg); color: var(--ap-contrast-fg); }
body.ap-theme .nav-tabs { border-bottom-color: var(--ap-line); }
body.ap-theme .nav-tabs .nav-link { color: var(--ap-ink-2); border: none; border-bottom: 2px solid transparent; font-weight: 500; }
body.ap-theme .nav-tabs .nav-link:hover { color: var(--ap-ink); border-bottom-color: var(--ap-line); }
body.ap-theme .nav-tabs .nav-link.active { color: var(--ap-ink); background: transparent; border-bottom-color: var(--ap-blue); }
body.ap-theme .pagination { --bs-pagination-border-color: transparent; --bs-pagination-color: var(--ap-ink); gap: 4px; }
body.ap-theme .page-link { border-radius: 8px !important; border: none; }
body.ap-theme .page-item.active .page-link { background: var(--ap-blue); }
body.ap-theme .list-group { --bs-list-group-border-color: var(--ap-line-soft); --bs-list-group-border-radius: 14px; }
body.ap-theme .list-group-item.active { background: var(--ap-blue); border-color: var(--ap-blue); }
body.ap-theme .progress { border-radius: 980px; background: var(--ap-fill); }
body.ap-theme .breadcrumb { font-size: .85rem; }
body.ap-theme .breadcrumb-item a { color: var(--ap-link); text-decoration: none; }

/* ---------- Botones flotantes laterales ---------- */
body.ap-theme #activeUsersSidebarToggle,
body.ap-theme #aiChatToggle,
body.ap-theme #calculatorToggle,
body.ap-theme #createTicketToggle,
body.ap-theme #eventsSidebarToggle,
body.ap-theme #knowledgeBaseToggle,
body.ap-theme #quickNoteToggle,
body.ap-theme #quickTaskToggle,
body.ap-theme #quickTodoToggle,
body.ap-theme #ratingToggle,
body.ap-theme #shortUrlStatsToggle > .btn,
body.ap-theme #socialFeedToggle,
body.ap-theme #systemMonitorToggle,
body.ap-theme #transactionToggle,
body.ap-theme #translationToggle,
body.ap-theme #unreviewedConversationsToggle,
body.ap-theme #urlManagerToggle,
body.ap-theme #workOrdersSidebarToggle {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35) !important;
}
body.ap-theme .floating-button-left,
body.ap-theme #eventsSidebarToggle,
body.ap-theme #activeUsersSidebarToggle { margin-left: 8px; }
body.ap-theme #aiChatToggle,
body.ap-theme #createTicketToggle,
body.ap-theme #quickNoteToggle,
body.ap-theme #shortUrlStatsToggle,
body.ap-theme #ratingToggle,
body.ap-theme #knowledgeBaseToggle,
body.ap-theme #urlManagerToggle,
body.ap-theme #unreviewedConversationsToggle,
body.ap-theme #socialFeedToggle,
body.ap-theme #workOrdersSidebarToggle { margin-right: 8px; }
body.ap-theme #aiChatToggle { background: linear-gradient(135deg, #0071e3 0%, #7b3fe4 100%) !important; }

/* ---------- Paneles laterales deslizantes (apps del lateral) ---------- */
body.ap-theme #eventsSidebar { --ap-accent: #0a84ff; }
body.ap-theme #workOrdersSidebar { --ap-accent: #ff453a; }
body.ap-theme #translationSidebar { --ap-accent: #ff9f0a; }
body.ap-theme #transactionsSidebar { --ap-accent: #0a84ff; }
body.ap-theme #knowledgeBaseSidebar { --ap-accent: #ff375f; }
body.ap-theme #urlManagerSidebar { --ap-accent: #32ade6; }
body.ap-theme #activeUsersSidebar { --ap-accent: #30d158; }
body.ap-theme #quickTodoSidebar { --ap-accent: #8e8e93; }
body.ap-theme #systemMonitorSidebar { --ap-accent: var(--ap-ink); }
body.ap-theme #unreviewedConversationsSidebar { --ap-accent: #ff9f0a; }
body.ap-theme #aiChatSidebar { --ap-accent: #5e5ce6; }
body.ap-theme #calculatorWidget { --ap-accent: #0a84ff; }

body.ap-theme #eventsSidebar,
body.ap-theme #workOrdersSidebar,
body.ap-theme #translationSidebar,
body.ap-theme #transactionsSidebar,
body.ap-theme #knowledgeBaseSidebar,
body.ap-theme #urlManagerSidebar,
body.ap-theme #activeUsersSidebar,
body.ap-theme #quickTodoSidebar,
body.ap-theme #systemMonitorSidebar,
body.ap-theme #unreviewedConversationsSidebar,
body.ap-theme #aiChatSidebar,
body.ap-theme #calculatorWidget {
    background: var(--ap-surface) !important;
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    font-size: .9rem;
}

/* Abierto: tarjeta flotante con sombra (el JS pone left/right a 0) */
body.ap-theme #eventsSidebar[style*="left: 0"],
body.ap-theme #workOrdersSidebar[style*="left: 0"],
body.ap-theme #translationSidebar[style*="left: 0"],
body.ap-theme #transactionsSidebar[style*="left: 0"],
body.ap-theme #knowledgeBaseSidebar[style*="left: 0"],
body.ap-theme #urlManagerSidebar[style*="left: 0"],
body.ap-theme #activeUsersSidebar[style*="right: 0"],
body.ap-theme #quickTodoSidebar[style*="right: 0"],
body.ap-theme #systemMonitorSidebar[style*="right: 0"],
body.ap-theme #unreviewedConversationsSidebar[style*="right: 0"],
body.ap-theme #aiChatSidebar[style*="right: 0"] {
    margin: 10px;
    height: calc(100vh - 20px) !important;
    border-radius: 22px;
    box-shadow: 0 24px 70px -12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--ap-tint-rgb), .05) !important;
}
body.ap-theme #calculatorWidget {
    border-radius: 22px 0 0 22px;
}
body.ap-theme #calculatorWidget[style*="right: 0"] {
    margin-right: 10px;
    border-radius: 22px;
    box-shadow: 0 24px 70px -12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--ap-tint-rgb), .05) !important;
}

/* Cabecera del panel: clara, título oscuro, icono con el color de la app */
body.ap-theme #eventsSidebar > div:first-child,
body.ap-theme #workOrdersSidebar > div:first-child,
body.ap-theme #translationSidebar > div:first-child,
body.ap-theme #transactionsSidebar > div:first-child,
body.ap-theme #knowledgeBaseSidebar > div:first-child,
body.ap-theme #urlManagerSidebar > div:first-child,
body.ap-theme #activeUsersSidebar > div:first-child,
body.ap-theme #quickTodoSidebar > div:first-child,
body.ap-theme #systemMonitorSidebar > div:first-child,
body.ap-theme #unreviewedConversationsSidebar > div:first-child,
body.ap-theme #aiChatSidebar > div:first-child,
body.ap-theme #calculatorWidget > div:first-child {
    background: transparent !important;
    color: var(--ap-ink) !important;
    border-bottom: 1px solid rgba(var(--ap-tint-rgb), .06);
    padding: 1.1rem 1.25rem !important;
}
body.ap-theme [id$="Sidebar"] > div:first-child h5,
body.ap-theme [id$="Sidebar"] > div:first-child h6,
body.ap-theme #calculatorWidget > div:first-child h5,
body.ap-theme #calculatorWidget > div:first-child h6 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ap-ink) !important;
}
body.ap-theme [id$="Sidebar"] > div:first-child h6 i,
body.ap-theme [id$="Sidebar"] > div:first-child h5 i,
body.ap-theme #calculatorWidget > div:first-child i:not(.bi-x-lg):not(.bi-x) {
    color: var(--ap-accent) !important;
}
body.ap-theme [id$="Sidebar"] > div:first-child small,
body.ap-theme #calculatorWidget > div:first-child small {
    color: var(--ap-ink-3) !important;
    opacity: 1 !important;
}
body.ap-theme [id$="Sidebar"] > div:first-child .btn-outline-light,
body.ap-theme [id$="Sidebar"] > div:first-child .btn-light,
body.ap-theme [id$="Sidebar"] > div:first-child .btn-close-white,
body.ap-theme #calculatorWidget > div:first-child .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(var(--ap-tint-rgb), .06) !important;
    color: var(--ap-ink-2) !important;
    font-size: .75rem;
}
body.ap-theme [id$="Sidebar"] > div:first-child .btn-outline-light:hover,
body.ap-theme #calculatorWidget > div:first-child .btn:hover { background: rgba(var(--ap-tint-rgb), .1) !important; color: var(--ap-ink) !important; }

/* Franjas informativas y contenido interno */
body.ap-theme [id$="Sidebar"] .bg-light { background: rgba(var(--ap-tint-rgb), .025) !important; }
body.ap-theme [id$="Sidebar"] .border-bottom { border-color: rgba(var(--ap-tint-rgb), .06) !important; }
body.ap-theme [id$="Sidebar"] .card {
    border-radius: 14px;
    box-shadow: none;
    background: rgba(var(--ap-tint-rgb), .035);
}
body.ap-theme [id$="Sidebar"] .card:hover { box-shadow: none; background: rgba(var(--ap-tint-rgb), .055); }
body.ap-theme [id$="Sidebar"] .list-group-item { background: transparent; }
body.ap-theme [id$="Sidebar"] .form-control,
body.ap-theme [id$="Sidebar"] .form-select { background: var(--ap-surface); }

/* ---------- Barra inferior (ticker) ---------- */
body.ap-theme #financial-ticker-global {
    background: var(--ap-glass) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(var(--ap-tint-rgb), .08) !important;
    color: var(--ap-ink) !important;
    font-size: .8rem;
}
body.ap-theme #financial-ticker-global .text-white,
body.ap-theme #financial-ticker-global .text-light { color: var(--ap-ink) !important; }
body.ap-theme #financial-ticker-global .text-muted { color: var(--ap-ink-3) !important; }
body.ap-theme #financial-ticker-global .btn-outline-light {
    --bs-btn-color: var(--ap-ink);
    --bs-btn-border-color: var(--ap-line-strong);
    --bs-btn-hover-color: var(--ap-ink);
    --bs-btn-hover-bg: var(--ap-fill-2);
    --bs-btn-hover-border-color: var(--ap-line-strong);
}

/* ---------- Scrollbars discretas ---------- */
body.ap-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ap-theme ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}
body.ap-theme ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .3); }
body.ap-theme ::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    body.ap-theme .btn:active { transform: none; }
}

/* ---------- Superficies de componentes (ambos modos) ---------- */
body.ap-theme .card { --bs-card-bg: var(--ap-surface); --bs-card-color: var(--ap-ink); }
body.ap-theme .modal { --bs-modal-bg: var(--ap-surface); --bs-modal-color: var(--ap-ink); }
body.ap-theme .list-group { --bs-list-group-bg: var(--ap-surface); --bs-list-group-color: var(--ap-ink); }
body.ap-theme .table { --bs-table-bg: transparent; --bs-table-color: var(--ap-ink); }
body.ap-theme .offcanvas { --bs-offcanvas-bg: var(--ap-surface); }
body.ap-theme .popover { --bs-popover-bg: var(--ap-surface); }
body.ap-theme .dropdown-menu { --bs-dropdown-link-color: var(--ap-ink); --bs-dropdown-link-hover-color: var(--ap-ink); }

/* Tarjetas de color sólido (KPIs tipo .card.bg-primary.text-white) → tarjeta neutra con acento */
body.ap-theme .card.text-white[class*="bg-"]:not(.bg-dark):not(.bg-black) {
    background: var(--ap-surface) !important;
    color: var(--ap-ink) !important;
}
body.ap-theme .card.text-white.bg-primary { --ap-accent: #0a84ff; }
body.ap-theme .card.text-white.bg-success { --ap-accent: #30d158; }
body.ap-theme .card.text-white.bg-danger { --ap-accent: #ff453a; }
body.ap-theme .card.text-white.bg-warning { --ap-accent: #ff9f0a; }
body.ap-theme .card.text-white.bg-info { --ap-accent: #32ade6; }
body.ap-theme .card.text-white.bg-secondary { --ap-accent: #8e8e93; }
body.ap-theme .card.text-white[class*="bg-"]:not(.bg-dark):not(.bg-black) :is(h1, h2, h3, h4, h5, h6, p, span, div, strong, a:not(.btn)) { color: var(--ap-ink) !important; }
body.ap-theme .card.text-white[class*="bg-"]:not(.bg-dark):not(.bg-black) :is(small, .small, .opacity-75, .text-white-50) { color: var(--ap-ink-3) !important; opacity: 1 !important; }
body.ap-theme .card.text-white[class*="bg-"]:not(.bg-dark):not(.bg-black) i { color: var(--ap-accent) !important; }
body.ap-theme .card.text-white[class*="bg-"]:not(.bg-dark):not(.bg-black) .badge { color: #fff !important; }

/* ---------- Modo oscuro: utilidades de Bootstrap con colores fijos ---------- */
html[data-theme="dark"] body.ap-theme .bg-white { background-color: var(--ap-surface) !important; }
html[data-theme="dark"] body.ap-theme .bg-light:not(.badge) { background-color: var(--ap-fill-2) !important; }
html[data-theme="dark"] body.ap-theme .badge.bg-light { background-color: var(--ap-fill) !important; color: var(--ap-ink) !important; }
html[data-theme="dark"] body.ap-theme .text-dark { color: var(--ap-ink) !important; }
html[data-theme="dark"] body.ap-theme .text-black,
html[data-theme="dark"] body.ap-theme .text-body { color: var(--ap-ink) !important; }
html[data-theme="dark"] body.ap-theme .text-secondary { color: var(--ap-ink-2) !important; }
html[data-theme="dark"] body.ap-theme .border,
html[data-theme="dark"] body.ap-theme .border-top,
html[data-theme="dark"] body.ap-theme .border-bottom,
html[data-theme="dark"] body.ap-theme .border-start,
html[data-theme="dark"] body.ap-theme .border-end { border-color: var(--ap-line) !important; }
html[data-theme="dark"] body.ap-theme .table-light { --bs-table-bg: var(--ap-fill-2); --bs-table-color: var(--ap-ink); }
html[data-theme="dark"] body.ap-theme .table-primary { --bs-table-bg: var(--ap-soft-blue); --bs-table-color: var(--ap-ink); }
html[data-theme="dark"] body.ap-theme .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(255, 255, 255, .025); }
html[data-theme="dark"] body.ap-theme .alert-primary,
html[data-theme="dark"] body.ap-theme .alert-info { background: var(--ap-soft-blue); color: #9ecbff; }
html[data-theme="dark"] body.ap-theme .alert-success { background: var(--ap-soft-green); color: #8fe3a8; }
html[data-theme="dark"] body.ap-theme .alert-warning { background: var(--ap-soft-orange); color: #ffcf85; }
html[data-theme="dark"] body.ap-theme .alert-danger { background: var(--ap-soft-red); color: #ffaaa4; }
html[data-theme="dark"] body.ap-theme .alert-light { background: var(--ap-fill-2); color: var(--ap-ink); }
html[data-theme="dark"] body.ap-theme .btn-light {
    --bs-btn-bg: var(--ap-fill); --bs-btn-border-color: var(--ap-fill); --bs-btn-color: var(--ap-ink);
    --bs-btn-hover-bg: var(--ap-fill-3); --bs-btn-hover-border-color: var(--ap-fill-3); --bs-btn-hover-color: var(--ap-ink);
}
html[data-theme="dark"] body.ap-theme .btn-dark,
html[data-theme="dark"] body.ap-theme .btn-outline-dark { --bs-btn-color: var(--ap-ink); }
html[data-theme="dark"] body.ap-theme .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] body.ap-theme .form-control:disabled,
html[data-theme="dark"] body.ap-theme .form-control[readonly] { background-color: var(--ap-fill-2); }
html[data-theme="dark"] body.ap-theme .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1a1a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] body.ap-theme footer { background-color: var(--ap-bg) !important; border-color: var(--ap-line) !important; }
html[data-theme="dark"] body.ap-theme code { color: #ff8ac0; }
html[data-theme="dark"] body.ap-theme hr { border-color: var(--ap-line); opacity: 1; }
html[data-theme="dark"] body.ap-theme .card .card-body [style*="background: white"],
html[data-theme="dark"] body.ap-theme .card .card-body [style*="background-color: white"],
html[data-theme="dark"] body.ap-theme .card .card-body [style*="background:#fff"],
html[data-theme="dark"] body.ap-theme .card .card-body [style*="background: #fff"] { background: var(--ap-fill-2) !important; }
html[data-theme="dark"] body.ap-theme [id$="Sidebar"] [style*="background: white"],
html[data-theme="dark"] body.ap-theme [id$="Sidebar"] [style*="background: #f8f9fa"] { background: transparent !important; }

/* ---------- Interruptor claro / oscuro ---------- */
.ap-theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--ap-tint-rgb), .06);
    color: var(--ap-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    transition: background .15s ease, transform .3s ease;
    flex-shrink: 0;
}
.ap-theme-toggle:hover { background: rgba(var(--ap-tint-rgb), .12); }
.ap-theme-toggle:active { transform: rotate(-20deg) scale(.94); }
.ap-theme-toggle .bi-sun-fill { display: none; }
html[data-theme="dark"] .ap-theme-toggle .bi-sun-fill { display: inline; }
html[data-theme="dark"] .ap-theme-toggle .bi-moon-stars-fill { display: none; }

/* ---------- Iconos laterales: ocultos por defecto, se muestran con el botón ---------- */
html:not([data-side-icons="on"]) body.ap-theme :is(
    #activeUsersSidebarToggle, #aiChatToggle, #calculatorToggle, #createTicketToggle,
    #eventsSidebarToggle, #knowledgeBaseToggle, #quickNoteToggle, #quickTaskToggle,
    #quickTodoToggle, #ratingToggle, #shortUrlStatsToggle, #socialFeedToggle,
    #systemMonitorToggle, #transactionToggle, #translationToggle,
    #unreviewedConversationsToggle, #urlManagerToggle, #workOrdersSidebarToggle,
    .floating-button-left, #chat-widget, #ai-floating-button
) {
    display: none !important;
}
html[data-side-icons="on"] .ap-side-toggle { background: var(--ap-soft-blue); color: var(--ap-blue); }

/* ---------- Selector de idioma ---------- */
.ap-lang-toggle { font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.ap-lang-menu { min-width: 180px; }
.ap-lang-menu .dropdown-item.active small { opacity: .8 !important; }

/* ---------- Etiquetas suaves legibles en modo oscuro ---------- */
html[data-theme="dark"] .ap-pill.blue,
html[data-theme="dark"] .ap-tag:not([style*="color: white"]) { color: #64b5ff !important; }
html[data-theme="dark"] .ap-pill.green,
html[data-theme="dark"] .ap-status.on,
html[data-theme="dark"] .badge.ap-var-up { color: #5fd383 !important; }
html[data-theme="dark"] .ap-pill.orange,
html[data-theme="dark"] .ap-btn-warm { color: #ffb35c !important; }
html[data-theme="dark"] .badge.ap-var-down { color: #ff8a80 !important; }

/* ---------- Menús de la barra: altura máxima con scroll ---------- */
body.ap-theme > nav.navbar .dropdown-menu {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
body.ap-theme > nav.navbar .nav-link { white-space: nowrap; }

/* ---------- Alineación vertical de la barra (enlaces, iconos y botones) ---------- */
body.ap-theme > nav.navbar .navbar-nav { align-items: center; gap: 2px; }
body.ap-theme > nav.navbar .navbar-nav > .nav-item { display: flex; align-items: center; margin-top: 0; margin-bottom: 0; }
body.ap-theme > nav.navbar .navbar-nav > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}
body.ap-theme > nav.navbar .navbar-nav > .nav-item > .nav-link > i.fs-5 { font-size: 1.05rem !important; }
body.ap-theme > nav.navbar .navbar-nav > .nav-item.ms-1,
body.ap-theme > nav.navbar .navbar-nav > .nav-item.ms-2 { margin-left: .3rem !important; }
@media (max-width: 991px) {
    body.ap-theme > nav.navbar .navbar-nav { align-items: flex-start; }
}

/* ---------- Botones de jornada (play / stop): círculo como los demás iconos ---------- */
body.ap-theme > nav.navbar a.btn[href$="/time-clock/start/"],
body.ap-theme > nav.navbar a.btn[href$="/time-clock/end/"] {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    border: none;
    box-shadow: none;
}
body.ap-theme > nav.navbar a.btn[href$="/time-clock/start/"] { background: #30d158; color: #fff; }
body.ap-theme > nav.navbar a.btn[href$="/time-clock/end/"] { background: #ff453a; color: #fff; }
body.ap-theme > nav.navbar a.btn[href$="/time-clock/start/"]:hover,
body.ap-theme > nav.navbar a.btn[href$="/time-clock/end/"]:hover { filter: brightness(1.08); color: #fff; }