/* ==========================================================================
   TEMAS DE ORDERFIX
   Sin atributos en <html> = diseño ORIGINAL (este archivo no cambia nada).
   html[data-tema="oscuro"]  -> modo oscuro
   html[data-acento="..."]   -> color principal (verde, morado, rojo, naranja)
   ========================================================================== */

/* ---------- 1. COLORES PRINCIPALES ---------- */
html[data-acento="verde"]  { --acc:#16a34a; --acc-d:#15803d; --acc-rgb:22,163,74;  --c-soft:#ecfdf3; --c-soft2:#d9f8e5; --c-acc-bd:#a7e8c3; --nav1:#08241a; --nav2:#0e5a3b; --acc-l:#86efac; }
html[data-acento="morado"] { --acc:#7c3aed; --acc-d:#6d28d9; --acc-rgb:124,58,237; --c-soft:#f3effe; --c-soft2:#e9e1fd; --c-acc-bd:#cdbdfa; --nav1:#170f33; --nav2:#3b1f7a; --acc-l:#c4b5fd; }
html[data-acento="rojo"]   { --acc:#e11d48; --acc-d:#be123c; --acc-rgb:225,29,72;  --c-soft:#fff1f3; --c-soft2:#ffe0e6; --c-acc-bd:#fbb6c4; --nav1:#2a0d14; --nav2:#6b1730; --acc-l:#fda4af; }
html[data-acento="naranja"]{ --acc:#ea580c; --acc-d:#c2410c; --acc-rgb:234,88,12;  --c-soft:#fff4ea; --c-soft2:#ffe6d0; --c-acc-bd:#fdc79d; --nav1:#2a1405; --nav2:#7a3a0a; --acc-l:#fdba74; }

/* ---------- 2. COLORES DEL MODO OSCURO ---------- */
html[data-tema="oscuro"] {
    color-scheme: dark;
    --c-bg:#0f172a; --c-card:#1e293b; --c-bg2:#18243a; --c-bg3:#26354c;
    --c-bd:#2f3d54; --c-tx:#e8eef7; --c-mut:#a3b3c9; --c-mut2:#6f8199;
    --c-tot:#050b16;
    --c-soft:rgba(var(--acc-rgb,37,99,235),.20);
    --c-soft2:rgba(var(--acc-rgb,37,99,235),.32);
    --c-acc-bd:rgba(var(--acc-rgb,37,99,235),.50);
}

/* ---------- 3. MENÚ Y BARRA SUPERIOR CON EL COLOR ELEGIDO ---------- */
html[data-acento] .main-sidebar { background: linear-gradient(180deg, var(--nav1) 0%, var(--nav1) 55%, var(--nav2) 100%) !important; }
html[data-acento] .brand-link,
html[data-acento] .main-header.navbar { background: var(--nav1) !important; }
html[data-acento] .menu-perfil-box { background-color: var(--nav1) !important; }
html[data-acento] .nav-sidebar .nav-item .nav-link.active,
html[data-acento] .nav-sidebar .nav-item .nav-link:hover,
html[data-acento] [class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link,
html[data-acento] [class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--acc-rgb),.75) 0%, rgba(var(--acc-rgb),.45) 50%, rgba(var(--acc-rgb),.25) 100%) !important;
    border-color: rgba(var(--acc-rgb),.65) !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.2), 0 4px 15px rgba(var(--acc-rgb),.3) !important;
}
html[data-acento] .nav-sidebar .nav-link:hover .nav-icon,
html[data-acento] .nav-sidebar .nav-link.active .nav-icon,
html[data-acento] [class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link .nav-icon,
html[data-acento] [class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--acc-l) !important; }
html[data-acento] .nav-sidebar .nav-treeview .nav-link:hover .nav-icon,
html[data-acento] .nav-sidebar .nav-treeview .nav-link.active .nav-icon,
html[data-acento] .nav-sidebar .nav-treeview .nav-link:hover i,
html[data-acento] .nav-sidebar .nav-treeview .nav-link.active i { color: var(--acc-l) !important; }
html[data-acento] .btn-cabezote { background-color: rgba(var(--acc-rgb),.18) !important; border-color: rgba(var(--acc-rgb),.7) !important; }
html[data-acento] .btn-cabezote:hover, html[data-acento] .btn-cabezote.activo { background-color: var(--acc-d) !important; border-color: var(--acc-l) !important; box-shadow: 0 0 10px rgba(var(--acc-rgb),.35); }
html[data-acento] .btn-cabezote .icn-btn { color: var(--acc-l); }
html[data-acento] .btn-cabezote:hover .icn-btn, html[data-acento] .btn-cabezote.activo .icn-btn { color: #fff; }
html[data-acento] .user-image-nav { border-color: var(--acc); }
html[data-acento] .badge-notif { border-color: var(--nav1); }
html[data-acento] .balance-card { background: linear-gradient(135deg, var(--nav1) 0%, var(--nav2) 55%, var(--acc-d) 100%) !important; }

/* ---------- 4. COLOR PRINCIPAL EN BOTONES Y ENLACES COMUNES ---------- */
html[data-acento] .btn-primary { background-color: var(--acc) !important; border-color: var(--acc-d) !important; }
html[data-acento] .btn-primary:hover, html[data-acento] .btn-primary:focus { background-color: var(--acc-d) !important; }
html[data-acento] .btn-outline-primary { color: var(--acc) !important; border-color: var(--acc) !important; }
html[data-acento] .btn-outline-primary:hover { background-color: var(--acc) !important; color: #fff !important; }
html[data-acento] .bg-primary, html[data-acento] .badge-primary { background-color: var(--acc) !important; }
html[data-acento] .text-primary { color: var(--acc) !important; }
html[data-acento] .page-item.active .page-link { background-color: var(--acc); border-color: var(--acc); }
html[data-acento] .page-link { color: var(--acc); }
html[data-acento] .dashboard-welcome-title span,
html[data-acento] .cardBodyCajas a,
html[data-acento] .dashboard-footer a { color: var(--acc) !important; }
html[data-acento] .dashboard-filter:hover, html[data-acento] .dashboard-badge:hover { border-color: var(--acc); color: var(--acc); }
html[data-acento] .dashboard-title { color: var(--acc-d) !important; }
html[data-acento] .dashboard-title i { background: var(--c-soft) !important; }
html[data-acento] .form-control:focus,
html[data-acento] .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--acc) !important; box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.15) !important; }
html[data-acento] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--acc) !important; }

