/* ============================================================
   BARAK THEME — Paleta dorada/oscura
   Inspirado en Barak Nexus / Barak Resorts
   ============================================================ */

/* === FUENTES === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* === VARIABLES DE PALETA === */
:root {
    /* Fondos */
    --barak-bg-darkest: #0a0f1c;        /* fondo más oscuro (sidebar, topbar) */
    --barak-bg-dark: #0f1729;            /* fondo principal */
    --barak-bg-card: #1a2332;            /* cards */
    --barak-bg-card-hover: #232f44;      /* hover */
    --barak-border-subtle: #2a3550;      /* bordes sutiles */
    --barak-border-gold: rgba(212, 175, 55, 0.15);

    /* Acento dorado (primario) */
    --barak-gold: #d4af37;
    --barak-gold-light: #f5d76e;
    --barak-gold-dark: #a67c00;
    --barak-gold-soft: rgba(212, 175, 55, 0.12);
    --barak-gold-glow: rgba(212, 175, 55, 0.35);

    /* Verde (éxito) */
    --barak-green: #10b981;
    --barak-green-light: #34d399;
    --barak-green-soft: rgba(16, 185, 129, 0.12);

    /* Texto */
    --barak-text: #e5e7eb;
    --barak-text-secondary: #9ca3af;
    --barak-text-muted: #6b7280;

    /* Estados */
    --barak-info: #3b82f6;
    --barak-warning: #f59e0b;
    --barak-danger: #ef4444;

    /* Sombras */
    --barak-shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --barak-shadow-md: 0 4px 12px rgba(0,0,0,.4);
    --barak-shadow-lg: 0 10px 30px rgba(0,0,0,.5);
    --barak-shadow-gold: 0 4px 16px rgba(212, 175, 55, 0.25);

    /* Sobrescribir variables de Bootstrap para que el resto del sistema herede */
    --bs-primary: var(--barak-gold);
    --bs-primary-rgb: 212, 175, 55;
    --bs-success: var(--barak-green);
    --bs-success-rgb: 16, 185, 129;
    --bs-info: var(--barak-info);
    --bs-warning: var(--barak-warning);
    --bs-danger: var(--barak-danger);
    --bs-body-bg: var(--barak-bg-dark);
    --bs-body-color: var(--barak-text);
    --bs-border-color: var(--barak-border-subtle);
}

/* === RESET BÁSICO === */
body {
    background-color: var(--barak-bg-dark) !important;
    color: var(--barak-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px;
    line-height: 1.6;
}

#layout-wrapper {
    background-color: var(--barak-bg-dark);
}

/* Tipografía premium para títulos */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    color: var(--barak-text) !important;
    letter-spacing: -0.01em;
}

h1, .h1 { font-weight: 700 !important; }
h4, .h4 { font-weight: 600 !important; }

/* === SIDEBAR === */
.vertical-menu {
    background: var(--barak-bg-darkest) !important;
    border-right: 1px solid var(--barak-border-subtle);
    box-shadow: var(--barak-shadow-md);
}

.navbar-brand-box {
    background: var(--barak-bg-darkest) !important;
    border-bottom: 1px solid var(--barak-border-subtle);
    padding: 1rem;
}

.logo {
    color: var(--barak-gold) !important;
}
.logo img {
    filter: drop-shadow(0 0 8px var(--barak-gold-glow));
}

#sidebar-menu {
    padding: 1rem 0.5rem;
}

#sidebar-menu .menu-title {
    color: var(--barak-text-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 1rem 0.5rem !important;
}

#sidebar-menu ul li a {
    color: var(--barak-text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.65rem 1rem !important;
    border-radius: 0.5rem;
    margin: 2px 0;
    transition: all 0.2s ease;
}

#sidebar-menu ul li a i {
    color: var(--barak-text-muted) !important;
    font-size: 1rem !important;
    width: 20px;
    transition: color 0.2s ease;
}

#sidebar-menu ul li a:hover {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}
#sidebar-menu ul li a:hover i {
    color: var(--barak-gold) !important;
}

#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active,
#sidebar-menu ul li a.mm-active {
    background: linear-gradient(135deg, var(--barak-gold-soft) 0%, rgba(212, 175, 55, 0.05) 100%) !important;
    color: var(--barak-gold) !important;
    border-left: 3px solid var(--barak-gold);
    padding-left: calc(1rem - 3px) !important;
}

