/*
 * Tema Sube para el panel de administración.
 * Se carga después de style.css y colors/blue.css y solo sobrescribe estilos.
 */
:root {
    --sube-ink: #0e1111;
    --sube-ink-2: #161b1c;
    --sube-ink-3: #20282a;
    --sube-line-dark: rgba(255, 255, 255, .08);
    --sube-lime: #b6f23a;
    --sube-lime-strong: #a3e01f;
    --sube-lime-soft: #f1fcd8;
    --sube-amber: #ffb020;
    --sube-amber-soft: #fff4dc;
    --sube-red: #e5484d;
    --sube-red-soft: #fdecec;
    --sube-blue: #3e7bfa;
    --sube-blue-soft: #e9f0ff;
    --sube-bg: #f3f5f2;
    --sube-surface: #ffffff;
    --sube-text: #141a1b;
    --sube-muted: #667073;
    --sube-line: #e3e8e4;
    --sube-radius: 14px;
    --sube-radius-sm: 10px;
    --sube-shadow: 0 1px 2px rgba(14, 17, 17, .04), 0 4px 16px rgba(14, 17, 17, .05);
    --sube-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
html, body {
    font-family: var(--sube-font) !important;
    background: var(--sube-bg) !important;
    color: var(--sube-text);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}
body, p, td, th, label, input, select, textarea, button, .btn, .form-control, h1, h2, h3, h4, h5, h6,
.sidebar-nav, .dataTables_wrapper, .select2-container, .chosen-container {
    font-family: var(--sube-font) !important;
}
h1, h2, h3, h4, h5, h6 { color: var(--sube-text); font-weight: 700; letter-spacing: -.01em; }
a { color: #3f6b00; }
a:hover, a:focus { color: var(--sube-text); }
::selection { background: var(--sube-lime); color: var(--sube-ink); }

#main-wrapper, .page-wrapper { background: var(--sube-bg) !important; }
.page-wrapper { padding-bottom: 40px; min-height: 100vh; }
main.py-4 { padding: 0 !important; }
.container-fluid { padding: 0 28px 28px; }

/* ---------- Barra superior ---------- */
.topbar, .topbar .navbar-header, .topbar .top-navbar {
    background: var(--sube-ink) !important;
    box-shadow: none !important;
}
.topbar { border-bottom: 1px solid var(--sube-line-dark); }
.topbar .top-navbar { min-height: 64px; }
.topbar .top-navbar .navbar-header { line-height: 64px; height: 64px; padding: 0 0 0 20px; text-align: left; display: flex; align-items: center; }
.topbar .top-navbar .navbar-header .navbar-brand { padding: 0; }
.topbar .top-navbar .navbar-collapse { align-items: center; }
.topbar .top-navbar .navbar-header .navbar-brand { display: flex; align-items: center; gap: 10px; margin: 0; }
.sube-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.sube-brand-word { color: var(--sube-lime); font-weight: 800; font-size: 26px; letter-spacing: -.03em; line-height: 1; }
.sube-brand-tag {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sube-ink); background: var(--sube-lime); border-radius: 999px; padding: 4px 9px; line-height: 1;
}
.sube-brand-tag { font-style: normal; }
.mini-sidebar .sube-brand-tag { display: none; }
.mini-sidebar .topbar .top-navbar .navbar-header { width: 60px; height: 64px; padding: 0; justify-content: center; }
.mini-sidebar .sube-brand-word { font-size: 19px; }
@media (max-width: 767px) {
    .topbar .top-navbar .navbar-header, .mini-sidebar .topbar .top-navbar .navbar-header { width: auto; padding: 0 4px 0 14px; }
    .mini-sidebar .sube-brand-word { font-size: 24px; }
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link { color: #cfd6d4 !important; }
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover { color: var(--sube-lime) !important; }
.sube-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-right: 8px; }
.sube-chip-link {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: #e7ecea !important; background: var(--sube-ink-3);
    border: 1px solid var(--sube-line-dark); text-decoration: none !important; white-space: nowrap;
}
.sube-chip-link:hover { border-color: var(--sube-lime); color: var(--sube-lime) !important; }
.sube-chip-link .sube-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sube-muted); }
.sube-chip-link.is-alert { background: var(--sube-red); border-color: var(--sube-red); color: #fff !important; }
.sube-chip-link.is-alert .sube-dot { background: #fff; animation: subePulse 1.2s infinite; }
@keyframes subePulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sube-user-pill { display: inline-flex; align-items: center; gap: 10px; color: #e7ecea !important; }
.sube-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sube-lime); color: var(--sube-ink); font-weight: 800; font-size: 14px;
}
.topbar .dropdown-menu { border: 1px solid var(--sube-line); border-radius: var(--sube-radius); box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; }
.topbar ul.dropdown-user li a { color: var(--sube-text); font-weight: 500; }
.topbar ul.dropdown-user li a:hover { background: var(--sube-bg); color: var(--sube-text); }
.topbar .dropdown-toggle::after { display: none !important; }

/* ---------- Menú lateral ---------- */
.left-sidebar {
    background: var(--sube-ink) !important;
    box-shadow: none !important;
    border-right: 1px solid var(--sube-line-dark);
    padding-top: 64px;
}
.scroll-sidebar { padding-bottom: 40px; }
.sidebar-nav { background: transparent !important; padding: 12px 12px 30px; }
.sidebar-nav > ul > li { margin-bottom: 2px; }
.sidebar-nav ul li a, .sidebar-nav > ul > li > a {
    color: #b9c2bf !important; font-size: 14px; font-weight: 500; white-space: nowrap;
    border-radius: var(--sube-radius-sm); padding: 9px 12px !important; border-left: 0 !important;
    display: flex !important; align-items: center; gap: 12px;
}
.sidebar-nav > ul > li > a i {
    color: #7d8885 !important; font-size: 19px; width: 22px; text-align: center; margin: 0 !important;
}
.sidebar-nav ul li a:hover, .sidebar-nav > ul > li > a:hover { background: var(--sube-ink-3) !important; color: #fff !important; }
.sidebar-nav ul li a:hover i { color: var(--sube-lime) !important; }
.sidebar-nav > ul > li.active > a, .sidebar-nav > ul > li > a.active,
.sidebar-nav ul li a.active {
    background: var(--sube-lime) !important; color: var(--sube-ink) !important; font-weight: 700;
}
.sidebar-nav > ul > li.active > a i, .sidebar-nav > ul > li > a.active i { color: var(--sube-ink) !important; }
.sidebar-nav ul li ul { background: transparent !important; padding: 2px 0 6px 34px !important; }
.sidebar-nav ul li ul li a { font-size: 13.5px; padding: 7px 12px !important; color: #9aa4a1 !important; }
.sidebar-nav ul li ul li a::before, .sidebar-nav ul li ul li a::after { display: none !important; }
.sidebar-nav ul li ul li a.active, .sidebar-nav ul li ul li.active > a {
    background: var(--sube-ink-3) !important; color: var(--sube-lime) !important;
}
.sidebar-nav .has-arrow::after { border-color: #7d8885 !important; right: 14px !important; }
.sidebar-nav > ul > li.nav-subtitle { padding: 18px 12px 6px; margin: 0; list-style: none; }
.sidebar-nav > ul > li.nav-subtitle:first-of-type { padding-top: 10px; }
.sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {
    background: transparent !important; padding: 0 !important; display: block;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #6d7976 !important;
}
.mini-sidebar .sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span { width: auto; font-size: 0; height: 1px; background: var(--sube-line-dark) !important; }
.sidebar-nav .hide-menu { overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .has-arrow .sube-badge-count { margin-right: 18px; }
.sube-badge-count {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--sube-red); color: #fff; font-size: 11px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
}
.sube-badge-count.is-amber { background: var(--sube-amber); color: var(--sube-ink); }
.sube-badge-count.is-on { display: inline-flex; }
.mini-sidebar .sube-badge-count { position: absolute; top: 4px; right: 4px; min-width: 8px; height: 8px; padding: 0; font-size: 0; }

/* ---------- Títulos de página ---------- */
.page-titles {
    background: transparent !important; box-shadow: none !important; margin: 0 0 8px !important;
    padding: 26px 28px 10px !important; border: 0 !important;
}
.page-titles h3, .page-titles .text-themecolor { color: var(--sube-text) !important; font-size: 24px; font-weight: 800; margin: 0; }
.page-titles .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 13px; }
.page-titles .breadcrumb .breadcrumb-item, .page-titles .breadcrumb .breadcrumb-item a { color: var(--sube-muted); }
.page-titles .breadcrumb .breadcrumb-item.active { color: var(--sube-text); font-weight: 600; }

/* ---------- Tarjetas ---------- */
.card {
    background: var(--sube-surface); border: 1px solid var(--sube-line) !important; border-radius: var(--sube-radius) !important;
    box-shadow: var(--sube-shadow) !important; margin-bottom: 20px;
}
.card .card-header, .card-header {
    background: transparent !important; border-bottom: 1px solid var(--sube-line) !important;
    border-radius: var(--sube-radius) var(--sube-radius) 0 0 !important; padding: 16px 20px;
}
.card .card-title, .card-header h3, .card-header h4 { font-weight: 700; color: var(--sube-text); }
.card-body { padding: 20px; }
fieldset, .border { border-color: var(--sube-line) !important; border-radius: var(--sube-radius-sm); }
fieldset legend, legend {
    font-size: 15px !important; font-weight: 700 !important; color: var(--sube-text) !important; background: transparent !important;
    text-transform: none !important; width: auto; padding: 0 8px !important; letter-spacing: 0;
}
fieldset { border: 1px solid var(--sube-line) !important; border-radius: var(--sube-radius) !important; }

/* ---------- Botones ---------- */
.btn { border-radius: 999px !important; font-weight: 600; font-size: 14px; padding: 8px 18px; box-shadow: none !important; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-primary, .btn-info, .btn-success, .btn-theme, .save-form-btn, .edit-form-btn, .btn-themecolor,
.btn[type="submit"]:not(.btn-danger):not(.btn-default):not(.btn-secondary) {
    background: var(--sube-lime) !important; border-color: var(--sube-lime) !important; color: var(--sube-ink) !important;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .save-form-btn:hover, .edit-form-btn:hover {
    background: var(--sube-lime-strong) !important; border-color: var(--sube-lime-strong) !important; color: var(--sube-ink) !important;
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary, .btn-warning.btn-flat {
    background: #fff !important; border: 1px solid var(--sube-line) !important; color: var(--sube-text) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover { border-color: #c5ccc8 !important; background: var(--sube-bg) !important; }
.btn-danger { background: var(--sube-red) !important; border-color: var(--sube-red) !important; color: #fff !important; }
.btn-warning { background: var(--sube-amber) !important; border-color: var(--sube-amber) !important; color: var(--sube-ink) !important; }
.btn i { margin-right: 4px; }

/* Barra de acciones de las tablas (Crear, Borrar seleccionados) */
.card-header-btn, .card-body .nav-tabs { border-color: var(--sube-line); }
.nav-tabs .nav-link { border: 0; color: var(--sube-muted); font-weight: 600; border-radius: 0; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--sube-text); background: transparent; border-bottom: 2px solid var(--sube-lime-strong);
}
.nav-tabs .nav-link i { margin-right: 6px; }

/* ---------- Formularios ---------- */
.form-control, .custom-select, select.form-control, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple, .chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices, .bootstrap-tagsinput {
    border: 1px solid var(--sube-line) !important; border-radius: var(--sube-radius-sm) !important;
    background-image: none; background-color: #fff; color: var(--sube-text);
    min-height: 42px; box-shadow: none !important; font-size: 14px;
}
.form-material .form-control, .form-material .form-control.focused {
    background-image: none !important; padding: 8px 12px;
}
.form-control:focus, .select2-container--focus .select2-selection, .chosen-container-active .chosen-single {
    border-color: var(--sube-lime-strong) !important; box-shadow: 0 0 0 3px rgba(182, 242, 58, .3) !important;
}
label, .control-label { font-weight: 600; color: var(--sube-text); font-size: 13.5px; }
.form-text, .text-muted, small.form-text { color: var(--sube-muted) !important; }
.required-field::after { color: var(--sube-red); }
.form-group { margin-bottom: 18px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sube-lime-strong); }

/* Interruptores (label.switch > input + span.slider) */
label.switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; vertical-align: middle; }
label.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
label.switch .slider, .table tr td .switch .slider {
    position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background-color: #d5dbd8 !important; transition: .2s;
}
label.switch .slider:before, .table tr td .switch .slider:before {
    content: ""; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s;
}
label.switch input:checked + .slider, .table tr td .switch input:checked + .slider { background-color: var(--sube-lime-strong) !important; }
label.switch input:checked + .slider:before, .table tr td .switch input:checked + .slider:before { transform: translateX(20px); }
label.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(182, 242, 58, .45); }

/* ---------- Tablas ---------- */
.table { color: var(--sube-text); }
.table thead th, table.dataTable thead th {
    background: #f7f9f6; color: var(--sube-muted) !important; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--sube-line) !important;
    border-top: 0 !important; white-space: nowrap; padding: 12px 14px !important;
}
.table td, table.dataTable tbody td {
    border-color: var(--sube-line) !important; vertical-align: middle !important; padding: 12px 14px !important; font-size: 14px;
}
.table-bordered, .table-bordered td, .table-bordered th { border-left: 0 !important; border-right: 0 !important; }
.table-bordered { border: 0 !important; }
.table-striped tbody tr:nth-of-type(odd), table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: #fff !important; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1 { background: transparent !important; }
.table-hover tbody tr:hover, table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background: #f7fbef !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--sube-line) !important; }
.table td img.rounded, .table td img { border-radius: 50% !important; object-fit: cover; }
.table td img[style*="width:50px"], .table td img[style*="width: 50px"] { width: 40px !important; height: 40px !important; }
.action-btn { white-space: nowrap; }
.action-btn a, .action-btn button {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 50%; color: var(--sube-muted) !important; margin-right: 4px; transition: background .15s;
}
.action-btn a:hover { background: var(--sube-bg); color: var(--sube-text) !important; }
.table tr td.action-btn a i, ul.dtr-details > li span a i {
    background: transparent !important; color: var(--sube-muted) !important; width: auto !important; height: auto !important;
    padding: 0 !important; font-size: 16px;
}
.table tr td.action-btn a i.fa-trash, .table tr td.action-btn a i.fa-close, ul.dtr-details > li span a i.fa-trash { color: var(--sube-red) !important; }
.table tr td.action-btn a:hover i { color: var(--sube-text) !important; }
.table tr td.action-btn a { padding: 0 !important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--sube-line); border-radius: 999px; padding: 6px 14px; min-height: 38px; margin-left: 8px; background: #fff;
}
.dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--sube-lime-strong); box-shadow: 0 0 0 3px rgba(182,242,58,.3); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--sube-muted) !important; font-size: 13px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important; border: 0 !important; color: var(--sube-text) !important; font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--sube-ink) !important; color: var(--sube-lime) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--sube-bg) !important; color: var(--sube-text) !important; }
.pagination > .active > a, .pagination > .active > span, .page-item.active .page-link { background: var(--sube-ink) !important; border-color: var(--sube-ink) !important; color: var(--sube-lime) !important; }
.page-link { color: var(--sube-text); border-radius: 999px !important; margin: 0 2px; border-color: var(--sube-line); }