/* ---------- 5. MODO OSCURO: BASE ---------- */
html[data-tema="oscuro"] body,
html[data-tema="oscuro"] .content-wrapper,
html[data-tema="oscuro"] .wrapper { background-color: var(--c-bg) !important; color: var(--c-tx); }
html[data-tema="oscuro"] .main-footer { background: var(--c-card); border-color: var(--c-bd); color: var(--c-mut); }
html[data-tema="oscuro"] .content-header h1, html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3,
html[data-tema="oscuro"] h4, html[data-tema="oscuro"] h5, html[data-tema="oscuro"] h6, html[data-tema="oscuro"] label,
html[data-tema="oscuro"] .text-dark, html[data-tema="oscuro"] .text-black, html[data-tema="oscuro"] .card-title { color: var(--c-tx) !important; }
html[data-tema="oscuro"] .text-muted, html[data-tema="oscuro"] small { color: var(--c-mut) !important; }
html[data-tema="oscuro"] hr { border-color: var(--c-bd); }

/* Tarjetas, cajas y ventanas */
html[data-tema="oscuro"] .card,
html[data-tema="oscuro"] .info-box,
html[data-tema="oscuro"] .small-box,
html[data-tema="oscuro"] .modal-content,
html[data-tema="oscuro"] .list-group-item,
html[data-tema="oscuro"] .bg-white,
html[data-tema="oscuro"] .dropdown-menu:not(.menu-perfil-box) { background-color: var(--c-card) !important; border-color: var(--c-bd) !important; color: var(--c-tx); }
html[data-tema="oscuro"] .card-header, html[data-tema="oscuro"] .card-footer,
html[data-tema="oscuro"] .modal-header, html[data-tema="oscuro"] .modal-footer { background-color: var(--c-card) !important; border-color: var(--c-bd) !important; color: var(--c-tx); }
html[data-tema="oscuro"] .bg-light { background-color: var(--c-bg2) !important; color: var(--c-tx); }
html[data-tema="oscuro"] .border, html[data-tema="oscuro"] .border-bottom, html[data-tema="oscuro"] .border-top { border-color: var(--c-bd) !important; }
html[data-tema="oscuro"] .close, html[data-tema="oscuro"] .close:hover { color: var(--c-tx); text-shadow: none; }
html[data-tema="oscuro"] .dropdown-item { color: var(--c-tx); }
html[data-tema="oscuro"] .dropdown-item:hover, html[data-tema="oscuro"] .dropdown-item:focus { background: var(--c-bg3); color: var(--c-tx); }
html[data-tema="oscuro"] .dropdown-divider { border-color: var(--c-bd); }

