/* ══════════════════════════════════════════════════
           MANEKI STORE — PREMIUM DESIGN SYSTEM v3.0
           Paleta: Cream + Dorado + Lila + Peach (Maneki Web)
        ══════════════════════════════════════════════════ */
        /* BUG #11 FIX: @import eliminado — fuentes ya cargadas vía <link> arriba,
           duplicar la petición añade ~400ms de latencia extra en cada carga. */

        :root {
            /* ── PALETA MANEKI WEB ── */
            --gold:       #C9933A;
            --gold-lt:    #F5DFA8;
            --gold-bg:    #FDF6E3;
            --peach:      #F2A97E;
            --peach-dk:   #D97B4A;
            --peach-lt:   #FDE8D8;
            --peach-bg:   #FFF5EF;
            --lila:       #C4A8E0;
            --lila-dk:    #9B7BC4;
            --lila-lt:    #EDE5F8;
            --lila-bg:    #F7F3FD;
            --rose:       #E8A0B4;
            --rose-lt:    #FCEDF3;
            --cream:      #FBF8F3;
            --ink:        #2A1A0E;
            --ink2:       #5C3D1E;
            --ink3:       #9B7B5A;

            /* Escala dorada (compatibilidad interna) */
            --mk-gold-900:   #4A2F06;
            --mk-gold-700:   #7A5010;
            --mk-gold-600:   #92620A;
            --mk-gold-500:   #C9933A;
            --mk-gold-400:   #E8B84B;
            --mk-gold-300:   #F5DFA8;
            --mk-gold-200:   #FDF6E3;
            --mk-gold-100:   #FDF6E3;
            --mk-gold-50:    #FFFBF0;

            /* Escala lila (reemplaza púrpura) */
            --mk-purple-950: #2A1A3E;
            --mk-purple-900: #3B2659;
            --mk-purple-800: #4E3470;
            --mk-purple-700: #6B4A8E;
            --mk-purple-600: #8A64A8;
            --mk-purple-500: #9B7BC4;
            --mk-purple-400: #C4A8E0;
            --mk-purple-300: #D8C4EE;
            --mk-purple-200: #EDE5F8;
            --mk-purple-100: #F7F3FD;
            --mk-purple-50:  #FDFCFF;

            /* Semánticos */
            --color-gold:        var(--gold);
            --color-purple:      var(--lila);
            --color-dark-purple: var(--lila-dk);
            --color-light-purple:var(--lila-lt);

            /* Superficies */
            --surface-primary:   #FFFFFF;
            --surface-secondary: var(--cream);
            --surface-elevated:  rgba(255,255,255,0.92);
            --surface-overlay:   rgba(201,147,58,0.04);

            /* Texto */
            --text-primary:   var(--ink);
            --text-secondary: var(--ink2);
            --text-muted:     var(--ink3);
            --text-placeholder: rgba(155,123,90,0.5);

            /* Bordes */
            --border-subtle:  rgba(201,147,58,0.1);
            --border-default: rgba(201,147,58,0.18);
            --border-strong:  rgba(201,147,58,0.35);

            /* Sombras premium (multicapa cálidas) */
            --shadow-xs:  0 1px 2px rgba(42,26,14,0.05);
            --shadow-sm:  0 2px 8px rgba(42,26,14,0.07), 0 1px 2px rgba(42,26,14,0.04);
            --shadow-md:  0 4px 16px rgba(42,26,14,0.08), 0 2px 6px rgba(201,147,58,0.06), 0 1px 2px rgba(42,26,14,0.04);
            --shadow-lg:  0 12px 32px rgba(42,26,14,0.10), 0 4px 12px rgba(201,147,58,0.08), 0 1px 3px rgba(42,26,14,0.05);
            --shadow-xl:  0 24px 56px rgba(42,26,14,0.12), 0 8px 24px rgba(201,147,58,0.09), 0 2px 8px rgba(0,0,0,0.04);
            --shadow-2xl: 0 40px 80px rgba(42,26,14,0.14), 0 16px 40px rgba(201,147,58,0.10), 0 4px 12px rgba(0,0,0,0.05);

            /* Inset highlight (efecto vidrio) */
            --inset-top:    inset 0 1.5px 0 rgba(255,255,255,0.85);
            --inset-top-sm: inset 0 1px 0 rgba(255,255,255,0.7);

            /* Motion — mismo sistema que la web premium */
            --spring: cubic-bezier(0.34,1.56,0.64,1);
            --out:    cubic-bezier(0.16,1,0.3,1);
            --snap:   cubic-bezier(0.22,1,0.36,1);
            --ease:   cubic-bezier(0.4,0,0.2,1);
            --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
            --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);

            /* Texto */
            --text-xs:   0.72rem;
            --text-sm:   0.83rem;
            --text-base: 0.94rem;

            /* Radios */
            --r-sm: 10px;
            --r-md: 16px;
            --r-lg: 20px;
            --r-xl: 24px;
            --r-2xl:32px;
        }

        /* ── FUENTES GLOBALES ── */
        *, *::before, *::after {
            font-family: 'Outfit', system-ui, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            box-sizing: border-box;
        }
        code, pre, .font-mono, [style*="monospace"] {
            font-family: 'DM Mono', monospace !important;
        }
        h1, h2, .brand-serif {
            font-family: 'Cormorant Garamond', serif;
        }
        .mk-kpi-value {
            font-family: 'Space Grotesk', sans-serif;
        }

        /* ── BODY / FONDO PREMIUM ── */
        body {
            background: var(--cream) !important;
            background-image:
                radial-gradient(ellipse 800px 400px at 80% 0%, rgba(201,147,58,0.08) 0%, transparent 65%),
                radial-gradient(ellipse 600px 500px at 0% 100%, rgba(196,168,224,0.07) 0%, transparent 60%),
                radial-gradient(ellipse 400px 400px at 50% 50%, rgba(242,169,126,0.04) 0%, transparent 70%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E") !important;
            background-attachment: fixed !important;
            color: var(--ink) !important;
        }

        /* ── SIDEBAR PREMIUM ── */
        .sidebar {
            background: linear-gradient(175deg, #FBF8F3 0%, #FDF6E3 55%, #FBF8F3 100%) !important;
            border-right: 1px solid rgba(201,147,58,0.18) !important;
            box-shadow: 4px 0 32px rgba(42,26,14,0.08), 1px 0 0 rgba(201,147,58,0.10) !important;
            transition: transform 0.3s var(--out), width 0.3s var(--out) !important;
        }
        /* Grain sobre sidebar */
        .sidebar::before {
            content:'';position:absolute;inset:0;pointer-events:none;opacity:.025;z-index:0;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size:180px 180px;
        }

        /* Sidebar items */
        .sidebar-item {
            border-radius: 14px !important;
            margin: 1px 0 !important;
            font-weight: 500 !important;
            font-size: 0.875rem !important;
            letter-spacing: 0.005em !important;
            color: rgba(92,61,30,0.82) !important;
            transition: all 0.18s var(--snap) !important;
            position: relative !important;
        }
        .sidebar-item:hover {
            background: rgba(201,147,58,0.10) !important;
            color: var(--ink) !important;
            transform: translateX(2px) !important;
        }
        .sidebar-item.active {
            background: linear-gradient(135deg, rgba(201,147,58,0.18) 0%, rgba(232,184,75,0.10) 100%) !important;
            color: var(--ink2) !important;
            border: 1px solid rgba(201,147,58,0.28) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 16px rgba(201,147,58,0.14) !important;
            transform: translateX(0) !important;
        }
        /* Línea de acento izquierda en active */
        .sidebar-item.active::before {
            content:'';position:absolute;left:-1px;top:25%;height:50%;width:2.5px;
            background:linear-gradient(180deg,transparent,var(--gold),transparent);
            border-radius:0 2px 2px 0;
        }

        /* ── BOTONES PREMIUM ── */
        .btn-primary {
            background: linear-gradient(135deg, var(--mk-gold-500) 0%, var(--mk-gold-400) 60%, #F0C060 100%) !important;
            border: none !important;
            box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 6px 20px rgba(197,151,59,0.38), 0 2px 8px rgba(197,151,59,0.2) !important;
            border-radius: 14px !important;
            font-weight: 700 !important;
            letter-spacing: 0.01em !important;
            color: #3A2000 !important;
            transition: all 0.18s var(--snap) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .btn-primary::before {
            content:'';position:absolute;inset:0;
            background:linear-gradient(135deg,rgba(255,255,255,0.28) 0%,transparent 50%);
            pointer-events:none;
        }
        .btn-primary:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 12px 32px rgba(197,151,59,0.5), 0 4px 12px rgba(197,151,59,0.28) !important;
        }
        .btn-primary:active { transform: scale(0.96) translateY(0) !important; }

        /* ── CARDS (mk-card) PREMIUM ── */
        .mk-card {
            background: var(--surface-primary) !important;
            border-radius: var(--r-xl) !important;
            border: 1px solid var(--border-subtle) !important;
            box-shadow: var(--inset-top), var(--shadow-md) !important;
            transition: transform 0.22s var(--spring), box-shadow 0.22s ease, border-color 0.2s ease !important;
            overflow: hidden;
        }
        .mk-card:hover {
            box-shadow: var(--inset-top), var(--shadow-xl) !important;
            border-color: rgba(197,151,59,0.22) !important;
        }
        .mk-card.clickable:hover {
            transform: translateY(-4px) !important;
        }
        .mk-card.clickable:active {
            transform: translateY(-1px) scale(0.99) !important;
        }

        /* KPI cards tienen shimmer en hover */
        .mk-kpi {
            position: relative;
            overflow: hidden;
        }
        .mk-kpi::after {
            content:'';position:absolute;
            top:-60%;left:-60%;width:40%;height:220%;
            background:linear-gradient(105deg,transparent,rgba(255,255,255,0.12),transparent);
            transform:skewX(-15deg) translateX(-200%);
            transition:transform 0s;
            pointer-events:none;
        }
        .mk-kpi:hover::after {
            transform:skewX(-15deg) translateX(500%);
            transition:transform 0.65s ease;
        }

        .mk-kpi-value {
            font-family:'Outfit',sans-serif !important;
            font-size:1.95rem !important;
            font-weight:800 !important;
            color: var(--ink) !important;
            letter-spacing:-0.03em !important;
            line-height:1 !important;
        }
        .mk-kpi-label {
            font-size:.62rem !important;
            font-weight:700 !important;
            letter-spacing:.1em !important;
            text-transform:uppercase !important;
            color:var(--text-muted) !important;
        }

        /* ── SECTION HEADERS PREMIUM ── */
        .mk-section-header {
            display:flex;align-items:center;gap:16px;
            margin-bottom:28px;padding:18px 22px;
            border-radius: var(--r-xl) !important;
            position:relative;overflow:hidden;
        }
        .mk-section-header::before {
            content:'';position:absolute;inset:0;
            background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 50%);
            pointer-events:none;
        }
        .mk-sh-icon {
            width:48px;height:48px;border-radius:14px;
            display:flex;align-items:center;justify-content:center;
            font-size:1.35rem;
            background:rgba(255,255,255,0.75) !important;  /* era 0.18 — subido para ser visible en fondo claro */
            box-shadow:0 2px 8px rgba(42,26,14,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
            flex-shrink:0;
        }
        body.dark .mk-sh-icon {
            background:rgba(255,255,255,0.08) !important;
            box-shadow:0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
        }
        .mk-sh-text h2 {
            font-family:'Outfit',sans-serif !important;
            font-size:1.45rem !important;font-weight:800 !important;
            color: var(--ink) !important;   /* era white — cambiado para fondos claros */
            letter-spacing:-0.02em !important;
        }
        .mk-sh-text p { font-size:0.72rem !important;color:var(--ink3) !important;margin-top:2px !important; }
        /* Dark mode: texto claro sobre fondo oscuro */
        body.dark .mk-sh-text h2 { color: #F5ECD6 !important; }
        body.dark .mk-sh-text p  { color: rgba(201,168,123,0.75) !important; }

        /* ── INPUTS PREMIUM ── */
        input[type=text],input[type=number],input[type=email],input[type=search],textarea,select {
            border-radius: 12px !important;
            border: 1.5px solid rgba(201,147,58,0.18) !important;
            background: rgba(253,248,243,0.85) !important;
            font-family: 'Outfit', sans-serif !important;
            font-size: 0.9rem !important;
            color: var(--text-primary) !important;
            transition: all 0.18s var(--out) !important;
            box-shadow: inset 0 1.5px 4px rgba(42,26,14,0.04) !important;
        }
        /* FIX-5: Mínimo 16px en mobile para evitar zoom automático en iOS */
        @media (max-width: 1023px) {
            input, select, textarea {
                font-size: max(16px, 1em) !important;
            }
        }
        input:focus, textarea:focus, select:focus {
            border-color: var(--gold) !important;
            background: rgba(255,255,255,0.98) !important;
            box-shadow: 0 0 0 3.5px rgba(201,147,58,0.16), inset 0 1px 2px rgba(42,26,14,0.03) !important;
            outline: none !important;
        }

        /* ── TABLAS PREMIUM ── */
        table thead {
            background: linear-gradient(135deg, var(--gold-bg), rgba(253,246,220,0.6)) !important;
        }
        table thead th {
            font-size: 0.62rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.1em !important;
            text-transform: uppercase !important;
            color: var(--text-muted) !important;
            padding: 12px 16px !important;
        }
        tbody tr {
            transition: background 0.12s ease !important;
            border-bottom: 1px solid rgba(201,147,58,0.07) !important;
        }
        tbody tr:hover {
            background: linear-gradient(90deg, rgba(201,147,58,0.04), rgba(196,168,224,0.04)) !important;
        }

        /* ── MODALES PREMIUM ── */
        .modal > div:first-child {
            border-radius: var(--r-2xl) !important;
            box-shadow: var(--shadow-2xl) !important;
            border: 1px solid rgba(197,151,59,0.15) !important;
            overflow: hidden;
        }

        /* ── KANBAN CARDS PREMIUM ── */
        .kanban-card {
            border-radius: var(--r-lg) !important;
            border: 1px solid rgba(197,151,59,0.1) !important;
            box-shadow: var(--inset-top-sm), var(--shadow-sm) !important;
            transition: transform 0.2s var(--spring), box-shadow 0.2s ease, border-color 0.15s ease !important;
        }
        .kanban-card:hover {
            transform: translateY(-4px) rotate(0.3deg) !important;
            box-shadow: var(--inset-top-sm), var(--shadow-xl) !important;
            border-color: rgba(197,151,59,0.22) !important;
        }

        /* (POS product cards removed — POS module was removed) */

        /* ── BADGES / TAGS ── */
        .badge-success { background:linear-gradient(135deg,#10B981,#059669) !important;color:white !important;border-radius:99px !important; }
        .badge-warning { background:linear-gradient(135deg,#F59E0B,#D97706) !important;color:white !important;border-radius:99px !important; }
        .badge-danger  { background:linear-gradient(135deg,#EF4444,#DC2626) !important;color:white !important;border-radius:99px !important; }
        .badge-vip     { background:linear-gradient(135deg,var(--mk-gold-500),var(--mk-gold-400)) !important;color:#3A2000 !important;border-radius:99px !important; }

        /* (POS category tabs removed — POS module was removed) */

        /* ── TOASTS PREMIUM ── */
        .maneki-toast {
            border-radius: 16px !important;
            border: 1px solid rgba(197,151,59,0.15) !important;
            box-shadow: 0 16px 40px rgba(21,4,40,0.18), 0 4px 12px rgba(0,0,0,0.08) !important;
            animation: toastIn 0.4s var(--spring) both !important;
        }
        @keyframes toastIn {
            from { opacity:0; transform:translateX(80px) scale(0.88); }
            to   { opacity:1; transform:translateX(0) scale(1); }
        }

        /* ── PROGRESS BARS ── */
        .mk-goal-track {
            background: rgba(197,151,59,0.08) !important;
            border-radius: 99px !important;
            height: 8px !important;
            overflow: hidden !important;
            box-shadow: inset 0 1px 3px rgba(21,4,40,0.06) !important;
        }
        .mk-goal-fill {
            background: linear-gradient(90deg, var(--lila-dk), var(--lila), var(--gold), var(--gold-lt)) !important;
            background-size: 200% 100% !important;
            box-shadow: 0 0 12px rgba(201,147,58,0.35) !important;
            border-radius: 99px !important;
            animation: goalFillFlow 4s linear infinite !important;
        }
        @keyframes goalFillFlow {
            0%   { background-position: 0% 0%; }
            100% { background-position: 200% 0%; }
        }

        /* ── SECTION TRANSITIONS PREMIUM ── */
        main > section:not(.hidden) {
            animation: sectionIn 0.35s var(--out) both !important;
        }
        @keyframes sectionIn {
            from { opacity:0; transform:translateY(14px); }
            to   { opacity:1; transform:translateY(0); }
        }

        /* ── SCROLLBAR PREMIUM ── */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--lila), var(--gold));
            border-radius: 99px;
        }
        ::-webkit-scrollbar-thumb:hover { background: var(--lila-dk); }

        /* ── CURSOR PERSONALIZADO ── */
        body { cursor: default; }
        button, a, [onclick], .clickable, .cursor-pointer, .numpad-btn, .sidebar-item, .kanban-card {
            cursor: pointer;
        }

        /* ── TIPOGRAFÍA BASE ── */
        h1 { font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
        h2 { font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
        h3 { font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; }

        /* ── MICRO-INTERACCIONES GLOBALES ── */
        button { transition: transform 0.15s var(--snap), background 0.15s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease !important; }
        button:active:not(.no-active) { transform: scale(0.94) !important; }

        /* ── SIDEBAR BADGES PREMIUM ── */
        .sidebar-badge {
            background: linear-gradient(135deg, #FF6B9D, #EE3080) !important;
            border-radius: 99px !important;
            font-size: 10px !important;
            font-weight: 800 !important;
            box-shadow: 0 2px 8px rgba(238,48,128,0.4) !important;
        }
        .sidebar-item.active .sidebar-badge {
            background: rgba(255,255,255,0.22) !important;
            box-shadow: none !important;
        }

        /* ── NOTAS RÁPIDAS ── */
        .mk-note-input {
            border-radius: 12px !important;
            border: 1.5px solid rgba(197,151,59,0.12) !important;
            font-family: 'Outfit', sans-serif !important;
        }
        .mk-note-input:focus {
            border-color: var(--mk-gold-400) !important;
            box-shadow: 0 0 0 3px rgba(232,184,75,0.12) !important;
        }

        /* ── DARK MODE REFINADO ── */
        /* dark block 1 — warm ink (paleta Maneki Premium) */
        body.dark {
            background:
                radial-gradient(ellipse 800px 400px at 80% 0%, rgba(201,147,58,0.06) 0%, transparent 65%),
                radial-gradient(ellipse 600px 500px at 0% 100%, rgba(196,168,224,0.04) 0%, transparent 60%),
                linear-gradient(160deg, #1C120A 0%, #231208 50%, #1C120A 100%) !important;
            background-attachment: fixed !important;
            color: #F5ECD6 !important;
        }
        body.dark .bg-white {
            background: #2A1E0F !important;
            border-color: rgba(201,147,58,0.15) !important;
            color: #F5ECD6 !important;
        }
        body.dark .mk-card {
            background: #2A1E0F !important;
            border-color: rgba(201,147,58,0.15) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.45) !important;
        }
        body.dark input, body.dark textarea, body.dark select {
            background: #321F0D !important;
            border-color: rgba(201,147,58,0.22) !important;
            color: #F5ECD6 !important;
        }
        body.dark input:focus, body.dark textarea:focus {
            border-color: #E8B84B !important;
            background: rgba(40,26,12,0.98) !important;
            box-shadow: 0 0 0 3.5px rgba(201,147,58,0.18) !important;
        }
        body.dark table thead {
            background: linear-gradient(135deg, #261508, #1E1208) !important;
        }
        body.dark tbody tr:hover {
            background: rgba(201,147,58,0.06) !important;
        }

        /* ── DARK MODE: barra de búsqueda global ── */
        body.dark #global-search-bar {
            background: rgba(30, 41, 59, 0.95) !important;
            border-color: rgba(148, 163, 184, 0.2) !important;
        }
        body.dark #globalSearchInput {
            background: transparent !important;
            color: #e5e7eb !important;
        }
        body.dark #globalSearchResults {
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #e5e7eb !important;
        }
        body.dark #globalSearchResults > div:hover {
            background: #334155 !important;
        }

        /* stat-card — definición unificada más abajo */

        .sidebar nav { padding: 16px !important; }
        .sidebar nav > * + * { margin-top: 2px !important; }
        .sidebar-item {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            font-size: 0.95rem !important;
        }
        .sidebar-item {
            transition: all 0.2s ease;
        }
        
        .sidebar-item:hover {
            background: rgba(201,147,58,0.09) !important;
            color: var(--ink) !important;
        }
        
        .sidebar-item.active {
            background: linear-gradient(135deg, rgba(201,147,58,0.18) 0%, rgba(232,184,75,0.10) 100%);
            color: var(--ink2) !important;
            box-shadow: 0 4px 16px rgba(201,147,58,0.18);
        }
        .sidebar-item { color: rgba(92,61,30,0.82) !important; }
        .sidebar .sidebar-store-name { color: var(--ink) !important; }
        .sidebar .sidebar-store-slogan { color: var(--gold) !important; }
        .sidebar .border-t { border-color: rgba(201,147,58,0.15) !important; }
        .sidebar #supabaseStatus { background: rgba(201,147,58,0.07) !important; border-color: rgba(201,147,58,0.15) !important; }
        .sidebar #supabaseStatusText { color: var(--ink3) !important; }
        .sidebar .text-gray-800 { color: var(--ink) !important; }
        .sidebar .text-gray-600 { color: var(--ink3) !important; }
        .sidebar .bg-green-100 { background: rgba(16,185,129,0.12) !important; color: #065f46 !important; }
        .sidebar .bg-red-100   { background: rgba(239,68,68,0.10) !important;  color: #991b1b !important; }
        .sidebar .rounded-full { background: rgba(201,147,58,0.12) !important; }
        .sidebar .rounded-full i { color: var(--gold) !important; }
        .sidebar #darkModeBtn  { background: rgba(201,147,58,0.10) !important; border: 1px solid rgba(201,147,58,0.22) !important; }
        .sidebar #darkModeIcon { color: var(--gold) !important; font-size: 0.85rem !important; }

        /* ── SIDEBAR BADGES ── */
        .sidebar-badge {
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            line-height: 20px;
            text-align: center;
            background: #ef4444;
            color: white;
            transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                        opacity 0.15s ease;
            transform-origin: center;
        }
        .sidebar-badge.badge-warn {
            background: #f59e0b;
        }
        .sidebar-badge.badge-new {
            animation: badgePop 0.35s cubic-bezier(0.34,1.56,0.64,1);
        }
        @keyframes badgePop {
            0%   { transform: scale(0); }
            60%  { transform: scale(1.25); }
            100% { transform: scale(1); }
        }
        /* Badge color when sidebar item is active */
        .sidebar-item.active .sidebar-badge {
            background: rgba(201,147,58,0.25);
            color: var(--ink2);
        }
        
        /* btn-primary — definición unificada más abajo en COLOR OVERHAUL */
        
        .btn-secondary {
            background: linear-gradient(135deg, #D8BFD8 0%, #C8B0D8 100%);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(216, 191, 216, 0.4);
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
            transition: all 0.3s ease;
        }
        
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
        }
        
        .badge-success {
            background: #10B981;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .badge-warning {
            background: #F59E0B;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .badge-danger {
            background: #EF4444;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .badge-vip {
            background: linear-gradient(135deg, #C5A572, #D4AF37);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        /* ── MODAL SYSTEM — entrada Y salida animadas ── */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0; top: 0;
            width: 100%; height: 100%;
            overflow-y: auto;
            /* fondo se anima con la clase — sin backdrop-filter (caro en GPU) */
            background-color: rgba(0,0,0,0);
            transition: background-color 0.18s ease;
        }
        .modal.active {
            display: block;
            padding: 20px;
            overflow-y: auto;
            background-color: rgba(0,0,0,0.52);
            animation: modalBgIn 0.18s ease forwards;
        }
        @keyframes modalBgIn {
            from { background-color: rgba(0,0,0,0); }
            to   { background-color: rgba(0,0,0,0.52); }
        }
        /* Salida: fondo se desvanece */
        .modal.closing {
            display: block;
            padding: 20px;
            overflow-y: auto;
            animation: modalBgOut 0.16s ease forwards;
            pointer-events: none;
        }
        @keyframes modalBgOut {
            from { background-color: rgba(0,0,0,0.52); }
            to   { background-color: rgba(0,0,0,0); }
        }

        /* Contenido del modal — entrada */
        .modal > div:first-child {
            transform: translateY(20px) scale(0.96);
            opacity: 0;
            transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1), opacity 0.22s ease;
            max-width: 680px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .modal.active > div:first-child {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        /* Contenido del modal — salida */
        .modal.closing > div:first-child {
            animation: modalContentOut 0.18s ease forwards;
        }
        @keyframes modalContentOut {
            from { transform: translateY(0) scale(1);    opacity: 1; }
            to   { transform: translateY(12px) scale(0.96); opacity: 0; }
        }
        .btn-primary:active { transform: scale(0.96); }
        main > section:not(.hidden) { animation: sectionFadeIn 0.35s ease both; }
        @keyframes sectionFadeIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
        tbody tr { transition: background-color 0.15s ease; }
        /* ── TOOLTIPS ── */
        [data-tip] {
            position: relative;
        }
        [data-tip]::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) scale(0.92);
            background: #1f2937;
            color: white;
            font-size: 11px;
            font-weight: 500;
            padding: 5px 10px;
            border-radius: 8px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.18s ease, transform 0.18s ease;
            z-index: 9999;
            max-width: 220px;
            white-space: normal;
            text-align: center;
            line-height: 1.4;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        [data-tip]::before {
            content: '';
            position: absolute;
            bottom: calc(100% + 3px);
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #1f2937;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.18s ease;
            z-index: 9999;
        }
        [data-tip]:hover::after,
        [data-tip]:hover::before {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }

        /* ── SKELETON LOADERS ── */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite;
            border-radius: 8px;
        }
        @keyframes shimmer {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .skeleton-text  { height: 14px; margin-bottom: 6px; }
        .skeleton-title { height: 28px; width: 60%; }
        .skeleton-badge { height: 24px; width: 40%; border-radius: 12px; }

        /* ── PRIVACY MODE ── */
        .privacy-hidden {
            filter: blur(8px) !important;
            user-select: none !important;
            pointer-events: none !important;
            transition: filter 0.3s ease;
        }
        #privacyToggleBtn.active {
            background: var(--lila-dk) !important;
            color: white !important;
        }

        /* ── BUTTON TRANSITIONS ── */
        .btn-loading {
            position: relative;
            pointer-events: none;
            opacity: 0.85;
        }
        .btn-loading .btn-label { visibility: hidden; }
        .btn-loading::after {
            content: '';
            position: absolute;
            width: 16px; height: 16px;
            border: 2.5px solid rgba(255,255,255,0.4);
            border-top-color: white;
            border-radius: 50%;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            animation: btnSpin 0.7s linear infinite;
        }
        .btn-success-flash {
            animation: successFlash 0.6s ease forwards;
        }
        @keyframes btnSpin  { to { transform: translate(-50%, -50%) rotate(360deg); } }
        @keyframes successFlash {
            0%   { background: #10b981; transform: scale(1.05); }
            100% { background: ''; transform: scale(1); }
        }

        /* ── STOCK PREDICTIVO badge ── */
        .pred-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 20px;
            white-space: nowrap;
        }
        .pred-critico  { background: #fee2e2; color: #dc2626; }
        .pred-urgente  { background: #ffedd5; color: #ea580c; }
        .pred-pronto   { background: #fef9c3; color: #ca8a04; }
        .pred-ok       { background: #dcfce7; color: #16a34a; }

        .maneki-toast { animation: toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }
        @keyframes ticketItemIn {
            from { opacity: 0; transform: translateX(12px) scale(0.96); }
            to   { opacity: 1; transform: translateX(0) scale(1); }
        }
        @keyframes toastIn {
            from { opacity: 0; transform: translateX(60px) scale(0.9); }
            to { opacity: 1; transform: translateX(0) scale(1); }
        }
        .maneki-toast.saliendo { animation: toastOut 0.3s ease forwards; }
        @keyframes toastOut {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(60px); }
        }
        .kanban-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
        .kanban-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
        .sync-error { animation: shake 0.4s ease; }
        @keyframes shake {
            0%,100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
        }

        /* ===== BANNER ALERTAS ENTREGA ===== */
        #alertaEntregas, #alertaSinMovimiento {
            display: none;
        }
        #alertaEntregas.visible, #alertaSinMovimiento.visible {
            display: block;
        }
        .alerta-pedido-card {
            background: white;
            border-left: 4px solid;
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .alerta-pedido-card.hoy   { border-color: #EF4444; }
        .alerta-pedido-card.manana { border-color: #F97316; }
        .alerta-pedido-card.dos-dias { border-color: #EAB308; }

        .animate-fade-in {
            animation: fadeIn 0.3s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .sidebar {
            transition: all 0.3s ease;
            background: linear-gradient(175deg, #FBF8F3 0%, #FDF6E3 55%, #FBF8F3 100%) !important; border-right: 1px solid rgba(201,147,58,0.18) !important; box-shadow: 4px 0 32px rgba(42,26,14,0.08), 1px 0 0 rgba(201,147,58,0.10) !important;
        }
        
        .category-card {
            transition: all 0.2s ease;
        }
        
        .category-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(197, 165, 114, 0.2);
        }
        
        .image-preview {
            max-width: 200px;
            max-height: 200px;
            object-fit: cover;
            border-radius: 12px;
        }
        
        .variant-tag {
            display: inline-block;
            background: #E6D5E6;
            padding: 4px 12px;
            border-radius: 8px;
            margin: 2px;
            font-size: 12px;
        }
        
        .receipt {
            background: white;
            padding: 40px;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .receipt-header {
            text-align: center;
            border-bottom: 2px solid #C5A572;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        
        .receipt-logo {
            font-size: 48px;
            margin-bottom: 10px;
        }
        
        .receipt-table {
            width: 100%;
            margin: 20px 0;
            border-collapse: collapse;
        }
        
        .receipt-table th {
            background: #E6D5E6;
            padding: 12px;
            text-align: left;
            font-weight: 600;
        }
        
        .receipt-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #E5E7EB;
        }
        
        @media (max-width: 768px) {
            .sidebar.collapsed {
                transform: translateX(-100%);
            }
        }
        
/* ══════════════════════════════════════════
   DARK MODE — MANEKI PREMIUM (Warm Ink)
   Paleta: tintas cálidas oscuras + dorado
   Sin azul-gris frío — todo warm-toned
══════════════════════════════════════════ */

/* Tokens dark reutilizables */
body.dark {
    --dm-bg:       #1C120A;
    --dm-bg2:      #231709;
    --dm-surface:  #2A1E0F;
    --dm-surface2: #321F0D;
    --dm-border:   rgba(201,147,58,0.15);
    --dm-border2:  rgba(201,147,58,0.22);
    --dm-text1:    #F5ECD6;
    --dm-text2:    #C9A87B;
    --dm-text3:    #7B5A3A;
    --dm-gold:     #E8B84B;
}

/* ── SIDEBAR dark — warm ink ── */
body.dark .sidebar,
body.dark #sidebar.sidebar,
body.dark aside#sidebar {
    background: linear-gradient(175deg, #1E1208 0%, #261508 55%, #1E1208 100%) !important;
    border-right: 1px solid rgba(201,147,58,0.20) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.40), 1px 0 0 rgba(201,147,58,0.10) !important;
}
body.dark .sidebar-item {
    color: rgba(201,168,123,0.65) !important;
}
body.dark .sidebar-item:hover {
    background: rgba(201,147,58,0.12) !important;
    color: #F5ECD6 !important;
}
body.dark .sidebar-item.active {
    background: linear-gradient(135deg, rgba(201,147,58,0.22), rgba(232,184,75,0.12)) !important;
    color: #E8B84B !important;
    border: 1px solid rgba(201,147,58,0.30) !important;
    box-shadow: 0 2px 14px rgba(201,147,58,0.18) !important;
}

/* ── SECCIONES ── */
body.dark section { background: transparent !important; }

/* ── PANELES / CARDS ── */
body.dark .bg-white {
    background: #2A1E0F !important;
    border-color: rgba(201,147,58,0.15) !important;
    color: #F5ECD6 !important;
}
body.dark .bg-gray-50 { background: #231709 !important; }
body.dark .bg-gray-100 { background: #2A1E0F !important; }

/* ── TEXTO ── */
body.dark .text-gray-800 { color: #F5ECD6 !important; }
body.dark .text-gray-700 { color: #E0C89A !important; }
body.dark .text-gray-600 { color: #C9A87B !important; }
body.dark .text-gray-500 { color: #8A6A48 !important; }
body.dark .text-gray-400 { color: #5C3D1E !important; }

/* ── BORDES ── */
body.dark .border-gray-100 { border-color: rgba(201,147,58,0.10) !important; }
body.dark .border-gray-200 { border-color: rgba(201,147,58,0.16) !important; }

/* ── SOMBRAS ── */
body.dark .shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; }
body.dark .shadow-xl  { box-shadow: 0 20px 40px rgba(0,0,0,0.6) !important; }

/* ── INPUTS ── */
body.dark input, body.dark textarea, body.dark select {
    background: #321F0D !important;
    border-color: rgba(201,147,58,0.22) !important;
    color: #F5ECD6 !important;
}
body.dark input::placeholder, body.dark textarea::placeholder {
    color: #7B5A3A !important;
}

/* ── MODALES ── */
body.dark .modal > div {
    background: #2A1E0F !important;
    border-color: rgba(201,147,58,0.15) !important;
    color: #F5ECD6 !important;
}

/* ── TABLAS ── */
body.dark table thead {
    background: linear-gradient(135deg, #261508, #1E1208) !important;
    color: #C9A87B !important;
}
body.dark table tbody tr:hover {
    background: rgba(201,147,58,0.06) !important;
}
body.dark .divide-gray-200 > * { border-color: rgba(201,147,58,0.10) !important; }

/* ── DROPDOWNS ── */
body.dark #clientAutocompleteDropdown {
    background: #2A1E0F !important;
    border-color: rgba(201,147,58,0.22) !important;
    color: #F5ECD6 !important;
}
body.dark .autocomplete-item:hover { background: #321F0D !important; }

/* ── RECIBO / PREVIEW ── */
body.dark .receipt {
    background: #2A1E0F !important;
    color: #F5ECD6 !important;
}
body.dark #storePreview { border-color: rgba(201,147,58,0.22) !important; }
body.dark #selectedClientInfo {
    background: #321F0D !important;
    border-color: rgba(201,147,58,0.15) !important;
}

/* ── BOTÓN DARK MODE ── */
body.dark #darkModeBtn {
    background: rgba(201,147,58,0.14) !important;
    border-color: rgba(201,147,58,0.30) !important;
}
body.dark #darkModeIcon { color: #E8B84B !important; }

/* ── NTH-18: KANBAN ── */
body.dark .kanban-card {
    background: #2A1E0F !important;
    border-color: rgba(201,147,58,0.18) !important;
    color: #F5ECD6 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.40) !important;
}
body.dark .kanban-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.55) !important;
    border-color: rgba(201,147,58,0.32) !important;
}
body.dark .kanban-col-header {
    background: linear-gradient(135deg, #261508, #1E1208) !important;
    border-color: rgba(201,147,58,0.18) !important;
    color: #C9A87B !important;
}

/* ── NTH-18: BADGES DE ESTADO ── */
body.dark .badge-success { background: linear-gradient(135deg,#064e3b,#065f46) !important; }
body.dark .badge-warning  { background: linear-gradient(135deg,#78350f,#92400e) !important; }
body.dark .badge-danger   { background: linear-gradient(135deg,#7f1d1d,#991b1b) !important; }

/* ── NTH-18: TAILWIND COLORS COMUNES EN MODO DARK ── */
body.dark .bg-amber-50  { background: rgba(201,147,58,0.10) !important; }
body.dark .bg-amber-100 { background: rgba(201,147,58,0.16) !important; }
body.dark .bg-green-50  { background: rgba(6,78,59,0.25) !important; }
body.dark .bg-green-100 { background: rgba(6,78,59,0.35) !important; }
body.dark .bg-red-50    { background: rgba(127,29,29,0.25) !important; }
body.dark .bg-red-100   { background: rgba(127,29,29,0.35) !important; }
body.dark .bg-blue-50   { background: rgba(30,58,138,0.25) !important; }
body.dark .text-amber-700, body.dark .text-amber-800 { color: #E8B84B !important; }
body.dark .text-green-600, body.dark .text-green-700 { color: #34d399 !important; }
body.dark .text-red-600, body.dark .text-red-700 { color: #f87171 !important; }
body.dark .border-amber-200 { border-color: rgba(201,147,58,0.28) !important; }
body.dark .border-green-200 { border-color: rgba(52,211,153,0.25) !important; }
body.dark .border-red-200   { border-color: rgba(248,113,113,0.25) !important; }

/* ── NTH-18: PAGINACIÓN ── */
body.dark #histPaginacion button {
    background: #321F0D !important;
    border-color: rgba(201,147,58,0.22) !important;
    color: #C9A87B !important;
}
body.dark #histPaginacion button:hover {
    background: rgba(201,147,58,0.15) !important;
    color: #E8B84B !important;
}

/* ── NTH-18: PRIORIDAD BUTTONS ── */
body.dark .btn-prio {
    background: #321F0D !important;
    border-color: rgba(201,147,58,0.22) !important;
    color: #C9A87B !important;
}

/* ── NTH-18: TOASTS ── */
body.dark .maneki-toast {
    background: linear-gradient(135deg,#1E1208,#261508) !important;
    border: 1px solid rgba(201,147,58,0.22) !important;
    color: #F5ECD6 !important;
}

/* ── NTH-18: TABLAS (td) ── */
body.dark table td { color: #E0C89A !important; border-color: rgba(201,147,58,0.10) !important; }
body.dark table tbody tr { background: transparent !important; }
body.dark table tbody tr:nth-child(even) { background: rgba(201,147,58,0.04) !important; }

/* Transición suave al cambiar modo */
body, .sidebar, .bg-white, input, textarea, select, table {
    transition: background 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.theme-option.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
        .autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.15s;
}
.autocomplete-item:hover, .autocomplete-item.selected {
    background: #FFF9F0;
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item .client-name {
    font-weight: 600;
    font-size: 13px;
    color: #1F2937;
}
.autocomplete-item .client-detail {
    font-size: 11px;
    color: #6B7280;
    margin-top: 1px;
}
.autocomplete-item .client-vip {
    font-size: 10px;
    background: linear-gradient(135deg, #C5A572, #D4AF37);
    color: white;
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 6px;
}
        @media print {
            .no-print {
                display: none;
            }
        }
        /* Kanban */
        .kanban-card {
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .kanban-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.10);
        }
        .kanban-card:active {
            cursor: grabbing;
        }
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    
        /* ══════════ MANEKI STORE — COLOR OVERHAUL ══════════ */
        #global-search-bar {
            background: rgba(255,248,245,0.95) !important;
            border-bottom: 1px solid rgba(197,165,114,0.2) !important;
        }
        .btn-primary {
            background: linear-gradient(135deg,#C5A572,#e8a844) !important;
            box-shadow: 0 4px 14px rgba(197,165,114,0.4) !important;
        }
        .sidebar-badge {
            background: linear-gradient(135deg,#FF6B9D,#FF8C69) !important;
        }
        .sidebar-item.active .sidebar-badge {
            background: rgba(255,255,255,0.28) !important;
        }
        /* Section headers */
        .mk-section-header {
            display:flex; align-items:center; gap:16px;
            margin-bottom:28px; padding:20px 24px; border-radius:20px;
        }
        .mk-sh-icon {
            width:52px; height:52px; border-radius:16px;
            display:flex; align-items:center; justify-content:center;
            font-size:1.5rem; background:rgba(255,255,255,0.25); flex-shrink:0;
        }
        .mk-sh-text h2 { font-size:1.55rem; font-weight:800; color:white; margin:0; }
        .mk-sh-text p  { font-size:0.78rem; color:rgba(255,255,255,0.8); margin:3px 0 0; }
        #pedidos-section    .mk-section-header { background:linear-gradient(135deg, var(--lila), var(--lila-dk)); }
        #quotes-section     .mk-section-header { background:linear-gradient(135deg,#06B6D4,#0284C7); }
        #inventory-section  .mk-section-header { background:linear-gradient(135deg,#10B981,#059669); }
        #balance-section    .mk-section-header { background:linear-gradient(135deg, var(--gold), #D97706); }
        #clientes-section   .mk-section-header { background:linear-gradient(135deg, var(--rose), #E11D74); }
        #categorias-section .mk-section-header { background:linear-gradient(135deg, var(--peach-dk), #C4622A); }
        #analisis-section   .mk-section-header { background:linear-gradient(135deg, var(--gold), var(--ink3)); }
        #reportes-section   .mk-section-header { background:linear-gradient(135deg, var(--lila-dk), var(--lila)); }
        #equipos-section    .mk-section-header { background:linear-gradient(135deg,#64748B,#475569); }
        #configuracion-section .mk-section-header { background:linear-gradient(135deg, var(--lila-dk), var(--lila)); }
        /* Dashboard MK cards */
        .mk-card { background:#fff; border-radius:20px; border:1px solid rgba(197,165,114,0.13); box-shadow:0 2px 12px rgba(197,165,114,0.09); transition:box-shadow .25s,transform .25s; }
        .mk-card:hover { box-shadow:0 8px 28px rgba(197,165,114,0.18); }
        .mk-card.clickable { cursor:pointer; }
        .mk-card.clickable:hover { transform:translateY(-3px); }
        .mk-kpi { padding:22px 24px 18px; position:relative; overflow:hidden; }
        .mk-kpi-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:14px; }
        .mk-kpi-label { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af; margin-bottom:4px; }
        .mk-kpi-value { font-size:1.85rem; font-weight:800; color:#111827; line-height:1; letter-spacing:-.02em; }
        .mk-kpi-sub { font-size:.7rem; color:#9ca3af; margin-top:7px; display:flex; align-items:center; gap:5px; }
        .mk-kpi-badge { display:inline-flex; align-items:center; gap:3px; font-size:.67rem; font-weight:700; padding:2px 8px; border-radius:99px; }
        .mk-kpi-blob { position:absolute; right:-22px; top:-22px; width:100px; height:100px; border-radius:50%; opacity:.12; pointer-events:none; }
        .mk-chart-area { padding:22px 24px; }
        .mk-chart-title { font-size:.78rem; font-weight:800; color:#374151; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
        .mk-goal-track { background:#f3f4f6; border-radius:99px; height:9px; overflow:hidden; }
        .mk-goal-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#C5A572,#e8a844,#f5c842); transition:width .9s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 8px rgba(197,165,114,.5); }
        .mk-store-tag { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#fdf6ec,#fef3c7); border:1px solid #f5dfa0; border-radius:99px; padding:3px 12px; font-size:.73rem; font-weight:700; color:#92400e; }
        .mk-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:12px; border:none; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .2s; font-family:inherit; }
        .mk-btn-ghost { background:rgba(255,255,255,.9); color:#374151; border:1.5px solid #e5e7eb; }
        .mk-btn-ghost:hover { border-color:#C5A572; color:#92400e; }
        .mk-btn-gold { background:linear-gradient(135deg,#C5A572,#e8a844); color:white; box-shadow:0 4px 14px rgba(197,165,114,.4); }
        .mk-btn-gold:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(197,165,114,.55); }
        .mk-note-input { flex:1; background:#fafafa; border:1.5px solid #e5e7eb; border-radius:12px; padding:10px 14px; font-size:.83rem; outline:none; font-family:inherit; transition:border-color .2s,box-shadow .2s; }
        .mk-note-input:focus { border-color:#C5A572; box-shadow:0 0 0 3px rgba(197,165,114,.18); }
        .mk-kpi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
        .mk-main-grid { display:grid; gap:16px; }
        .mk-bottom-grid { display:grid; gap:16px; margin-top:16px; }
        @media(min-width:1024px) {
            .mk-kpi-grid { grid-template-columns:repeat(4,1fr); }
            .mk-main-grid { grid-template-columns:2fr 1fr; }
            .mk-bottom-grid { grid-template-columns:1fr 1fr; }
        }
        /* ═══════════════════════════════════════════════════ */

        /* (POS category tabs removed — POS module was removed) */

        /* ── KANBAN URGENCY BAR ── */
        .kanban-urgency-bar {
            height: 5px; /* FIX-7: era 3px — más visible */
            border-radius: 3px;
            margin-top: 8px;
            transition: width 0.4s ease;
        }
        .urgency-ok      { background: #10b981; }
        .urgency-soon    { background: #f59e0b; }
        .urgency-urgent  { background: #ef4444; }
        .urgency-overdue { background: #7f1d1d; }

        /* ── TABLE SORT HEADERS ── */
        .sortable-th {
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
        }
        .sortable-th:hover { background: #f3f4f6; }
        .sortable-th .sort-icon { margin-left: 4px; opacity: 0.4; font-size: 10px; }
        .sortable-th.asc .sort-icon::after  { content: ' ▲'; opacity: 1; }
        .sortable-th.desc .sort-icon::after { content: ' ▼'; opacity: 1; }
        .sortable-th:not(.asc):not(.desc) .sort-icon::after { content: ' ⇅'; }



/* ══════════════════════════════ */


#sidebar nav button { padding-top: 18px !important; padding-bottom: 18px !important; }


/* ══════════════════════════════ */


@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════ */


@keyframes logoEntrada {
    from { transform: scale(0.5) rotate(-8deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes haloPulse {
    0%,100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes flotar {
    0%,100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(8deg); }
}


/* ══════════════════════════════ */


      /* FIX-6: reglas de plantilla de impresión — movidas a @media print */
      @media print {
        body { font-family: Arial, sans-serif; padding: 20px; font-size: 12px; }
        h1 { font-size: 18px; margin-bottom: 4px; }
        p { color: #666; margin-bottom: 16px; }
        table { width: 100%; border-collapse: collapse; }
        th { background: #f3f4f6; text-align: left; padding: 8px; border: 1px solid #ddd; }
        td { padding: 6px 8px; border: 1px solid #eee; }
        tr:nth-child(even) { background: #f9f9f9; }
        button { display: none; }
      }
    

/* ══════════════════════════════ */

/* FIX-6: plantilla de impresión de cotizaciones — movida a @media print */
@media print {
  body{padding:2rem;} .item{border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:8px;} .folio{color:#C9933A;font-weight:bold;font-size:12px;} .cliente{font-size:14px;font-weight:700;} .concepto{font-size:13px;color:#5C3D1E;} .meta{font-size:12px;color:#9B7B5A;margin-top:4px;} body{padding:0.5rem;}
}


/* ══════════════════════════════════════════
   ANIMACIONES MANEKI PREMIUM (desde web)
══════════════════════════════════════════ */

/* Float-orb — mismo que la web */
@keyframes float-orb {
    0%,100% { transform:translate(0,0) scale(1); }
    33%      { transform:translate(20px,-30px) scale(1.05); }
    66%      { transform:translate(-15px,20px) scale(.96); }
}

/* Orbs de fondo decorativos (opcionales, para secciones con posición relative) */
.mk-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .45;
    animation: float-orb 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.mk-orb-gold  { background: radial-gradient(circle, rgba(201,147,58,0.22), transparent 70%); animation-delay: 0s; }
.mk-orb-lila  { background: radial-gradient(circle, rgba(196,168,224,0.28), transparent 70%); animation-delay: -3s; }
.mk-orb-peach { background: radial-gradient(circle, rgba(242,169,126,0.20), transparent 70%); animation-delay: -5s; }

/* Stagger delays (util para listas, cards) */
.d1 { animation-delay: .1s !important; transition-delay: .1s !important; }
.d2 { animation-delay: .2s !important; transition-delay: .2s !important; }
.d3 { animation-delay: .3s !important; transition-delay: .3s !important; }
.d4 { animation-delay: .4s !important; transition-delay: .4s !important; }

/* Fix: dark-text class para sidebar en dark mode */
body.dark .dark-text {
    color: #F5ECD6 !important;
}
.d5 { animation-delay: .5s !important; transition-delay: .5s !important; }

/* ══════════════════════════════════════════════════
   KANBAN BOARD — Sistema de diseño por estado
   Añadido junto con la refactor UI/UX 2025
══════════════════════════════════════════════════ */

/* Wrapper de columna kanban */
.mk-kanban-wrapper {
    transition: opacity 0.2s ease;
}
.mk-kanban-wrapper:hover { opacity: 1; }

/* Header de columna — pill de color */
.mk-kanban-header {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(201,147,58,0.10);
    box-shadow: 0 1px 4px rgba(42,26,14,0.05);
    transition: background 0.15s ease;
    backdrop-filter: blur(8px);
}
.mk-kanban-wrapper:hover .mk-kanban-header {
    background: rgba(255,255,255,0.92);
    border-color: rgba(201,147,58,0.18);
}

/* Dot de color de estado */
.mk-kanban-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 1px 4px rgba(0,0,0,0.15);
}

/* Badge contador de columna */
.mk-kanban-badge {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 800;
    transition: transform 0.2s var(--spring);
}
.mk-kanban-badge:not([style*="0"]) {
    transform: scale(1.05);
}

/* Columna drop zone */
.mk-kanban-col {
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.mk-kanban-col.drag-over {
    box-shadow: inset 0 0 0 2px var(--gold), 0 4px 20px rgba(201,147,58,0.15) !important;
    background: rgba(253,246,220,0.8) !important;
    border-color: var(--gold) !important;
    border-style: solid !important;
}

/* Pills de estado en tarjeta kanban */
.mk-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.4;
    vertical-align: middle;
}
.mk-pill-confirmado { background: #F3F4F6; color: #4B5563; }
.mk-pill-pago       { background: #D1FAE5; color: #065f46; }
.mk-pill-produccion { background: #DBEAFE; color: #1e40af; }
.mk-pill-envio      { background: #EDE5F8; color: #4E3470; }
.mk-pill-salida     { background: #FFEDD5; color: #9a3412; }
.mk-pill-retirar    { background: #CCFBF1; color: #134e4a; }
.mk-pill-finalizado { background: #D1FAE5; color: #065f46; }
.mk-pill-cancelado  { background: #F3F4F6; color: #9CA3AF; text-decoration: line-through; }

/* Tarjeta kanban por estado — borde izquierdo */
.kanban-card[data-status="confirmado"] { border-left: 3px solid #9CA3AF !important; }
.kanban-card[data-status="pago"]       { border-left: 3px solid #10B981 !important; }
.kanban-card[data-status="produccion"] { border-left: 3px solid #3B82F6 !important; }
.kanban-card[data-status="envio"]      { border-left: 3px solid #9B7BC4 !important; }
.kanban-card[data-status="salida"]     { border-left: 3px solid #F97316 !important; }
.kanban-card[data-status="retirar"]    { border-left: 3px solid #0D9488 !important; }
.kanban-card[data-status="cancelado"]  { border-left: 3px solid #E5E7EB !important; opacity: 0.65; }

/* Tarjeta kanban — mejoras generales */
.kanban-card {
    border-radius: var(--r-md) !important;
    border: 1px solid rgba(201,147,58,0.08) !important;
    box-shadow: 0 1px 4px rgba(42,26,14,0.06), 0 2px 12px rgba(42,26,14,0.03) !important;
    transition: transform 0.2s var(--spring), box-shadow 0.2s ease, border-color 0.15s ease !important;
    position: relative !important;
}
.kanban-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(42,26,14,0.10), 0 2px 8px rgba(201,147,58,0.08) !important;
    border-color: rgba(201,147,58,0.18) !important;
}

/* ── AVATARES DE CLIENTE ── */
.mk-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    color: white;
    flex-shrink: 0;
    letter-spacing: -0.01em;
    user-select: none;
}
.mk-avatar-gold  { background: linear-gradient(135deg,#C9933A,#E8B84B); box-shadow: 0 3px 10px rgba(201,147,58,.35); }
.mk-avatar-lila  { background: linear-gradient(135deg,#9B7BC4,#C4A8E0); box-shadow: 0 3px 10px rgba(155,123,196,.35); }
.mk-avatar-peach { background: linear-gradient(135deg,#D97B4A,#F2A97E); box-shadow: 0 3px 10px rgba(217,123,74,.35); }
.mk-avatar-green { background: linear-gradient(135deg,#059669,#10B981); box-shadow: 0 3px 10px rgba(16,185,129,.35); }

/* Dark mode avatares */
body.dark .mk-avatar-gold  { box-shadow: 0 3px 10px rgba(201,147,58,.5); }
body.dark .mk-avatar-lila  { box-shadow: 0 3px 10px rgba(155,123,196,.5); }
body.dark .mk-avatar-peach { box-shadow: 0 3px 10px rgba(217,123,74,.5); }
body.dark .mk-avatar-green { box-shadow: 0 3px 10px rgba(16,185,129,.5); }

/* ── TRANSACCIONES BALANCE ── */
.mk-tx-income {
    border-left: 3px solid #10B981 !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mk-tx-expense {
    border-left: 3px solid #EF4444 !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mk-tx-income:hover  { background: rgba(16,185,129,0.03) !important; }
.mk-tx-expense:hover { background: rgba(239,68,68,0.03) !important; }

/* ── EMPTY STATES ── */
.mk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}
.mk-empty-icon  { font-size: 2.5rem; margin-bottom: 12px; filter: saturate(0.6) opacity(0.7); }
.mk-empty-title { font-weight: 700; color: var(--ink2); font-size: 0.95rem; margin-bottom: 4px; }
.mk-empty-sub   { font-size: 0.8rem; color: var(--ink3); max-width: 260px; line-height: 1.5; }

/* Dark mode empty state */
body.dark .mk-empty-title { color: #C9A87B; }
body.dark .mk-empty-sub   { color: #7B5A3A; }

/* ── DARK MODE KANBAN ── */
body.dark .mk-kanban-header {
    background: rgba(42,30,15,0.85);
    border-color: rgba(201,147,58,0.15);
}
body.dark .mk-kanban-wrapper:hover .mk-kanban-header {
    background: rgba(50,31,13,0.95);
    border-color: rgba(201,147,58,0.25);
}
body.dark .kanban-card {
    background: #2A1E0F !important;
    border-color: rgba(201,147,58,0.12) !important;
}
body.dark .kanban-card:hover {
    border-color: rgba(201,147,58,0.25) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 2px 8px rgba(201,147,58,0.10) !important;
}
body.dark .mk-kanban-col.drag-over {
    background: rgba(42,30,15,0.6) !important;
    border-color: var(--gold) !important;
}
.d6 { animation-delay: .6s !important; transition-delay: .6s !important; }