/* ==========================================================================
   BewPro Panel · piel del panel (DS 2.0) sobre Metronic demo1
   Reemplaza a admin-brand.css. Se carga desde resources/views/base/base.blade.php
   para bewpro.com Y para todos los tenants: el contorno es uno solo.
   Capas: 1) tokens → variables de Metronic  2) tipografía  3) workspace
          4) sidebar (aside)  5) header  6) modo oscuro
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    --bp-navy: #070B1A;
    --bp-navy-2: #0F1629;
    --bp-navy-line: #1E2740;
    --bp-paper: #F6F7FB;
    --bp-white: #FFFFFF;
    --bp-ink: #0B1020;
    --bp-ink-2: #3D4560;
    --bp-ink-muted: #5B6478;
    --bp-line: #E1E4EE;
    --bp-teal: #3DC2C2;
    --bp-teal-bright: #60DEDE;
    --bp-teal-ink: #1F8F8F;
    --bp-teal-tint: #E3F6F6;
    --bp-teal-on: #05262A;
    --bp-side-text: #C9D0E3;
    --bp-side-muted: #6B7390;
    --bp-success: #22C38E;
    --bp-warning: #F5B73B;
    --bp-danger: #E5484D;
    --bp-font-display: "Sora", "Segoe UI", Helvetica, Arial, sans-serif;
    --bp-font-body: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;
    --bp-r: 8px;
    --bp-r-pill: 999px;
    --bp-aside-w: 260px;
    --bp-aside-w-min: 72px;

    /* Metronic / Bootstrap — un solo acento */
    --bs-primary: var(--bp-teal);
    --bs-primary-rgb: 61, 194, 194;
    --bs-primary-active: #2FB0B0;
    --bs-primary-light: var(--bp-teal-tint);
    --bs-primary-inverse: var(--bp-teal-on);
    --kt-primary: var(--bp-teal);
    --kt-primary-rgb: 61, 194, 194;
    --kt-primary-active: #2FB0B0;
    --kt-primary-light: var(--bp-teal-tint);
    --kt-primary-inverse: var(--bp-teal-on);
    --kt-text-primary: var(--bp-teal-ink);
    --bs-success: var(--bp-success);
    --kt-success: var(--bp-success);
    --bs-danger: var(--bp-danger);
    --kt-danger: var(--bp-danger);
    --bs-warning: var(--bp-warning);
    --kt-warning: var(--bp-warning);
    --bs-font-sans-serif: var(--bp-font-body);
    --bs-body-font-family: var(--bp-font-body);
    --bs-body-bg: var(--bp-paper);
    --bs-body-bg-rgb: 246, 247, 251;
    --kt-body-bg: var(--bp-paper);
    --kt-body-bg-rgb: 246, 247, 251;
    --kt-page-bg: var(--bp-paper);
    --kt-app-bg-color: var(--bp-paper);
    --bs-body-color: var(--bp-ink);
    --kt-text-dark: var(--bp-ink);
    --kt-text-gray-800: var(--bp-ink);
    --kt-text-gray-700: var(--bp-ink-2);
    --kt-text-muted: var(--bp-ink-muted);
    --kt-card-bg: var(--bp-white);
    --kt-card-border-color: var(--bp-line);
    --kt-card-box-shadow: 0 1px 2px rgba(11, 16, 32, .04);
    --kt-border-color: var(--bp-line);
    --kt-border-dashed-color: var(--bp-line);
    --kt-aside-bg-color: var(--bp-navy);
    --kt-aside-box-shadow: none;
    --kt-aside-minimized-hover-box-shadow: 12px 0 24px rgba(7, 11, 26, .18);
    --kt-header-bg-color: var(--bp-white);
    --kt-header-box-shadow: none;
    --kt-toolbar-bg-color: var(--bp-paper);
    --kt-toolbar-box-shadow: none;
    --kt-input-bg: var(--bp-white);
    --kt-input-border-color: var(--bp-line);
    --kt-input-focus-border-color: var(--bp-teal);
    --kt-input-solid-bg: var(--bp-paper);
    --kt-input-solid-bg-focus: var(--bp-white);
    --bs-border-radius: var(--bp-r);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 10px;
}