/* Formularios */
html[data-tema="oscuro"] .form-control, html[data-tema="oscuro"] .custom-select,
html[data-tema="oscuro"] .input-group-text, html[data-tema="oscuro"] textarea, html[data-tema="oscuro"] select {
    background-color: var(--c-bg2); border-color: var(--c-bd); color: var(--c-tx);
}
html[data-tema="oscuro"] .form-control:disabled, html[data-tema="oscuro"] .form-control[readonly] { background-color: var(--c-bg3); color: var(--c-mut); }
html[data-tema="oscuro"] .form-control::placeholder { color: var(--c-mut2); }
html[data-tema="oscuro"] .select2-container--default .select2-selection--single,
html[data-tema="oscuro"] .select2-container--default .select2-selection--multiple,
html[data-tema="oscuro"] .select2-dropdown,
html[data-tema="oscuro"] .select2-search--dropdown .select2-search__field { background-color: var(--c-bg2) !important; border-color: var(--c-bd) !important; color: var(--c-tx) !important; }
html[data-tema="oscuro"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--c-tx) !important; }
html[data-tema="oscuro"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--c-bg3) !important; }

/* Tablas y DataTables */
html[data-tema="oscuro"] .table, html[data-tema="oscuro"] table.dataTable { color: var(--c-tx); background-color: transparent; }
html[data-tema="oscuro"] .table th, html[data-tema="oscuro"] .table td,
html[data-tema="oscuro"] table.dataTable th, html[data-tema="oscuro"] table.dataTable td { border-color: var(--c-bd) !important; }
html[data-tema="oscuro"] .table thead th, html[data-tema="oscuro"] table.dataTable thead th, html[data-tema="oscuro"] table.dataTable thead td { background-color: var(--c-bg2) !important; color: var(--c-mut) !important; border-color: var(--c-bd) !important; }
html[data-tema="oscuro"] table.dataTable tbody tr, html[data-tema="oscuro"] .table tbody tr { background-color: transparent !important; }
html[data-tema="oscuro"] .table-striped tbody tr:nth-of-type(odd), html[data-tema="oscuro"] table.dataTable.stripe tbody tr.odd { background-color: rgba(255,255,255,.025) !important; }
html[data-tema="oscuro"] .table-hover tbody tr:hover, html[data-tema="oscuro"] table.dataTable tbody tr:hover { background-color: rgba(255,255,255,.05) !important; }
html[data-tema="oscuro"] .dataTables_wrapper .dataTables_info, html[data-tema="oscuro"] .dataTables_wrapper .dataTables_length,
html[data-tema="oscuro"] .dataTables_wrapper .dataTables_filter, html[data-tema="oscuro"] .dataTables_wrapper .dataTables_processing { color: var(--c-mut) !important; background: var(--c-card); }
html[data-tema="oscuro"] .page-link { background-color: var(--c-bg2); border-color: var(--c-bd); }
html[data-tema="oscuro"] .page-item.disabled .page-link { background-color: var(--c-bg2); border-color: var(--c-bd); color: var(--c-mut2); }
html[data-tema="oscuro"] .tablaScroll { background-color: var(--c-bg2); }

