/* ==========================================================================
   VALIMP PREMIUM INDUSTRIAL DESIGN SYSTEM
   ========================================================================== */

/* Smooth Animations */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-scaleIn {
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fadeIn {
    animation: fadeIn 0.2s ease forwards;
}

/* Skeleton Loading Shimmer */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Category Pill Styling */
.category-pill {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-pill:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

.category-pill.active {
    background-color: #0284c7 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.39);
}

/* Product Card High Polish */
.product-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.1), 0 2px 6px -1px rgba(15, 23, 42, 0.05);
    border-color: #38bdf8;
}

.product-card:hover .product-img {
    transform: scale(1.06);
}

.product-img {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Toast Notification */
#valimpToast {
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Line clamps */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pinned Cart Sidebar Mode */
@media (min-width: 1024px) {
    body.cart-pinned {
        padding-right: 440px;
        transition: padding-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body.cart-pinned #mainHeader {
        padding-right: 440px;
        transition: padding-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body.cart-pinned #productModal {
        right: 440px !important;
        width: calc(100vw - 440px) !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    body.cart-pinned #cartDrawer {
        display: block !important;
        pointer-events: none;
        z-index: 55;
    }
    body.cart-pinned #cartBackdrop {
        display: none !important;
        pointer-events: none !important;
    }
    body.cart-pinned #cartDrawerContainer {
        pointer-events: auto;
        box-shadow: -8px 0 25px -5px rgba(15, 23, 42, 0.12);
        border-left: 1px solid #cbd5e1;
    }
}

/* Cart Item Added Pulse Effect */
@keyframes itemPulse {
    0% { transform: scale(1); background-color: #f0fdf4; border-color: #86efac; }
    50% { transform: scale(1.02); background-color: #dcfce7; border-color: #4ade80; }
    100% { transform: scale(1); }
}

.item-just-added {
    animation: itemPulse 0.6s ease forwards;
}

/* Print CSS for Formal B2B Quote Sheet */
@media print {
    @page {
        size: letter portrait;
        margin: 12mm 15mm;
    }
    
    html, body {
        background: #ffffff !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body > *:not(#printableQuote) {
        display: none !important;
    }

    #printableQuote {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #0f172a !important;
    }

    #printableQuote * {
        visibility: visible !important;
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    tr, td, th {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

/* Subcategories Horizontal Scroll Fade & Smooth Interaction */
.subcat-scroll-fade {
    mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

.subcat-scroll-fade-both {
    mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

.subcat-tab-btn {
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.subcat-tab-btn:hover:not(.active) {
    background-color: #e2e8f0;
    color: #0f172a;
    transform: translateY(-1px);
}

.subcat-tab-btn.active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px -2px rgba(2, 132, 199, 0.35);
}

/* Filter Chip Dismiss Animation */
.filter-chip {
    animation: scaleIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Category Accordion */
.category-tree-item {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ==========================================================================
   DARK MODE ADAPTIVE STYLING (MODERN WEB GUIDANCE)
   ========================================================================== */

:root {
    color-scheme: light dark;
}

html.dark {
    color-scheme: dark;
}

/* Dark mode scrollbars */
html.dark ::-webkit-scrollbar-track {
    background: #090d16;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Dark mode skeleton loading */
html.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

/* Dark mode subcategory tab buttons */
html.dark .subcat-tab-btn:not(.active) {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark .subcat-tab-btn:hover:not(.active) {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

html.dark .subcat-tab-btn.active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px -1px rgba(2, 132, 199, 0.5) !important;
}

/* Dark mode sidebar categories */
html.dark #sidebarCategoriesList [data-sidebar-cat]:not(.font-extrabold) {
    color: #cbd5e1;
}

html.dark #sidebarCategoriesList [data-sidebar-cat]:not(.font-extrabold):hover {
    background-color: rgba(30, 41, 59, 0.7);
    color: #ffffff;
}

html.dark .category-tree-item {
    border-color: rgba(51, 65, 85, 0.5);
}

/* Dark mode pinned cart sidebar */
@media (min-width: 1024px) {
    html.dark body.cart-pinned #cartDrawerContainer {
        box-shadow: -8px 0 25px -5px rgba(0, 0, 0, 0.5);
        border-left: 1px solid #1e293b;
    }
}

/* Dark mode product card hover enhancement */
html.dark .product-card:hover {
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.4), 0 0 15px 0 rgba(14, 165, 233, 0.15);
    border-color: #0284c7;
}

/* Supplier product images on dark mode cards: give subtle luminous contrast */
html.dark .product-img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* ==========================================================================
   VALIMP PRO ERP - MODO CLARO (LIGHT THEME STYLESHEET)
   Estética ejecutiva, limpia y de alto contraste (tipo Linear / Supabase / Stripe)
   ========================================================================== */

html.light-mode {
    color-scheme: light;
}

html.light-mode body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html.light-mode main {
    background-color: #f8fafc !important;
}

/* 1. SIDEBAR ERP */
html.light-mode #adminSidebar {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.03) !important;
}

html.light-mode #adminSidebar .sidebar-header-wrapper {
    border-color: #e2e8f0 !important;
}

html.light-mode #adminSidebar .sidebar-text span.text-white {
    color: #0f172a !important;
}

html.light-mode #adminSidebar .sidebar-group-title {
    color: #94a3b8 !important;
    font-weight: 800 !important;
}

html.light-mode #adminSidebar .sidebar-item {
    color: #475569 !important;
}