/* ── 2. Tipografía ─────────────────────────────────────────────────────── */
body { font-family: var(--bp-font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.page-heading, .card-title, .card-label, .modal-title, .admin-header__title,
.fs-2x:not(i), .fs-2qx:not(i), .fs-3x:not(i) {
    /* ⚠️ nunca sobre <i>: los íconos Font Awesome llevan fs-1/fs-2 y perderían su fuente */
    font-family: var(--bp-font-display);
    letter-spacing: -.01em;
}
.fw-bolder, .fw-bold { font-weight: 700; }
.table, .badge, .form-control, .form-select, .btn { font-family: var(--bp-font-body); }
.table td, .table th, .fs-7, .fs-8, .text-muted { font-variant-numeric: tabular-nums; }

/* ── 3. Workspace ──────────────────────────────────────────────────────── */
body, .page, .wrapper, .content, .post { background-color: var(--bp-paper); }
.card { border: 1px solid var(--bp-line); border-radius: var(--bp-r); box-shadow: var(--kt-card-box-shadow); }
.card .card-header { border-bottom-color: var(--bp-line); }
.btn { border-radius: var(--bp-r); font-weight: 600; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-custom.btn-primary { background-color: var(--bp-teal) !important; border-color: var(--bp-teal) !important; color: var(--bp-teal-on) !important; }
.btn-primary:hover, .btn-primary:active { background-color: var(--bs-primary-active) !important; border-color: var(--bs-primary-active) !important; }
.btn-light-primary { background-color: var(--bp-teal-tint) !important; color: var(--bp-teal-ink) !important; }
.btn-light-primary:hover { background-color: var(--bp-teal) !important; color: var(--bp-teal-on) !important; }
a, .text-primary, a.text-primary, .link-primary, .text-hover-primary:hover { color: var(--bp-teal-ink); }
.bg-primary, .badge.bg-primary, .progress-bar.bg-primary, .bullet.bg-primary { background-color: var(--bp-teal) !important; color: var(--bp-teal-on) !important; }
.bg-light-primary { background-color: var(--bp-teal-tint) !important; }
.border-primary, .card.border-primary { border-color: var(--bp-teal) !important; }
.symbol .symbol-label.bg-primary, .symbol-label.bg-primary { background-color: var(--bp-teal) !important; color: var(--bp-teal-on) !important; }
.text-inverse-primary { color: var(--bp-teal-on) !important; }
.form-control, .form-select { border-color: var(--bp-line); border-radius: var(--bp-r); }
.form-control:focus, .form-select:focus { border-color: var(--bp-teal); box-shadow: 0 0 0 3px rgba(61, 194, 194, .18); }
.form-control.form-control-solid { background-color: var(--bp-paper); }
.form-control.form-control-solid:focus { background-color: var(--bp-white); }
.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled) { border-bottom-color: var(--bp-teal); color: var(--bp-ink); }
.table thead th { font-family: var(--bp-font-body); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--bp-ink-muted); font-weight: 700; }
.breadcrumb-item a, .breadcrumb-item.text-muted { color: var(--bp-ink-muted); }
.breadcrumb-item a:hover { color: var(--bp-teal-ink); }

/* ── 4. Sidebar ────────────────────────────────────────────────────────── */
.aside, .aside.aside-dark { background-color: var(--bp-navy); border-right: 1px solid var(--bp-navy-line); }
/* Anchos solo en desktop: en < 992px el aside es un drawer de Metronic (ancho propio, wrapper sin padding) */
@media (min-width: 992px) {
    .aside, .aside.aside-dark { width: var(--bp-aside-w); }
    .aside-enabled.aside-fixed .wrapper { padding-left: var(--bp-aside-w); }
    .aside-enabled.aside-fixed .header, .aside-enabled.aside-fixed .toolbar { left: var(--bp-aside-w); }
    [data-kt-aside-minimize=on] .aside { width: var(--bp-aside-w-min); }
    [data-kt-aside-minimize=on] .wrapper { padding-left: var(--bp-aside-w-min); }
    [data-kt-aside-minimize=on] .header, [data-kt-aside-minimize=on] .toolbar { left: var(--bp-aside-w-min); }
    [data-kt-aside-minimize=on] .aside.aside-hoverable:hover:not(.animating) { width: var(--bp-aside-w); }
}
@media (max-width: 991.98px) { .aside.drawer { width: 280px !important; } }

/* Cuenta (arriba) */
.aside .aside-logo.bp-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: auto; min-height: 72px; padding: 16px 14px 12px 16px; background: transparent; }
.aside.aside-dark .aside-logo { background-color: transparent; }
.bp-account__main { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none !important; }
.bp-account__mark { position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; background: var(--bp-teal); color: var(--bp-teal-on); display: grid; place-items: center; overflow: hidden; font-family: var(--bp-font-display); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.bp-account__mark img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--bp-white); padding: 4px; }
.bp-account__mark img + b { display: none; }
.bp-account__mark--photo { background: var(--bp-white); }
.bp-account__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bp-account__name { font-family: var(--bp-font-display); font-weight: 600; font-size: 14px; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.bp-account__chip { display: inline-flex; align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-teal-bright); background: rgba(61, 194, 194, .14); border-radius: var(--bp-r-pill); padding: 2px 8px; line-height: 1.4; }
.aside .aside-toggle { color: var(--bp-side-muted); flex: 0 0 auto; }
.aside .aside-toggle:hover { color: var(--bp-teal-bright); }
.bp-account__site { display: flex; align-items: center; gap: 6px; margin: -6px 16px 6px 62px; font-size: 12px; font-weight: 600; color: var(--bp-teal-bright); text-decoration: none !important; }
.bp-account__site:hover { color: #fff; }
[data-kt-aside-minimize=on] .aside:not(:hover) .bp-account__text,
[data-kt-aside-minimize=on] .aside:not(:hover) .bp-account__site,
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-toggle { display: none; }
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-logo.bp-account { justify-content: center; padding-left: 0; padding-right: 0; }

/* Menú */
.aside .aside-menu .menu { padding: 0 12px; }
.aside .aside-menu .menu-item { margin: 0; padding: 0; }
.aside .aside-menu .menu-item .menu-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; margin: 1px 0; border-radius: var(--bp-r); color: var(--bp-side-text); transition: background .12s ease, color .12s ease; }
.aside .aside-menu .menu-item .menu-link .menu-title { font-family: var(--bp-font-body); font-size: 13.5px; font-weight: 500; color: inherit; }
.aside .aside-menu .menu-item .menu-link .menu-icon { width: 22px; flex: 0 0 22px; display: grid; place-items: center; color: var(--bp-side-muted); }
.aside .aside-menu .menu-item .menu-link .menu-icon .svg-icon, .aside .aside-menu .menu-item .menu-link .menu-icon i { color: inherit; font-size: 18px; }
.aside .aside-menu .menu-item .menu-link .menu-icon .svg-icon svg { width: 20px; height: 20px; }
.aside .aside-menu .menu-item .menu-link:hover:not(.active):not(.menu-link-active) { background: rgba(255, 255, 255, .05); color: #fff; }
.aside .aside-menu .menu-item .menu-link:hover .menu-icon { color: var(--bp-side-text); }
.aside .aside-menu .menu-item .menu-link.active, .aside .aside-menu .menu-item .menu-link.menu-link-active,
.aside .aside-menu .menu-item.here > .menu-link { background: rgba(61, 194, 194, .12) !important; color: var(--bp-teal-bright) !important; box-shadow: inset 3px 0 0 var(--bp-teal); }
.aside .aside-menu .menu-item .menu-link.active .menu-title, .aside .aside-menu .menu-item .menu-link.menu-link-active .menu-title { color: var(--bp-teal-bright) !important; font-weight: 600; }
.aside .aside-menu .menu-item .menu-link.active .menu-icon, .aside .aside-menu .menu-item .menu-link.menu-link-active .menu-icon,
.aside .aside-menu .menu-item.here > .menu-link .menu-icon { color: var(--bp-teal-bright) !important; }
.aside .aside-menu .menu-item .menu-link.active::before, .aside .aside-menu .menu-item .menu-link.menu-link-active::before { display: none; }
.aside .aside-menu .menu-item .menu-link .menu-arrow { margin-left: auto; opacity: .6; }
.aside .aside-menu .menu-item .menu-link .menu-arrow:after { background-color: currentColor; }
.aside .aside-menu .menu-badge .badge { background: rgba(61, 194, 194, .16); color: var(--bp-teal-bright); border-radius: var(--bp-r-pill); font-size: 11px; font-weight: 700; padding: 2px 8px; min-width: 22px; text-align: center; }
.aside .aside-menu .menu-badge .badge.badge-danger, .aside .aside-menu .menu-badge .badge.badge-warning, .aside .aside-menu .menu-badge .badge.badge-light-warning { background: rgba(245, 183, 59, .18); color: #F8CF7B; }
.aside .aside-menu .menu-sub { padding-left: 20px; }
.aside .aside-menu .menu-sub .menu-item .menu-link { min-height: 34px; padding: 6px 10px 6px 12px; color: var(--bp-side-muted); }
.aside .aside-menu .menu-sub .menu-item .menu-link .menu-title { font-size: 13px; }
.aside .aside-menu .menu-sub .menu-item .menu-link .menu-bullet .bullet { background: var(--bp-side-muted); }
.aside .aside-menu .menu-sub .menu-item .menu-link.active .menu-bullet .bullet { background: var(--bp-teal-bright) !important; }
/* Etiquetas de grupo */
.aside .aside-menu .menu-content { padding: 0; }
.aside .aside-menu .menu-section, .aside .aside-menu .menu-section-title { display: block; text-align: left; font-family: var(--bp-font-body); font-size: 10.5px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-side-muted) !important; padding: 18px 10px 6px !important; }
.aside .aside-menu .menu-item:first-child .menu-section { padding-top: 6px; }
.aside .aside-menu .separator, .aside.aside-dark .aside-menu .separator { display: none; } /* la etiqueta de grupo ya separa */
.aside .aside-menu .menu-item .menu-content, .aside .aside-menu .menu-content { display: block; text-align: left; padding: 0 !important; } /* el heading viene anidado (menu-item > menu-content > menu-item > menu-content): sin padding acumulado */
.aside .menu-separator { border-color: var(--bp-navy-line); }
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-menu .menu-section { padding: 0; height: 1px; margin: 10px 8px; background: var(--bp-navy-line); font-size: 0 !important; overflow: hidden; }
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-menu .menu-item .menu-link { justify-content: center; padding-left: 0; padding-right: 0; }
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-menu .menu-item .menu-link .menu-badge { display: none; }
/* Scroll */
.aside-dark .hover-scroll-overlay-y, .aside .hover-scroll-overlay-y { scrollbar-color: var(--bp-navy-line) transparent; }
.aside-dark .hover-scroll-overlay-y::-webkit-scrollbar-thumb, .aside .hover-scroll-overlay-y::-webkit-scrollbar-thumb { background-color: var(--bp-navy-line); }

/* Pie */
.aside .aside-footer { padding: 12px 16px 18px !important; border-top: 1px solid var(--bp-navy-line); display: flex; flex-direction: column; gap: 8px; }
.aside .aside-footer .btn.btn-custom, .aside.aside-dark .aside-footer .btn-custom { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 16px; border-radius: var(--bp-r-pill); font-family: var(--bp-font-body); font-weight: 700; font-size: 13.5px; transition: background .12s ease, color .12s ease; }
.aside .aside-footer .btn.btn-custom.btn-primary { background: var(--bp-teal) !important; color: var(--bp-teal-on) !important; border: 0 !important; }
.aside .aside-footer .btn.btn-custom.btn-primary:hover { background: var(--bp-teal-bright) !important; }
.aside .aside-footer .btn.btn-custom.btn-primary .svg-icon, .aside .aside-footer .btn.btn-custom.btn-primary .btn-icon { color: var(--bp-teal-on) !important; }
.aside .aside-footer .btn.btn-custom.bp-btn-outline { background: transparent !important; color: var(--bp-teal-bright) !important; border: 1px solid rgba(61, 194, 194, .5) !important; }
.aside .aside-footer .btn.btn-custom.bp-btn-outline:hover { border-color: var(--bp-teal-bright) !important; color: #fff !important; }
.aside .aside-footer .bp-footer-link { font-size: 12px; font-weight: 600; color: var(--bp-side-muted); text-align: center; text-decoration: none !important; }
.aside .aside-footer .bp-footer-link:hover { color: var(--bp-teal-bright); }
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-footer { padding-left: 12px !important; padding-right: 12px !important; align-items: center; }
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-footer .btn.btn-custom { width: 44px; min-height: 44px; padding: 0; }
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-footer .bp-footer-link { display: none; }

/* ── 5. Header (colores; la estructura llega en la fase 2) ─────────────── */
.header { background-color: var(--bp-white); border-bottom: 1px solid var(--bp-line); box-shadow: none; }
.header .header-menu .menu-item .menu-link .menu-title { color: var(--bp-ink-2); font-weight: 600; }
.toolbar { background-color: var(--bp-paper); box-shadow: none; border: 0; }
.page-title .page-heading, .page-title h1 { color: var(--bp-ink); }

/* ── 6. Modo oscuro (toggle de Metronic: <html data-theme="dark">) ─────── */
[data-theme="dark"] {
    --bs-body-bg: var(--bp-navy); --kt-body-bg: var(--bp-navy); --kt-page-bg: var(--bp-navy); --kt-app-bg-color: var(--bp-navy);
    --bs-body-color: #E6EAF5; --kt-text-dark: #E6EAF5; --kt-text-gray-800: #E6EAF5; --kt-text-gray-700: #C3C9DA; --kt-text-muted: #8A92AA;
    --kt-card-bg: var(--bp-navy-2); --kt-card-border-color: var(--bp-navy-line); --kt-border-color: var(--bp-navy-line); --kt-border-dashed-color: var(--bp-navy-line);
    --kt-header-bg-color: var(--bp-navy-2); --kt-toolbar-bg-color: var(--bp-navy);
    --kt-input-bg: var(--bp-navy-2); --kt-input-border-color: var(--bp-navy-line); --kt-input-solid-bg: #131B31; --kt-input-solid-bg-focus: var(--bp-navy-2);
    --kt-text-primary: var(--bp-teal-bright); --bs-primary-light: rgba(61, 194, 194, .14); --kt-primary-light: rgba(61, 194, 194, .14);
}
[data-theme="dark"] body, [data-theme="dark"] .page, [data-theme="dark"] .wrapper, [data-theme="dark"] .content, [data-theme="dark"] .post { background-color: var(--bp-navy); }
[data-theme="dark"] .card { background-color: var(--bp-navy-2); border-color: var(--bp-navy-line); box-shadow: none; }
[data-theme="dark"] .header { background-color: var(--bp-navy-2); border-bottom-color: var(--bp-navy-line); }
[data-theme="dark"] .toolbar { background-color: var(--bp-navy); }
[data-theme="dark"] .aside { border-right-color: var(--bp-navy-line); }
[data-theme="dark"] a, [data-theme="dark"] .text-primary, [data-theme="dark"] .link-primary { color: var(--bp-teal-bright); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bp-navy-2); border-color: var(--bp-navy-line); color: #E6EAF5; }
[data-theme="dark"] .bg-light-primary { background-color: rgba(61, 194, 194, .14) !important; }
[data-theme="dark"] .table thead th { color: #8A92AA; }

/* ── 7. Componentes heredados del skin inline de demo-bewpro (x-skin-colors), movidos acá al vaciar la rama ── */
/* Alerts and Notices */
    html:not([data-theme="dark"]) .alert, 
    html:not([data-theme="dark"]) .notice {background-color: #f9fafb !important; border: 1px solid rgba(36, 155, 155, 0.15) !important; color: #1f2937 !important; }
/* Mobile cards and tickets */
    html:not([data-theme="dark"]) .invoice-card-mobile, 
    html:not([data-theme="dark"]) .ticket-card-mobile {background-color: #ffffff !important; border: 1px solid rgba(36, 155, 155, 0.15) !important; color: #1f2937 !important; }
html:not([data-theme="dark"]) .invoice-card-mobile .icm-desc, 
    html:not([data-theme="dark"]) .invoice-card-mobile .icm-amount,
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-subject {color: #111827 !important; }
html:not([data-theme="dark"]) .invoice-card-mobile .icm-date, 
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-id,
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-project, 
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-meta {color: #6b7280 !important; }
html:not([data-theme="dark"]) .invoice-card-mobile .icm-foot {border-top-color: rgba(36, 155, 155, 0.1) !important; }
html:not([data-theme="dark"]) .ticket-card-mobile:hover {border-color: rgba(36, 155, 155, 0.4) !important; box-shadow: 0 4px 14px rgba(36, 155, 155, 0.1) !important; }
/* Ticket message bubbles overrides */
    html:not([data-theme="dark"]) .msg.client {background-color: rgba(36, 155, 155, 0.1) !important; border: 1px solid rgba(36, 155, 155, 0.3) !important; color: #0b4e4e !important; }
html:not([data-theme="dark"]) .msg.staff {background-color: #f3f4f6 !important; border: 1px solid #e5e7eb !important; color: #1f2937 !important; }
html:not([data-theme="dark"]) .msg-meta {color: #6b7280 !important; }
/* Alerts and Notices */
    html[data-theme="dark"] .alert, 
    html[data-theme="dark"] .notice {background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(61, 194, 194, 0.12) !important; color: #f3f4f6 !important; }
/* Mobile cards and tickets */
    html[data-theme="dark"] .invoice-card-mobile, 
    html[data-theme="dark"] .ticket-card-mobile {background-color: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(61, 194, 194, 0.12) !important; color: #ffffff !important; }
html[data-theme="dark"] .invoice-card-mobile .icm-desc, 
    html[data-theme="dark"] .invoice-card-mobile .icm-amount,
    html[data-theme="dark"] .ticket-card-mobile .tcm-subject {color: #ffffff !important; }
html[data-theme="dark"] .invoice-card-mobile .icm-date, 
    html[data-theme="dark"] .ticket-card-mobile .tcm-id,
    html[data-theme="dark"] .ticket-card-mobile .tcm-project, 
    html[data-theme="dark"] .ticket-card-mobile .tcm-meta {color: #9ca3af !important; }
html[data-theme="dark"] .invoice-card-mobile .icm-foot {border-top-color: rgba(61, 194, 194, 0.1) !important; }
html[data-theme="dark"] .ticket-card-mobile:hover {border-color: rgba(61, 194, 194, 0.4) !important; box-shadow: 0 4px 14px rgba(61, 194, 194, 0.15) !important; }
/* Ticket message bubbles overrides */
    html[data-theme="dark"] .msg.client {background-color: rgba(61, 194, 194, 0.12) !important; border: 1px solid rgba(61, 194, 194, 0.35) !important; color: #e6fcfc !important; }
html[data-theme="dark"] .msg.staff {background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #e5e7eb !important; }
html[data-theme="dark"] .msg-meta {color: #9ca3af !important; }

/* ── 5b. Header / topbar (fase 2) ──────────────────────────────────────── */
.bp-header { background: var(--bp-white); border-bottom: 1px solid var(--bp-line); box-shadow: none; }
.bp-header__inner { height: 100%; gap: 16px; }
.bp-header__left { gap: 8px; flex: 1 1 auto; min-width: 0; }
.bp-header__right { flex: 0 0 auto; }
.bp-header__mark { position: relative; width: 32px; height: 32px; border-radius: 8px; background: var(--bp-teal); color: var(--bp-teal-on); display: grid; place-items: center; overflow: hidden; font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; text-decoration: none !important; }
.bp-header__mark img { width: 100%; height: 100%; object-fit: contain; background: var(--bp-white); padding: 3px; } .bp-header__mark img + b { display: none; }
.bp-iconbtn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--bp-r); background: transparent; color: var(--bp-ink-2); font-size: 17px; cursor: pointer; text-decoration: none !important; transition: background .12s ease, color .12s ease; }
.bp-iconbtn:hover, .bp-iconbtn.show, .bp-iconbtn[aria-expanded="true"] { background: var(--bp-paper); color: var(--bp-ink); }
.bp-iconbtn:focus-visible { outline: 2px solid var(--bp-teal); outline-offset: 2px; }
.bp-search { display: inline-flex; align-items: center; gap: 10px; width: min(360px, 100%); height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--bp-line); border-radius: var(--bp-r); background: var(--bp-paper); color: var(--bp-ink-muted); font-family: var(--bp-font-body); font-size: 13.5px; cursor: text; text-align: left; transition: border-color .12s ease, box-shadow .12s ease; }
.bp-search:hover { border-color: #C9CFDD; } .bp-search:focus-visible { outline: 0; border-color: var(--bp-teal); box-shadow: 0 0 0 3px rgba(61, 194, 194, .18); }
.bp-search i { font-size: 13px; color: var(--bp-ink-muted); } .bp-search__ph { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-search__kbd { font-family: var(--bp-font-body); font-size: 11px; font-weight: 600; color: var(--bp-ink-muted); border: 1px solid var(--bp-line); border-radius: 5px; padding: 1px 6px; background: var(--bp-white); }
@media (max-width: 991.98px) { .bp-search { width: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; } .bp-search__ph, .bp-search__kbd { display: none; } .bp-search i { font-size: 17px; color: var(--bp-ink-2); } }
.bp-topbar { gap: 2px; } .bp-topbar__divider { width: 1px; height: 28px; background: var(--bp-line); margin: 0 10px 0 8px; }
.bp-theme-icon--dark { display: none; } [data-theme="dark"] .bp-theme-icon--dark { display: inline-flex; } [data-theme="dark"] .bp-theme-icon--light { display: none; } .bp-iconbtn .svg-icon svg { width: 20px; height: 20px; }
.bp-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bp-teal-tint); color: var(--bp-teal-ink); font-family: var(--bp-font-display); font-weight: 700; font-size: 12.5px; overflow: hidden; flex: 0 0 auto; }
.bp-avatar img { width: 100%; height: 100%; object-fit: cover; } .bp-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.bp-user { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 4px; border: 0; border-radius: var(--bp-r); background: transparent; cursor: pointer; font-family: var(--bp-font-body); text-align: left; }
.bp-user:hover, .bp-user.show { background: var(--bp-paper); }
.bp-user__text { flex-direction: column; line-height: 1.15; } .bp-user__name { font-size: 13.5px; font-weight: 700; color: var(--bp-ink); } .bp-user__role { font-size: 11.5px; color: var(--bp-ink-muted); margin-top: 2px; }
.bp-user__chev { font-size: 10px; color: var(--bp-ink-muted); margin-left: 2px; }
/* Metronic: el body fija el header a 65px y deja el aside debajo; lo mantenemos. */
.header-fixed .bp-header { height: 65px; }

/* Menú de usuario */
.bp-usermenu { width: 290px; padding: 6px; border: 1px solid var(--bp-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(11, 16, 32, .12); background: var(--bp-white); }
.bp-usermenu__head { display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px; }
.bp-usermenu__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bp-usermenu__who b { font-family: var(--bp-font-display); font-size: 14.5px; color: var(--bp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-usermenu__who small { font-size: 12px; color: var(--bp-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-chip { display: inline-flex; align-self: flex-start; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-teal-ink); background: var(--bp-teal-tint); border-radius: var(--bp-r-pill); padding: 2px 8px; }
.bp-usermenu__sep { height: 1px; background: var(--bp-line); margin: 6px 4px; }
.bp-usermenu__items { display: flex; flex-direction: column; }
.bp-usermenu__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--bp-r); color: var(--bp-ink) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; }
.bp-usermenu__item i { width: 18px; text-align: center; color: var(--bp-ink-muted); font-size: 14px; }
.bp-usermenu__item:hover { background: var(--bp-paper); } .bp-usermenu__item--switch b { font-weight: 700; } .bp-usermenu__item--danger, .bp-usermenu__item--danger i { color: var(--bp-danger) !important; }
.bp-usermenu__theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; }
.bp-usermenu__label { font-size: 12px; color: var(--bp-ink-muted); font-weight: 600; }
.bp-segment { display: inline-flex; background: var(--bp-paper); border: 1px solid var(--bp-line); border-radius: var(--bp-r); padding: 2px; }
.bp-segment button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; border-radius: 6px; padding: 5px 8px; font-family: var(--bp-font-body); font-size: 12px; font-weight: 600; color: var(--bp-ink-muted); cursor: pointer; }
.bp-segment button i { font-size: 11px; } .bp-segment button.is-on { background: var(--bp-white); color: var(--bp-ink); box-shadow: 0 1px 2px rgba(11, 16, 32, .08); }

/* Campanita */
.bp-bell__badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--bp-r-pill); background: var(--bp-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.bp-notif { width: 380px; padding: 0; border: 1px solid var(--bp-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(11, 16, 32, .12); background: var(--bp-white); overflow: hidden; }
.bp-notif__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--bp-line); } .bp-notif__head b { font-family: var(--bp-font-display); font-size: 14.5px; color: var(--bp-ink); }
.bp-notif__actions a { font-size: 12px; font-weight: 600; color: var(--bp-teal-ink); }
.bp-notif__list { max-height: 380px; overflow-y: auto; padding: 6px; }
.bp-notif__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px; color: var(--bp-ink-muted); font-size: 13px; } .bp-notif__empty i { font-size: 22px; color: #B8BFD0; }
.bp-notif__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px; border-radius: var(--bp-r); text-decoration: none !important; position: relative; }
.bp-notif__item:hover { background: var(--bp-paper); } .bp-notif__item.is-unread::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--bp-teal); transform: translateY(-50%); }
.bp-notif__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--bp-teal-tint); color: var(--bp-teal-ink); }
.bp-notif__icon--success { background: rgba(34, 195, 142, .14); color: #178A62; } .bp-notif__icon--warning { background: rgba(245, 183, 59, .18); color: #9A6B00; } .bp-notif__icon--danger { background: rgba(229, 72, 77, .12); color: var(--bp-danger); } .bp-notif__icon--info { background: #E8EEFF; color: #3B5BDB; }
.bp-notif__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bp-notif__text b { font-size: 13px; color: var(--bp-ink); } .bp-notif__text span { font-size: 12.5px; color: var(--bp-ink-2); } .bp-notif__text small { font-size: 11.5px; color: var(--bp-ink-muted); }
.bp-notif__foot { display: block; text-align: center; padding: 11px; border-top: 1px solid var(--bp-line); font-size: 13px; font-weight: 600; color: var(--bp-teal-ink); text-decoration: none !important; } .bp-notif__foot:hover { background: var(--bp-paper); }

/* Paleta ⌘K */
.bp-palette { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.bp-palette[hidden] { display: none; }
.bp-palette__backdrop { position: absolute; inset: 0; background: rgba(7, 11, 26, .55); backdrop-filter: blur(2px); }
.bp-palette__box { position: relative; width: 100%; max-width: 640px; background: var(--bp-white); border-radius: 14px; box-shadow: 0 24px 64px rgba(7, 11, 26, .35); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.bp-palette__input { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 18px; border-bottom: 1px solid var(--bp-line); }
.bp-palette__input i { color: var(--bp-teal-ink); font-size: 16px; }
.bp-palette__input input { flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; height: 52px; font-family: var(--bp-font-body); font-size: 17px; color: var(--bp-ink); }
.bp-palette__input input::placeholder { color: var(--bp-ink-muted); }
.bp-palette__close { border: 0; background: transparent; color: var(--bp-ink-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; } .bp-palette__close:hover { background: var(--bp-paper); color: var(--bp-ink); }
.bp-palette__results { overflow-y: auto; padding: 8px; }
.bp-palette__hint { padding: 22px 16px; text-align: center; color: var(--bp-ink-muted); font-size: 13.5px; } .bp-palette__hint--loading { padding: 8px 16px 0; text-align: left; font-size: 12px; }
.bp-palette__group { padding: 4px 0 6px; } .bp-palette__label { padding: 8px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-ink-muted); }
.bp-palette__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--bp-r); text-decoration: none !important; color: var(--bp-ink) !important; }
.bp-palette__item.is-active { background: var(--bp-teal-tint); box-shadow: inset 3px 0 0 var(--bp-teal); }
.bp-palette__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; background: var(--bp-paper); display: grid; place-items: center; color: var(--bp-ink-2); font-size: 14px; } .bp-palette__item.is-active .bp-palette__icon { background: var(--bp-white); color: var(--bp-teal-ink); }
.bp-palette__text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .bp-palette__text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-palette__text small { font-size: 12px; color: var(--bp-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-palette__chip { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bp-ink-muted); background: var(--bp-paper); border: 1px solid var(--bp-line); border-radius: var(--bp-r-pill); padding: 2px 8px; white-space: nowrap; }
.bp-palette__foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--bp-line); background: var(--bp-paper); font-size: 12px; color: var(--bp-ink-muted); }
.bp-palette__foot kbd { font-family: var(--bp-font-body); font-size: 11px; color: var(--bp-ink-2); border: 1px solid var(--bp-line); border-radius: 4px; padding: 0 5px; background: var(--bp-white); margin-right: 4px; } /* bootstrap pinta kbd blanco sobre negro */
.bp-search__kbd, .bp-palette__foot kbd { box-shadow: none; }
body.bp-palette-open { overflow: hidden; }

/* Dark (fase 2) */
[data-theme="dark"] .bp-header { background: var(--bp-navy-2); border-bottom-color: var(--bp-navy-line); }
[data-theme="dark"] .bp-iconbtn { color: #C3C9DA; } [data-theme="dark"] .bp-iconbtn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
[data-theme="dark"] .bp-search { background: var(--bp-navy); border-color: var(--bp-navy-line); color: #8A92AA; } [data-theme="dark"] .bp-search__kbd { background: var(--bp-navy-2); border-color: var(--bp-navy-line); color: #8A92AA; }
[data-theme="dark"] .bp-topbar__divider { background: var(--bp-navy-line); } [data-theme="dark"] .bp-user:hover, [data-theme="dark"] .bp-user.show { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .bp-user__name { color: #E6EAF5; } [data-theme="dark"] .bp-avatar { background: rgba(61, 194, 194, .16); color: var(--bp-teal-bright); }
[data-theme="dark"] .bp-usermenu, [data-theme="dark"] .bp-notif, [data-theme="dark"] .bp-palette__box { background: var(--bp-navy-2); border-color: var(--bp-navy-line); }
[data-theme="dark"] .bp-usermenu__who b, [data-theme="dark"] .bp-usermenu__item, [data-theme="dark"] .bp-notif__head b, [data-theme="dark"] .bp-notif__text b, [data-theme="dark"] .bp-palette__item, [data-theme="dark"] .bp-palette__input input { color: #E6EAF5 !important; }
[data-theme="dark"] .bp-usermenu__sep, [data-theme="dark"] .bp-notif__head, [data-theme="dark"] .bp-notif__foot, [data-theme="dark"] .bp-palette__input, [data-theme="dark"] .bp-palette__foot { border-color: var(--bp-navy-line); }
[data-theme="dark"] .bp-usermenu__item:hover, [data-theme="dark"] .bp-notif__item:hover, [data-theme="dark"] .bp-notif__foot:hover, [data-theme="dark"] .bp-palette__icon, [data-theme="dark"] .bp-palette__foot, [data-theme="dark"] .bp-segment, [data-theme="dark"] .bp-palette__chip { background: var(--bp-navy); border-color: var(--bp-navy-line); }
[data-theme="dark"] .bp-segment button.is-on { background: var(--bp-navy-2); color: #fff; } [data-theme="dark"] .bp-palette__foot kbd { background: var(--bp-navy-2); color: #C3C9DA; border-color: var(--bp-navy-line); } [data-theme="dark"] .bp-palette__item.is-active { background: rgba(61, 194, 194, .14); }

/* ── 8. Cabecera de página única (fase 3): breadcrumb · H1 · subtítulo · acciones ── */
.toolbar, #kt_toolbar { height: auto !important; min-height: 0; background: transparent !important; box-shadow: none !important; border: 0 !important; position: static !important; }
.bp-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; width: 100%; padding: 4px 0 0; margin-bottom: 22px; }
.bp-pagehead__main { min-width: 0; flex: 1 1 420px; }
.bp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; color: var(--bp-ink-muted); }
.bp-crumbs li { display: inline-flex; align-items: center; gap: 6px; } .bp-crumbs li + li::before { content: "›"; color: #B8BFD0; font-size: 13px; }
.bp-crumbs a { color: var(--bp-ink-muted); text-decoration: none !important; } .bp-crumbs a:hover { color: var(--bp-teal-ink); } .bp-crumbs em { font-style: normal; color: var(--bp-ink-2); font-weight: 600; }
.bp-pagehead__title { font-family: var(--bp-font-display); font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--bp-ink); margin: 0; text-transform: none; }
.bp-pagehead__sub { margin: 5px 0 0; font-size: 13.5px; color: var(--bp-ink-muted); line-height: 1.45; max-width: 80ch; }
.bp-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 0 auto; }
.bp-pagehead__actions .btn { border-radius: var(--bp-r-pill) !important; font-weight: 700; font-size: 13px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; }
.bp-pagehead__actions .btn-light, .bp-pagehead__actions .btn-secondary, .bp-pagehead__actions .btn-light-primary, .bp-pagehead__actions .btn-outline-primary { background: var(--bp-white) !important; color: var(--bp-ink) !important; border: 1px solid var(--bp-line) !important; }
.bp-pagehead__actions .btn-light:hover, .bp-pagehead__actions .btn-secondary:hover, .bp-pagehead__actions .btn-light-primary:hover { border-color: #C9CFDD !important; background: var(--bp-paper) !important; }
.bp-pagehead__actions .btn i { font-size: 12px; }
@media (max-width: 767.98px) { .bp-pagehead { margin-bottom: 16px; } .bp-crumbs { display: none; } }
[data-theme="dark"] .bp-pagehead__title { color: #E6EAF5; } [data-theme="dark"] .bp-crumbs em { color: #C3C9DA; } [data-theme="dark"] .bp-crumbs li + li::before { color: #4B5573; }
[data-theme="dark"] .bp-pagehead__actions .btn-light, [data-theme="dark"] .bp-pagehead__actions .btn-secondary, [data-theme="dark"] .bp-pagehead__actions .btn-light-primary { background: var(--bp-navy-2) !important; color: #E6EAF5 !important; border-color: var(--bp-navy-line) !important; }
/* Respiro entre header y cabecera de página; altura del header en móvil (Metronic asume 55px) */
.toolbar-enabled .content { padding-top: 0; }
.bp-pagehead, #kt_toolbar.bp-pagehead { padding: 26px 0 0; }
@media (max-width: 991.98px) {
    .header-tablet-and-mobile-fixed .bp-header, .bp-header { height: 56px; }
    .header-tablet-and-mobile-fixed .wrapper { padding-top: 56px; }
    .bp-pagehead, #kt_toolbar.bp-pagehead { padding: 16px 0 0; margin-bottom: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. COMPONENTES (ronda 2 · F1) — tarjetas, KPI, badges, chips, tablas,
      formularios, botones, tabs, progreso, modales, alertas, vacíos, timeline.
      Todo hereda: las ~180 vistas del panel no se tocan.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tarjetas */
.card { --bs-card-border-color: var(--bp-line); }
.card > .card-header { min-height: 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--bp-line); }
.card > .card-header.border-0 { border-bottom: 0; }
.card .card-title, .card .card-title h2, .card .card-title h3, .card .card-title h4, .card .card-label, .card-header h3, .card-header h4 { font-family: var(--bp-font-display); font-size: 15px; font-weight: 600; color: var(--bp-ink); letter-spacing: -.005em; text-transform: none; }
.card .card-header .text-muted, .card .card-header .fs-7 { font-size: 12.5px; }
.card.card-flush, .card.border-0 { border: 1px solid var(--bp-line) !important; }
.card.shadow-sm, .card.shadow { box-shadow: var(--kt-card-box-shadow) !important; }
.card[style*="border-radius: 12px"], .card[style*="border-radius: 18px"], .rounded-3, .rounded-4 { border-radius: var(--bp-r) !important; }
.card .separator { border-color: var(--bp-line); }

/* Botones */
.btn { border-radius: var(--bp-r-pill); font-weight: 700; font-size: 13.5px; padding: 9px 18px; line-height: 1.3; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.btn-sm, .btn-group-sm > .btn { font-size: 12.5px; padding: 6px 14px; }
.btn.btn-xs { font-size: 11.5px; padding: 4px 11px; }
.btn.btn-lg { font-size: 14.5px; padding: 12px 22px; }
.btn-icon, .btn.btn-icon, .input-group .btn, .btn-group > .btn, .dataTables_wrapper .dt-buttons .btn, .btn.rounded-0, .btn.btn-square, .page-link { border-radius: var(--bp-r); }
.btn.btn-icon { padding: 0; gap: 0; }
.btn-light, .btn-secondary, .btn-outline-secondary, .btn-light-secondary, .btn-outline-primary, .btn-white { background: var(--bp-white) !important; color: var(--bp-ink) !important; border: 1px solid var(--bp-line) !important; }
.btn-light:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-light-secondary:hover, .btn-outline-primary:hover, .btn-white:hover { background: var(--bp-paper) !important; border-color: #C9CFDD !important; color: var(--bp-ink) !important; }
.btn-light-primary { border: 0 !important; }
.btn-light-success { background: rgba(34, 195, 142, .14) !important; color: #178A62 !important; border: 0 !important; } .btn-light-success:hover { background: var(--bp-success) !important; color: #fff !important; }
.btn-light-warning { background: rgba(245, 183, 59, .18) !important; color: #9A6B00 !important; border: 0 !important; } .btn-light-warning:hover { background: var(--bp-warning) !important; color: var(--bp-ink) !important; }
.btn-light-danger { background: rgba(229, 72, 77, .12) !important; color: var(--bp-danger) !important; border: 0 !important; } .btn-light-danger:hover { background: var(--bp-danger) !important; color: #fff !important; }
.btn-light-info { background: #E8EEFF !important; color: #3B5BDB !important; border: 0 !important; } .btn-light-info:hover { background: #3B5BDB !important; color: #fff !important; }
.btn-success { background: var(--bp-success) !important; border-color: var(--bp-success) !important; color: #fff !important; }
.btn-danger { background: var(--bp-danger) !important; border-color: var(--bp-danger) !important; color: #fff !important; }
.btn-warning { background: var(--bp-warning) !important; border-color: var(--bp-warning) !important; color: var(--bp-ink) !important; }
.btn-info { background: #3B5BDB !important; border-color: #3B5BDB !important; color: #fff !important; }
.btn-dark { background: var(--bp-navy) !important; border-color: var(--bp-navy) !important; color: #fff !important; }
.btn-link { color: var(--bp-teal-ink); padding-left: 0; padding-right: 0; }
.btn:focus-visible { outline: 2px solid var(--bp-teal); outline-offset: 2px; box-shadow: none; }
.btn-pulse { animation: none !important; box-shadow: none !important; }

/* Badges / estados */
.badge { font-family: var(--bp-font-body); font-size: 11px; font-weight: 700; letter-spacing: .03em; border-radius: var(--bp-r-pill); padding: 4px 9px; line-height: 1.3; }
.badge.badge-light, .badge.bg-light { background: var(--bp-paper) !important; color: var(--bp-ink-2) !important; border: 1px solid var(--bp-line); }
.badge.badge-light-primary, .badge.badge-primary, .badge.bg-primary { background: var(--bp-teal-tint) !important; color: var(--bp-teal-ink) !important; }
.badge.badge-light-success, .badge.badge-success, .badge.badge-green, .badge.bg-success { background: rgba(34, 195, 142, .14) !important; color: #178A62 !important; }
.badge.badge-light-warning, .badge.badge-warning, .badge.bg-warning { background: rgba(245, 183, 59, .18) !important; color: #9A6B00 !important; }
.badge.badge-light-danger, .badge.badge-danger, .badge.badge-red, .badge.bg-danger { background: rgba(229, 72, 77, .12) !important; color: #C43A3F !important; }
.badge.badge-light-info, .badge.badge-info, .badge.bg-info { background: #E8EEFF !important; color: #3B5BDB !important; }
.badge.badge-light-dark, .badge.badge-dark, .badge.badge-black, .badge.bg-dark, .badge.bg-secondary, .badge.badge-secondary { background: #E6E9F2 !important; color: var(--bp-ink-2) !important; }
.badge.badge-circle { padding: 0; width: 20px; height: 20px; display: inline-grid; place-items: center; }
.bullet { background-color: var(--bp-line); }

/* Chips (filtros) */
.bp-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bp-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--bp-r-pill); border: 1px solid var(--bp-line); background: var(--bp-white); color: var(--bp-ink-2); font-size: 12.5px; font-weight: 600; text-decoration: none !important; white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.bp-chip:hover { border-color: #C9CFDD; color: var(--bp-ink); }
.bp-chip.is-active { background: var(--bp-teal-tint); border-color: transparent; color: var(--bp-teal-ink); }
.bp-chip__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--bp-r-pill); background: var(--bp-paper); color: var(--bp-ink-muted); font-size: 11px; font-weight: 700; }
.bp-chip.is-active .bp-chip__n { background: var(--bp-white); color: var(--bp-teal-ink); }
.bp-chip--danger { background: rgba(229, 72, 77, .10); border-color: transparent; color: #C43A3F; } .bp-chip--danger .bp-chip__n { background: #fff; color: #C43A3F; }
.bp-chip--warning { background: rgba(245, 183, 59, .16); border-color: transparent; color: #9A6B00; } .bp-chip--warning .bp-chip__n { background: #fff; color: #9A6B00; }
.bp-chip--success { background: rgba(34, 195, 142, .14); border-color: transparent; color: #178A62; } .bp-chip--success .bp-chip__n { background: #fff; color: #178A62; }
.bp-chip--info { background: #E8EEFF; border-color: transparent; color: #3B5BDB; } .bp-chip--info .bp-chip__n { background: #fff; color: #3B5BDB; }
.bp-chip i { font-size: 12px; }

/* KPI */
.bp-kpi { display: block; position: relative; background: var(--bp-white); border: 1px solid var(--bp-line); border-radius: var(--bp-r); padding: 16px 18px 14px; min-height: 100%; text-decoration: none !important; color: var(--bp-ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.bp-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 16, 32, .08); border-color: #C9CFDD; }
.bp-kpi__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bp-ink-muted); margin-bottom: 8px; padding-right: 40px; }
.bp-kpi__value { display: block; font-family: var(--bp-font-display); font-size: 28px; font-weight: 700; line-height: 1.05; color: var(--bp-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bp-kpi__sub { display: block; margin-top: 8px; font-size: 12px; color: var(--bp-ink-muted); }
.bp-kpi__icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: var(--bp-paper); color: var(--bp-ink-2); }
.bp-kpi--primary .bp-kpi__icon { background: var(--bp-teal-tint); color: var(--bp-teal-ink); }
.bp-kpi--success .bp-kpi__icon { background: rgba(34, 195, 142, .14); color: #178A62; }
.bp-kpi--warning .bp-kpi__icon { background: rgba(245, 183, 59, .18); color: #9A6B00; }
.bp-kpi--danger .bp-kpi__icon { background: rgba(229, 72, 77, .12); color: var(--bp-danger); }
.bp-kpi--info .bp-kpi__icon { background: #E8EEFF; color: #3B5BDB; }
.bp-kpi.is-accent { box-shadow: inset 3px 0 0 var(--bp-accent, var(--bp-teal)); }
.bp-kpi--text .bp-kpi__value { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; padding-right: 40px; }
.bp-kpi--danger.is-accent { --bp-accent: var(--bp-danger); } .bp-kpi--danger.is-accent .bp-kpi__value { color: var(--bp-danger); }
.bp-kpi--warning.is-accent { --bp-accent: var(--bp-warning); } .bp-kpi--success.is-accent { --bp-accent: var(--bp-success); } .bp-kpi--info.is-accent { --bp-accent: #3B5BDB; }

/* Tablas (Metronic + DataTables) */
.table { --bs-table-color: var(--bp-ink); --bs-table-hover-bg: var(--bp-paper); }
.table > :not(caption) > * > * { padding: 11px 12px; border-bottom: 1px solid var(--bp-line); }
.table.table-row-dashed > :not(caption) > * > *, .table.table-row-bordered > :not(caption) > * > * { border-bottom: 1px solid var(--bp-line); border-top: 0; }
.table.table-row-dashed tr, .table.table-row-bordered tr { border-bottom-style: solid; }
.table > thead > tr > th { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bp-line); background: transparent; white-space: nowrap; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > tbody > tr:hover > * { background: var(--bp-paper); }
.table .fw-bold, .table .fw-bolder { color: var(--bp-ink); }
.table .text-muted, .table .text-gray-500, .table .text-gray-600 { color: var(--bp-ink-muted) !important; }
.table a.text-dark:hover, .table a.text-gray-800:hover { color: var(--bp-teal-ink) !important; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--bp-line); border-radius: var(--bp-r); background: var(--bp-white); padding: 6px 10px; font-size: 13px; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--bp-teal); box-shadow: 0 0 0 3px rgba(61, 194, 194, .18); outline: 0; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { font-size: 12.5px; color: var(--bp-ink-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button, .pagination .page-link { border-radius: var(--bp-r) !important; font-size: 12.5px; font-weight: 600; color: var(--bp-ink-2) !important; border: 1px solid transparent !important; background: transparent !important; min-width: 32px; height: 32px; display: inline-grid; place-items: center; margin: 0 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .pagination .page-link:hover { background: var(--bp-paper) !important; color: var(--bp-ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .pagination .page-item.active .page-link { background: var(--bp-teal) !important; color: var(--bp-teal-on) !important; border-color: var(--bp-teal) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
.dataTables_processing { border: 1px solid var(--bp-line); border-radius: var(--bp-r); background: var(--bp-white); box-shadow: 0 8px 24px rgba(11, 16, 32, .1); font-size: 13px; color: var(--bp-ink-2); }
.table-responsive { border-radius: var(--bp-r); }

/* Formularios */
.form-label, label.form-label, .fv-row > label, .form-check-label { font-size: 12.5px; font-weight: 600; color: var(--bp-ink-2); letter-spacing: .01em; }
.form-label.required::after, .required::after { color: var(--bp-teal-ink); }
.form-control, .form-select { min-height: 40px; font-size: 13.5px; color: var(--bp-ink); background: var(--bp-white); }
.form-control::placeholder { color: #A1A8BC; }
.form-control.form-control-lg, .form-select.form-select-lg { min-height: 46px; font-size: 14.5px; }
.form-control.form-control-sm, .form-select.form-select-sm { min-height: 34px; font-size: 12.5px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bp-danger); } .invalid-feedback, .fv-plugins-message-container .fv-help-block { color: var(--bp-danger); font-size: 12px; font-weight: 600; }
.form-control.is-valid { border-color: var(--bp-success); }
.form-text, .text-hint { font-size: 12px; color: var(--bp-ink-muted); }
.form-check-input { border-color: #C9CFDD; width: 18px; height: 18px; } .form-check-input:checked { background-color: var(--bp-teal); border-color: var(--bp-teal); }
.form-check.form-switch .form-check-input { width: 38px; height: 22px; } .form-check.form-switch .form-check-input:checked { background-color: var(--bp-teal); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(61, 194, 194, .18); border-color: var(--bp-teal); }
.input-group-text { background: var(--bp-paper); border-color: var(--bp-line); color: var(--bp-ink-muted); font-size: 13px; }
.form-control.form-control-solid, .form-select.form-select-solid { background-color: var(--bp-paper) !important; border-color: transparent; } .form-control.form-control-solid:focus, .form-select.form-select-solid:focus { background-color: var(--bp-white) !important; border-color: var(--bp-teal); }
.dropzone { border: 1px dashed #C9CFDD !important; border-radius: var(--bp-r) !important; background: var(--bp-paper) !important; }

/* Tabs */
.nav-line-tabs { border-bottom: 1px solid var(--bp-line); gap: 4px; }
.nav-line-tabs .nav-item .nav-link { font-family: var(--bp-font-body); font-size: 13.5px; font-weight: 600; color: var(--bp-ink-muted); padding: 10px 4px; margin: 0 10px 0 0; border-bottom-width: 2px; }
.nav-line-tabs .nav-item .nav-link .badge { margin-left: 6px; }
.nav-pills .nav-link { border-radius: var(--bp-r-pill); font-size: 13px; font-weight: 600; color: var(--bp-ink-2); padding: 7px 14px; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--bp-teal-tint); color: var(--bp-teal-ink); }
.nav-pills .nav-link:hover:not(.active) { background: var(--bp-paper); color: var(--bp-ink); }

/* Progreso */
.progress { height: 6px; border-radius: var(--bp-r-pill); background: var(--bp-line); } .progress .progress-bar { border-radius: var(--bp-r-pill); background-color: var(--bp-teal); }
.progress .progress-bar.bg-success { background-color: var(--bp-success) !important; } .progress .progress-bar.bg-warning { background-color: var(--bp-warning) !important; } .progress .progress-bar.bg-danger { background-color: var(--bp-danger) !important; } .progress .progress-bar.bg-info { background-color: #3B5BDB !important; }

/* Símbolos / avatares */
.symbol .symbol-label { border-radius: var(--bp-r); font-family: var(--bp-font-display); font-weight: 700; }
.symbol.symbol-circle .symbol-label, .rounded-circle .symbol-label { border-radius: 50%; }
.symbol-label.bg-light-primary, .bg-light-primary.symbol-label { background: var(--bp-teal-tint) !important; color: var(--bp-teal-ink) !important; }
.symbol-label.bg-light-success { background: rgba(34, 195, 142, .14) !important; } .symbol-label.bg-light-warning { background: rgba(245, 183, 59, .18) !important; } .symbol-label.bg-light-danger { background: rgba(229, 72, 77, .12) !important; } .symbol-label.bg-light-info { background: #E8EEFF !important; }
.text-primary, .text-primary i { color: var(--bp-teal-ink) !important; } .text-success { color: #178A62 !important; } .text-warning { color: #9A6B00 !important; } .text-danger { color: var(--bp-danger) !important; } .text-info { color: #3B5BDB !important; }
.bg-light-success { background: rgba(34, 195, 142, .10) !important; } .bg-light-warning { background: rgba(245, 183, 59, .12) !important; } .bg-light-danger { background: rgba(229, 72, 77, .08) !important; } .bg-light-info { background: #EEF2FF !important; } .bg-light { background: var(--bp-paper) !important; }

/* Modales */
.modal-content { border: 1px solid var(--bp-line); border-radius: 12px; box-shadow: 0 24px 64px rgba(7, 11, 26, .25); }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--bp-line); } .modal-title { font-family: var(--bp-font-display); font-size: 17px; font-weight: 600; color: var(--bp-ink); }
.modal-body { padding: 20px 22px; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--bp-line); gap: 8px; }
.modal-backdrop.show { opacity: .55; background: var(--bp-navy); }
.swal2-popup { border-radius: 12px !important; font-family: var(--bp-font-body) !important; } .swal2-title { font-family: var(--bp-font-display) !important; font-size: 18px !important; color: var(--bp-ink) !important; }
.swal2-styled.swal2-confirm { background: var(--bp-teal) !important; color: var(--bp-teal-on) !important; border-radius: var(--bp-r-pill) !important; font-weight: 700 !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: var(--bp-white) !important; color: var(--bp-ink) !important; border: 1px solid var(--bp-line) !important; border-radius: var(--bp-r-pill) !important; font-weight: 700 !important; }

/* Alertas */
.alert { border-radius: var(--bp-r); border: 1px solid transparent; font-size: 13.5px; padding: 12px 16px; }
.alert-primary, .alert-light-primary { background: var(--bp-teal-tint); color: var(--bp-teal-ink); border-color: rgba(61, 194, 194, .3); }
.alert-success, .alert-light-success { background: rgba(34, 195, 142, .12); color: #178A62; border-color: rgba(34, 195, 142, .3); }
.alert-warning, .alert-light-warning { background: rgba(245, 183, 59, .14); color: #9A6B00; border-color: rgba(245, 183, 59, .35); }
.alert-danger, .alert-light-danger { background: rgba(229, 72, 77, .10); color: #C43A3F; border-color: rgba(229, 72, 77, .3); }
.alert-info, .alert-light-info { background: #E8EEFF; color: #3B5BDB; border-color: #C9D4FF; }
.alert-light, .alert-secondary { background: var(--bp-paper); color: var(--bp-ink-2); border-color: var(--bp-line); }
.toast { border-radius: var(--bp-r); border: 1px solid var(--bp-line); }

/* Vacíos */
.bp-empty { text-align: center; padding: 40px 20px; }
.bp-empty__icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--bp-teal-tint); color: var(--bp-teal-ink); font-size: 22px; }
.bp-empty__title { font-family: var(--bp-font-display); font-size: 17px; font-weight: 600; color: var(--bp-ink); margin: 0 0 6px; }
.bp-empty__text { font-size: 13.5px; color: var(--bp-ink-muted); max-width: 46ch; margin: 0 auto 16px; }

/* Timeline */
.bp-timeline { list-style: none; margin: 0; padding: 0; }
.bp-timeline__item { position: relative; display: flex; gap: 14px; padding: 10px 0 14px 0; }
.bp-timeline__item + .bp-timeline__item { border-top: 1px solid var(--bp-line); }
.bp-timeline__dot { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--bp-paper); color: var(--bp-ink-2); }
.bp-timeline__body { flex: 1; min-width: 0; } .bp-timeline__body b { display: block; font-size: 13.5px; color: var(--bp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-timeline__body span { font-size: 12.5px; color: var(--bp-ink-muted); }
.bp-timeline__time { flex: 0 0 auto; font-size: 12px; color: var(--bp-ink-muted); background: var(--bp-paper); border-radius: var(--bp-r-pill); padding: 3px 9px; align-self: flex-start; white-space: nowrap; }

/* Tiles de acceso rápido */
.bp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1200px) { .bp-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .bp-tiles { grid-template-columns: 1fr; } }
.bp-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--bp-white); border: 1px solid var(--bp-line); border-radius: var(--bp-r); text-decoration: none !important; color: var(--bp-ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.bp-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 16, 32, .08); border-color: #C9CFDD; color: var(--bp-ink); }
.bp-tile__icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--bp-r); background: var(--bp-teal-tint); color: var(--bp-teal-ink); display: grid; place-items: center; font-size: 15px; }
.bp-tile b { display: block; font-size: 14px; font-weight: 700; } .bp-tile span { display: block; font-size: 12.5px; color: var(--bp-ink-muted); margin-top: 2px; }

/* Dark · componentes */
[data-theme="dark"] .card > .card-header, [data-theme="dark"] .table > :not(caption) > * > *, [data-theme="dark"] .nav-line-tabs, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer, [data-theme="dark"] .bp-timeline__item + .bp-timeline__item { border-color: var(--bp-navy-line); }
[data-theme="dark"] .card .card-title, [data-theme="dark"] .bp-kpi__value, [data-theme="dark"] .bp-tile b, [data-theme="dark"] .bp-empty__title, [data-theme="dark"] .bp-timeline__body b, [data-theme="dark"] .modal-title, [data-theme="dark"] .table .fw-bold, [data-theme="dark"] .table .fw-bolder { color: #E6EAF5; }
[data-theme="dark"] .bp-kpi, [data-theme="dark"] .bp-tile, [data-theme="dark"] .bp-chip, [data-theme="dark"] .modal-content { background: var(--bp-navy-2); border-color: var(--bp-navy-line); color: #E6EAF5; }
[data-theme="dark"] .bp-kpi__icon, [data-theme="dark"] .bp-timeline__dot, [data-theme="dark"] .bp-timeline__time, [data-theme="dark"] .bp-chip__n, [data-theme="dark"] .progress, [data-theme="dark"] .badge.badge-light { background: var(--bp-navy); color: #C3C9DA; }
[data-theme="dark"] .table > tbody > tr:hover > * { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .btn-light, [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-light-secondary, [data-theme="dark"] .btn-white { background: var(--bp-navy-2) !important; color: #E6EAF5 !important; border-color: var(--bp-navy-line) !important; }