/* Avisos (SweetAlert) y selector de fechas */
html[data-tema="oscuro"] .swal2-popup { background: var(--c-card); color: var(--c-tx); }
html[data-tema="oscuro"] .swal2-title, html[data-tema="oscuro"] .swal2-html-container, html[data-tema="oscuro"] .swal2-content { color: var(--c-tx) !important; }
html[data-tema="oscuro"] .daterangepicker { background: var(--c-card); border-color: var(--c-bd); color: var(--c-tx); }
html[data-tema="oscuro"] .daterangepicker .calendar-table { background: var(--c-card); border-color: var(--c-bd); }
html[data-tema="oscuro"] .daterangepicker td.off, html[data-tema="oscuro"] .daterangepicker td.off.in-range { background: var(--c-card); color: var(--c-mut2); }
html[data-tema="oscuro"] .daterangepicker td.in-range { background: var(--c-soft); color: var(--c-tx); }
html[data-tema="oscuro"] .daterangepicker td.available:hover, html[data-tema="oscuro"] .daterangepicker th.available:hover { background: var(--c-bg3); }
html[data-tema="oscuro"] .daterangepicker .ranges li { background: var(--c-bg2); color: var(--c-tx); border-color: var(--c-bd); }
html[data-tema="oscuro"] .daterangepicker .drp-buttons { border-color: var(--c-bd); }