#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active i {
    color: var(--barak-gold) !important;
}

/* Submenú */
#sidebar-menu .sub-menu {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.375rem;
    margin: 4px 0 4px 12px;
    padding: 4px 0 !important;
}

#sidebar-menu .sub-menu li a {
    font-size: 0.825rem !important;
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
}

/* Flecha del has-arrow */
#sidebar-menu .has-arrow::after {
    border-color: var(--barak-text-muted) !important;
}
#sidebar-menu li.mm-active > .has-arrow::after,
#sidebar-menu .has-arrow:hover::after {
    border-color: var(--barak-gold) !important;
}

/* === TOPBAR === */
#page-topbar {
    background: var(--barak-bg-darkest) !important;
    border-bottom: 1px solid var(--barak-border-subtle);
    box-shadow: var(--barak-shadow-sm);
}

.navbar-header {
    background: transparent !important;
}

.header-item {
    color: var(--barak-text-secondary) !important;
}

.header-item:hover {
    color: var(--barak-gold) !important;
}

.noti-icon i {
    color: var(--barak-text-secondary) !important;
}

/* Toggle hamburger */
.btn-header {
    color: var(--barak-text-secondary) !important;
}

/* === MAIN CONTENT === */
.main-content,
.page-content {
    background: var(--barak-bg-dark) !important;
}

.page-title-box h4 {
    color: var(--barak-text) !important;
    font-weight: 600;
}

/* === CARDS === */
.card {
    background: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: var(--barak-shadow-md) !important;
    color: var(--barak-text);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--barak-border-subtle) !important;
    padding: 1rem 1.25rem !important;
}

.card-header h4,
.card-header h5,
.card-header h6,
.card-title {
    color: var(--barak-text) !important;
    margin: 0;
}

.card-body {
    color: var(--barak-text);
}

/* Card con borde dorado destacado */
.card.card-gold {
    border-color: var(--barak-gold) !important;
    box-shadow: var(--barak-shadow-gold) !important;
}

/* === BOTONES === */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-sm { padding: 0.35rem 0.75rem; }
.btn-lg { padding: 0.75rem 1.75rem; }

/* Botón primario: gradiente dorado */
.btn-primary {
    background: linear-gradient(135deg, var(--barak-gold) 0%, var(--barak-gold-light) 100%) !important;
    border-color: var(--barak-gold) !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--barak-gold-light) 0%, var(--barak-gold) 100%) !important;
    border-color: var(--barak-gold-light) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.45);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    background: var(--barak-gold-dark) !important;
    opacity: 0.5;
}

/* Outline primary */
.btn-outline-primary {
    border-color: var(--barak-gold) !important;
    color: var(--barak-gold) !important;
}
.btn-outline-primary:hover {
    background: var(--barak-gold) !important;
    color: #1a1a1a !important;
}

