/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/


/* =========================
   VARIABLES GLOBALES
   ========================= */
:root {
    --cccrm-pagination-active-bg: #303030;
    --cccrm-pagination-active-text: #fff;
    --cccrm-pagination-inactive-text: gray;
    --cccrm-pagination-inactive-bg: #fff;
    --cccrm-pagination-inactive-border: #ccc;

    --cccrm-chip-blue: #4e7199;
    --cccrm-chip-blue-text: #0b5ed7;
    --cccrm-chip-blue-border: #b3d4ff;

    --cccrm-chip-blue2: #d3e4fa;
    --cccrm-chip-blue2-text: #0b5ed7;
    --cccrm-chip-blue2-border: #b3d4ff;

    --cccrm-chip-green: #dcffec;
    --cccrm-chip-green-text: #0f5132;
    --cccrm-chip-green-border: #94e5bd;

    --cccrm-chip-orange: #fff3e0;
    --cccrm-chip-orange-text: #e65100;
    --cccrm-chip-orange-border: #ffcc80;

    --cccrm-chip-purple: #f3e5f5;
    --cccrm-chip-purple-text: #6a1b9a;
    --cccrm-chip-purple-border: #ce93d8;

    --cccrm-chip-soft: #f7f9fc;
    --cccrm-chip-soft-text: #64748b;
    --cccrm-chip-soft-border: #e5e7eb;
}