/* ---------- 6. MODO OSCURO: INICIO (TARJETAS DEL PANEL) ---------- */
html[data-tema="oscuro"] .cardCajas, html[data-tema="oscuro"] .dashboard-card,
html[data-tema="oscuro"] .icono-contenedor { background: var(--c-card) !important; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
html[data-tema="oscuro"] .dashboard-header { background: var(--c-card) !important; }
html[data-tema="oscuro"] .dashboard-welcome-title { color: var(--c-tx) !important; }
html[data-tema="oscuro"] .dashboard-welcome-subtitle, html[data-tema="oscuro"] .data p, html[data-tema="oscuro"] .support-subtitle { color: var(--c-mut) !important; }
html[data-tema="oscuro"] .data h5, html[data-tema="oscuro"] .order-item strong, html[data-tema="oscuro"] .icono-texto { color: var(--c-tx) !important; }
html[data-tema="oscuro"] .order-name { color: var(--c-mut) !important; }
html[data-tema="oscuro"] .dashboard-title { color: var(--c-tx); }
html[data-tema="oscuro"] .dashboard-title i { background: var(--c-soft) !important; }
html[data-tema="oscuro"] .dashboard-footer { border-color: var(--c-bd); }
html[data-tema="oscuro"] .dashboard-filter, html[data-tema="oscuro"] .dashboard-badge { background: var(--c-bg2); border-color: var(--c-bd); color: var(--c-mut); }
html[data-tema="oscuro"] .cardBodyCajas .progress { background: var(--c-bg3); }
html[data-tema="oscuro"] .info-box.custom-kpi { background: var(--c-card) !important; border-color: var(--c-bd) !important; }
html[data-tema="oscuro"] .info-box.custom-kpi h6 { color: var(--c-tx) !important; }
html[data-tema="oscuro"] .support-title { background: var(--c-soft); }
html[data-tema="oscuro"] .support-title h2, html[data-tema="oscuro"] .support-title i { color: var(--c-tx); }
html[data-tema="oscuro"] .secuencia-container { background: var(--c-card); border-color: var(--c-bd); }
html[data-tema="oscuro"] .secuencia-valores { color: var(--c-tx); }

/* ---------- 7. BOTÓN Y PANEL "APARIENCIA" (barra superior) ---------- */
.tema-item > a.nav-link { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.tema-item > a.nav-link i { color:#A0AEC0; transition:color .2s; }
.tema-item > a.nav-link:hover i, .tema-item.show > a.nav-link i { color:#fff; }
.tema-panel { min-width:250px !important; padding:14px !important; }
.tema-panel h6 { margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#93a4bd !important; }
.tema-seg { display:flex; background:rgba(255,255,255,.07); border-radius:10px; padding:3px; margin-bottom:14px; }
.tema-seg button { flex:1; border:0; background:transparent; color:#cbd5e1; font-size:12px; font-weight:800; padding:7px 0; border-radius:8px; cursor:pointer; }
.tema-seg button.on { background:var(--acc,#2563eb); color:#fff; }
.tema-colores { display:flex; gap:10px; margin-bottom:12px; }
.tema-colores button { width:28px; height:28px; border-radius:50%; border:3px solid transparent; box-shadow:0 0 0 1px rgba(255,255,255,.25); cursor:pointer; padding:0; }
.tema-colores button.on { box-shadow:0 0 0 2px #fff; }
.tema-reset { display:block; width:100%; border:1px solid rgba(255,255,255,.18); background:transparent; color:#cbd5e1; font-size:12px; font-weight:700; padding:7px; border-radius:8px; cursor:pointer; }
.tema-reset:hover { background:rgba(255,255,255,.08); color:#fff; }

/* ---------- 8. MODO OSCURO: TABLAS Y CLASES PROPIAS DE plantilla.css ---------- */
html[data-tema="oscuro"] table.dataTable thead th { background-color: var(--c-bg2) !important; color: var(--c-mut) !important; }
html[data-tema="oscuro"] table.dataTable tbody tr { background-color: var(--c-card) !important; box-shadow: 0 2px 6px rgba(0,0,0,.30) !important; }
html[data-tema="oscuro"] table.dataTable tbody tr:hover { background-color: var(--c-bg3) !important; box-shadow: 0 4px 12px rgba(0,0,0,.40) !important; }
html[data-tema="oscuro"] table.dataTable tbody td { border-color: var(--c-bd) !important; color: var(--c-tx) !important; }
html[data-tema="oscuro"] table.dataTable tbody tr:hover td { color: #fff !important; }
html[data-tema="oscuro"] table.dataTable tbody tr:hover td:first-child, html[data-tema="oscuro"] table.dataTable tbody tr:hover td.dt-primera { border-left-color: var(--acc,#2563eb) !important; }
html[data-tema="oscuro"] table.dataTable tbody tr:hover td:last-child, html[data-tema="oscuro"] table.dataTable tbody tr:hover td.dt-ultima { border-right-color: var(--acc,#2563eb) !important; }
html[data-tema="oscuro"] table tbody td ul.dtr-details li { border-color: var(--c-bd) !important; }
html[data-tema="oscuro"] table tbody td ul.dtr-details li span.dtr-title { color: var(--c-tx) !important; }
html[data-tema="oscuro"] table tbody td ul.dtr-details li span.dtr-data { color: var(--c-mut) !important; }
html[data-tema="oscuro"] .dataTables_filter input, html[data-tema="oscuro"] .dataTables_length select { background: var(--c-bg2); border-color: var(--c-bd) !important; color: var(--c-tx); }
html[data-tema="oscuro"] .dataTables_paginate .paginate_button { color: var(--c-mut) !important; }
html[data-tema="oscuro"] .dataTables_paginate .paginate_button.current { background: var(--acc,#2563eb) !important; color: #fff !important; }
html[data-tema="oscuro"] .buttons-container-box, html[data-tema="oscuro"] .tb-panel, html[data-tema="oscuro"] .cj-barra { background: var(--c-bg2); border-color: var(--c-bd); }
html[data-tema="oscuro"] .nav-btn-card, html[data-tema="oscuro"] .tb-exportar { background: var(--c-bg2); border-color: var(--c-bd); color: var(--c-tx); }
html[data-tema="oscuro"] .nav-btn-card:hover { background: var(--c-soft); color: var(--c-tx); border-color: var(--c-acc-bd); }
html[data-tema="oscuro"] .tb-exportar-etiqueta { color: var(--c-mut); }

/* Formularios por secciones (configuración, ingresos...) */
html[data-tema="oscuro"] .cf-sec, html[data-tema="oscuro"] .ci-seccion-cab { border-color: var(--c-bd); }
html[data-tema="oscuro"] .ci-seccion, html[data-tema="oscuro"] .cf-logo-prev, html[data-tema="oscuro"] .cf-drop { background: var(--c-card); border-color: var(--c-bd); }
html[data-tema="oscuro"] .ci-seccion-cab { background: var(--c-bg2); }
html[data-tema="oscuro"] .cf-sec-tit { color: var(--c-tx); }
html[data-tema="oscuro"] .cf-sec-sub, html[data-tema="oscuro"] .cf-drop .cf-drop-nombre { color: var(--c-mut); }
html[data-tema="oscuro"] .cf-sec label.cf-label, html[data-tema="oscuro"] .cf-check { color: var(--c-mut); }
html[data-tema="oscuro"] .cf-sec .cf-campo, html[data-tema="oscuro"] .ci-seccion .ci-campo { background: var(--c-bg2); border-color: var(--c-bd); color: var(--c-tx); }
html[data-tema="oscuro"] .cf-sec .cf-solo-lectura, html[data-tema="oscuro"] .ci-seccion .ci-solo-lectura { background: var(--c-bg3); }
html[data-tema="oscuro"] .cf-sec .cf-icono, html[data-tema="oscuro"] .ci-seccion .ci-icono { background: var(--c-bg2); border-color: var(--c-bd); }
html[data-tema="oscuro"] .cf-sec .select2-container--default .select2-selection--single, html[data-tema="oscuro"] .ci-seccion .select2-container--default .select2-selection--single { background: var(--c-bg2) !important; border-color: var(--c-bd) !important; }
html[data-tema="oscuro"] .cf-sec .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-tema="oscuro"] .ci-seccion .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--c-tx) !important; }
html[data-tema="oscuro"] .cf-aviso { background: rgba(250,204,21,.14); color: #fde68a; }

/* Ventanas (marcas, modelos, etc.) */
html[data-tema="oscuro"] .mo-modal .modal-body label { color: var(--c-mut); }
html[data-tema="oscuro"] .mo-modal .input-group-text { background: var(--c-bg3); border-color: var(--c-bd); color: var(--c-mut); }
html[data-tema="oscuro"] .mo-modal .form-control { background: var(--c-bg2); border-color: var(--c-bd); color: var(--c-tx); }
html[data-tema="oscuro"] .mo-modal .modal-footer { background: var(--c-bg2); border-color: var(--c-bd); }
html[data-tema="oscuro"] .mo-modal .mo-btn-cancelar { background: var(--c-bg2); border-color: var(--c-bd); color: var(--c-mut); }
html[data-tema="oscuro"] .mo-modal .mo-btn-cancelar:hover { background: var(--c-bg3); }

/* Caja */
html[data-tema="oscuro"] .cj-tabs { border-color: var(--c-bd); }
html[data-tema="oscuro"] .cj-tabs .nav-link, html[data-tema="oscuro"] .cj-etq, html[data-tema="oscuro"] .cj-cargando,
html[data-tema="oscuro"] .cj-den-sub, html[data-tema="oscuro"] .cj-resultado span, html[data-tema="oscuro"] .cj-lista-efectivo span, html[data-tema="oscuro"] .cj-tabla-simple thead th { color: var(--c-mut); }
html[data-tema="oscuro"] .cj-seccion, html[data-tema="oscuro"] .cj-grupo-titulo { color: var(--c-mut); border-color: var(--c-bd); }
html[data-tema="oscuro"] .cj-den-valor, html[data-tema="oscuro"] .cj-total-contado b, html[data-tema="oscuro"] .cj-vacio h5 { color: var(--c-tx); }
html[data-tema="oscuro"] .cj-total-contado, html[data-tema="oscuro"] .cj-resultado > div, html[data-tema="oscuro"] .cj-lista-efectivo > div, html[data-tema="oscuro"] .cj-tabla-simple thead th { background: var(--c-bg2); border-color: var(--c-bd); }
html[data-tema="oscuro"] .cj-vacio-icono { background: var(--c-soft); }
html[data-tema="oscuro"] .cj-aviso { background: var(--c-soft); border-color: var(--c-acc-bd); color: var(--c-tx); }

/* Contabilidad */
html[data-tema="oscuro"] .ct-kpi { background: var(--c-bg2); border-color: var(--c-bd); }
html[data-tema="oscuro"] .ct-kpi span, html[data-tema="oscuro"] .ct-kpi small, html[data-tema="oscuro"] .ct-bloque-t { color: var(--c-mut); }
html[data-tema="oscuro"] .ct-kpi b { color: var(--c-tx); }
html[data-tema="oscuro"] .ct-linea { border-color: var(--c-bd); }
html[data-tema="oscuro"] .ct-total { background: var(--c-soft); color: var(--c-tx); }

/* ---------- 9. COLOR PRINCIPAL EN CLASES PROPIAS DE plantilla.css ---------- */
html[data-acento] .cf-wrapper .btn-primary, html[data-acento] .ci-wrapper .btn-primary,
html[data-acento] .cf-wrapper .btn-crear-orden, html[data-acento] .cf-wrapper .btn-agregar-modulo,
html[data-acento] .tb-btn-carga, html[data-acento] .mo-modal .mo-btn-guardar, html[data-acento] .cf-num, html[data-acento] .ci-num { background: var(--acc) !important; border-color: var(--acc) !important; }
html[data-acento] .cf-wrapper .btn-primary:hover, html[data-acento] .ci-wrapper .btn-primary:hover,
html[data-acento] .cf-wrapper .btn-crear-orden:hover, html[data-acento] .cf-wrapper .btn-agregar-modulo:hover,
html[data-acento] .tb-btn-carga:hover, html[data-acento] .mo-modal .mo-btn-guardar:hover { background: var(--acc-d) !important; }
html[data-acento] .cj-tabs .nav-link:hover, html[data-acento] .cj-tabs .nav-link.active { color: var(--acc); }
html[data-acento] .cj-tile-esperado { background: linear-gradient(135deg, var(--acc), var(--acc-d)); }
html[data-acento] .ct-total-final { background: var(--acc); }
html[data-acento] .nav-btn-card.active, html[data-acento] .btn-primary-custom { background-color: var(--acc-d); border-color: var(--acc-d); }
html[data-acento] .cf-sec .cf-icono, html[data-acento] .ci-seccion .ci-icono { color: var(--acc); }

/* Cotizaciones: botones de acción en modo oscuro */
html[data-tema="oscuro"] .cot-ib.wa { background: rgba(22,163,74,.16) !important; border-color: rgba(22,163,74,.45) !important; color: #4ade80; }
html[data-tema="oscuro"] .cot-ib.ok { color: #7dd3fc; border-color: rgba(125,211,252,.4); }

/* ==========================================================================
   ETAPA 2
   ========================================================================== */

/* Colores de texto con el color principal / títulos (según tema) */
html[data-acento] { --acc-t: var(--acc); --c-head: var(--acc-d); }
html[data-tema="oscuro"] { --acc-t: #7fb0ff; --c-head: #bcd2ff; }
html[data-tema="oscuro"][data-acento] { --acc-t: var(--acc-l); --c-head: var(--acc-l); }

/* Órdenes: títulos de las tarjetas que quedaban oscuros sobre fondo oscuro */
html[data-tema="oscuro"] .box-entregados-sr, html[data-tema="oscuro"] .box-abandonado { --kpi-text-title: #cbd5e1; }
html[data-tema="oscuro"] .box-entregados-sr .info-box-icon, html[data-tema="oscuro"] .box-abandonado .info-box-icon { background-color: var(--c-bg3) !important; color: #cbd5e1 !important; }
html[data-tema="oscuro"] .info-box.custom-kpi .info-box-text, html[data-tema="oscuro"] .info-box.custom-kpi .info-box-number { color: var(--c-tx); }

/* Textos y botones comunes de Bootstrap */
html[data-tema="oscuro"] .text-secondary, html[data-tema="oscuro"] .text-body, html[data-tema="oscuro"] .text-gray-dark { color: var(--c-mut) !important; }
html[data-tema="oscuro"] .btn-light, html[data-tema="oscuro"] .btn-default, html[data-tema="oscuro"] .btn-white { background-color: var(--c-bg2); border-color: var(--c-bd); color: var(--c-tx); }
html[data-tema="oscuro"] .btn-light:hover, html[data-tema="oscuro"] .btn-default:hover { background-color: var(--c-bg3); color: var(--c-tx); }
html[data-tema="oscuro"] .btn-outline-secondary { color: var(--c-mut); border-color: var(--c-bd); }
html[data-tema="oscuro"] .btn-outline-secondary:hover { background-color: var(--c-bg3); color: var(--c-tx); }
html[data-tema="oscuro"] .badge-light { background-color: var(--c-bg3); color: var(--c-tx); }
html[data-tema="oscuro"] .thead-light th, html[data-tema="oscuro"] .table-light, html[data-tema="oscuro"] .table-light td, html[data-tema="oscuro"] .table-light th { background-color: var(--c-bg2) !important; color: var(--c-mut) !important; border-color: var(--c-bd) !important; }
html[data-tema="oscuro"] .nav-tabs { border-color: var(--c-bd); }
html[data-tema="oscuro"] .nav-tabs .nav-link { color: var(--c-mut); }
html[data-tema="oscuro"] .nav-tabs .nav-link.active, html[data-tema="oscuro"] .nav-tabs .nav-item.show .nav-link { background-color: var(--c-card); border-color: var(--c-bd) var(--c-bd) var(--c-card); color: var(--c-tx); }
html[data-tema="oscuro"] .alert-light, html[data-tema="oscuro"] .callout { background-color: var(--c-bg2); border-color: var(--c-bd); color: var(--c-tx); }
html[data-tema="oscuro"] .select2-container--default .select2-selection__placeholder { color: var(--c-mut2) !important; }
html[data-tema="oscuro"] .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--c-bg2); }
html[data-tema="oscuro"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--c-bg3); border-color: var(--c-bd); color: var(--c-tx); }
html[data-tema="oscuro"] .custom-file-label, html[data-tema="oscuro"] .custom-file-label::after { background-color: var(--c-bg2); border-color: var(--c-bd); color: var(--c-mut); }
html[data-tema="oscuro"] .modal-body { color: var(--c-tx); }
html[data-tema="oscuro"] .toast, html[data-tema="oscuro"] .popover, html[data-tema="oscuro"] .tooltip-inner { background-color: var(--c-card); color: var(--c-tx); border-color: var(--c-bd); }
html[data-tema="oscuro"] .dtr-details, html[data-tema="oscuro"] .dtr-details li { color: var(--c-tx); }
html[data-tema="oscuro"] .text-black-50, html[data-tema="oscuro"] .text-dark-50 { color: var(--c-mut) !important; }
html[data-tema="oscuro"] .form-text, html[data-tema="oscuro"] .help-block { color: var(--c-mut); }
html[data-tema="oscuro"] .invalid-feedback { color: #fca5a5; }
html[data-tema="oscuro"] .progress { background-color: var(--c-bg3); }

/* Productos: cuadro "Total inversión" */
html[data-tema="oscuro"] .total-inversion-box { background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.40) !important; }

/* Campos de solo lectura / desactivados: texto legible en oscuro */
html[data-tema="oscuro"] .form-control[readonly]:not(.text-success):not(.text-danger):not(.text-warning),
html[data-tema="oscuro"] .form-control:disabled:not(.text-success):not(.text-danger):not(.text-warning) { color: #cbd5e1 !important; opacity: 1 !important; }
html[data-tema="oscuro"] .form-control[readonly]::placeholder { color: var(--c-mut2); opacity: 1; }