/* Success */
.btn-success {
    background: linear-gradient(135deg, var(--barak-green) 0%, var(--barak-green-light) 100%) !important;
    border-color: var(--barak-green) !important;
    color: white !important;
    font-weight: 600 !important;
}
.btn-success:hover {
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

/* Info */
.btn-info {
    background: linear-gradient(135deg, var(--barak-info) 0%, #60a5fa 100%) !important;
    border-color: var(--barak-info) !important;
    color: white !important;
}

/* Warning */
.btn-warning {
    background: linear-gradient(135deg, var(--barak-warning) 0%, #fbbf24 100%) !important;
    border-color: var(--barak-warning) !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* Danger */
.btn-danger {
    background: linear-gradient(135deg, var(--barak-danger) 0%, #f87171 100%) !important;
    border-color: var(--barak-danger) !important;
    color: white !important;
}

/* Secondary y Light en oscuro */
.btn-secondary {
    background: var(--barak-bg-card-hover) !important;
    border-color: var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
}
.btn-light {
    background: var(--barak-bg-card-hover) !important;
    border-color: var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
}
.btn-light:hover {
    background: var(--barak-bg-card) !important;
    color: var(--barak-gold-light) !important;
}

/* Link */
.btn-link {
    color: var(--barak-gold) !important;
}
.btn-link:hover { color: var(--barak-gold-light) !important; }

/* === FORMULARIOS === */
.form-control,
.form-select,
.form-check-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    background-color: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.875rem;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: var(--barak-bg-card) !important;
    border-color: var(--barak-gold) !important;
    color: var(--barak-text) !important;
    box-shadow: 0 0 0 3px var(--barak-gold-soft) !important;
    outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--barak-text-muted) !important;
    opacity: 0.6;
}

.form-label {
    color: var(--barak-text-secondary) !important;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
}

.form-check-input {
    background-color: var(--barak-bg-card) !important;
    border-color: var(--barak-border-subtle) !important;
}
.form-check-input:checked {
    background-color: var(--barak-gold) !important;
    border-color: var(--barak-gold) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--barak-gold-soft) !important;
}

.form-check-label {
    color: var(--barak-text-secondary) !important;
}

.input-group-text {
    background-color: var(--barak-bg-card-hover) !important;
    border-color: var(--barak-border-subtle) !important;
    color: var(--barak-text-secondary) !important;
}

/* === TABLAS === */
.table {
    color: var(--barak-text) !important;
    border-color: var(--barak-border-subtle) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--barak-text);
    --bs-table-border-color: var(--barak-border-subtle);
    --bs-table-hover-bg: var(--barak-bg-card-hover);
    --bs-table-hover-color: var(--barak-text);
    --bs-table-striped-bg: rgba(255,255,255,0.02);
}

.table thead {
    background: var(--barak-bg-darkest) !important;
}
.table thead th {
    background: var(--barak-bg-darkest) !important;
    color: var(--barak-gold) !important;
    border-bottom: 2px solid var(--barak-gold-soft) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.875rem 0.75rem !important;
}

.table tbody td {
    border-color: var(--barak-border-subtle) !important;
    padding: 0.75rem !important;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: var(--barak-bg-card-hover) !important;
}

.table-bordered { border-color: var(--barak-border-subtle) !important; }
.table-bordered > :not(caption) > * > * { border-color: var(--barak-border-subtle) !important; }

/* Tabla light/dark variants */
.table-light, .table-light th, .table-light td {
    background: var(--barak-bg-card-hover) !important;
    color: var(--barak-text) !important;
    border-color: var(--barak-border-subtle) !important;
}
.table-dark, .table-dark th, .table-dark td {
    background: var(--barak-bg-darkest) !important;
    color: var(--barak-gold) !important;
    border-color: var(--barak-border-subtle) !important;
}

/* === BADGES === */
.badge {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0.4em 0.7em;
    border-radius: 6px;
    font-size: 0.75em;
}

.bg-primary { background: var(--barak-gold) !important; color: #1a1a1a !important; }
.bg-success { background: var(--barak-green) !important; }
.bg-info { background: var(--barak-info) !important; }
.bg-warning { background: var(--barak-warning) !important; color: #1a1a1a !important; }
.bg-danger { background: var(--barak-danger) !important; }
.bg-secondary { background: var(--barak-bg-card-hover) !important; color: var(--barak-text-secondary) !important; }
.bg-dark { background: var(--barak-bg-darkest) !important; }
.bg-light { background: var(--barak-bg-card-hover) !important; color: var(--barak-text) !important; }

.text-primary { color: var(--barak-gold) !important; }
.text-success { color: var(--barak-green-light) !important; }
.text-info { color: var(--barak-info) !important; }
.text-warning { color: var(--barak-warning) !important; }
.text-danger { color: var(--barak-danger) !important; }
.text-muted { color: var(--barak-text-muted) !important; }
.text-secondary { color: var(--barak-text-secondary) !important; }

/* === ALERTS === */
.alert {
    border: 1px solid;
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
}
.alert-success {
    background: var(--barak-green-soft) !important;
    border-color: var(--barak-green) !important;
    color: var(--barak-green-light) !important;
}
.alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--barak-info) !important;
    color: #93c5fd !important;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: var(--barak-warning) !important;
    color: #fbbf24 !important;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--barak-danger) !important;
    color: #fca5a5 !important;
}

/* === MODALES === */
.modal-content {
    background: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: var(--barak-shadow-lg) !important;
    color: var(--barak-text);
}
.modal-header {
    border-bottom: 1px solid var(--barak-border-subtle) !important;
    padding: 1rem 1.5rem;
}
.modal-header.bg-warning {
    background: linear-gradient(135deg, var(--barak-warning) 0%, #fbbf24 100%) !important;
    color: #1a1a1a !important;
}
.modal-header.bg-info {
    background: linear-gradient(135deg, var(--barak-info) 0%, #60a5fa 100%) !important;
    color: white !important;
}
.modal-footer {
    border-top: 1px solid var(--barak-border-subtle) !important;
}
.btn-close {
    filter: invert(1) brightness(0.8);
}

/* === DROPDOWNS === */
.dropdown-menu {
    background: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    border-radius: 8px;
    box-shadow: var(--barak-shadow-md);
}
.dropdown-item {
    color: var(--barak-text-secondary) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}
.dropdown-divider {
    border-top-color: var(--barak-border-subtle) !important;
}

/* === DATATABLES === */
.dataTables_wrapper {
    color: var(--barak-text-secondary) !important;
}
.dataTables_length label,
.dataTables_filter label,
.dataTables_info {
    color: var(--barak-text-secondary) !important;
}
.dataTables_length select,
.dataTables_filter input {
    background: var(--barak-bg-card-hover) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
}

/* Paginación DataTables */
.dataTables_paginate .paginate_button {
    color: var(--barak-text-secondary) !important;
    background: transparent !important;
    border: 1px solid var(--barak-border-subtle) !important;
    border-radius: 6px !important;
    padding: 0.4rem 0.75rem !important;
    margin: 0 2px !important;
}
.dataTables_paginate .paginate_button:hover {
    background: var(--barak-gold-soft) !important;
    border-color: var(--barak-gold) !important;
    color: var(--barak-gold-light) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--barak-gold) 0%, var(--barak-gold-light) 100%) !important;
    border-color: var(--barak-gold) !important;
    color: #1a1a1a !important;
    font-weight: 600;
}
.dataTables_paginate .paginate_button.disabled {
    color: var(--barak-text-muted) !important;
    border-color: var(--barak-border-subtle) !important;
    opacity: 0.4;
}

/* DataTables botones de export */
div.dt-buttons .dt-button {
    background: var(--barak-bg-card-hover) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
    border-radius: 6px;
    padding: 0.4rem 0.875rem !important;
    margin-right: 4px !important;
}
div.dt-buttons .dt-button:hover {
    background: var(--barak-gold-soft) !important;
    border-color: var(--barak-gold) !important;
    color: var(--barak-gold-light) !important;
}

/* Ordenamiento */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    color: var(--barak-gold) !important;
    opacity: 0.5;
}

