/* ==========================================================================
   Kaja v2 — ronda de diseño profundo
   Idea: "ticket de caja". Cifras en mono grande, bordes laterales de color
   como cintas de recibo, línea perforada, y mucho aire. Lo memorable vive en
   las tarjetas de cifras; el resto es silencioso.
   Incluye: tablero, estados vacíos, POS, densidad compacta y modo oscuro.
   ========================================================================== */

:root {
    --k-coral: #e0614a;
    --k-sky: #1b8fb5;
    --k-ring: 0 0 0 3px rgba(19, 141, 131, .18);
    --k-shadow-lg: 0 2px 4px rgba(10, 46, 43, .06), 0 14px 32px -8px rgba(10, 46, 43, .18);
}

/* ---- Movimiento: solo respuesta a acciones ----------------------------------- */
.btn, .tw-dw-btn, .box, .product_box, .form-control, a { transition-property: background-color, border-color, box-shadow, color, transform; transition-duration: .16s; transition-timing-function: ease; }
.btn:active, .tw-dw-btn:active { transform: translateY(1px); }
.btn-primary, .btn-success, .btn-info { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 2px 6px -2px rgba(15, 118, 110, .5); }
.btn-primary:hover, .btn-success:hover, .btn-info:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 14px -4px rgba(15, 118, 110, .55); }
.form-control { height: 40px; }
textarea.form-control { height: auto; }
.pace .pace-progress { background: var(--k-amber) !important; height: 3px; }

/* ---- Tablero: cabecera ----------------------------------------------------------- */
.kaja-hero-sub { margin: 4px 0 0; color: rgba(255, 255, 255, .72); font-size: 15px; font-weight: 500; }
.kaja-hero-sub b { color: var(--k-amber); font-weight: 600; }
.content > .tw-bg-gradient-to-r, .tw-bg-gradient-to-r.tw-from-primary-800 { background-image: linear-gradient(115deg, #0a2e2b 0%, #0d4a45 60%, #0f6b63 100%) !important; }
body.k-dark .content > .tw-bg-gradient-to-r, body.k-dark .tw-bg-gradient-to-r.tw-from-primary-800 { background-image: linear-gradient(115deg, #071f1d 0%, #0a3330 70%, #0c4d47 100%) !important; }

/* ---- Tablero: tarjetas de cifras como cintas de ticket ---------------------------- */
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono) {
    position: relative; border-radius: 14px; border: 0;
    box-shadow: var(--k-shadow-lg); overflow: hidden;
    border-left: 5px solid var(--k-teal-700);
}
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono):nth-child(4n+2) { border-left-color: var(--k-ok); }
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono):nth-child(4n+3) { border-left-color: var(--k-amber); }
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono):nth-child(4n+4) { border-left-color: var(--k-coral); }
/* perforación tipo recibo */
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono)::after {
    content: ""; position: absolute; right: 18px; top: 12%; bottom: 12%;
    border-right: 2px dotted var(--k-line); opacity: .8; pointer-events: none;
}
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono) p.tw-text-sm { font-size: 13px; color: var(--k-muted); font-weight: 600; }
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono) p.tw-font-mono { font-size: 26px; line-height: 1.15; font-weight: 600; color: var(--k-ink); letter-spacing: -.02em; }
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono) .tw-rounded-full { border-radius: 12px !important; }
.tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono):hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(10, 46, 43, .08), 0 22px 40px -12px rgba(10, 46, 43, .28); }

/* Contenedores de gráficos y tablas del tablero */
.content .tw-rounded-xl.tw-bg-white, .content .box { border-radius: 14px; }
.tw-ring-1.tw-ring-gray-200 { border-radius: 14px; }

/* ---- Menú lateral: indicador ámbar ---------------------------------------------------- */
#side-bar .tw-bg-gray-200, #side-bar a.tw-bg-gray-200 { box-shadow: inset 3px 0 0 var(--k-amber); }
#side-bar a { transition: background-color .15s, color .15s, padding-left .15s; }
#side-bar a:hover { padding-left: 14px; }