/* ---------- Estados y etiquetas ---------- */
.badge { border-radius: 999px; font-weight: 700; padding: 5px 10px; font-size: 11.5px; letter-spacing: .02em; }
.badge-success, .label-success, .badge.bg-success { background: var(--sube-lime-soft) !important; color: #3a6400 !important; }
.badge-warning, .label-warning { background: var(--sube-amber-soft) !important; color: #8a5a00 !important; }
.badge-danger, .label-danger { background: var(--sube-red-soft) !important; color: #b42318 !important; }
.badge-info, .label-info, .badge-primary, .label-primary { background: var(--sube-blue-soft) !important; color: #1d4ed8 !important; }
.badge-secondary, .label-default { background: #eef1ef !important; color: var(--sube-muted) !important; }
.sube-pay {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; background: #eef1ef; color: var(--sube-text); white-space: nowrap;
}
.sube-pay.is-nequi { background: #f6e8ff; color: #6b1fa6; }
.sube-pay.is-qr { background: var(--sube-blue-soft); color: #1d4ed8; }
.sube-pay.is-wallet { background: var(--sube-lime-soft); color: #3a6400; }
.sube-pay.is-cash { background: var(--sube-amber-soft); color: #8a5a00; }
.alert { border-radius: var(--sube-radius-sm); border: 0; }
.alert-danger { background: var(--sube-red-soft); color: #b42318; }
.alert-success { background: var(--sube-lime-soft); color: #3a6400; }
.alert-warning { background: var(--sube-amber-soft); color: #8a5a00; }
.alert-info { background: var(--sube-blue-soft); color: #1d4ed8; }
.text-success { color: #3f8a00 !important; }
.text-danger { color: #c4320a !important; }
.text-themecolor { color: var(--sube-text) !important; }

/* ---------- Cargando ---------- */
#overlay {
    position: fixed; inset: 0; z-index: 9999; background: rgba(243, 245, 242, .7) !important;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
#overlay img { display: none; }
#overlay::after {
    content: ''; width: 44px; height: 44px; border-radius: 50%;
    border: 4px solid rgba(14,17,17,.12); border-top-color: var(--sube-lime-strong); animation: subeSpin .8s linear infinite;
}
#overlay[style*="display: none"], #overlay[style*="display:none"] { display: none !important; }
@keyframes subeSpin { to { transform: rotate(360deg); } }

/* ---------- Pie de página ---------- */
.footer { background: transparent !important; border-top: 1px solid var(--sube-line) !important; color: var(--sube-muted); font-size: 12.5px; }

/* ---------- Toasts y modales ---------- */
.modal-content { border: 0; border-radius: var(--sube-radius); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.modal-header, .modal-footer { border-color: var(--sube-line); }
.jq-toast-wrap .jq-toast-single { border-radius: var(--sube-radius-sm); font-family: var(--sube-font); }

/* ---------- Inicio (dashboard) ---------- */
.sube-hello { padding: 26px 28px 6px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sube-hello h2 { margin: 0; font-size: 26px; font-weight: 800; }
.sube-hello p { margin: 4px 0 0; color: var(--sube-muted); }
.sube-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.sube-quick a {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px;
    background: #fff; border: 1px solid var(--sube-line); color: var(--sube-text); font-weight: 600; font-size: 13.5px;
    text-decoration: none;
}
.sube-quick a:hover { border-color: var(--sube-ink); }
.sube-quick a.is-primary { background: var(--sube-ink); border-color: var(--sube-ink); color: var(--sube-lime); }
.sube-section-title { font-size: 13px; font-weight: 700; color: var(--sube-muted); text-transform: uppercase; letter-spacing: .08em; margin: 22px 0 10px; }
.sube-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .sube-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sube-kpis { grid-template-columns: 1fr; } }
.sube-kpi {
    position: relative; display: block; background: #fff; border: 1px solid var(--sube-line); border-radius: var(--sube-radius);
    padding: 16px 18px; box-shadow: var(--sube-shadow); color: var(--sube-text) !important; text-decoration: none !important;
    transition: transform .12s, border-color .12s;
}
a.sube-kpi:hover { transform: translateY(-2px); border-color: #c8d0cc; }
.sube-kpi-label { font-size: 13px; color: var(--sube-muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sube-kpi-label i { font-size: 17px; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--sube-bg); color: var(--sube-text); }
.sube-kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 10px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sube-kpi-sub { font-size: 12.5px; color: var(--sube-muted); margin-top: 4px; }
.sube-kpi.is-dark { background: var(--sube-ink); border-color: var(--sube-ink); color: #fff !important; }
.sube-kpi.is-dark .sube-kpi-label { color: #a9b3b0; }
.sube-kpi.is-dark .sube-kpi-label i { background: var(--sube-ink-3); color: var(--sube-lime); }
.sube-kpi.is-dark .sube-kpi-value { color: var(--sube-lime); }
.sube-kpi.is-dark .sube-kpi-sub { color: #8e9895; }
.sube-kpi.is-alert { border-color: var(--sube-red); background: var(--sube-red-soft); }
.sube-kpi.is-alert .sube-kpi-label i { background: var(--sube-red); color: #fff; }
.sube-kpi.is-alert .sube-kpi-value { color: #b42318; }
.sube-kpi.is-warn { border-color: #ffd98a; background: var(--sube-amber-soft); }
.sube-kpi.is-warn .sube-kpi-label i { background: var(--sube-amber); color: var(--sube-ink); }
.sube-kpi.is-driver .sube-kpi-label i { background: var(--sube-amber-soft); color: #8a5a00; }
.sube-kpi.is-rider .sube-kpi-label i { background: var(--sube-lime-soft); color: #3a6400; }
.sube-kpi.is-loading .sube-kpi-value { color: transparent; background: linear-gradient(90deg, #eef1ef, #f7f9f6, #eef1ef); background-size: 200% 100%; animation: subeShimmer 1.2s infinite; border-radius: 8px; width: 60%; }
@keyframes subeShimmer { to { background-position: -200% 0; } }
.sube-grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) { .sube-grid-2 { grid-template-columns: 1fr; } }
.sube-panel { background: #fff; border: 1px solid var(--sube-line); border-radius: var(--sube-radius); box-shadow: var(--sube-shadow); overflow: hidden; }
.sube-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--sube-line); }
.sube-panel-head h4 { margin: 0; font-size: 16px; font-weight: 700; }
.sube-panel-head a { font-size: 13px; font-weight: 600; }
.sube-panel-body { padding: 6px 0; }
.sube-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #f0f3f1; color: var(--sube-text) !important; text-decoration: none !important; }
.sube-row:last-child { border-bottom: 0; }
a.sube-row:hover { background: #f7fbef; }
.sube-row-main { flex: 1; min-width: 0; }
.sube-row-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sube-row-sub { font-size: 12.5px; color: var(--sube-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sube-row-end { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sube-empty { padding: 26px 18px; text-align: center; color: var(--sube-muted); font-size: 14px; }
.sube-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sube-status.s-placed { background: var(--sube-blue-soft); color: #1d4ed8; }
.sube-status.s-active { background: var(--sube-amber-soft); color: #8a5a00; }
.sube-status.s-progress { background: var(--sube-lime-soft); color: #3a6400; }
.sube-status.s-done { background: #eef1ef; color: var(--sube-muted); }
.sube-status.s-cancel { background: var(--sube-red-soft); color: #b42318; }
.sube-service-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--sube-bg); font-size: 18px; flex-shrink: 0; }

/* ---------- Login ---------- */
.sube-login {
    min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
    background: var(--sube-ink);
}
.sube-login-art {
    position: relative; overflow: hidden; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between;
    background: radial-gradient(900px 500px at 10% 110%, rgba(182,242,58,.18), transparent 60%), var(--sube-ink);
    color: #fff;
}
.sube-login-art::after {
    content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
    border: 70px solid rgba(182, 242, 58, .1);
}
.sube-login-art h1 { color: #fff; font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; margin: 0; max-width: 520px; }
.sube-login-art h1 em { font-style: normal; color: var(--sube-lime); }
.sube-login-art p { color: #a9b3b0; font-size: 16px; max-width: 460px; margin-top: 16px; }
.sube-login-points { display: flex; flex-wrap: wrap; gap: 10px 22px; color: #cfd6d4; font-size: 14px; position: relative; z-index: 1; }
.sube-login-points span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sube-lime); margin-right: 8px; }
.sube-login-form { background: var(--sube-bg); display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.sube-login-card { width: 100%; max-width: 400px; }
.sube-login-card h2 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.sube-login-card .lead { color: var(--sube-muted); font-size: 15px; margin-bottom: 28px; }
.sube-login-card .form-control { height: 48px; font-size: 15px; }
.sube-login-card .btn-login {
    width: 100%; height: 50px; border: 0; border-radius: 999px; background: var(--sube-ink); color: var(--sube-lime);
    font-weight: 700; font-size: 16px; margin-top: 8px;
}
.sube-login-card .btn-login:hover { background: #000; }
.sube-login-foot { margin-top: 28px; font-size: 12.5px; color: var(--sube-muted); }
@media (max-width: 860px) {
    .sube-login { grid-template-columns: 1fr; }
    .sube-login-art { padding: 28px 24px; min-height: auto; }
    .sube-login-art h1 { font-size: 32px; }
    .sube-login-art p, .sube-login-points { display: none; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
    .container-fluid { padding: 0 14px 20px; }
    .page-titles { padding: 18px 14px 6px !important; }
    .sube-hello { padding: 18px 14px 4px; }
    .sube-topbar-actions .sube-chip-label { display: none; }
    .sube-kpi-value { font-size: 24px; }
}
.mini-sidebar .sidebar-nav > ul > li > a { position: relative; }