/* === PAGINACIÓN LARAVEL (por si queda alguna) === */
.pagination .page-link {
    background: transparent !important;
    border-color: var(--barak-border-subtle) !important;
    color: var(--barak-text-secondary) !important;
}
.pagination .page-link:hover {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}
.pagination .page-item.active .page-link {
    background: var(--barak-gold) !important;
    border-color: var(--barak-gold) !important;
    color: #1a1a1a !important;
}

/* === PROGRESS BAR === */
.progress {
    background: var(--barak-bg-darkest) !important;
    border: 1px solid var(--barak-border-subtle);
    border-radius: 8px;
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(135deg, var(--barak-gold) 0%, var(--barak-gold-light) 100%) !important;
    color: #1a1a1a;
    font-weight: 600;
}
.progress-bar.bg-success {
    background: linear-gradient(135deg, var(--barak-green) 0%, var(--barak-green-light) 100%) !important;
    color: white !important;
}
.progress-bar.bg-info {
    background: linear-gradient(135deg, var(--barak-info) 0%, #60a5fa 100%) !important;
    color: white !important;
}
.progress-bar.bg-danger {
    background: linear-gradient(135deg, var(--barak-danger) 0%, #f87171 100%) !important;
    color: white !important;
}

/* === SCROLLBAR (chrome/edge) === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--barak-bg-darkest); }
::-webkit-scrollbar-thumb {
    background: var(--barak-border-subtle);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--barak-gold-dark);
}

/* === COMPONENTES PERSONALIZADOS YA EXISTENTES === */

/* Sticky summary (Utilidades anuales) */
.sticky-summary {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
    border: 1px solid var(--barak-gold) !important;
    border-radius: 12px !important;
    box-shadow: var(--barak-shadow-gold);
    color: var(--barak-text) !important;
}
.sticky-summary h4,
.sticky-summary h5,
.sticky-summary h6 {
    color: var(--barak-text) !important;
}
.sticky-summary small.text-muted {
    color: var(--barak-text-secondary) !important;
}

/* Search results del carrito */
.search-results {
    background: var(--barak-bg-darkest) !important;
    border: 1px solid var(--barak-border-subtle) !important;
}
.search-result-item {
    border-bottom: 1px solid var(--barak-border-subtle) !important;
    color: var(--barak-text);
}
.search-result-item:hover {
    background: var(--barak-bg-card-hover) !important;
}
.search-result-item.added {
    background: rgba(0,0,0,0.3) !important;
    opacity: 0.5;
}
.lot-highlight {
    color: var(--barak-gold) !important;
    text-shadow: 0 0 8px var(--barak-gold-glow);
    font-weight: 700;
}

/* Monto editado (override) */
.monto-input.border-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: var(--barak-warning) !important;
}

/* === UTILIDADES === */
.fw-bold { font-weight: 600 !important; }

/* Headers de las páginas */
.page-title-box {
    background: transparent;
}
.page-title {
    color: var(--barak-gold) !important;
    font-weight: 600;
}

/* Dashboard cards estadísticos */
.mini-stats-wid .card-body {
    padding: 1.25rem;
}

/* Notificaciones (campanita) */
.noti-icon .badge {
    background: var(--barak-danger) !important;
    border: 2px solid var(--barak-bg-darkest);
}

/* Avatar/profile en topbar */
.user-name { color: var(--barak-text) !important; }

/* Dark mode toggle (luna) - por si está activo */
.dark-mode-toggle i { color: var(--barak-gold) !important; }

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .vertical-menu {
        background: var(--barak-bg-darkest) !important;
    }
}

