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

:root{
    --bg:#f3f9fb;
    --sidebar:#eaf6fb;
    --accent:#e6f2fb;
    --primary:#0b69ff;
    --card-shadow: 0 6px 18px rgba(15,23,42,0.06);
    --muted:#6b7280;
}

body{
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;
    background: var(--bg);
    color:#0f172a;
    overflow-x: hidden;
    margin: 0;
}

/* Profile menu fixed top-right */
.profile-menu-wrapper{ position:fixed; top:12px; right:18px; z-index:2000 }
.profile-circle{ width:36px; height:36px; border-radius:999px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700 }
.dropdown-menu-end{ min-width:200px }

/* Mobile navigation bar */
.mobile-nav{ 
    z-index: 1060; 
    height: 50px;
}

.sidebar{
    width:260px;
    background:var(--sidebar);
    border-right:1px solid rgba(15,23,42,0.03);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1030;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .p-3{padding:1.6rem!important}
.sidebar h5{font-weight:700;margin-bottom:1rem}
.sidebar .nav-link{color:#0f172a; font-weight:500; padding:0.6rem 0}
.sidebar .nav-link.active{background:transparent; color:var(--primary); font-weight:700}

.content{padding:2rem 2rem 2rem 3rem;transition:padding .18s ease}

/* Use body padding to reserve space for fixed sidebar so content never sits under it */
body{padding-left:300px; padding-right:120px}

/* Collapsed sidebar state */
body.sidebar-collapsed .sidebar{width:76px}
body.sidebar-collapsed .sidebar .p-3{padding:1rem}
body.sidebar-collapsed .sidebar h5, body.sidebar-collapsed .sidebar small{display:none}
body.sidebar-collapsed .sidebar .nav-link{padding-left:0.6rem}
body.sidebar-collapsed{padding-left:96px; padding-right:120px}

/* Sidebar icon/text behavior */
.sidebar .nav-link{ gap:.6rem }
.sidebar .nav-icon{ font-size:1.15rem; width:28px; text-align:center; color: rgba(15,23,42,0.75) }
body.dark-mode .sidebar .nav-icon{ color: rgba(207,232,255,0.85) }
.sidebar .nav-text{ display:inline-block }

/* When collapsed: hide text, center icons and adjust padding */
body.sidebar-collapsed .sidebar .nav-text{ display:none }
body.sidebar-collapsed .sidebar .nav-link{ justify-content:center; padding-left:0.4rem; padding-right:0.4rem }
body.sidebar-collapsed .sidebar{ width:76px }
body.sidebar-collapsed .sidebar .p-3{ padding-left:0.8rem; padding-right:0.8rem }

/* Keep small caret hidden when collapsed */
body.sidebar-collapsed .nav-caret{ display:none }

/* Tooltips: show text on hover when collapsed */
.sidebar .nav-link[title]{ position:relative }
body.sidebar-collapsed .sidebar .nav-link:hover::after{
    content: attr(title);
    position:absolute; left:100%; top:50%; transform:translateY(-50%); white-space:nowrap; background:#111827; color:#fff; padding:.25rem .5rem; border-radius:6px; margin-left:.5rem; font-size:.85rem; z-index:2000;
}

.card{border-radius:12px; box-shadow:var(--card-shadow); border:0}
.card-small{border-radius:12px}

.dashboard-cards .card{padding:1.2rem}
.dashboard-cards h6{color:var(--muted); font-weight:600}
.dashboard-cards h2{font-weight:700}

.transactions .list-group-item{border:0;padding:1rem 1.25rem}
.transactions .badge-ingreso{background:#ecfdf5;color:#065f46;border-radius:999px;padding:.25rem .6rem;font-size:.75rem}
.transactions .badge-egreso{background:#fff1f2;color:#b91c1c;border-radius:999px;padding:.25rem .6rem;font-size:.75rem}

.panel-header{display:flex;align-items:center;justify-content:space-between}
.panel-title{font-weight:800;font-size:1.5rem}

/* Mobile adjustments for panel header */
@media (max-width: 768px){
    .panel-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .panel-title{
        font-size: 1.25rem;
    }
}

.card .table thead th{border-bottom:0;color:var(--muted)}

/* Responsive adjustments - Mobile phones only */
@media (max-width: 767px){
    /* Hide desktop notification button on mobile */
    .panel-header .dropdown {
        display: none !important;
    }
    
    /* Adjust profile button to not overlap with mobile nav */
    .profile-menu-wrapper{ 
        display: none; /* Hide desktop profile on mobile, we'll use mobile nav instead */
    }
    
    .sidebar, body.sidebar-collapsed .sidebar{
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0; /* Use bottom instead of height for better coverage */
        height: auto; /* Let it stretch naturally */
        width: 260px;
        transition: left 0.3s ease;
        z-index: 1080; /* Higher than mobile nav to appear on top */
        box-shadow: 4px 0 10px rgba(0,0,0,0.1);
    }
    .sidebar.mobile-open, body.sidebar-collapsed .sidebar.mobile-open {
        left: 0;
    }
    .content{
        margin-left:0;
        padding: 1rem;
        padding-top: 60px; /* Space for mobile nav */
        margin-top: 0; /* Remove margin, use padding instead */
        width: 100%;
    }
    body, body.sidebar-collapsed{
        padding-left:0 !important;
        padding-right:0 !important;
    }
    
    /* Overlay when sidebar is open */
    .sidebar-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1075; /* Below sidebar but above everything else */
        display: none;
    }
    .sidebar-overlay.show { display: block; }
}

/* Tablet adjustments (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px){
    /* On tablets, keep sidebar visible but make it collapsible */
    .sidebar{
        width: 200px; /* Slightly narrower on tablets */
    }
    body{
        padding-left: 220px;
        padding-right: 20px;
    }
    body.sidebar-collapsed{
        padding-left: 96px;
    }
    
    /* Adjust profile button on tablets to not overlap content */
    .profile-menu-wrapper{
        right: 60px; /* Add space from right edge to avoid notification button */
        z-index: 999; /* Lower than modals but above content */
    }
}

/* Dark mode styles */
body.dark-mode{
    --bg: #0b1220;
    --sidebar: #071124;
    --accent: #0b1626;
    --primary: #4ea8ff;
    background: #071124;
    color: #e6eef8;
}

body.dark-mode .sidebar{ background: var(--sidebar); }
body.dark-mode .sidebar .nav-link{ color: #cfe8ff; }
body.dark-mode .sidebar .nav-link.active{ color: var(--primary); }
body.dark-mode .sidebar .nav-link.active .nav-icon{ color: var(--primary); }
body.dark-mode .card{ background: #0e1b2a !important; color: #e6eef8 !important; box-shadow: none !important; border-color: #1c2331 !important; }
body.dark-mode .dashboard-cards .card{ background: #0e1b2a !important; border-color: #1c2331 !important; }
body.dark-mode .dashboard-cards .card h2{ color: #e6eef8 !important; }
body.dark-mode .dashboard-cards .card h6{ color: #94a3b8 !important; }
body.dark-mode .table{ color: #dbeafe }
body.dark-mode .btn-primary{ background: var(--primary); border-color: var(--primary) }
body.dark-mode .text-muted{ color: #94a3b8 !important; }
body.dark-mode small.text-muted{ color: #94a3b8 !important; }

/* Estilos para el modal de selección de período */
.modal-xl .modal-content{
    border-radius:12px;
    background: #f1fbff;
    border: 1px solid rgba(11,105,255,0.06);
}
body.dark-mode .modal-xl .modal-content{
    background: #0e1b2a;
    border: 1px solid #1c2331;
}
.modal-header{ border-bottom: 0; background: transparent; }
.modal-title{ font-weight:700; }
body.dark-mode .modal-title{ color: #e6eef8; }
.modal-body{ padding:1.5rem; }
.modal-body .form-label{ color: #0f172a; }
body.dark-mode .modal-body .form-label{ color: #e6eef8; }
body.dark-mode .modal-body .text-muted{ color: #94a3b8 !important; }
.modal-body input[type="date"], .modal-body .form-control{
    height:48px; padding: .6rem .75rem; border-radius:8px; box-shadow:none; border:1px solid rgba(15,23,42,0.06);
}
body.dark-mode .modal-body input[type="date"],
body.dark-mode .modal-body .form-control{
    background: #0b1220;
    border-color: #1c2331;
    color: #e6eef8;
}
body.dark-mode .modal-body input::placeholder{ color: #64748b; }
.modal-body .col-md-4{ min-height:200px }

/* Panel de presets en la derecha */
.btn-group-vertical .btn{
    text-align:center; border-radius:8px; padding:1rem 1.25rem; margin-bottom:.6rem; background:#fbfdff; border:1px solid rgba(15,23,42,0.04);
}
body.dark-mode .btn-group-vertical .btn{
    background: #0e1b2a;
    border-color: #1c2331;
    color: #e6eef8;
}
.btn-group-vertical .btn:hover{ background:#eef6ff }
body.dark-mode .btn-group-vertical .btn:hover{ background: #1c2331; }

/* Botones del modal */
.modal-footer{ border-top:0; display:flex; gap:.75rem; }
.modal .btn-primary{ background: #1e90ff; border-color:#1e90ff }
.modal .btn-secondary{ background:#6b7280; border-color:#6b7280 }
body.dark-mode .modal .btn-secondary{ background: #475569; border-color: #475569; color: #e6eef8; }

/* Flatpickr specific styles */
#fpRange .flatpickr-calendar.inline{ width:100%; background:transparent; box-shadow:none; border:none; overflow:visible; }
#fpRange .flatpickr-months{ display:flex; gap:32px; align-items:flex-start; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; padding:0 12px; padding-bottom:18px }
#fpRange { --fp-month-width: 344px; --fp-month-inner-pad: 16px; }
#fpRange .flatpickr-month{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; background:#f8fbfd; border-radius:10px; border:1px solid rgba(15,23,42,0.04); box-shadow:none; box-sizing:border-box; overflow:visible; min-width:var(--fp-month-width); padding:12px var(--fp-month-inner-pad) 8px; margin:0 20px }

#fpRange .flatpickr-month .flatpickr-current-month{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    white-space:nowrap;
    width: calc(var(--fp-month-width) - (var(--fp-month-inner-pad) * 2));
    background:#fbfdff;
    border-radius:10px;
    padding:10px 14px;
    box-sizing:border-box;
    margin-bottom:8px;
}
#fpRange .flatpickr-current-month .cur-month{ font-weight:800; font-size:1.05rem; display:inline-block }
body.dark-mode #fpRange .flatpickr-current-month .cur-month{ color: #e6eef8; }
#fpRange .flatpickr-current-month .flatpickr-monthDropdown-months,
#fpRange .flatpickr-current-month .flatpickr-year{ color:#0f172a }
body.dark-mode #fpRange .flatpickr-current-month .flatpickr-monthDropdown-months,
body.dark-mode #fpRange .flatpickr-current-month .flatpickr-year{ color: #e6eef8; background: #0b1220; }
#fpRange .flatpickr-current-month .numInputWrapper{ display:inline-block; vertical-align:middle; margin-left:.4rem }
#fpRange .flatpickr-weekdays{
    margin-bottom:.25rem;
    margin-top:8px;
}

#fpRange .flatpickr-months > .flatpickr-prev-month,
#fpRange .flatpickr-months > .flatpickr-next-month{ display:none !important }

.fp-local-prev, .fp-local-next{
    display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:transparent; color:rgba(15,23,42,0.6); cursor:pointer; margin:0 8px;
}
body.dark-mode .fp-local-prev,
body.dark-mode .fp-local-next{
    color: rgba(207,232,255,0.7);
}
.fp-local-prev:hover, .fp-local-next:hover{ background:rgba(0,0,0,0.03) }
body.dark-mode .fp-local-prev:hover,
body.dark-mode .fp-local-next:hover{ background: rgba(255,255,255,0.1); }

#fpRange .flatpickr-weekdays{ position:relative; z-index:1 }
#fpRange .flatpickr-weekday{ color: #6b7280; font-weight:700; font-size:.8rem }
body.dark-mode #fpRange .flatpickr-weekday{ color: #94a3b8; }
#fpRange .flatpickr-days{ display:flex; gap:6px 48px; align-items:flex-start; justify-content:center }

#fpRange .flatpickr-month,
body.dark-mode #fpRange .flatpickr-month{ background:#f8fbfd; }
body.dark-mode #fpRange .flatpickr-month{ background: #0b1220; border-color: #1c2331; }
#fpRange .flatpickr-month,
#fpRange .flatpickr-days,
#fpRange .flatpickr-day,
#fpRange .flatpickr-weekdaycontainer{
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

#fpRange .flatpickr-weekdaycontainer{ margin:0 auto }
#fpRange .flatpickr-day{ width:44px; height:44px; line-height:44px; display:flex; align-items:center; justify-content:center; margin:0; border-radius:6px; color:#0f172a; box-sizing:border-box }
body.dark-mode #fpRange .flatpickr-day{ color: #e6eef8; }
#fpRange .flatpickr-day.prevMonthDay, #fpRange .flatpickr-day.nextMonthDay{ color: rgba(15,23,42,0.35) }
body.dark-mode #fpRange .flatpickr-day.prevMonthDay,
body.dark-mode #fpRange .flatpickr-day.nextMonthDay{ color: rgba(207,232,255,0.35); }

#fpRange .flatpickr-day.inRange{ background: rgba(14,110,255,0.08); border-radius:8px; color:inherit }
#fpRange .flatpickr-day.startRange, #fpRange .flatpickr-day.endRange, #fpRange .flatpickr-day.selected{
    background: #0033cc !important;
    color: #fff !important;
    width:44px; height:44px; line-height:44px; border-radius:50% !important; font-weight:800; box-shadow:none !important; margin:0;
}

#fpRange .flatpickr-month:first-child{ margin-right:0 }
#fpRange .flatpickr-month:last-child{ margin-left:0 }

.modal-footer{ padding:1rem 1.25rem }

#fpRange{ min-height:360px }
#fpRange .flatpickr-calendar.inline{ display:block !important; }
#fpRange .flatpickr-month{ min-width:var(--fp-month-width) }
#fpRange .flatpickr-day{ display:flex; justify-content:center; align-items:center }
#fpRange .flatpickr-days .dayContainer{ display:grid !important; grid-template-columns: repeat(7, 44px); justify-content:center; gap:6px 6px; width: calc(var(--fp-month-width) - (var(--fp-month-inner-pad) * 2)); box-sizing:border-box; margin:0 auto }

#fpRange .flatpickr-months::before, #fpRange .flatpickr-months::after,
#fpRange .flatpickr-days::before, #fpRange .flatpickr-days::after{
    display:none !important;
}

#fpRange .flatpickr-calendar.inline{ padding:12px 28px }

#fpRange .flatpickr-months{ -webkit-overflow-scrolling: touch }

#fpRange .flatpickr-weekdaycontainer{
    box-sizing:border-box;
    display:grid;
    grid-template-columns: repeat(7, 44px);
    gap:6px;
    width: calc(var(--fp-month-width) - (var(--fp-month-inner-pad) * 2));
    margin: 0;
    justify-content:center;
    padding:0;
}

#fpRange .flatpickr-month + .flatpickr-month{ margin-left:40px }
#fpRange .flatpickr-months{ position:static }
#fpRange .flatpickr-months .flatpickr-prev-month,
#fpRange .flatpickr-months .flatpickr-next-month{
    position:static; display:flex; align-items:center; justify-content:center; color:rgba(15,23,42,0.6); margin:0 6px;
}

/* Inventory specific styles */
.panel-title{ font-size:2rem; font-weight:800 }
body.dark-mode .panel-title{ color: #e6eef8; }
.search-input .form-control{ height:52px; padding-left:.75rem; border-radius:10px; background:#fbfdff }
body.dark-mode .search-input .form-control{ background: #0b1220; border-color: #1c2331; color: #e6eef8; }
body.dark-mode .search-input .form-control::placeholder{ color: #64748b; }
.search-input .input-group-text{ border-radius:10px 0 0 10px }
.inventory-table thead th{ color:var(--muted); font-weight:700; border-bottom:0; background:transparent }
body.dark-mode .inventory-table thead th{ color: #94a3b8; }
.inventory-table tbody tr{ background: #fbfdff }
body.dark-mode .inventory-table tbody tr{ background: #0e1b2a; }
.inventory-table tbody tr:hover{ background:#eef7ff }
body.dark-mode .inventory-table tbody tr:hover{ background: #1c2331; }
.inventory-table td, .inventory-table th{ vertical-align:middle; padding:1rem 1.25rem }
body.dark-mode .inventory-table td{ color: #e6eef8; }
.inventory-table .badge.bg-success{ background:#10b981 }
.inventory-table .text-end a{ color: rgba(15,23,42,0.55) }
body.dark-mode .inventory-table .text-end a{ color: rgba(207,232,255,0.6); }

.inventory-table tbody tr.expiring td{ color:#b91c1c; font-weight:700 }

.card.p-3{ background: #ffffff; box-shadow: var(--card-shadow); border: 1px solid rgba(0,0,0,0.04); }
body.dark-mode .card.p-3{ background: #0e1b2a; border-color: #1c2331; }
body.dark-mode .card h6{ color: #94a3b8 !important; }
body.dark-mode .card .text-muted{ color: #94a3b8 !important; }
body.dark-mode .card small{ color: #94a3b8 !important; }
.panel-header .text-muted{ display:block; margin-top:6px }
body.dark-mode .panel-header .text-muted{ color: #94a3b8 !important; }

@media (max-width: 575px){
    .login-card{ width: 100% !important; box-shadow: none }
}

@media (max-width: 991px){
    .login-page{ flex-direction:column; gap:2rem; padding-top:4vh }
    .login-page .text-center{ text-align:center }
}
@media (max-width: 991px){
.search-input .form-control{ height:44px }
}

/* Form styles for dark mode */
body.dark-mode .form-label{ color: #e6eef8 !important; }
body.dark-mode .form-control{ background: #0b1220; border-color: #1c2331; color: #e6eef8; }
body.dark-mode .form-control::placeholder{ color: #64748b; }
body.dark-mode .form-select{ background: #0b1220; border-color: #1c2331; color: #e6eef8; }
body.dark-mode .input-group-text{ background: #1c2331; border-color: #1c2331; color: #e6eef8; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6{ color: #e6eef8; }
body.dark-mode p{ color: #e6eef8; }
body.dark-mode label{ color: #e6eef8; }
body.dark-mode a:not(.nav-link):not(.btn){ color: #4ea8ff; }
body.dark-mode .dropdown-menu{ background: #0e1b2a; border-color: #1c2331; }
body.dark-mode .dropdown-item{ color: #e6eef8; }
body.dark-mode .dropdown-item:hover{ background: #1c2331; }
body.dark-mode .dropdown-header{ color: #94a3b8; }
body.dark-mode hr{ border-color: #1c2331; }
body.dark-mode .alert{ background: #0e1b2a; border-color: #1c2331; color: #e6eef8; }
/* Table light/dark fixes */
body.dark-mode .table-light { background: #1c2331 !important; color: #e6eef8 !important; }
body.dark-mode .table-light th { background: #1c2331 !important; color: #e6eef8 !important; }
body.dark-mode .table-bordered { border-color: #1c2331; }
body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td { border-color: #1c2331; }

/* Background light in dark mode */
body.dark-mode .bg-light { background: #0b1220 !important; color: #e6eef8 !important; }
body.dark-mode .border { border-color: #1c2331 !important; }

/* Alert secondary */
body.dark-mode .alert-secondary { background: #1c2331; border-color: #334155; color: #e6eef8; }

/* Form text */
body.dark-mode .form-text { color: #94a3b8; }

/* List group */
body.dark-mode .list-group-item { background: transparent; color: #e6eef8; border-color: #1c2331; }
body.dark-mode .list-group-item.text-muted { color: #94a3b8 !important; }

/* Badges */
body.dark-mode .badge.bg-warning { background: #d97706 !important; color: #fff !important; }
body.dark-mode .badge.text-dark { color: #fff !important; }

/* Button light */
body.dark-mode .btn-light { background: #1c2331; border-color: #334155; color: #e6eef8; }
body.dark-mode .btn-light:hover { background: #334155; border-color: #475569; color: #e6eef8; }

/* Modal header */
body.dark-mode .modal-header.bg-primary { background: #0b69ff !important; }
body.dark-mode .modal-header.bg-primary .modal-title { color: #fff !important; }

/* Table styles for inventory */
body.dark-mode .table { --bs-table-bg: transparent; --bs-table-color: #e6eef8; }
body.dark-mode .table th { color: #94a3b8 !important; }

/* ====== COMPREHENSIVE MODAL DARK MODE STYLES ====== */

/* Base modal content - all modals */
body.dark-mode .modal-content {
    background: #0e1b2a !important;
    border-color: #1c2331 !important;
    color: #e6eef8 !important;
}

/* Modal header (non-bg-primary) */
body.dark-mode .modal-header:not(.bg-primary) {
    background: #0e1b2a !important;
    border-bottom-color: #1c2331 !important;
}
body.dark-mode .modal-header:not(.bg-primary) .modal-title {
    color: #e6eef8 !important;
}

/* Modal body */
body.dark-mode .modal-body {
    background: #0e1b2a !important;
    color: #e6eef8 !important;
}

/* Modal footer */
body.dark-mode .modal-footer {
    background: #0e1b2a !important;
    border-top-color: #1c2331 !important;
}

/* Close button */
body.dark-mode .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
body.dark-mode .modal-header.bg-primary .btn-close {
    filter: none;
}

/* ====== POS MODAL STYLES (Nueva Cotización, Verificador, etc) ====== */

/* POS specific sections */
body.dark-mode .modal .bg-white,
body.dark-mode .modal [style*="background: #fff"],
body.dark-mode .modal [style*="background:#fff"] {
    background: #0e1b2a !important;
}

/* Modal search inputs */
body.dark-mode .modal .search-input .form-control,
body.dark-mode .modal input[type="search"] {
    background: #0b1220 !important;
    border-color: #1c2331 !important;
    color: #e6eef8 !important;
}

/* Modal table headers */
body.dark-mode .modal .table thead th,
body.dark-mode .modal .table-light {
    background: #1c2331 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

/* Modal table body */
body.dark-mode .modal .table tbody td {
    color: #e6eef8 !important;
    border-color: #1c2331 !important;
}
body.dark-mode .modal .table tbody tr {
    background: #0e1b2a !important;
}
body.dark-mode .modal .table tbody tr:hover {
    background: #1c2331 !important;
}

/* Empty state / placeholder text */
body.dark-mode .modal .text-center.text-muted,
body.dark-mode .modal .empty-state {
    color: #94a3b8 !important;
}

/* ====== PAYMENT MODAL (Finalizar Venta) ====== */

/* Payment method buttons container */
body.dark-mode .modal .payment-methods,
body.dark-mode .modal .metodo-pago-container {
    background: #0b1220 !important;
}

/* Payment method buttons */
body.dark-mode .modal .btn-metodo-pago,
body.dark-mode .modal .payment-method-btn {
    background: #1c2331 !important;
    border-color: #334155 !important;
    color: #e6eef8 !important;
}
body.dark-mode .modal .btn-metodo-pago:hover,
body.dark-mode .modal .payment-method-btn:hover {
    background: #334155 !important;
}
body.dark-mode .modal .btn-metodo-pago.active,
body.dark-mode .modal .payment-method-btn.active {
    background: #0b69ff !important;
    border-color: #0b69ff !important;
    color: #fff !important;
}

/* Payment info boxes */
body.dark-mode .modal .payment-info,
body.dark-mode .modal .order-details,
body.dark-mode .modal .detalle-orden {
    background: #1c2331 !important;
    color: #e6eef8 !important;
}

/* Total display */
body.dark-mode .modal .total-display,
body.dark-mode .modal .total-amount {
    color: #4ea8ff !important;
}
body.dark-mode .modal .change-display,
body.dark-mode .modal .cambio {
    color: #34d399 !important;
}

/* ====== FACTURA PREVIEW MODAL ====== */

/* Receipt/preview container */
body.dark-mode .modal .factura-preview,
body.dark-mode .modal .receipt-container,
body.dark-mode .modal .ticket-preview {
    background: #ffffff !important; /* Keep white for printing */
    color: #0f172a !important;
}

/* Actions panel (right side) */
body.dark-mode .modal .acciones-panel,
body.dark-mode .modal .actions-panel {
    background: #0e1b2a !important;
}
body.dark-mode .modal .action-card,
body.dark-mode .modal .action-btn-card {
    background: #1c2331 !important;
    border-color: #334155 !important;
}
body.dark-mode .modal .action-card:hover,
body.dark-mode .modal .action-btn-card:hover {
    background: #334155 !important;
}
body.dark-mode .modal .action-card h5,
body.dark-mode .modal .action-card h6 {
    color: #e6eef8 !important;
}
body.dark-mode .modal .action-card small,
body.dark-mode .modal .action-card .text-muted {
    color: #94a3b8 !important;
}

/* Success/info boxes */
body.dark-mode .modal .alert-success {
    background: #064e3b !important;
    border-color: #065f46 !important;
    color: #34d399 !important;
}
body.dark-mode .modal .alert-info {
    background: #1e3a8a !important;
    border-color: #1d4ed8 !important;
    color: #93c5fd !important;
}

/* ====== ALERT/DIALOG MODALS (Producto no seleccionado) ====== */

/* Alert modal content */
body.dark-mode .modal.alert-modal .modal-content,
body.dark-mode .modal-dialog.alert-modal .modal-content {
    background: #0e1b2a !important;
}

/* Warning icon background */
body.dark-mode .modal .icon-warning,
body.dark-mode .modal .warning-icon {
    color: #f59e0b !important;
}

/* ====== CREATION MODALS (Principio Activo, Presentaciones, etc) ====== */

/* Form cards in modals */
body.dark-mode .modal .form-section,
body.dark-mode .modal .creation-form {
    background: #0e1b2a !important;
}

/* Select/dropdown in modals */
body.dark-mode .modal .form-select {
    background: #0b1220 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6eef8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px !important;
    border-color: #1c2331 !important;
    color: #e6eef8 !important;
}

/* ====== QUOTATION MODAL SPECIFIC ====== */

/* Quotation items */
body.dark-mode .modal .cotizacion-item,
body.dark-mode .modal .quote-item {
    background: #1c2331 !important;
    border-color: #334155 !important;
}
body.dark-mode .modal .cotizacion-item .item-name,
body.dark-mode .modal .quote-item .item-name {
    color: #e6eef8 !important;
}
body.dark-mode .modal .cotizacion-item .item-price,
body.dark-mode .modal .quote-item .item-price {
    color: #4ea8ff !important;
}

/* Quotation total row */
body.dark-mode .modal .quote-total-row,
body.dark-mode .modal .total-row {
    background: #1c2331 !important;
    border-top-color: #334155 !important;
}
body.dark-mode .modal .quote-total-row td,
body.dark-mode .modal .total-row td {
    color: #e6eef8 !important;
    font-weight: 600;
}

/* Empty cart/message states */
body.dark-mode .modal .empty-cart,
body.dark-mode .modal .no-items,
body.dark-mode .modal .empty-state-message {
    color: #94a3b8 !important;
}
body.dark-mode .modal .empty-cart i,
body.dark-mode .modal .no-items i {
    color: #64748b !important;
}

/* ====== PRICE CHECKER MODAL SPECIFIC ====== */

/* Price display */
body.dark-mode .modal .precio-display,
body.dark-mode .modal .price-display {
    color: #34d399 !important;
}

/* Scan input highlight */
body.dark-mode .modal .scan-input:focus,
body.dark-mode .modal .codigo-input:focus {
    border-color: #0b69ff !important;
    box-shadow: 0 0 0 0.25rem rgba(11, 105, 255, 0.25) !important;
}

/* Product info display */
body.dark-mode .modal .producto-info,
body.dark-mode .modal .product-info {
    background: #1c2331 !important;
}
body.dark-mode .modal .producto-info .nombre,
body.dark-mode .modal .product-info .name {
    color: #e6eef8 !important;
}
body.dark-mode .modal .producto-info .precio,
body.dark-mode .modal .product-info .price {
    color: #34d399 !important;
}