[data-bs-theme="dark"] {
    --cccrm-pagination-active-bg: var(--vz-primary);
    --cccrm-pagination-active-text: #fff;
    --cccrm-pagination-inactive-text: var(--vz-gray-400);
    --cccrm-pagination-inactive-bg: var(--vz-card-bg-custom, #1a1d21);
    --cccrm-pagination-inactive-border: var(--vz-border-color);

    /* Dark Mode Chip Overrides (suavizados para fondo oscuro) */
    --cccrm-chip-blue: rgba(78, 113, 153, 0.2);
    --cccrm-chip-blue-text: #609aff;
    --cccrm-chip-blue-border: rgba(179, 212, 255, 0.2);

    --cccrm-chip-blue2: rgba(211, 228, 250, 0.15);
    --cccrm-chip-blue2-text: #609aff;
    --cccrm-chip-blue2-border: rgba(179, 212, 255, 0.2);

    --cccrm-chip-green: rgba(220, 255, 236, 0.15);
    --cccrm-chip-green-text: #20c997;
    --cccrm-chip-green-border: rgba(148, 229, 189, 0.2);

    --cccrm-chip-orange: rgba(255, 243, 224, 0.15);
    --cccrm-chip-orange-text: #ff9f43;
    --cccrm-chip-orange-border: rgba(255, 204, 128, 0.2);

    --cccrm-chip-purple: rgba(243, 229, 245, 0.15);
    --cccrm-chip-purple-text: #b16ce6;
    --cccrm-chip-purple-border: rgba(206, 147, 216, 0.2);

    --cccrm-chip-soft: rgba(247, 249, 252, 0.05);
    --cccrm-chip-soft-text: #a6b0cf;
    --cccrm-chip-soft-border: var(--vz-border-color);

    /* Sidebar Override for Dark Mode */
    .navbar-menu {
        background: var(--vz-card-bg-custom, #1a1d21);
        border-right-color: var(--vz-border-color);
    }

    /* Panel & Card Overrides */
    --cccrm-panel-bg: var(--vz-card-bg-custom, #1a1d21);
    --cccrm-panel-border: var(--vz-border-color);
    --cccrm-panel-shadow: none;

    --cccrm-chart-card-bg: var(--vz-card-bg-custom, #1a1d21);
    --cccrm-chart-card-border: var(--vz-border-color);

    --cccrm-filter-bar-bg: var(--vz-card-bg-custom, #1a1d21);
    --cccrm-filter-bar-border: var(--vz-border-color);

    --cccrm-widget-tile-bg: rgba(255, 255, 255, 0.05);
    /* Slight tint for dark mode */
    --cccrm-widget-tile-border: var(--vz-border-color);
    --cccrm-widget-icon-bg: rgba(255, 255, 255, 0.1);

    /* Barra de cabecera de tabla en listas (no usar gris claro tipo “light”) */
    --cccrm-table-head-bg: rgba(255, 255, 255, 0.06);
    --cccrm-table-row-odd: rgba(255, 255, 255, 0.02);
    --cccrm-table-row-hover: rgba(255, 255, 255, 0.05);

    /* Override Chip Colors for Dark Mode */
    --chip-bg: rgba(245, 247, 251, 0.1);
    --chip-bd: var(--vz-border-color);
    --chip-tx: var(--vz-gray-500);

    --chip-green-bg: rgba(234, 250, 241, 0.1);
    --chip-green-bd: rgba(191, 230, 207, 0.2);
    --chip-green-tx: #20c997;

    --chip-amber-bg: rgba(255, 248, 230, 0.1);
    --chip-amber-bd: rgba(255, 227, 163, 0.2);
    --chip-amber-tx: #ffc107;

    --chip-red-bg: rgba(255, 240, 240, 0.1);
    --chip-red-bd: rgba(245, 194, 199, 0.2);
    --chip-red-tx: #f06548;

    --chip-blue-bg: rgba(230, 242, 255, 0.1);
    --chip-blue-bd: rgba(179, 212, 255, 0.2);
    --chip-blue-tx: #609aff;
}


.btn-danger {
    background: #e42e2b;
}

.header-profile-initial {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #d9d9d9;
    color: #7c7c7c;
    font-size: 16px;
    font-weight: 500;
    border-radius: 50%;
    text-transform: uppercase;
}

.color-combobox-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.color-combobox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 8px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    font-size: smaller;
    outline-width: 0;
    text-align: center;
    cursor: pointer;
    min-width: 150px;
    padding-right: 20px;
}

.color-combobox:focus-visible {
    outline-width: 0;
}

.color-combobox-wrapper::after {
    content: "\2B9F";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: white;
}


.listjs-pagination li.active .page {
    color: var(--cccrm-pagination-active-text);
    background-color: var(--cccrm-pagination-active-bg);
    border-color: var(--cccrm-pagination-active-bg);
    border-radius: 20px;
}

/* Inactive state */
.listjs-pagination li:not(.active) .page {
    color: var(--cccrm-pagination-inactive-text);
    background-color: var(--cccrm-pagination-inactive-bg);
    border-color: var(--cccrm-pagination-inactive-border);
    border-radius: 20px;
}

/* Component Classes */
.panel {
    border: 1px solid var(--cccrm-panel-border);
    border-radius: 14px;
    background: var(--cccrm-panel-bg);
    box-shadow: var(--cccrm-panel-shadow);
    padding: 1rem 1rem 1.1rem 1rem;
    margin-bottom: 1rem;
}

.chart-card {
    border: 1px solid var(--cccrm-chart-card-border);
    border-radius: 12px;
    padding: 1rem;
    background: var(--cccrm-chart-card-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
    /* Consider var for shadow if needed */
}

/* Filter Bar */
.filter-bar {
    border: 1px solid var(--cccrm-filter-bar-border);
    background: var(--cccrm-filter-bar-bg);
    border-radius: 12px;
    padding: .6rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

.widget-tile {
    border: 1px solid var(--cccrm-widget-tile-border);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    background: var(--cccrm-widget-tile-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .03);
}

.widget-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cccrm-widget-icon-bg);
    border: 1px solid var(--cccrm-widget-tile-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    color: #0d6efd;
    font-size: 1.6rem;
}


/* Input Ghost */
.input-with-icon {
    position: relative;
}

.input-with-icon>i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vz-gray-500);
    font-size: 1.05rem;
    pointer-events: none;
    z-index: 5;
}

.form-control.input-ghost {
    height: 42px;
    padding-left: 2.25rem;
    border-radius: .55rem;
    border: 1px solid var(--vz-input-border-custom);;
    background: var(--vz-input-bg);
    color: var(--vz-body-color);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control.input-ghost:focus {
    border-color: #b3d4ff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .18);
}

/* Table Card Overrides */
.table-card .table-light {
    background-color: var(--cccrm-table-head-bg);
    color: var(--vz-heading-color);
}

.table-card .table-light th {
    background-color: var(--cccrm-table-head-bg);
    color: var(--vz-heading-color);
    border-bottom-color: var(--vz-border-color);
}

/* Contenedor de tabla con borde (catálogos simples). La referencia visual del CRM para badges/chips/skeleton es Ordenes, no estos listados. */
.cc-marketing-table-shell {
    max-width: 100%;
    border: 1px solid var(--vz-border-color, #eef1f5);
    border-radius: 12px;
    background: var(--vz-card-bg-custom, #fff);
    overflow: hidden;
}

.cc-marketing-table-shell .table-responsive {
    margin-bottom: 0;
    max-width: 100%;
}

[data-bs-theme="dark"] .cc-marketing-table-shell,
[data-layout-mode="dark"] .cc-marketing-table-shell {
    background: var(--vz-card-bg-custom, #1a1d21);
    border-color: var(--vz-border-color);
}

/* Toolbar tipo Órdenes (modo claro; oscuro ya definido más abajo) */
.ordenes-filter-card {
    background: #f7f9fc;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

/* Chips de estado — modo claro (oscuro: reglas [data-bs-theme="dark"] más abajo) */
.badge-chip {
    padding: 0.25rem 0.6rem;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.2;
    border: 1px solid transparent;
    vertical-align: middle;
    white-space: nowrap;
}

.badge-chip.badge-green {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border-color: #a3cfbb !important;
}

.badge-chip.badge-amber {
    background-color: #fff3cd !important;
    color: #664d03 !important;
    border-color: #ffe69c !important;
}

.badge-chip.badge-red {
    background-color: #f8d7da !important;
    color: #842029 !important;
    border-color: #f1aeb5 !important;
}

.badge-chip.badge-blue {
    background-color: #cff4fc !important;
    color: #055160 !important;
    border-color: #9eeaf9 !important;
}

.badge-chip.badge-soft {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

/* Tabla dentro del shell (Ajustes, Clientes, catálogos, Marketing…):
 * El tema aplica .table-bordered > :not(caption) > * > * { border-width: 0 var(--vz-border-width); } → líneas verticales entre columnas.
 * Aquí se fuerza solo separación horizontal entre filas (sin divisiones izquierda/derecha entre columnas). */
.cc-marketing-table-shell .table-bordered > :not(caption) > * > * {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

.cc-marketing-table-shell .table-bordered thead th,
.cc-marketing-table-shell .table-bordered tbody td,
.cc-marketing-table-shell .table-bordered tfoot th,
.cc-marketing-table-shell .table-bordered tfoot td {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

.cc-marketing-table-shell .table-bordered thead th {
    border-bottom-width: 2px !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 0.65rem 0.75rem;
}

.cc-marketing-table-shell .table-bordered tbody td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
}

.cc-marketing-table-shell .table-bordered tbody tr:hover {
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.14);
}

[data-bs-theme="dark"] .cc-marketing-table-shell .table-bordered thead th,
[data-layout-mode="dark"] .cc-marketing-table-shell .table-bordered thead th,
[data-bs-theme="dark"] .cc-marketing-table-shell .table-bordered tbody td,
[data-layout-mode="dark"] .cc-marketing-table-shell .table-bordered tbody td,
[data-bs-theme="dark"] .cc-marketing-table-shell .table-bordered tfoot th,
[data-layout-mode="dark"] .cc-marketing-table-shell .table-bordered tfoot th,
[data-bs-theme="dark"] .cc-marketing-table-shell .table-bordered tfoot td,
[data-layout-mode="dark"] .cc-marketing-table-shell .table-bordered tfoot td {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Chip/Badge Button Variants in Dark Mode aware */
.btn-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    font-weight: 700;
    border: 0;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

.btn-chip--create {
    background: #16a34a;
}

.btn-chip--create:hover {
    background: #15803d;
}

.btn-chip--view {
    background: #0d6efd;
}

.btn-chip--view:hover {
    background: #0b5ed7;
}

/* Status Chips */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    border: 1px solid transparent;
}

.status-chip--ok {
    background: var(--cccrm-chip-green);
    color: var(--cccrm-chip-green-text);
    border-color: var(--cccrm-chip-green-border);
}

.status-chip--warn {
    background: var(--cccrm-chip-orange);
    color: var(--cccrm-chip-orange-text);
    border-color: var(--cccrm-chip-orange-border);
}

.status-chip--bad {
    background: var(--cccrm-chip-purple);
    /* Using purple/red variant or define new red var if critical */
    color: var(--chip-red-tx);
    border-color: var(--chip-red-bd);
}

.status-chip--muted {
    background: var(--cccrm-chip-soft);
    color: var(--cccrm-chip-soft-text);
    border-color: var(--cccrm-chip-soft-border);
}

/* Button Ghost Variants using vars */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid var(--vz-border-color);
    background: var(--vz-card-bg);
    color: var(--vz-body-color);
    transition: all .15s ease;
}

.btn-ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}

.btn-excel {
    background: var(--cccrm-chip-green);
    color: var(--cccrm-chip-green-text);
    border-color: var(--cccrm-chip-green-border);
}

.btn-excel:hover {
    opacity: 0.9;
}


.tr-deleted {
    background-color: rgba(255, 126, 126, 0.1) !important;
}

[data-bs-theme="dark"] .tr-deleted {
    background-color: rgba(255, 0, 0, 0.15) !important;
}

/* =========================
   RESTORED BUTTON STYLES
   ========================= */

.btn-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 100%;
    padding: 0 !important;
    /* Fixed padding issue */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vz-border-color);
    background: var(--vz-card-bg);
    color: var(--vz-body-color);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}

.btn-icon .ri {
    font-size: 1.15rem;
    line-height: 1;
}

.btn-icon2 {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vz-border-color);
    background: var(--vz-card-bg);
    color: var(--vz-body-color);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn-icon2:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}

.btn-icon2 .ri {
    font-size: 1.15rem;
    line-height: 1;
}

/* Action Variants (Theme Aware) */
.btn-edit {
    color: #0b5ed7;
    background: rgba(11, 94, 215, 0.1);
    /* Soft Blue */
    border-color: rgba(11, 94, 215, 0.2);
}

.btn-edit:hover {
    background: rgba(11, 94, 215, 0.2);
    border-color: rgba(11, 94, 215, 0.3);
}

.btn-pay {
    color: #0f5132;
    background: rgba(15, 81, 50, 0.1);
    /* Soft Green */
    border-color: rgba(15, 81, 50, 0.2);
}

.btn-pay:hover {
    background: rgba(15, 81, 50, 0.2);
    border-color: rgba(15, 81, 50, 0.3);
}

.btn-adjust {
    color: #055160;
    background: rgba(5, 81, 96, 0.1);
    /* Soft Cyan */
    border-color: rgba(5, 81, 96, 0.2);
}

.btn-adjust:hover {
    background: rgba(5, 81, 96, 0.2);
    border-color: rgba(5, 81, 96, 0.3);
}

.btn-delete {
    color: #842029;
    background: rgba(132, 32, 41, 0.1);
    /* Soft Red */
    border-color: rgba(132, 32, 41, 0.2);
}

.btn-delete:hover {
    background: rgba(132, 32, 41, 0.2);
    border-color: rgba(132, 32, 41, 0.3);
}

.btn-pdf,
.btn-client,
.btn-open {
    color: #0b5ed7;
    background: rgba(11, 94, 215, 0.1);
    border-color: rgba(11, 94, 215, 0.2);
}

.btn-pdf:hover,
.btn-client:hover,
.btn-open:hover {
    background: rgba(11, 94, 215, 0.2);
    border-color: rgba(11, 94, 215, 0.3);
}

.btn-tracking {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.btn-tracking:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
}

/* Dark Mode Adjustments for specific colors if needed (optional since RGBA works well on both) */
[data-bs-theme="dark"] .btn-edit,
[data-bs-theme="dark"] .btn-pdf,
[data-bs-theme="dark"] .btn-client,
[data-bs-theme="dark"] .btn-open {
    color: #609aff;
    background: rgba(96, 154, 255, 0.15);
    border-color: rgba(96, 154, 255, 0.25);
}

[data-bs-theme="dark"] .btn-pay,
[data-bs-theme="dark"] .btn-tracking {
    color: #20c997;
    background: rgba(32, 201, 151, 0.15);
    border-color: rgba(32, 201, 151, 0.25);
}


/* Nested Card Styles (Refactoring hardcoded styles in Ordenes) */
.card-nested-secondary {
    background: #f7f9fc;
    border: 1px solid #eef1f5;
}

.card-nested-primary {
    background: #ffffff;
    border: 1px solid #eef1f5;
}

[data-bs-theme="dark"] .card-nested-secondary {
    background: rgba(255, 255, 255, 0.03);
    /* Very subtle for dark mode */
    border-color: var(--vz-border-color);
}


.card-nested-dashed {
    background: #f8fafc;
    border: 1px dashed #e5e7eb;
}

[data-bs-theme="dark"] .card-nested-dashed {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--vz-border-color);
}

[data-bs-theme="dark"] .card-nested-primary {
    background: var(--vz-card-bg-custom, #1a1d21);
    /* Match standard dark card */
    border-color: var(--vz-border-color);
}

/* =============================================================================
   Panel de filtros reutilizable (Órdenes, Pagos, Leads, Cotizaciones, …)
   Compat: tema real = data-bs-theme; algunas vistas legacy usan data-layout-mode
   ============================================================================= */
.cc-list-filter-panel {
    background: #f7f9fc;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

[data-bs-theme="dark"] .cc-list-filter-panel,
[data-layout-mode="dark"] .cc-list-filter-panel {
    background: var(--vz-card-bg-custom, rgba(255, 255, 255, 0.04));
    border-color: var(--vz-border-color);
}

.cc-list-filter-panel .form-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: #5a6a7f;
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .cc-list-filter-panel .form-label,
[data-layout-mode="dark"] .cc-list-filter-panel .form-label {
    color: var(--vz-gray-400, #94a3b8);
}

.cc-list-filter-panel .form-control,
.cc-list-filter-panel .form-select {
    border-radius: 10px;
}

[data-bs-theme="dark"] .cc-list-filter-panel .form-control,
[data-bs-theme="dark"] .cc-list-filter-panel .form-select,
[data-layout-mode="dark"] .cc-list-filter-panel .form-control,
[data-layout-mode="dark"] .cc-list-filter-panel .form-select {
    background-color: var(--vz-input-bg, var(--vz-card-bg-custom, #1a1d21));
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}

/* Barra acciones admin (Pagos): sustituye bg-light en dark */
.cc-admin-actions-bar {
    background: #f8f9fa;
    border: 1px solid var(--vz-border-color, #e9ecef);
}

[data-bs-theme="dark"] .cc-admin-actions-bar,
[data-layout-mode="dark"] .cc-admin-actions-bar {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--vz-border-color);
}

/* Órdenes: card de filtros (estilos base siguen en la vista; aquí solo dark) */
[data-bs-theme="dark"] .ordenes-filter-card,
[data-layout-mode="dark"] .ordenes-filter-card {
    background: var(--vz-card-bg-custom, rgba(255, 255, 255, 0.04));
    border-color: var(--vz-border-color);
}

[data-bs-theme="dark"] .ordenes-filter-toolbar label,
[data-layout-mode="dark"] .ordenes-filter-toolbar label {
    color: var(--vz-gray-400, #94a3b8);
}

[data-bs-theme="dark"] .ordenes-filter-toolbar .form-control,
[data-bs-theme="dark"] .ordenes-filter-toolbar .form-select,
[data-layout-mode="dark"] .ordenes-filter-toolbar .form-control,
[data-layout-mode="dark"] .ordenes-filter-toolbar .form-select {
    background-color: var(--vz-input-bg, var(--vz-card-bg-custom, #1a1d21));
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}

[data-bs-theme="dark"] .ordenes-filter-toolbar .input-group-text,
[data-layout-mode="dark"] .ordenes-filter-toolbar .input-group-text {
    background: var(--vz-input-bg, var(--vz-card-bg-custom, #1a1d21));
    border-color: var(--vz-border-color);
    color: var(--vz-gray-500, #94a3b8);
}

[data-bs-theme="dark"] .export-label,
[data-layout-mode="dark"] .export-label {
    color: var(--vz-gray-400, #94a3b8);
}

[data-bs-theme="dark"] .filter-chip,
[data-layout-mode="dark"] .filter-chip {
    background: rgba(96, 154, 255, 0.12);
    color: #93c5fd;
    border-color: rgba(96, 154, 255, 0.28);
}

[data-bs-theme="dark"] .filter-chip .filter-chip-remove,
[data-layout-mode="dark"] .filter-chip .filter-chip-remove {
    background: rgba(96, 154, 255, 0.2);
    color: #bfdbfe;
}

[data-bs-theme="dark"] .filter-chip .filter-chip-remove:hover,
[data-layout-mode="dark"] .filter-chip .filter-chip-remove:hover {
    background: rgba(96, 154, 255, 0.35);
    color: #fff;
}

/* Chips de estado (lista órdenes / modales): paleta suavizada en dark */
[data-bs-theme="dark"] .badge-chip.badge-green,
[data-layout-mode="dark"] .badge-chip.badge-green {
    background-color: rgba(32, 201, 151, 0.14) !important;
    color: #5eead4 !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
}

[data-bs-theme="dark"] .badge-chip.badge-amber,
[data-layout-mode="dark"] .badge-chip.badge-amber {
    background-color: rgba(255, 193, 7, 0.12) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}

[data-bs-theme="dark"] .badge-chip.badge-red,
[data-layout-mode="dark"] .badge-chip.badge-red {
    background-color: rgba(240, 101, 72, 0.14) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

[data-bs-theme="dark"] .badge-chip.badge-blue,
[data-layout-mode="dark"] .badge-chip.badge-blue {
    background-color: rgba(96, 154, 255, 0.14) !important;
    color: #93c5fd !important;
    border-color: rgba(147, 197, 253, 0.35) !important;
}

[data-bs-theme="dark"] .badge-chip.badge-soft,
[data-layout-mode="dark"] .badge-chip.badge-soft {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--vz-gray-400, #94a3b8) !important;
    border-color: var(--vz-border-color) !important;
}

/* Finanzas: botones Pagos / Ajustes (evita fondos pastel en dark) */
.orden-fin-btn-pagos {
    background-color: #f3e8ff;
    color: #6b21a8;
}

.orden-fin-btn-pagos:hover {
    background-color: #ede4ff;
    color: #581c87;
}

.orden-fin-btn-pagos__badge {
    background-color: #7e22ce !important;
    color: #fff !important;
}

.orden-fin-btn-ajustes {
    background-color: rgba(13, 110, 253, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(13, 110, 253, 0.2) !important;
}

.orden-fin-btn-ajustes:hover {
    background-color: rgba(13, 110, 253, 0.16);
    color: #1e40af;
}

.orden-fin-btn-ajustes__badge {
    background-color: rgba(13, 110, 253, 0.85) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .orden-fin-btn-pagos,
[data-layout-mode="dark"] .orden-fin-btn-pagos {
    background-color: rgba(167, 139, 250, 0.16);
    color: #ddd6fe;
}

[data-bs-theme="dark"] .orden-fin-btn-pagos:hover,
[data-layout-mode="dark"] .orden-fin-btn-pagos:hover {
    background-color: rgba(167, 139, 250, 0.24);
    color: #ede9fe;
}

[data-bs-theme="dark"] .orden-fin-btn-pagos__badge,
[data-layout-mode="dark"] .orden-fin-btn-pagos__badge {
    background-color: #7c3aed !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .orden-fin-btn-ajustes,
[data-layout-mode="dark"] .orden-fin-btn-ajustes {
    background-color: rgba(96, 154, 255, 0.12);
    color: #93c5fd;
    border-color: rgba(96, 154, 255, 0.28) !important;
}

[data-bs-theme="dark"] .orden-fin-btn-ajustes:hover,
[data-layout-mode="dark"] .orden-fin-btn-ajustes:hover {
    background-color: rgba(96, 154, 255, 0.2);
    color: #bfdbfe;
}

[data-bs-theme="dark"] .orden-fin-btn-ajustes__badge,
[data-layout-mode="dark"] .orden-fin-btn-ajustes__badge {
    background-color: rgba(96, 154, 255, 0.45) !important;
    color: #fff !important;
}

/* Subtarjetas estado / proforma (lista órdenes) */
[data-bs-theme="dark"] .orden-estado-subcard,
[data-layout-mode="dark"] .orden-estado-subcard {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--vz-border-color) !important;
}

[data-bs-theme="dark"] .orden-estado-proforma,
[data-layout-mode="dark"] .orden-estado-proforma {
    background: rgba(255, 255, 255, 0.06);
    color: var(--vz-gray-300, #cbd5e1);
    border-color: var(--vz-border-color);
    box-shadow: none;
}

[data-bs-theme="dark"] .orden-estado-proforma:hover,
[data-layout-mode="dark"] .orden-estado-proforma:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
    border-color: var(--vz-gray-600, #475569);
}

[data-bs-theme="dark"] .orden-estado-proforma__ic,
[data-layout-mode="dark"] .orden-estado-proforma__ic {
    color: #f87171;
}

[data-bs-theme="dark"] .orden-estado-badge-proforma,
[data-layout-mode="dark"] .orden-estado-badge-proforma {
    background: rgba(96, 154, 255, 0.12);
    color: #93c5fd;
    border-color: rgba(96, 154, 255, 0.28);
}

[data-bs-theme="dark"] .orden-estado-badge-proforma__num,
[data-layout-mode="dark"] .orden-estado-badge-proforma__num {
    color: #bfdbfe;
}

[data-bs-theme="dark"] .orden-estado-sin-proforma,
[data-layout-mode="dark"] .orden-estado-sin-proforma {
    border-color: var(--vz-border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--vz-gray-500, #94a3b8) !important;
}

[data-bs-theme="dark"] .orden-estado-sub__meta.border-top,
[data-layout-mode="dark"] .orden-estado-sub__meta.border-top {
    border-top-color: var(--vz-border-color) !important;
}

[data-bs-theme="dark"] .orden-estado-sub__meta-ic,
[data-layout-mode="dark"] .orden-estado-sub__meta-ic {
    opacity: 0.9;
    color: var(--vz-gray-500, #94a3b8);
}

[data-bs-theme="dark"] .orden-estado-chat-btn--wa,
[data-layout-mode="dark"] .orden-estado-chat-btn--wa {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.35);
}

[data-bs-theme="dark"] .orden-estado-chat-btn--wechat,
[data-layout-mode="dark"] .orden-estado-chat-btn--wechat {
    background: rgba(7, 193, 96, 0.15);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

[data-bs-theme="dark"] .orden-estado-chat-btn--off,
[data-layout-mode="dark"] .orden-estado-chat-btn--off {
    background: rgba(255, 255, 255, 0.05);
    color: var(--vz-gray-500);
    border-color: var(--vz-border-color);
}

/* Cabeceras de tabla en listas con scroll (mejor contraste en dark) */
[data-bs-theme="dark"] .table-card thead.table-light th,
[data-layout-mode="dark"] .table-card thead.table-light th {
    background-color: var(--cccrm-table-head-bg) !important;
    color: var(--vz-gray-300, #cbd5e1) !important;
    border-bottom-color: var(--vz-border-color) !important;
}

/* =========================
   Órdenes — total cotización (evita text-dark en dark mode)
   ========================= */
.orden-cotizacion-total-pagar {
    color: var(--vz-dark-text-emphasis, #212529);
}

[data-bs-theme="dark"] .orden-cotizacion-total-pagar,
[data-layout-mode="dark"] .orden-cotizacion-total-pagar {
    color: var(--vz-gray-100, #f3f4f6) !important;
}

/* =========================
   Sidebar — dark mode del layout (data-sidebar=light + fondo oscuro)
   El tema usa #5f0303 para “activo”; sobre fondo oscuro no se lee.
   ========================= */
[data-bs-theme="dark"] .navbar-menu,
[data-layout-mode="dark"] .navbar-menu {
    --vz-vertical-menu-item-color: #a8b0c4;
    --vz-vertical-menu-item-hover-color: #fecaca;
    --vz-vertical-menu-item-active-color: #fca5a5;
    --vz-vertical-menu-item-active-bg: rgba(248, 113, 113, 0.16);
    --vz-vertical-menu-sub-item-color: #9ca3af;
    --vz-vertical-menu-sub-item-hover-color: #fecdd3;
    --vz-vertical-menu-sub-item-active-color: #fecaca;
    --vz-vertical-menu-title-color: #7b8496;
}

[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link.active,
[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link.active {
    font-weight: 600;
}

/* Feather icon-dual: fill fijo azul en app.css; alinear con acento claro en dark */
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link:hover .icon-dual,
[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link:hover .icon-dual {
    fill: rgba(248, 113, 113, 0.22) !important;
}

[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded="true"] .icon-dual,
[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded="true"] .icon-dual {
    fill: rgba(248, 113, 113, 0.28) !important;
}

/* Logo sidebar: con data-bs-theme=dark + topbar light, Velzon muestra logo “light” (oscuro); forzar variante clara en el menú */
[data-bs-theme="dark"] .app-menu.navbar-menu .navbar-brand-box .logo-light,
[data-layout-mode="dark"] .app-menu.navbar-menu .navbar-brand-box .logo-light {
    display: none !important;
}

[data-bs-theme="dark"] .app-menu.navbar-menu .navbar-brand-box .logo-dark,
[data-layout-mode="dark"] .app-menu.navbar-menu .navbar-brand-box .logo-dark {
    display: inline-block !important;
}

/* Logo menú en dark: tratamiento para lectura clara sobre fondo oscuro */
[data-bs-theme="dark"] .app-menu.navbar-menu .navbar-brand-box img,
[data-layout-mode="dark"] .app-menu.navbar-menu .navbar-brand-box img {
    filter: grayscale(1) brightness(1) contrast(0.5);
}

/* =========================
   Listas CRM — celdas (badges, chips, iconos)
   ========================= */
.cc-list-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.cc-list-mono {
    font-family: var(--vz-font-monospace, ui-monospace, monospace);
    letter-spacing: -0.02em;
    font-size: 0.8125rem;
}

.cc-list-muted {
    font-size: 0.75rem;
    color: var(--vz-gray-600, #64748b);
    line-height: 1.3;
}

.cc-list-kv {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.cc-list-kv i {
    margin-top: 0.12rem;
    opacity: 0.75;
    flex-shrink: 0;
}

.cc-list-kv-label {
    color: var(--vz-gray-500, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    min-width: 4.5rem;
}

.cc-list-money {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vz-dark-text-emphasis, #212529);
}

[data-bs-theme="dark"] .cc-list-money,
[data-layout-mode="dark"] .cc-list-money {
    color: var(--vz-gray-100, #f3f4f6);
}

.cc-list-money-curr {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--vz-success, #0ab39c);
    margin-right: 0.15rem;
}

.cc-list-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
    max-width: 100%;
}

.cc-list-chip i {
    font-size: 0.85rem;
    line-height: 1;
}

.cc-list-chip--soft {
    background: var(--cccrm-chip-soft);
    color: var(--cccrm-chip-soft-text);
    border-color: var(--cccrm-chip-soft-border);
}

.cc-list-chip--blue {
    background: var(--cccrm-chip-blue2);
    color: var(--cccrm-chip-blue2-text);
    border-color: var(--cccrm-chip-blue2-border);
}

.cc-list-chip--green {
    background: var(--cccrm-chip-green);
    color: var(--cccrm-chip-green-text);
    border-color: var(--cccrm-chip-green-border);
}

.cc-list-chip--orange {
    background: var(--cccrm-chip-orange);
    color: var(--cccrm-chip-orange-text);
    border-color: var(--cccrm-chip-orange-border);
}

.cc-list-chip--purple {
    background: var(--cccrm-chip-purple);
    color: var(--cccrm-chip-purple-text);
    border-color: var(--cccrm-chip-purple-border);
}

.cc-list-chip--danger {
    background: rgba(var(--vz-danger-rgb, 240, 101, 72), 0.12);
    color: var(--vz-danger, #f06548);
    border-color: rgba(var(--vz-danger-rgb, 240, 101, 72), 0.25);
}

.cc-list-chip--ok {
    background: rgba(var(--vz-success-rgb, 10, 179, 156), 0.12);
    color: var(--vz-success-text-emphasis, #0f5132);
    border-color: rgba(var(--vz-success-rgb, 10, 179, 156), 0.22);
}

[data-bs-theme="dark"] .cc-list-chip--ok,
[data-layout-mode="dark"] .cc-list-chip--ok {
    color: var(--vz-success, #20c997);
}

.cc-list-chip--amber {
    background: rgba(var(--vz-warning-rgb, 247, 184, 75), 0.18);
    color: var(--vz-warning-text-emphasis, #664d03);
    border-color: rgba(var(--vz-warning-rgb, 247, 184, 75), 0.35);
}

[data-bs-theme="dark"] .cc-list-chip--amber,
[data-layout-mode="dark"] .cc-list-chip--amber {
    color: var(--vz-warning, #ff9f43);
}

.cc-list-chip--teal {
    background: rgba(13, 148, 136, 0.12);
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.28);
}

[data-bs-theme="dark"] .cc-list-chip--teal,
[data-layout-mode="dark"] .cc-list-chip--teal {
    color: #2dd4bf;
}

.cc-list-fechas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.65rem;
    padding: 0.25rem 0;
    min-width: 220px;
}

.cc-list-fecha-line {
    grid-column: span 1;
}

.cc-list-code-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-list-code-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.12);
    color: var(--vz-primary);
    flex-shrink: 0;
}

.cc-list-mini-card {
    background: var(--vz-light, #f3f6f9);
    border: 1px dashed var(--vz-border-color, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.45rem 0.55rem;
}

[data-bs-theme="dark"] .cc-list-mini-card,
[data-layout-mode="dark"] .cc-list-mini-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--vz-border-color);
}

.cc-list-btn-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid transparent;
    background: var(--vz-light);
    color: var(--vz-gray-700);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cc-list-btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cc-list-btn-icon--edit {
    color: var(--vz-info);
    background: rgba(var(--vz-info-rgb, 41, 156, 219), 0.12);
    border-color: rgba(var(--vz-info-rgb, 41, 156, 219), 0.2);
}

.cc-list-btn-icon--del {
    color: var(--vz-danger);
    background: rgba(var(--vz-danger-rgb, 240, 101, 72), 0.1);
    border-color: rgba(var(--vz-danger-rgb, 240, 101, 72), 0.2);
}

.cc-list-btn-icon--view {
    color: var(--vz-primary);
    background: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.1);
    border-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.18);
}