/* === LOADING / SPINNERS === */
.spinner-border.text-warning {
    border-color: var(--barak-gold) !important;
    border-right-color: transparent !important;
}
.spinner-border.text-primary {
    border-color: var(--barak-gold) !important;
    border-right-color: transparent !important;
}

/* === LINKS === */
a {
    color: var(--barak-gold);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: var(--barak-gold-light);
}

/* Excepción: links dentro de páginas que ya tienen su color */
.btn a, a.btn { color: inherit !important; }

/* === TOOLTIPS === */
.tooltip-inner {
    background: var(--barak-bg-darkest) !important;
    color: var(--barak-text) !important;
    border: 1px solid var(--barak-gold-soft);
}
.tooltip .tooltip-arrow::before {
    border-top-color: var(--barak-bg-darkest) !important;
}

/* === CODE === */
code {
    background: var(--barak-bg-darkest) !important;
    color: var(--barak-gold-light) !important;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.875em;
}

/* === HORIZONTAL RULE === */
hr {
    border-color: var(--barak-border-subtle) !important;
    opacity: 0.5;
}

/* === LISTS in cards === */
.card ul li, .card ol li {
    color: var(--barak-text);
}

/* === BREADCRUMBS === */
.breadcrumb {
    background: transparent;
}
.breadcrumb-item a { color: var(--barak-text-secondary); }
.breadcrumb-item.active { color: var(--barak-gold); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--barak-text-muted); }

/* === SELECT2 (si lo usan) === */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--barak-text) !important;
}
.select2-dropdown {
    background: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-border-subtle) !important;
}
.select2-results__option {
    color: var(--barak-text-secondary) !important;
}
.select2-results__option--highlighted {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}

/* === FOOTER === */
.footer {
    background: var(--barak-bg-darkest) !important;
    border-top: 1px solid var(--barak-border-subtle);
    color: var(--barak-text-muted) !important;
}

/* === LOGIN PAGE (si existe) === */
.auth-page,
.account-pages {
    background: var(--barak-bg-dark) !important;
}
.auth-page .card,
.account-pages .card {
    background: var(--barak-bg-card) !important;
}

/* ============================================================
   FIXES PROBLEMAS REPORTADOS
   ============================================================ */