/* ---- Tablas: más claras y con estados vacíos amables --------------------------------- */
.table > tbody > tr > td { font-size: 14px; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--k-zebra, #fafcfb); }
table.dataTable tbody tr:hover > td { background-color: var(--k-teal-50); }
td.dataTables_empty { text-align: center; padding: 44px 12px !important; color: var(--k-muted); font-weight: 600; background: transparent !important; }
td.dataTables_empty::before {
    content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 10px;
    background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238da3a0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13l2.4-7.2A2 2 0 0 1 7.3 4.4h9.4a2 2 0 0 1 1.9 1.4L21 13'/><path d='M3 13v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-5.2a2 2 0 0 0-1.8 1.1 1.8 1.8 0 0 1-1.6 1H10.6a1.8 1.8 0 0 1-1.6-1A2 2 0 0 0 7.2 13H3z'/></svg>");
}
html[lang^="es"] td.dataTables_empty::after { content: "Cuando haya registros, aparecerán aquí."; display: block; margin-top: 4px; font-weight: 400; font-size: 13px; }
html[lang^="en"] td.dataTables_empty::after { content: "Records will show up here once you add some."; display: block; margin-top: 4px; font-weight: 400; font-size: 13px; }
div.dataTables_processing {
    background: var(--k-surface) !important; color: var(--k-teal-800); border: 1px solid var(--k-line); border-radius: 999px;
    box-shadow: var(--k-shadow-lg); padding: 8px 18px !important; font-weight: 600; width: auto !important; height: auto !important;
    left: 50% !important; margin-left: -80px !important; top: 40% !important;
}

/* Acciones de fila */
.btn-xs, .tw-dw-btn-xs { border-radius: 8px; }
.dropdown-menu { border: 1px solid var(--k-line); border-radius: 12px; box-shadow: var(--k-shadow-lg); padding: 6px; background: var(--k-surface); }
.dropdown-menu > li > a { border-radius: 8px; padding: 7px 12px; color: var(--k-ink); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--k-teal-50); color: var(--k-teal-800); }

/* ---- POS: pantalla de cobro ------------------------------------------------------------- */
.pos-form-actions { border-top: 1px solid var(--k-line); box-shadow: 0 -10px 30px -12px rgba(10, 46, 43, .22) !important; }
.pos-form-actions button, .pos-form-actions a { border-radius: 10px; transition: transform .12s, box-shadow .15s, background-color .15s; }
.pos-form-actions button:hover { transform: translateY(-1px); }
.pos-form-actions .tw-dw-btn-success, .pos-form-actions .bg-green, .pos-form-actions #pos-finalize { background: var(--k-teal-700) !important; border-color: var(--k-teal-700) !important; color: #fff !important; box-shadow: 0 6px 16px -6px rgba(15, 118, 110, .7); }
.pos-form-actions .tw-dw-btn-error, .pos-form-actions #pos-cancel { background: var(--k-coral) !important; border-color: var(--k-coral) !important; color: #fff !important; }
.pos-form-actions .tw-dw-btn-neutral, .pos-form-actions #pos-pay-multiple { background: var(--k-teal-900) !important; color: #fff !important; }
.pos_form_totals { font-variant-numeric: tabular-nums; }
.pos_form_totals .price_total, .pos_form_totals .total_payable { font-family: var(--k-mono); }
.pos_product_div { border-radius: 14px; }
#pos_table tbody td { vertical-align: middle; }
#pos_table thead th { font-size: 12.5px; }
.product_box { background: var(--k-surface); padding: 8px 6px 10px; cursor: pointer; }
.product_box .text_div, .product_box .text { font-size: 12.5px; line-height: 1.3; color: var(--k-ink); }
.product_box .text-muted small { color: var(--k-teal-700); font-weight: 600; }
/* Botón Categoría / Marcas del POS */
#product_category_div button, #product_brand_div button, .pos-form-actions + * button { letter-spacing: 0; }