html.light-mode #adminSidebar .sidebar-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light-mode #adminSidebar .sidebar-item.bg-sky-500\/15 {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    border-color: #7dd3fc !important;
}

html.light-mode #adminSidebar .sidebar-item.bg-amber-500\/15 {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
    border-color: #fcd34d !important;
}

html.light-mode #adminSidebar .sidebar-footer-wrapper {
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

/* 2. HEADER MINIMALISTA */
html.light-mode header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html.light-mode #adminBreadcrumbs span.text-slate-500,
html.light-mode #adminBreadcrumbs span#breadcrumbModule {
    color: #64748b !important;
}

html.light-mode #adminBreadcrumbs span#breadcrumbSection {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.light-mode #sidebarToggleBtn {
    color: #64748b !important;
}

html.light-mode #sidebarToggleBtn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light-mode header button[onclick="openCommandPalette()"] {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}

html.light-mode header button[onclick="openCommandPalette()"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light-mode header button[onclick="openCommandPalette()"] kbd {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html.light-mode #adminUserChip {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light-mode #adminUserChip:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

html.light-mode #adminUsernameDisplay {
    color: #0f172a !important;
}

html.light-mode #adminThemeToggleBtn {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

html.light-mode #adminThemeToggleBtn:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 3. SURFACES & CONTENEDORES (CON SOPORTE UNIVERSAL PARA OPACIDADES TAILWIND) */
html.light-mode .bg-dark-900,
html.light-mode [class*="bg-dark-900"],
html.light-mode .bg-slate-900,
html.light-mode [class*="bg-slate-900"],
html.light-mode .bg-slate-950,
html.light-mode [class*="bg-slate-950"],
html.light-mode .bg-dark-950,
html.light-mode [class*="bg-dark-950"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .bg-dark-850,
html.light-mode [class*="bg-dark-850"],
html.light-mode .bg-slate-850,
html.light-mode [class*="bg-slate-850"],
html.light-mode .bg-slate-800,
html.light-mode [class*="bg-slate-800"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light-mode .bg-slate-700,
html.light-mode [class*="bg-slate-700"] {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html.light-mode .border-slate-800,
html.light-mode [class*="border-slate-800"],
html.light-mode .border-slate-700,
html.light-mode [class*="border-slate-700"] {
    border-color: #e2e8f0 !important;
}

/* 4. FORM CONTROLS (INPUTS, SELECTS, TEXTAREAS) */
html.light-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.light-mode select,
html.light-mode textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
    color: #94a3b8 !important;
}

html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
}

html.light-mode select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* 5. TIPOGRAFÍA & CONTRASTE */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5 {
    color: #0f172a !important;
}

html.light-mode .text-white,
html.light-mode .text-slate-100 {
    color: #0f172a !important;
}

html.light-mode .text-slate-200,
html.light-mode .text-slate-300 {
    color: #334155 !important;
}

html.light-mode .text-slate-400 {
    color: #64748b !important;
}

html.light-mode .text-slate-500 {
    color: #64748b !important;
}

/* Excepciones protegidas: Botones con fondo de color mantienen texto blanco */
html.light-mode .bg-sky-600,
html.light-mode .bg-sky-500,
html.light-mode .bg-blue-600,
html.light-mode .bg-emerald-600,
html.light-mode .bg-rose-600,
html.light-mode .bg-indigo-600,
html.light-mode .bg-purple-600,
html.light-mode .bg-amber-600,
html.light-mode .bg-teal-600,
html.light-mode .bg-gradient-to-r {
    color: #ffffff !important;
}

html.light-mode .bg-sky-600 *,
html.light-mode .bg-sky-500 *,
html.light-mode .bg-blue-600 *,
html.light-mode .bg-emerald-600 *,
html.light-mode .bg-rose-600 *,
html.light-mode .bg-indigo-600 *,
html.light-mode .bg-purple-600 *,
html.light-mode .bg-amber-600 *,
html.light-mode .bg-teal-600 *,
html.light-mode .bg-gradient-to-r * {
    color: #ffffff !important;
}

/* Acentos de color en textos para mayor contraste en fondo claro */
html.light-mode .text-sky-400,
html.light-mode .text-sky-300 {
    color: #0284c7 !important;
}

html.light-mode .text-emerald-400,
html.light-mode .text-emerald-300 {
    color: #059669 !important;
}

html.light-mode .text-amber-400,
html.light-mode .text-amber-300 {
    color: #d97706 !important;
}

html.light-mode .text-rose-400,
html.light-mode .text-rose-300 {
    color: #e11d48 !important;
}

html.light-mode .text-purple-400,
html.light-mode .text-purple-300 {
    color: #7c3aed !important;
}

html.light-mode .text-cyan-400,
html.light-mode .text-cyan-300 {
    color: #0891b2 !important;
}

/* 6. TABLAS DE DATOS */
html.light-mode table thead,
html.light-mode table thead tr,
html.light-mode table thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

html.light-mode table thead button {
    color: #475569 !important;
}

html.light-mode table thead button:hover {
    color: #0f172a !important;
}

html.light-mode table thead button span.text-amber-300 {
    color: #b45309 !important;
}

html.light-mode table thead button span.text-sky-300 {
    color: #0369a1 !important;
}

html.light-mode table tbody tr {
    background-color: #ffffff !important;
    border-color: #f1f5f9 !important;
}

html.light-mode table tbody tr:hover {
    background-color: #f8fafc !important;
}

html.light-mode table tbody td {
    border-color: #f1f5f9 !important;
    color: #334155 !important;
}

html.light-mode table tbody td h4,
html.light-mode table tbody td span.font-bold {
    color: #0f172a !important;
}

html.light-mode .divide-slate-800,
html.light-mode .divide-slate-700 {
    border-color: #f1f5f9 !important;
}

/* 7. CHIPS & BADGES */
html.light-mode .admin-status-chip:not(.bg-sky-600) {
    background-color: #ffffff !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

html.light-mode .admin-status-chip:not(.bg-sky-600):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light-mode .bg-sky-950,
html.light-mode .bg-sky-950\/40,
html.light-mode .bg-sky-950\/60,
html.light-mode .bg-sky-950\/70,
html.light-mode .bg-sky-950\/80,
html.light-mode .bg-sky-900,
html.light-mode .bg-sky-500\/15,
html.light-mode .bg-sky-500\/20 {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
}

html.light-mode .bg-emerald-950,
html.light-mode .bg-emerald-950\/40,
html.light-mode .bg-emerald-950\/60,
html.light-mode .bg-emerald-950\/70,
html.light-mode .bg-emerald-950\/80,
html.light-mode .bg-emerald-900,
html.light-mode .bg-emerald-500\/15,
html.light-mode .bg-emerald-500\/20 {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #6ee7b7 !important;
}

html.light-mode .bg-amber-950,
html.light-mode .bg-amber-950\/40,
html.light-mode .bg-amber-950\/60,
html.light-mode .bg-amber-950\/70,
html.light-mode .bg-amber-950\/80,
html.light-mode .bg-amber-900,
html.light-mode .bg-amber-500\/15,
html.light-mode .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}

html.light-mode .bg-rose-950,
html.light-mode .bg-rose-950\/40,
html.light-mode .bg-rose-950\/60,
html.light-mode .bg-rose-950\/70,
html.light-mode .bg-rose-950\/80,
html.light-mode .bg-rose-900,
html.light-mode .bg-rose-500\/15,
html.light-mode .bg-rose-500\/20 {
    background-color: #ffe4e6 !important;
    color: #9f1239 !important;
    border-color: #fda4af !important;
}

html.light-mode .bg-purple-950,
html.light-mode .bg-purple-950\/40,
html.light-mode .bg-purple-950\/60,
html.light-mode .bg-purple-950\/70,
html.light-mode .bg-purple-950\/80,
html.light-mode .bg-purple-900,
html.light-mode .bg-purple-500\/15,
html.light-mode .bg-purple-500\/20 {
    background-color: #f3e8ff !important;
    color: #6b21a8 !important;
    border-color: #d8b4fe !important;
}

html.light-mode .bg-indigo-950,
html.light-mode .bg-indigo-950\/40,
html.light-mode .bg-indigo-950\/60,
html.light-mode .bg-indigo-950\/70,
html.light-mode .bg-indigo-950\/80,
html.light-mode .bg-indigo-900,
html.light-mode .bg-indigo-500\/15,
html.light-mode .bg-indigo-500\/20 {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
    border-color: #a5b4fc !important;
}

/* 8. MODALES & DIÁLOGOS DE GESTIÓN (ALTA FIDELIDAD & CONTRASTE) */
/* 8.1 Fondo Backdrop con desenfoque suave tipo macOS / Linear */
html.light-mode [id*="Modal"] {
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
}

/* 8.2 Ventana del Diálogo / Card Principal */
html.light-mode [id*="Modal"] > div {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
}

/* 8.3 Encabezados de Modales (Header) */
html.light-mode [id*="Modal"] > div > div:first-child,
html.light-mode [id*="Modal"] [class*="border-b"]:not(table):not(thead):not(tr):not(th):not(td) {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 8.4 Pie de Modales (Footer con acciones) */
html.light-mode [id*="Modal"] > div > div:last-child,
html.light-mode [id*="Modal"] [class*="border-t"]:not(table):not(thead):not(tr):not(th):not(td) {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* 8.5 Agrupadores y Contenedores de Sección dentro del Modal */
html.light-mode [id*="Modal"] [class*="bg-slate-800"],
html.light-mode [id*="Modal"] [class*="bg-dark-950"] {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* 8.6 Sub-tarjetas de datos (Datos de Facturación, Métricas de Tesorería, Totales) */
html.light-mode [id*="Modal"] [class*="bg-dark-900"],
html.light-mode [id*="Modal"] [class*="bg-slate-900"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* 8.7 Tipografía y Etiquetas dentro de Sub-tarjetas */
html.light-mode [id*="Modal"] .text-slate-400,
html.light-mode [id*="Modal"] .text-slate-500 {
    color: #64748b !important;
}

html.light-mode [id*="Modal"] .text-slate-200,
html.light-mode [id*="Modal"] .text-slate-300 {
    color: #334155 !important;
}

html.light-mode [id*="Modal"] .text-white,
html.light-mode [id*="Modal"] .text-slate-100 {
    color: #0f172a !important;
}

/* Valores Clave en Modales: RUT Empresa, Saldos, Abonos y Totales */
html.light-mode [id*="Modal"] #modalQuoteRut,
html.light-mode [id*="Modal"] .text-amber-300,
html.light-mode [id*="Modal"] .text-amber-400 {
    color: #b45309 !important;
}

html.light-mode [id*="Modal"] #modalQuoteDetailPaidAmount,
html.light-mode [id*="Modal"] .text-emerald-400,
html.light-mode [id*="Modal"] .text-emerald-300 {
    color: #047857 !important;
}

html.light-mode [id*="Modal"] #modalQuoteTotalBruto,
html.light-mode [id*="Modal"] .text-sky-300,
html.light-mode [id*="Modal"] .text-sky-400 {
    color: #0284c7 !important;
}

/* 8.8 Tablas de Artículos dentro de Modales */
html.light-mode [id*="Modal"] table thead th {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.light-mode [id*="Modal"] table tbody tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html.light-mode [id*="Modal"] table tbody tr:hover {
    background-color: #f8fafc !important;
}

html.light-mode [id*="Modal"] table tbody td {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* 8.9 Botones Secundarios y de Cierre dentro de Modales */
html.light-mode [id*="Modal"] button[onclick*="close"],
html.light-mode [id*="Modal"] button[class*="bg-slate-800"],
html.light-mode [id*="Modal"] button[class*="bg-slate-900"],
html.light-mode [id*="Modal"] button.bg-slate-800 {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

html.light-mode [id*="Modal"] button[onclick*="close"]:hover,
html.light-mode [id*="Modal"] button[class*="bg-slate-800"]:hover,
html.light-mode [id*="Modal"] button[class*="bg-slate-900"]:hover,
html.light-mode [id*="Modal"] button.bg-slate-800:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* 8.10 Protección de Botones de Acción Primarios (Guardar, Registrar Abono, Confirmar) */
html.light-mode [id*="Modal"] button.bg-emerald-600,
html.light-mode [id*="Modal"] button[class*="bg-emerald-600"],
html.light-mode [id*="Modal"] button.bg-sky-600,
html.light-mode [id*="Modal"] button[class*="bg-sky-600"],
html.light-mode [id*="Modal"] button.bg-amber-600,
html.light-mode [id*="Modal"] button[class*="bg-amber-600"],
html.light-mode [id*="Modal"] button.bg-amber-500,
html.light-mode [id*="Modal"] button[class*="bg-amber-500"],
html.light-mode [id*="Modal"] button.bg-blue-600,
html.light-mode [id*="Modal"] button[class*="bg-blue-600"] {
    color: #ffffff !important;
    border: none !important;
}

html.light-mode [id*="Modal"] button.bg-emerald-600 *,
html.light-mode [id*="Modal"] button[class*="bg-emerald-600"] *,
html.light-mode [id*="Modal"] button.bg-sky-600 *,
html.light-mode [id*="Modal"] button[class*="bg-sky-600"] *,
html.light-mode [id*="Modal"] button.bg-amber-600 *,
html.light-mode [id*="Modal"] button[class*="bg-amber-600"] *,
html.light-mode [id*="Modal"] button.bg-amber-500 *,
html.light-mode [id*="Modal"] button[class*="bg-amber-500"] *,
html.light-mode [id*="Modal"] button.bg-blue-600 *,
html.light-mode [id*="Modal"] button[class*="bg-blue-600"] * {
    color: #ffffff !important;
}

/* 8.11 Inputs y Selects dentro de Modales */
html.light-mode [id*="Modal"] select,
html.light-mode [id*="Modal"] input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-mode [id*="Modal"] select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* 8.12 Command Palette Global */
html.light-mode #commandPaletteModal .bg-dark-900 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

html.light-mode #commandPaletteModal input#commandPaletteInput {
    color: #0f172a !important;
}

html.light-mode #commandPaletteResults > div:hover,
html.light-mode #commandPaletteResults > div[class*="bg-sky-500/15"] {
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
}

html.light-mode #commandPaletteResults span.text-white {
    color: #0f172a !important;
}

/* 9. KANBAN DE COTIZACIONES */
html.light-mode #quotesKanbanView .grid > div {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html.light-mode #quotesKanbanView .grid > div > div:first-child {
    border-bottom-color: #e2e8f0 !important;
}

html.light-mode [id^="kanbanCards_"] > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06) !important;
}

html.light-mode [id^="kanbanCards_"] > div:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08) !important;
}

/* 10. KANBAN DRAG & DROP */
.kanban-card-draggable {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: element;
    touch-action: manipulation;
}

.kanban-card-draggable:active {
    cursor: grabbing;
}

.kanban-card-dragging {
    opacity: 0.4 !important;
    transform: scale(0.97) !important;
    border-style: dashed !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.kanban-column-drag-over {
    border-color: #38bdf8 !important;
    background-color: rgba(14, 165, 233, 0.08) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.15s ease-in-out !important;
}

html.light-mode .kanban-column-drag-over {
    border-color: #0284c7 !important;
    background-color: rgba(2, 132, 199, 0.06) !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.4), 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}