/* === SIDEBAR COMPRIMIDO (modo iconos) === */
/* Cuando el sidebar está colapsado (clase vertical-collpsed en body),
   el submenú aparece como popup flotante. Hay que estilarlo y asegurar
   que sea clickeable. */

body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:focus > a {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}

body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a > i,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:focus > a > i {
    color: var(--barak-gold) !important;
}

/* Popup del submenú cuando sidebar está comprimido */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a:hover span {
    background: var(--barak-bg-card) !important;
    color: var(--barak-gold-light) !important;
    border: 1px solid var(--barak-gold-soft);
    box-shadow: var(--barak-shadow-md);
    border-radius: 6px;
    padding: 0.5rem 1rem !important;
}

/* El contenedor del submenú flotante (popup) */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > ul.sub-menu {
    background: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-gold-soft) !important;
    border-radius: 6px;
    box-shadow: var(--barak-shadow-lg) !important;
    padding: 0.25rem 0 !important;
    margin-left: 0 !important;
    z-index: 9999 !important;
    pointer-events: auto !important;  /* CRÍTICO: permite click */
}

/* Items del submenú flotante: texto visible y clickeable */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > ul.sub-menu li a {
    color: var(--barak-text) !important;       /* texto claro sobre fondo oscuro */
    padding: 0.5rem 1.25rem !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > ul.sub-menu li a:hover {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}

body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > ul.sub-menu li.mm-active a,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > ul.sub-menu li a.active {
    color: var(--barak-gold) !important;
    background: var(--barak-gold-soft) !important;
}

/* === SELECTS NATIVOS — opciones del dropdown === */
/* Las <option> del browser no respetan colores oscuros bien en algunos OS.
   Forzamos fondo oscuro y texto claro para que sean legibles. */
select option,
.form-select option {
    background: var(--barak-bg-card) !important;
    color: var(--barak-text) !important;
    padding: 0.5rem !important;
}

select option:hover,
select option:checked,
select option:focus,
.form-select option:hover,
.form-select option:checked,
.form-select option:focus {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}

/* Para selects con fondo claro (algunos modales custom) — fuerza texto oscuro */
select.bg-white,
select.bg-light,
.form-select.bg-white,
.form-select.bg-light {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}
select.bg-white option,
.form-select.bg-white option {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* === MODALES CON LISTAS DE BÚSQUEDA === */
/* Modales que tienen una lista de items para elegir (ej: "Elegir Lote") */

/* Si el modal tiene fondo blanco/claro, asegurar que el texto sea oscuro */
.modal .list-group,
.modal .list-group-item {
    background: var(--barak-bg-card) !important;
    color: var(--barak-text) !important;
    border-color: var(--barak-border-subtle) !important;
}

.modal .list-group-item:hover {
    background: var(--barak-bg-card-hover) !important;
    color: var(--barak-gold-light) !important;
}

.modal .list-group-item.active {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold) !important;
    border-color: var(--barak-gold) !important;
}

/* Inputs de búsqueda dentro de modales */
.modal input[type="text"],
.modal input[type="search"],
.modal .form-control {
    background: var(--barak-bg-darkest) !important;
    color: var(--barak-text) !important;
    border-color: var(--barak-border-subtle) !important;
}

.modal input[type="text"]::placeholder,
.modal input[type="search"]::placeholder,
.modal .form-control::placeholder {
    color: var(--barak-text-muted) !important;
}

/* Resultados de búsqueda en modal (típico div con scroll) */
.modal .search-results,
.modal .results-list,
.modal [class*="result-list"],
.modal [class*="search-list"] {
    background: var(--barak-bg-card) !important;
    border-color: var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
}

.modal .search-results > *,
.modal .results-list > *,
.modal [class*="result-item"] {
    color: var(--barak-text) !important;
    border-color: var(--barak-border-subtle) !important;
}

/* === SI ALGÚN MODAL ESTÁ EN BLANCO POR DEFAULT === */
/* Algunas vistas pueden tener .modal-body con bg-white forzado.
   Lo respetamos pero forzamos texto oscuro adentro. */
.modal-body.bg-white,
.modal-content.bg-white,
.modal .bg-white {
    color: #1a1a1a !important;
}

.modal-body.bg-white *,
.modal-content.bg-white *,
.modal .bg-white * {
    color: inherit;
}

.modal-body.bg-white input,
.modal-body.bg-white select,
.modal-body.bg-white textarea,
.modal-body.bg-white .form-control,
.modal .bg-white input,
.modal .bg-white select,
.modal .bg-white .form-control {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #ced4da !important;
}

/* === DROPDOWNS NATIVOS (datalist, autocomplete) === */
input[list] {
    color: var(--barak-text) !important;
}

datalist option {
    background: var(--barak-bg-card) !important;
    color: var(--barak-text) !important;
}

/* === SAFETY NET: cualquier elemento con fondo blanco/claro forzado === */
/* Si por alguna razón un componente quedó con fondo blanco (bg-white,
   estilo inline, o por overrides locales), aseguramos que el texto interno
   sea oscuro y legible. */

[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"] {
    color: #1a1a1a !important;
}

[style*="background: white"] *,
[style*="background: #fff"] *,
[style*="background: #ffffff"] *,
[style*="background-color: white"] *,
[style*="background-color: #fff"] *,
[style*="background-color: #ffffff"] * {
    color: inherit;
}

/* ============================================================
   FIX #2: Choices.js + Sidebar comprimido (problemas reales)
   ============================================================ */

/* === CHOICES.JS — usado en "Elegir Lote", "Proyecto", etc === */
/* La librería Choices renderiza un dropdown con div.choices, ul.choices__list,
   div.choices__item, etc. NO toma el CSS de form-select. */

.choices {
    margin-bottom: 0 !important;
}

/* El "input" visible del Choices (cuando está cerrado) */
.choices__inner {
    background-color: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    color: var(--barak-text) !important;
    border-radius: 8px !important;
    min-height: 38px !important;
    padding: 0.5rem 0.875rem !important;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--barak-gold) !important;
    box-shadow: 0 0 0 3px var(--barak-gold-soft) !important;
}