/* ---- Densidad compacta ------------------------------------------------------------------------ */
body.k-compact .table > tbody > tr > td, body.k-compact .table > tfoot > tr > td { padding: 5px 10px; font-size: 13px; }
body.k-compact .table > thead > tr > th { padding: 7px 10px; }
body.k-compact .box-body { padding: 12px; }
body.k-compact .form-control { height: 34px; }

/* ---- Botones de la barra superior (tema y densidad) ---------------------------------------------- */
.kaja-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .15s; }
.kaja-toggle:hover { background: rgba(255, 255, 255, .22); }
.kaja-toggle svg { width: 18px; height: 18px; }
.kaja-toggle .k-moon { display: none; }
body.k-dark .kaja-toggle .k-sun { display: none; }
body.k-dark .kaja-toggle .k-moon { display: block; }

/* ==========================================================================
   Modo oscuro — se activa con body.k-dark (botón en la barra superior)
   Casi todo el tema usa variables, así que basta con redefinirlas.
   ========================================================================== */
body.k-dark {
    --k-paper: #0b1b1a;
    --k-surface: #11292a;
    --k-line: #234240;
    --k-line-soft: #1b3735;
    --k-ink: #e3efed;
    --k-muted: #93aba7;
    --k-teal-50: #14403d;
    --k-teal-100: #1b504c;
    --k-teal-800: #7fd8cd;
    --k-teal-700: #19a094;
    --k-teal-600: #25b8aa;
    --k-zebra: #0f2423;
    --k-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --k-shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
body.k-dark, body.k-dark .content-wrapper, body.k-dark .wrapper, body.k-dark .tw-bg-gray-100, body.k-dark .tw-bg-gray-50, body.k-dark .right-side { background-color: var(--k-paper) !important; color: var(--k-ink); }
body.k-dark .tw-bg-white, body.k-dark .main-sidebar, body.k-dark .side-bar, body.k-dark #side-bar, body.k-dark .main-footer,
body.k-dark .modal-content, body.k-dark .box, body.k-dark .nav-tabs-custom, body.k-dark .nav-tabs-custom > .tab-content,
body.k-dark .popover, body.k-dark .popover-content, body.k-dark .select2-dropdown, body.k-dark .daterangepicker,
body.k-dark .pos_product_div, body.k-dark .pos-form-actions, body.k-dark .product_box { background-color: var(--k-surface) !important; color: var(--k-ink); }
body.k-dark .tw-text-gray-900, body.k-dark .tw-text-gray-800, body.k-dark .tw-text-gray-700, body.k-dark .tw-text-black { color: var(--k-ink) !important; }
body.k-dark .tw-text-gray-600, body.k-dark .tw-text-gray-500, body.k-dark .text-muted { color: var(--k-muted) !important; }
body.k-dark .tw-ring-gray-200 { --tw-ring-color: var(--k-line); }
body.k-dark .tw-border-gray-200 { border-color: var(--k-line) !important; }
body.k-dark .tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono) .tw-rounded-full { background-color: rgba(255, 255, 255, .08) !important; }
body.k-dark .tw-bg-gray-200 { background-color: var(--k-teal-50) !important; }
body.k-dark .form-control, body.k-dark .select2-container--default .select2-selection--single, body.k-dark .select2-container--default .select2-selection--multiple,
body.k-dark .dataTables_wrapper .dataTables_filter input, body.k-dark .dataTables_wrapper .dataTables_length select,
body.k-dark .input-group-addon { background-color: #0d2221 !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }
body.k-dark .form-control[disabled], body.k-dark .form-control[readonly] { background-color: #0a1c1b !important; }
body.k-dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--k-ink); }
body.k-dark .table, body.k-dark .table > tbody > tr > td { color: var(--k-ink); background-color: transparent; border-color: var(--k-line-soft); }
body.k-dark .table > thead > tr > th { background: var(--k-teal-50); color: var(--k-teal-800); }
body.k-dark .table > tfoot > tr { background: #0f2423; }
body.k-dark td.dataTables_empty { background: transparent !important; }
body.k-dark .dt-buttons .btn, body.k-dark .dt-buttons a, body.k-dark .dt-buttons button, body.k-dark .dt-buttons .dt-button { background: #0d2221 !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }
body.k-dark .btn-default { background: #0d2221; color: var(--k-ink); border-color: var(--k-line); }
body.k-dark .pagination > li > a, body.k-dark .pagination > li > span { background: transparent; color: var(--k-ink); border-color: var(--k-line); }
body.k-dark .dropdown-menu { background: var(--k-surface); }
body.k-dark .dropdown-menu > li > a { color: var(--k-ink); }
body.k-dark .modal-header, body.k-dark .modal-footer, body.k-dark .box-header { border-color: var(--k-line-soft); }
body.k-dark .close { color: var(--k-ink); text-shadow: none; }
body.k-dark label, body.k-dark .control-label, body.k-dark h1, body.k-dark h2, body.k-dark h3, body.k-dark h4, body.k-dark .box-title, body.k-dark .content-header > h1 { color: var(--k-ink); }
body.k-dark #side-bar a, body.k-dark #side-bar span, body.k-dark #side-bar .side-bar-heading { color: var(--k-ink) !important; }
body.k-dark #side-bar a:hover { background: var(--k-teal-50) !important; }
body.k-dark .tw-grid > div.tw-bg-white.tw-rounded-xl:has(p.tw-font-mono)::after { border-color: var(--k-line); }
body.k-dark .tw-text-primary-800, body.k-dark .tw-text-primary-700 { color: var(--k-teal-800); }
body.k-dark .highcharts-background { fill: transparent !important; }
body.k-dark .highcharts-container text, body.k-dark .highcharts-axis-labels text, body.k-dark .highcharts-legend-item text { fill: var(--k-muted) !important; color: var(--k-muted) !important; }
body.k-dark .highcharts-grid-line { stroke: var(--k-line) !important; }
body.k-dark .alert, body.k-dark .callout { background: var(--k-teal-50) !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }
body.k-dark .main-footer, body.k-dark footer { color: var(--k-muted); border-color: var(--k-line); }
body.k-dark #kai-panel, body.k-dark #kai-msgs { background: var(--k-paper); }
body.k-dark .kai-m.bot { background: var(--k-surface); color: var(--k-ink); border-color: var(--k-line); }
body.k-dark #kai-form { background: var(--k-surface); border-color: var(--k-line); }
body.k-dark #kai-form #kai-in { background: #0d2221 !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }

/* ---- Modo oscuro: correcciones tras capturas ---------------------------------------------- */
html:has(body.k-dark) { background-color: #0b1b1a !important; }
/* Fondos que usan teal-800 como color sólido (en oscuro esa variable es un tono claro para texto) */
body.k-dark .tw-bg-primary-800, body.k-dark [class*="tw-bg-primary-800"], body.k-dark .bg-purple, body.k-dark .bg-purple-active { background-color: #0d4a45 !important; color: #fff !important; }
body.k-dark .hover\:tw-bg-primary-700:hover, body.k-dark [class*="hover:tw-bg-primary-700"]:hover { background-color: #148379 !important; }
body.k-dark .btn-primary:hover, body.k-dark .btn-primary:focus, body.k-dark .btn-primary:active,
body.k-dark .btn-info:hover, body.k-dark .btn-info:focus { background: #148379; border-color: #148379; color: #fff; }
body.k-dark .tw-dw-btn.bg-purple, body.k-dark .tw-bg-primary-800 svg { color: #fff; }
body.k-dark .main-header, body.k-dark header { color: #fff; }

/* ---- Ronda 4: tablas, pestañas y filas grises ----------------------------------------------- */
/* "Mostrar N entradas" en su propia línea: los botones de exportar ya no pueden taparlo */
.dataTables_wrapper .dataTables_length { display: block !important; float: none !important; margin: 0 0 10px !important; }
.dataTables_wrapper .dataTables_length label { white-space: nowrap; }

/* Oscuro: filas y pies con clase bg-gray de AdminLTE (salían grises claros ilegibles) */
body.k-dark .bg-gray, body.k-dark .bg-gray-active, body.k-dark .bg-gray-light, body.k-dark .bg-light-gray,
body.k-dark .table > tbody > tr.bg-gray > td, body.k-dark .table > tfoot > tr.bg-gray > td, body.k-dark tfoot td, body.k-dark tfoot th,
body.k-dark .dataTables_scrollFoot, body.k-dark .dataTables_scrollFootInner, body.k-dark .dataTables_scrollFootInner table {
    background-color: #0f2423 !important; color: var(--k-ink) !important; border-color: var(--k-line-soft) !important;
}
body.k-dark .table > tbody > tr > td.bg-gray, body.k-dark .table > tbody > tr > th.bg-gray { background-color: #0f2423 !important; }

/* Oscuro: pestañas */
body.k-dark .nav-tabs-custom { background: var(--k-surface); }
body.k-dark .nav-tabs-custom > .nav-tabs, body.k-dark .nav-tabs { background: transparent; border-color: var(--k-line); }
body.k-dark .nav-tabs-custom > .nav-tabs > li > a, body.k-dark .nav-tabs > li > a { color: var(--k-muted); background: transparent; }
body.k-dark .nav-tabs-custom > .nav-tabs > li > a:hover, body.k-dark .nav-tabs > li > a:hover { background: var(--k-teal-50); color: var(--k-ink); }
body.k-dark .nav-tabs-custom > .nav-tabs > li.active > a, body.k-dark .nav-tabs-custom > .nav-tabs > li.active > a:hover,
body.k-dark .nav-tabs > li.active > a, body.k-dark .nav-tabs > li.active > a:hover, body.k-dark .nav-tabs > li.active > a:focus {
    background: var(--k-surface) !important; color: var(--k-teal-800) !important; border-color: var(--k-line); border-bottom-color: var(--k-surface);
}
body.k-dark .nav-pills > li > a { color: var(--k-muted); }
body.k-dark .nav-pills > li.active > a { background: var(--k-teal-700); color: #fff; }

/* Oscuro: botones de acción masiva y etiquetas pequeñas */
body.k-dark .btn-outline, body.k-dark .btn-xs, body.k-dark .btn-sm { color: var(--k-ink); }

/* ---- POS: sustituir el índigo (#646EE4) por la paleta Kaja -------------------------------------- */
[class*="tw-bg-[#646EE4]"], [class*="bg-[#646EE4]"] { background-color: var(--k-teal-700) !important; color: #fff !important; }
[class*="hover:tw-bg-[#414aac]"]:hover { background-color: #0d4a45 !important; }
[class*="tw-text-[#646EE4]"] { color: var(--k-teal-700) !important; }
[class*="tw-border-[#646EE4]"] { border-color: var(--k-teal-700) !important; }
#recent-transactions { box-shadow: 0 8px 18px -8px rgba(15, 118, 110, .65); }
body.k-dark [class*="tw-bg-[#646EE4]"] { background-color: #148379 !important; }
body.k-dark #total_payable, body.k-dark .tw-text-green-900, body.k-dark .tw-text-green-800 { color: var(--k-amber) !important; }
body.k-dark .tw-text-green-900 { font-family: var(--k-mono); }
#total_payable { font-family: var(--k-mono); font-size: 28px; letter-spacing: -.02em; }

/* ==========================================================================
   Ronda 5: todas las tablas con la misma barra de herramientas
   DataTables mete "Mostrar", los botones y el buscador en columnas de Bootstrap
   (col-sm-1 / col-sm-8 / col-sm-3); la de 8% cortaba el texto "entradas".
   Se convierte esa fila en una barra flexible: Mostrar · Exportar ··· Buscar.
   ========================================================================== */
.dataTables_wrapper > .row.margin-bottom-20, .dataTables_wrapper > .row:first-child {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin: 0 0 14px !important; text-align: left !important;
}
.dataTables_wrapper > .row.margin-bottom-20::before, .dataTables_wrapper > .row.margin-bottom-20::after,
.dataTables_wrapper > .row:first-child::before, .dataTables_wrapper > .row:first-child::after { display: none !important; }
.dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"], .dataTables_wrapper > .row:first-child > [class*="col-"] {
    float: none !important; width: auto !important; padding: 0 !important; flex: 0 0 auto; position: static;
}
.dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8, .dataTables_wrapper > .row:first-child > .col-sm-8 { flex: 1 1 auto; min-width: 0; }
.dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3, .dataTables_wrapper > .row:first-child > .col-sm-3 { margin-left: auto; }
.dataTables_wrapper .dt-buttons { margin: 0 !important; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin: 0 !important; float: none !important; }
.dataTables_wrapper .dataTables_filter label { margin: 0; }
.dataTables_wrapper .dataTables_filter input { margin: 0 !important; width: 220px; }
.dataTables_wrapper .dataTables_length select { margin: 0 4px; }

/* Etiquetas de estado de pago/envío: texto blanco legible en ambos modos */
.label, .label.bg-aqua, .label.bg-light-green, .label.bg-yellow, .label.bg-red, .label.bg-green { color: #fff !important; letter-spacing: .01em; }
.label.bg-light-green, .label.bg-green { background-color: #1f9d6b !important; }
.label.bg-aqua { background-color: var(--k-sky) !important; }
.label.bg-red { background-color: var(--k-danger) !important; }
.label.bg-yellow { background-color: #d99a0b !important; color: #fff !important; }
.label.bg-orange, .label.bg-gray { color: #fff !important; }

/* Filas más compactas y alineadas en todas las tablas */
.table > tbody > tr > td { padding: 9px 12px; line-height: 1.35; }
.table > tbody > tr > td .btn, .table > tbody > tr > td .tw-dw-btn { white-space: nowrap; }
.table > thead > tr > th { position: relative; }
table.dataTable thead th, table.dataTable tbody td { vertical-align: middle; }
.dataTables_wrapper .dataTables_info { padding-top: 10px !important; }
.dataTables_wrapper > .row:last-child { margin-top: 10px; }

/* ==========================================================================
   Módulos (Contabilidad, HMS, CRM, Proyecto…): barra de navegación propia
   ========================================================================== */
nav.navbar-default { border-radius: 14px !important; border: 1px solid var(--k-line) !important; box-shadow: var(--k-shadow); }
.navbar-default .navbar-nav > li > a { color: var(--k-muted); font-weight: 600; border-radius: 8px; margin: 6px 1px; padding: 8px 12px; transition: background-color .15s, color .15s; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover { background: var(--k-teal-50); color: var(--k-teal-800); }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: var(--k-teal-100); color: var(--k-teal-800); }
.navbar-default .navbar-brand { color: var(--k-teal-800); font-family: var(--k-display); font-weight: 700; }
.navbar-default .navbar-brand:hover { color: var(--k-teal-700); }

body.k-dark nav.navbar-default, body.k-dark .navbar-default, body.k-dark [class*="tw-bg-white"] { background-color: var(--k-surface) !important; border-color: var(--k-line) !important; }
body.k-dark .navbar-default .navbar-nav > li > a { color: var(--k-muted); }
body.k-dark .navbar-default .navbar-nav > li > a:hover, body.k-dark .navbar-default .navbar-nav > .open > a { background: var(--k-teal-50); color: var(--k-ink); }
body.k-dark .navbar-default .navbar-nav > .active > a, body.k-dark .navbar-default .navbar-nav > .active > a:hover { background: var(--k-teal-100); color: var(--k-ink); }
body.k-dark .navbar-default .navbar-brand { color: var(--k-ink); }
body.k-dark .navbar-default .navbar-toggle { border-color: var(--k-line); }
body.k-dark .navbar-default .navbar-toggle .icon-bar { background: var(--k-ink); }
body.k-dark .navbar-default .navbar-collapse { border-color: var(--k-line); }
body.k-dark .nav > li > a:hover, body.k-dark .nav > li > a:focus { background: var(--k-teal-50); }