/* Item visible (lo que muestra el "selected") */
.choices__list--single .choices__item,
.choices__list--multiple .choices__item {
    color: var(--barak-text) !important;
    background: transparent !important;
    border-color: var(--barak-border-subtle) !important;
}

/* Placeholder */
.choices__placeholder {
    color: var(--barak-text-muted) !important;
    opacity: 0.7 !important;
}

/* === DROPDOWN abierto (lo que se ve en la imagen 2) === */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-gold-soft) !important;
    color: var(--barak-text) !important;
    box-shadow: var(--barak-shadow-lg) !important;
    border-radius: 8px !important;
    z-index: 9999 !important;
}

/* Input de búsqueda dentro del dropdown */
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
    background-color: var(--barak-bg-darkest) !important;
    color: var(--barak-text) !important;
    border: 1px solid var(--barak-border-subtle) !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.5rem !important;
    width: calc(100% - 1rem) !important;
}

.choices__list--dropdown .choices__input::placeholder,
.choices__list[aria-expanded] .choices__input::placeholder {
    color: var(--barak-text-muted) !important;
    opacity: 0.7 !important;
}

/* Items individuales del dropdown */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    color: var(--barak-text) !important;
    background-color: transparent !important;
    padding: 0.6rem 1rem !important;
    border-bottom: 1px solid var(--barak-border-subtle) !important;
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    color: var(--barak-text) !important;
}

/* Hover */
.choices__list--dropdown .choices__item--selectable:hover,
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable:hover,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}

/* Item disabled */
.choices__list--dropdown .choices__item--disabled,
.choices__list[aria-expanded] .choices__item--disabled {
    color: var(--barak-text-muted) !important;
    opacity: 0.5 !important;
}

/* Mensaje "No results found" */
.choices__list--dropdown .has-no-results,
.choices__list--dropdown .has-no-choices,
.choices__list[aria-expanded] .has-no-results,
.choices__list[aria-expanded] .has-no-choices {
    color: var(--barak-text-muted) !important;
}

/* Heading group si hay grupos */
.choices__heading {
    color: var(--barak-gold) !important;
    background: var(--barak-bg-darkest) !important;
    border-bottom: 1px solid var(--barak-gold-soft) !important;
}

/* Flecha del Choices */
.choices[data-type*="select-one"]::after {
    border-color: var(--barak-text-muted) transparent transparent transparent !important;
}
.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--barak-gold) transparent !important;
}

/* === SIDEBAR COMPRIMIDO — fix robusto === */
/* Velzon usa varias clases dependiendo de la versión. Cubro todas. */

body[data-sidebar-size="sm"] .vertical-menu,
body[data-sidebar-size="sm"] .vertical-menu .navbar-brand-box,
body.sidebar-enable .vertical-menu,
body.vertical-collpsed .vertical-menu,
body.vertical-collapsed .vertical-menu {
    background: var(--barak-bg-darkest) !important;
}

/* El popup que sale al pasar el mouse cuando el sidebar está comprimido */
body[data-sidebar-size="sm"] #sidebar-menu .sub-menu,
body[data-sidebar-size="sm"] #sidebar-menu li:hover > ul.sub-menu,
body[data-sidebar-size="sm"] #sidebar-menu li > a + ul.sub-menu,
body.vertical-collpsed #sidebar-menu .sub-menu,
body.vertical-collpsed #sidebar-menu li:hover > ul.sub-menu,
body.vertical-collapsed #sidebar-menu .sub-menu,
.vertical-menu #sidebar-menu .sub-menu {
    background: var(--barak-bg-card) !important;
    border: 1px solid var(--barak-gold-soft) !important;
    box-shadow: var(--barak-shadow-lg) !important;
    border-radius: 6px !important;
    pointer-events: auto !important;
}

/* Items del submenú: TEXTO LEGIBLE */
body[data-sidebar-size="sm"] #sidebar-menu .sub-menu li a,
body[data-sidebar-size="sm"] #sidebar-menu li:hover .sub-menu li a,
body.vertical-collpsed #sidebar-menu .sub-menu li a,
body.vertical-collapsed #sidebar-menu .sub-menu li a,
.vertical-menu #sidebar-menu .sub-menu li a {
    color: var(--barak-text) !important;
    background: transparent !important;
    padding: 0.55rem 1.25rem !important;
    font-size: 0.875rem !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    display: block !important;
}

body[data-sidebar-size="sm"] #sidebar-menu .sub-menu li a:hover,
body.vertical-collpsed #sidebar-menu .sub-menu li a:hover,
body.vertical-collapsed #sidebar-menu .sub-menu li a:hover,
.vertical-menu #sidebar-menu .sub-menu li a:hover {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}

/* En modo comprimido el header del popup (texto del padre) */
body[data-sidebar-size="sm"] #sidebar-menu li:hover > a span,
body.vertical-collpsed #sidebar-menu li:hover > a > span {
    background: var(--barak-bg-card) !important;
    color: var(--barak-gold) !important;
    border: 1px solid var(--barak-gold-soft) !important;
    border-bottom: none !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.3) !important;
    padding: 0.65rem 1.25rem !important;
    border-radius: 6px 6px 0 0 !important;
    font-weight: 600 !important;
}

/* === SAFETY NET REFORZADO: cualquier <ul> con fondo blanco === */
ul[style*="background"]:not([style*="dark"]):not([style*="#0"]):not([style*="#1"]):not([style*="#2"]):not([style*="rgb(0"]):not([style*="rgb(1"]):not([style*="rgb(2"]) {
    /* Si una lista tiene background claro forzado, le pongo el oscuro Barak */
    background: var(--barak-bg-card) !important;
}

ul[style*="background: white"] li,
ul[style*="background: #fff"] li,
ul[style*="background-color: white"] li,
ul[style*="background-color: #fff"] li {
    color: var(--barak-text) !important;
}

/* === FALLBACK: cualquier dropdown/popup posicionado fuera de modal === */
/* Si hay popups absolutos con clase ambigua y fondo claro */
[role="listbox"],
[role="menu"][aria-expanded="true"] {
    background: var(--barak-bg-card) !important;
    color: var(--barak-text) !important;
    border: 1px solid var(--barak-border-subtle) !important;
}

[role="listbox"] [role="option"],
[role="menu"][aria-expanded="true"] [role="menuitem"] {
    color: var(--barak-text) !important;
}

[role="listbox"] [role="option"]:hover,
[role="listbox"] [role="option"][aria-selected="true"] {
    background: var(--barak-gold-soft) !important;
    color: var(--barak-gold-light) !important;
}