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

:root {
    --surface-2: #f0f9ff;
    /* Refined Palette */
    --primary: #2563eb;
    --primary-light: #60a5fa;
    --primary-dark: #1d4ed8;
    --secondary: #7c3aed;
    --secondary-light: #a78bfa;
    --accent: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;

    /* Surface Colors */
    --background: #e0f2fe;
    --surface: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.75);

    /* Text */
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-light: #94a3b8;

    /* Structure */
    --border: #e2e8f0;
    --border-soft: #f1f5f9;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Premium Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    --shadow-premium: 0 10px 40px -10px rgba(37, 99, 235, 0.15);

    /* Premium POS Cart Variables (Luxurious Dark) */
    --premium-cart-bg: linear-gradient(160deg, #1a1c24 0%, #0d0f14 100%);
    --premium-cart-text: #ffffff;
    --premium-cart-text-muted: rgba(255, 255, 255, 0.5);
    --premium-cart-border: rgba(255, 255, 255, 0.08);
    --premium-cart-surface: rgba(255, 255, 255, 0.03);
    --premium-cart-pill: rgba(255, 255, 255, 0.05);
    --surface-grad: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
    --background: #0f172a;
    --surface-2: #0f172a;
    --surface: #1e293b;
    --surface-glass: rgba(30, 41, 59, 0.85);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-light: #64748b;
    --border: #334155;
    --border-soft: #1e293b;
    --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    --primary: #3b82f4;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;

    /* Premium POS Cart Variables (Luxurious Dark Overrides) */
    --premium-cart-bg: #0f172a;
    --premium-cart-text: #ffffff;
    --premium-cart-text-muted: rgba(255, 255, 255, 0.5);
    --premium-cart-border: rgba(255, 255, 255, 0.08);
    --premium-cart-surface: rgba(255, 255, 255, 0.03);
    --premium-cart-pill: rgba(255, 255, 255, 0.05);
    --surface-grad: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Military Theme (Olive/Tan) Variables */
[data-theme="military"] {
    --primary: #5d6d3e;
    --primary-light: #7a8d54;
    --primary-dark: #3e4d25;
    --secondary: #4a5435;
    --background: #2a2c1f;
    --surface: #36392a;
    --surface-glass: rgba(54, 57, 42, 0.85);
    --surface-2: #1e2016;
    --surface-grad: linear-gradient(135deg, #36392a 0%, #1e2016 100%);
    --text-main: #ffffff;
    --text-muted: #d1d5db;
    --border: #4D4D3D;
    --border-soft: #3D3D2C;
    --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
    
    --premium-cart-bg: #1e2016;
    --premium-cart-text: #ffffff;
    --premium-cart-text-muted: rgba(255, 255, 255, 0.5);
    --premium-cart-border: rgba(255, 255, 255, 0.1);
    --premium-cart-surface: rgba(255, 255, 255, 0.05);
    --premium-cart-pill: rgba(255, 255, 255, 0.08);
}

/* Grey Theme (Anthracite) Variables */
[data-theme="grey"] {
    --primary: #475569;
    --surface-2: #0a0a0a;
    --primary-light: #94a3b8;
    --primary-dark: #1e293b;
    --secondary: #64748b;
    --background: #111111;
    --surface: #262626;
    --surface-glass: rgba(38, 38, 38, 0.85);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border: #333333;
    --border-soft: #262626;
    --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.5);

    --premium-cart-bg: #0a0a0a;
    --premium-cart-text: #f8fafc;
    --premium-cart-text-muted: rgba(255, 255, 255, 0.5);
    --premium-cart-border: rgba(255, 255, 255, 0.1);
    --premium-cart-surface: rgba(255, 255, 255, 0.05);
    --premium-cart-pill: rgba(255, 255, 255, 0.08);
    --surface-grad: linear-gradient(135deg, #262626 0%, #111111 100%);
}





[data-theme="military"] .bg-white,
[data-theme="grey"] .bg-white,
[data-theme="dark"] .bg-white,
[data-theme="military"] .card,
[data-theme="grey"] .card,
[data-theme="dark"] .card,
[data-theme="military"] .sidebar,
[data-theme="grey"] .sidebar,
[data-theme="dark"] .sidebar,
[data-theme="military"] .topbar,
[data-theme="grey"] .topbar,
[data-theme="dark"] .topbar,
[data-theme="military"] .bottom-nav,
[data-theme="grey"] .bottom-nav,
[data-theme="dark"] .bottom-nav,
[data-theme="military"] .bottom-bar,
[data-theme="grey"] .bottom-bar,
[data-theme="dark"] .bottom-bar,
[data-theme="military"] .modal-content:not(.premium-cart),
[data-theme="grey"] .modal-content:not(.premium-cart),
[data-theme="dark"] .modal-content:not(.premium-cart),
[data-theme="military"] .nav-item:hover,
[data-theme="grey"] .nav-item:hover,
[data-theme="dark"] .nav-item:hover,
[data-theme="military"] .glass,
[data-theme="grey"] .glass,
[data-theme="dark"] .glass,
[data-theme="military"] button.bg-white:not(.premium-ignore),
[data-theme="grey"] button.bg-white:not(.premium-ignore),
[data-theme="dark"] button.bg-white:not(.premium-ignore),
[data-theme="military"] div.bg-white:not(.premium-ignore),
[data-theme="grey"] div.bg-white:not(.premium-ignore),
[data-theme="dark"] div.bg-white:not(.premium-ignore),
[data-theme="military"] span.bg-white:not(.premium-ignore),
[data-theme="grey"] span.bg-white:not(.premium-ignore),
[data-theme="dark"] span.bg-white:not(.premium-ignore),
[data-theme="pink"] .bg-white,
[data-theme="pink"] .card,
[data-theme="pink"] .sidebar,
[data-theme="pink"] .topbar,
[data-theme="pink"] .bottom-nav,
[data-theme="pink"] .bottom-bar,
[data-theme="pink"] .modal-content,
[data-theme="pink"] .nav-item:hover,
[data-theme="pink"] .glass,
[data-theme="pink"] button.bg-white,
[data-theme="pink"] div.bg-white,
[data-theme="pink"] span.bg-white,
[data-theme="pink"] .wallet-main-card,
[data-theme="military"] .wallet-main-card,
[data-theme="grey"] .wallet-main-card,
[data-theme="dark"] .wallet-main-card {
    background-color: var(--surface) !important;
    background: var(--surface) !important;
    color: var(--text-main) !important;
}

[data-theme="military"] .user-badge,
[data-theme="grey"] .user-badge,
[data-theme="dark"] .user-badge,
[data-theme="military"] .input-field,
[data-theme="grey"] .input-field,
[data-theme="dark"] .input-field,
[data-theme="military"] .btn-outline,
[data-theme="grey"] .btn-outline,
[data-theme="dark"] .btn-outline,
[data-theme="military"] .search-icon-wrapper,
[data-theme="grey"] .search-icon-wrapper,
[data-theme="dark"] .search-icon-wrapper,
[data-theme="military"] .segmented-control,
[data-theme="grey"] .segmented-control,
[data-theme="dark"] .segmented-control,
[data-theme="military"] .cart-footer,
[data-theme="grey"] .cart-footer,
[data-theme="dark"] .cart-footer,
[data-theme="military"] .modal-header,
[data-theme="grey"] .modal-header,
[data-theme="dark"] .modal-header,
[data-theme="military"] .modal-footer,
[data-theme="grey"] .modal-footer,
[data-theme="dark"] .modal-footer,
[data-theme="military"] .sidebar-header,
[data-theme="grey"] .sidebar-header,
[data-theme="dark"] .sidebar-header,
[data-theme="military"] .dropdown-menu,
[data-theme="grey"] .dropdown-menu,
[data-theme="dark"] .dropdown-menu,
[data-theme="military"] .bg-white\/10,
[data-theme="grey"] .bg-white\/10,
[data-theme="dark"] .bg-white\/10,
[data-theme="military"] .bg-white\/20,
[data-theme="grey"] .bg-white\/20,
[data-theme="dark"] .bg-white\/20,
[data-theme="military"] .bg-white\/30,
[data-theme="grey"] .bg-white\/30,
[data-theme="dark"] .bg-white\/30,
[data-theme="military"] .bg-white\/50,
[data-theme="grey"] .bg-white\/50,
[data-theme="dark"] .bg-white\/50,
[data-theme="pink"] .user-badge,
[data-theme="pink"] .input-field,
[data-theme="pink"] .btn-outline,
[data-theme="pink"] .search-icon-wrapper,
[data-theme="pink"] .segmented-control,
[data-theme="pink"] .modal-header,
[data-theme="pink"] .modal-footer,
[data-theme="pink"] .sidebar-header,
[data-theme="pink"] .dropdown-menu {
    background-color: var(--surface) !important;
    background: var(--surface) !important;
    color: var(--text-main) !important;
}

/* Logo en sidebar sí obtiene fondo oscuro, pero NO el del login */
[data-theme="military"] .sidebar .logo-box,
[data-theme="grey"] .sidebar .logo-box,
[data-theme="dark"] .sidebar .logo-box {
    background-color: var(--surface) !important;
    background: var(--surface) !important;
}

/* Logo del login siempre transparente en todos los temas */
[data-theme="military"] .flex.justify-center .logo-box,
[data-theme="grey"] .flex.justify-center .logo-box,
[data-theme="dark"] .flex.justify-center .logo-box,
[data-theme="pink"] .flex.justify-center .logo-box {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

[data-theme="military"] .bg-white:hover,
[data-theme="grey"] .bg-white:hover,
[data-theme="dark"] .bg-white:hover,
[data-theme="military"] .hover\:bg-white:hover,
[data-theme="grey"] .hover\:bg-white:hover,
[data-theme="dark"] .hover\:bg-white:hover,
[data-theme="military"] .hover\:bg-slate-50:hover,
[data-theme="grey"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="military"] .bg-decor,
[data-theme="grey"] .bg-decor,
[data-theme="dark"] .bg-decor {
    background: radial-gradient(circle at 0% 0%, rgba(30, 41, 59, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(15, 23, 42, 0.5) 0%, transparent 50%);
}

[data-theme="military"] .blob,
[data-theme="grey"] .blob,
[data-theme="dark"] .blob {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.3), rgba(15, 23, 42, 0.3));
}

[data-theme="military"] .text-gray-900,
[data-theme="grey"] .text-gray-900,
[data-theme="dark"] .text-gray-900,
[data-theme="military"] .text-gray-800,
[data-theme="grey"] .text-gray-800,
[data-theme="dark"] .text-gray-800,
[data-theme="military"] .text-gray-700,
[data-theme="grey"] .text-gray-700,
[data-theme="dark"] .text-gray-700,
[data-theme="military"] .text-gray-600,
[data-theme="grey"] .text-gray-600,
[data-theme="dark"] .text-gray-600,
[data-theme="military"] .text-gray-500,
[data-theme="grey"] .text-gray-500,
[data-theme="dark"] .text-gray-500,
[data-theme="military"] .text-slate-900,
[data-theme="grey"] .text-slate-900,
[data-theme="dark"] .text-slate-900,
[data-theme="military"] .text-slate-800,
[data-theme="grey"] .text-slate-800,
[data-theme="dark"] .text-slate-800,
[data-theme="military"] .text-slate-700,
[data-theme="grey"] .text-slate-700,
[data-theme="dark"] .text-slate-700,
[data-theme="military"] .text-slate-600,
[data-theme="grey"] .text-slate-600,
[data-theme="dark"] .text-slate-600,
[data-theme="military"] .text-slate-500,
[data-theme="grey"] .text-slate-500,
[data-theme="dark"] .text-slate-500,
[data-theme="military"] .text-black,
[data-theme="grey"] .text-black,
[data-theme="dark"] .text-black,
[data-theme="military"] h1,
[data-theme="grey"] h1,
[data-theme="dark"] h1,
[data-theme="military"] h2,
[data-theme="grey"] h2,
[data-theme="dark"] h2,
[data-theme="military"] h3,
[data-theme="grey"] h3,
[data-theme="dark"] h3,
[data-theme="military"] h4,
[data-theme="grey"] h4,
[data-theme="dark"] h4,
[data-theme="military"] p,
[data-theme="grey"] p,
[data-theme="dark"] p,
[data-theme="military"] label,
[data-theme="grey"] label,
[data-theme="dark"] label,
[data-theme="military"] b,
[data-theme="grey"] b,
[data-theme="dark"] b,
[data-theme="military"] strong,
[data-theme="grey"] strong,
[data-theme="dark"] strong,
[data-theme="military"] .nav-item span,
[data-theme="grey"] .nav-item span,
[data-theme="dark"] .nav-item span,
[data-theme="military"] .stat-card h3,
[data-theme="grey"] .stat-card h3,
[data-theme="dark"] .stat-card h3,
[data-theme="military"] .bottom-nav-item span,
[data-theme="grey"] .bottom-nav-item span,
[data-theme="dark"] .bottom-nav-item span,
[data-theme="military"] span:not(.role-badge):not(.badge),
[data-theme="grey"] span:not(.role-badge):not(.badge),
[data-theme="dark"] span:not(.role-badge):not(.badge) {
    color: var(--text-main) !important;
}

[data-theme="military"] .text-blue-600,
[data-theme="grey"] .text-blue-600,
[data-theme="dark"] .text-blue-600,
[data-theme="military"] .text-blue-500,
[data-theme="grey"] .text-blue-500,
[data-theme="dark"] .text-blue-500,
[data-theme="military"] .nav-item i,
[data-theme="grey"] .nav-item i,
[data-theme="dark"] .nav-item i,
[data-theme="military"] .bottom-nav-item.active i,
[data-theme="grey"] .bottom-nav-item.active i,
[data-theme="dark"] .bottom-nav-item.active i {
    color: var(--primary-light) !important;
}

[data-theme="military"] .text-green-600,
[data-theme="grey"] .text-green-600,
[data-theme="dark"] .text-green-600,
[data-theme="military"] .text-green-500,
[data-theme="grey"] .text-green-500,
[data-theme="dark"] .text-green-500 {
    color: #4ade80 !important;
    /* light green */
}

[data-theme="military"] .text-red-800,
[data-theme="grey"] .text-red-800,
[data-theme="dark"] .text-red-800,
[data-theme="military"] .text-red-700,
[data-theme="grey"] .text-red-700,
[data-theme="dark"] .text-red-700,
[data-theme="military"] .text-red-600,
[data-theme="grey"] .text-red-600,
[data-theme="dark"] .text-red-600,
[data-theme="military"] .text-red-500,
[data-theme="grey"] .text-red-500,
[data-theme="dark"] .text-red-500,
[data-theme="military"] .text-ready,
[data-theme="grey"] .text-ready,
[data-theme="dark"] .text-ready {
    color: #f87171 !important;
    /* light red */
}

[data-theme="military"] .text-muted,
[data-theme="grey"] .text-muted,
[data-theme="dark"] .text-muted,
[data-theme="military"] .text-slate-400,
[data-theme="grey"] .text-slate-400,
[data-theme="dark"] .text-slate-400,
[data-theme="military"] .text-gray-400,
[data-theme="grey"] .text-gray-400,
[data-theme="dark"] .text-gray-400,
[data-theme="military"] .audit-details,
[data-theme="grey"] .audit-details,
[data-theme="dark"] .audit-details {
    color: var(--text-muted) !important;
}

/* Base Utility */
.hidden {
    display: none !important;
}

[data-theme="military"] .border,
[data-theme="grey"] .border,
[data-theme="dark"] .border,
[data-theme="military"] .border-slate-200,
[data-theme="grey"] .border-slate-200,
[data-theme="dark"] .border-slate-200,
[data-theme="military"] .border-slate-100,
[data-theme="grey"] .border-slate-100,
[data-theme="dark"] .border-slate-100,
[data-theme="military"] .border-t,
[data-theme="grey"] .border-t,
[data-theme="dark"] .border-t,
[data-theme="military"] .border-b,
[data-theme="grey"] .border-b,
[data-theme="dark"] .border-b {
    border-color: var(--border) !important;
}

[data-theme="military"] [class*="bg-white"],
[data-theme="grey"] [class*="bg-white"],
[data-theme="dark"] [class*="bg-white"],
[data-theme="military"] [class*="bg-slate-"],
[data-theme="grey"] [class*="bg-slate-"],
[data-theme="dark"] [class*="bg-slate-"],
[data-theme="military"] [class*="bg-gray-"],
[data-theme="grey"] [class*="bg-gray-"],
[data-theme="dark"] [class*="bg-gray-"],
[data-theme="military"] [class*="bg-blue-"],
[data-theme="grey"] [class*="bg-blue-"],
[data-theme="dark"] [class*="bg-blue-"],
[data-theme="military"] [class*="bg-green-"],
[data-theme="grey"] [class*="bg-green-"],
[data-theme="dark"] [class*="bg-green-"],
[data-theme="military"] [class*="bg-red-"],
[data-theme="grey"] [class*="bg-red-"],
[data-theme="dark"] [class*="bg-red-"],
[data-theme="military"] [class*="bg-orange-"],
[data-theme="grey"] [class*="bg-orange-"],
[data-theme="dark"] [class*="bg-orange-"],
[data-theme="military"] [class*="bg-indigo-"],
[data-theme="grey"] [class*="bg-indigo-"],
[data-theme="dark"] [class*="bg-indigo-"],
[data-theme="military"] [class*="bg-teal-"],
[data-theme="grey"] [class*="bg-teal-"],
[data-theme="dark"] [class*="bg-teal-"],
[data-theme="military"] .product-image-placeholder,
[data-theme="grey"] .product-image-placeholder,
[data-theme="dark"] .product-image-placeholder,
[data-theme="military"] .fb-marketplace-img,
[data-theme="grey"] .fb-marketplace-img,
[data-theme="dark"] .fb-marketplace-img,
[data-theme="military"] .stat-card,
[data-theme="grey"] .stat-card,
[data-theme="dark"] .stat-card,
[data-theme="military"] .stat-icon,
[data-theme="grey"] .stat-icon,
[data-theme="dark"] .stat-icon,
[data-theme="military"] .product-card,
[data-theme="grey"] .product-card,
[data-theme="dark"] .product-card,
[data-theme="military"] .order-card,
[data-theme="grey"] .order-card,
[data-theme="dark"] .order-card,
[data-theme="military"] .kds-column,
[data-theme="grey"] .kds-column,
[data-theme="dark"] .kds-column,
[data-theme="military"] .column-count,
[data-theme="grey"] .column-count,
[data-theme="dark"] .column-count,
[data-theme="pink"] [class*="bg-white"],
[data-theme="pink"] [class*="bg-slate-"],
[data-theme="pink"] [class*="bg-gray-"],
[data-theme="pink"] .stat-card,
[data-theme="pink"] .stat-icon,
[data-theme="pink"] .product-card,
[data-theme="pink"] .order-card {
    background-color: var(--surface) !important;
    background: var(--surface) !important;
}

[data-theme="military"] .bg-slate-900,
[data-theme="grey"] .bg-slate-900,
[data-theme="dark"] .bg-slate-900,
[data-theme="military"] .bg-slate-800,
[data-theme="grey"] .bg-slate-800,
[data-theme="dark"] .bg-slate-800,
[data-theme="military"] .bg-gray-900,
[data-theme="grey"] .bg-gray-900,
[data-theme="dark"] .bg-gray-900,
[data-theme="military"] .bg-gray-800,
[data-theme="grey"] .bg-gray-800,
[data-theme="dark"] .bg-gray-800,
[data-theme="military"] .scroll-floating-btn:hover,
[data-theme="grey"] .scroll-floating-btn:hover,
[data-theme="dark"] .scroll-floating-btn:hover {
    background-color: var(--primary) !important;
    background: var(--primary) !important;
    color: white !important;
}

[data-theme="military"] .column-header,
[data-theme="grey"] .column-header,
[data-theme="dark"] .column-header {
    background: var(--surface-glass) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="military"] .scroll-floating-btn,
[data-theme="grey"] .scroll-floating-btn,
[data-theme="dark"] .scroll-floating-btn {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="military"] .fb-marketplace-img,
[data-theme="grey"] .fb-marketplace-img,
[data-theme="dark"] .fb-marketplace-img,
[data-theme="military"] .product-image-placeholder,
[data-theme="grey"] .product-image-placeholder,
[data-theme="dark"] .product-image-placeholder,
[data-theme="military"] .bg-decor,
[data-theme="grey"] .bg-decor,
[data-theme="dark"] .bg-decor {
    filter: brightness(0.8);
}

[data-theme="military"] .fb-marketplace-img i,
[data-theme="grey"] .fb-marketplace-img i,
[data-theme="dark"] .fb-marketplace-img i,
[data-theme="military"] .product-image-placeholder i,
[data-theme="grey"] .product-image-placeholder i,
[data-theme="dark"] .product-image-placeholder i {
    color: var(--text-muted) !important;
    opacity: 0.4;
}

[data-theme="military"] .bottom-nav-item.active::before,
[data-theme="grey"] .bottom-nav-item.active::before,
[data-theme="dark"] .bottom-nav-item.active::before {
    background: rgba(59, 130, 246, 0.1) !important;
    box-shadow: none !important;
}

[data-theme="military"] .marketplace-scroll .product-card .fb-marketplace-img,
[data-theme="grey"] .marketplace-scroll .product-card .fb-marketplace-img,
[data-theme="dark"] .marketplace-scroll .product-card .fb-marketplace-img {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="military"] .border-slate-50,
[data-theme="grey"] .border-slate-50,
[data-theme="dark"] .border-slate-50,
[data-theme="military"] .border-slate-100,
[data-theme="grey"] .border-slate-100,
[data-theme="dark"] .border-slate-100,
[data-theme="military"] .border-slate-200,
[data-theme="grey"] .border-slate-200,
[data-theme="dark"] .border-slate-200,
[data-theme="military"] .border-gray-50,
[data-theme="grey"] .border-gray-50,
[data-theme="dark"] .border-gray-50,
[data-theme="military"] .border-gray-100,
[data-theme="grey"] .border-gray-100,
[data-theme="dark"] .border-gray-100,
[data-theme="military"] .border-gray-200,
[data-theme="grey"] .border-gray-200,
[data-theme="dark"] .border-gray-200,
[data-theme="military"] .border-blue-50,
[data-theme="grey"] .border-blue-50,
[data-theme="dark"] .border-blue-50,
[data-theme="military"] .border-blue-100,
[data-theme="grey"] .border-blue-100,
[data-theme="dark"] .border-blue-100 {
    border-color: var(--border) !important;
}

[data-theme="military"] .sub-card-error-fix,
[data-theme="grey"] .sub-card-error-fix,
[data-theme="pink"] .sub-card-error-fix,
[data-theme="dark"] .sub-card-error-fix {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

[data-theme="military"] .sub-card-blue,
[data-theme="grey"] .sub-card-blue,
[data-theme="pink"] .sub-card-blue,
[data-theme="dark"] .sub-card-blue,
[data-theme="military"] .sub-card-green,
[data-theme="grey"] .sub-card-green,
[data-theme="pink"] .sub-card-green,
[data-theme="dark"] .sub-card-green {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

[data-theme="military"] .text-gray-300,
[data-theme="grey"] .text-gray-300,
[data-theme="dark"] .text-gray-300,
[data-theme="military"] .text-slate-200,
[data-theme="grey"] .text-slate-200,
[data-theme="dark"] .text-slate-200,
[data-theme="military"] .text-slate-300,
[data-theme="grey"] .text-slate-300,
[data-theme="dark"] .text-slate-300 {
    color: var(--text-muted) !important;
}


[data-theme="military"] .btn-ghost:hover,
[data-theme="grey"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:hover {
    background-color: var(--border) !important;
}

[data-theme="military"] .nav-item.active,
[data-theme="grey"] .nav-item.active,
[data-theme="dark"] .nav-item.active {
    background-color: rgba(37, 99, 235, 0.2) !important;
}

/* Pink Theme Overrides */
[data-theme="pink"] {
    --primary: #f472b6;
    --surface-2: #fff1f2;
    --primary-light: #fbcfe8;
    --primary-dark: #db2777;
    --secondary: #ec4899;
    --background: #fdf2f8;
    --surface: #ffffff;
    --surface-grad: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    --text-main: #9d174d;
    --text-muted: #be185d;
    --border: #fbcfe8;
    --border-soft: #fff1f2;
    --premium-cart-bg: #500724;
    --premium-cart-text: #ffffff;
    --premium-cart-text-muted: rgba(255, 255, 255, 0.6);
    --premium-cart-border: rgba(255, 255, 255, 0.15);
    --premium-cart-surface: rgba(255, 255, 255, 0.1);
    --premium-cart-pill: rgba(255, 255, 255, 0.1);
    --shadow-premium: 0 10px 40px -10px rgba(236, 72, 153, 0.15);
}

[data-theme="pink"] .bg-white,
[data-theme="pink"] .card,
[data-theme="pink"] .sidebar,
[data-theme="pink"] .topbar,
[data-theme="pink"] .bottom-nav,
[data-theme="pink"] .bottom-bar,
[data-theme="pink"] .modal-content,
[data-theme="pink"] .nav-item:hover,
[data-theme="pink"] .glass,
[data-theme="pink"] button.bg-white,
[data-theme="pink"] div.bg-white,
[data-theme="pink"] span.bg-white {
    background-color: var(--surface) !important;
    background: var(--surface) !important;
}

[data-theme="pink"] .text-blue-600,
[data-theme="pink"] .text-primary {
    color: var(--primary) !important;
}

[data-theme="pink"] .bg-blue-600,
[data-theme="pink"] .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="pink"] .bg-blue-50,
[data-theme="pink"] .bg-slate-50,
[data-theme="pink"] .bg-slate-100,
[data-theme="pink"] .bg-gray-100 {
    background-color: var(--surface) !important;
}

[data-theme="pink"] .bg-blue-100,
[data-theme="pink"] .bg-indigo-100,
[data-theme="pink"] .bg-purple-100,
[data-theme="pink"] .bg-blue-500,
[data-theme="pink"] .bg-blue-700 {
    background-color: var(--surface) !important;
    color: #9d174d !important;
}

[data-theme="pink"] .text-blue-500,
[data-theme="pink"] .text-blue-600,
[data-theme="pink"] .text-blue-700,
[data-theme="pink"] .text-blue-800,
[data-theme="pink"] .text-indigo-600,
[data-theme="pink"] .text-indigo-800,
[data-theme="pink"] .text-primary {
    color: var(--primary) !important;
}

[data-theme="pink"] .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

[data-theme="pink"] .logo-box i {
    color: var(--primary) !important;
}

[data-theme="pink"] .nav-item.active {
    background-color: #fff1f2 !important;
    color: var(--primary) !important;
}

[data-theme="pink"] .btn-danger {
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
    border-color: #fecdd3 !important;
}

[data-theme="pink"] .btn-danger:hover {
    background-color: #ffe4e6 !important;
}

[data-theme="pink"] .role-badge {
    background-color: #fce7f3 !important;
    color: #9d174d !important;
}

/* Theme Menu Styling */
.animate-fade-in-up {
    animation: fadeInUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.theme-bubble {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    flex-shrink: 0;
}

.theme-bubble:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.theme-bubble:active {
    transform: scale(0.95);
}

[data-theme="military"] .theme-menu,
[data-theme="grey"] .theme-menu,
[data-theme="dark"] .theme-menu {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    z-index: 999999 !important;
}

/* Specific Topbar Menu Placement */
.topbar-theme-menu {
    border-radius: 20px !important;
    padding: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    overflow: visible !important;
}

.theme-bubble {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.theme-bubble:hover {
    transform: scale(1.2) !important;
    z-index: 5 !important;
}

[data-theme="military"] .topbar-theme-menu,
[data-theme="grey"] .topbar-theme-menu,
[data-theme="dark"] .topbar-theme-menu {
    background-color: var(--surface-2) !important;
    border-color: #334155 !important;
}

@media (max-width: 640px) {
    .topbar-theme-menu {
        right: 0px !important;
        left: auto !important;
        transform: none !important;
        position: absolute !important;
        margin-right: 0 !important;
    }
}



[data-theme="pink"] .blob {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.1), rgba(236, 72, 153, 0.1));
}

[data-theme="pink"] * {
    border-color: var(--border);
}

/* Base Refresh */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    /* Ocultar scrollbar en todos los elementos — Chrome, Safari, Edge */
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE / Edge legacy */
}

/* Ocultar scrollbar — Chrome, Safari, Opera, Edge Chromium */
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

h1,
h2,
h3,
h4,
.font-outfit {
    font-family: 'Outfit', sans-serif;
}

/* Creative Background Blobs */
.bg-decor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.03) 0%, transparent 50%);
}

.blob {
    position: absolute;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(124, 58, 237, 0.05));
    border-radius: 50%;
    filter: blur(80px);
    animation: blob-float 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}

.blob-1 {
    top: -100px;
    right: -100px;
}

.blob-2 {
    bottom: -100px;
    left: -100px;
    animation-delay: -5s;
}

@keyframes blob-float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 100px) scale(1.1);
    }
}

/* Glassmorphism Classes */
.glass {
    background: var(--surface-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* --- Utilities Essentials --- */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.w-full {
    width: 100%;
}

.hidden {
    display: none !important;
}

.no-underline {
    text-decoration: none !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

.max-w-md {
    max-width: 28rem;
    width: 100%;
}

.max-w-lg {
    max-width: 32rem;
    width: 100%;
}

.grid {
    display: grid !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.col-span-full {
    grid-column: 1 / -1 !important;
}

.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Global Icons Fix */
i[data-lucide] {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.btn i {
    flex-shrink: 0;
}

/* --- Added Semantic Utilities for app.js Compatibility --- */
.card-header-bar {
    background-color: rgba(249, 250, 251, 0.5) !important;
}

.text-gray-500 {
    color: #6b7280 !important;
}

.text-tiny {
    font-size: 10px !important;
}

.font-bold {
    font-weight: 700 !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.py-0\.5 {
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.border {
    border: 1px solid var(--border) !important;
}

.text-gray-900 {
    color: #111827 !important;
}

.p-4 {
    padding: 1rem !important;
}

.border-b {
    border-bottom: 1px solid var(--border) !important;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.w-9 {
    width: 36px !important;
}

.h-9 {
    height: 36px !important;
}

.w-10 {
    width: 40px !important;
}

.h-10 {
    height: 40px !important;
}

.text-green-500 {
    color: var(--success) !important;
}

.text-blue-500 {
    color: var(--primary) !important;
}

.text-red-500 {
    color: var(--danger) !important;
}

.text-red-600 {
    color: #dc2626 !important;
}

.bg-red-100 {
    background-color: #fee2e2 !important;
}

.bg-green-50 {
    background-color: #f0fdf4 !important;
}

.bg-blue-50 {
    background-color: #eff6ff !important;
}

.rounded {
    border-radius: 0.25rem !important;
}

.border-none {
    border: none !important;
}

/* Modal and Layout Utilities */
.h-85vh {
    height: 85vh;
}

.max-h-90vh {
    max-height: 90vh;
}

.flex-1 {
    flex: 1;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-2000 {
    z-index: 2000;
}

.items-end {
    align-items: flex-end;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-auto {
    margin-right: auto;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-3xl {
    font-size: 1.875rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.text-5xl {
    font-size: 3rem;
}

.text-blue-600 {
    color: #2563eb;
}

.text-blue-700 {
    color: #1d4ed8;
}

.text-blue-800 {
    color: #1e40af;
}

.text-blue-900 {
    color: #1e3a8a;
}

.text-green-600 {
    color: #16a34a;
}

.text-red-500 {
    color: #ef4444;
}

.text-red-600 {
    color: #dc2626;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-800 {
    color: #1f2937;
}

.text-gray-900 {
    color: #111827;
}

.text-primary {
    color: var(--primary);
}

.text-black {
    color: #000000 !important;
}

.text-slate-900 {
    color: #0f172a;
}

.text-slate-800 {
    color: #1e293b;
}

.text-slate-700 {
    color: #334155;
}

.text-slate-600 {
    color: #475569;
}

.text-slate-500 {
    color: #64748b;
}

.text-slate-400 {
    color: #94a3b8;
}

.text-slate-300 {
    color: #cbd5e1;
}

.text-muted {
    color: var(--text-muted);
}

.bg-white {
    background-color: white;
}

.bg-blue-50 {
    background-color: #eff6ff;
}

.bg-slate-50 {
    background-color: #f8fafc;
}

.bg-slate-100 {
    background-color: #f1f5f9;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Tabs / Segmented Control */
.segmented-control {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.tab-active {
    background-color: var(--primary) !important;
    color: white !important;
    font-weight: 700 !important;
}

.tab-inactive {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}

/* Specific overrides for white (default) theme as per user request */
[data-theme="default"] .tab-active,
[data-theme="default"] .tab-active *,
:root:not([data-theme]) .tab-active,
:root:not([data-theme]) .tab-active * {
    color: #ffffff !important;
}

[data-theme="default"] .tab-inactive,
[data-theme="default"] .tab-inactive *,
:root:not([data-theme]) .tab-inactive,
:root:not([data-theme]) .tab-inactive * {
    color: #000000 !important;
    opacity: 0.9 !important;
}

.segmented-control button {
    transition: all 0.3s ease;
    border: none;
    outline: none;
    cursor: pointer;
}

.bg-gray-100 {
    background-color: #f3f4f6;
}

.bg-green-100 {
    background-color: #dcfce7;
}

.bg-red-100 {
    background-color: #fee2e2;
}

.bg-blue-100\/50 {
    background-color: rgba(219, 234, 254, 0.5);
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.border {
    border: 1px solid var(--border);
}

.border-b {
    border-bottom: 1px solid var(--border);
}

.border-t {
    border-top: 1px solid var(--border);
}

.border-blue-100 {
    border-color: #dbeafe;
}

.pl-4 {
    padding-left: 1rem !important;
}

.pr-4 {
    padding-right: 1rem !important;
}

.pr-6 {
    padding-right: 1.5rem !important;
}

.pr-8 {
    padding-right: 2rem !important;
}

.pr-10 {
    padding-right: 2.5rem !important;
}

/* Helpers specific sizes */
.w-16 {
    width: 4rem;
}

.h-16 {
    height: 4rem;
}

.w-10 {
    width: 2.5rem;
}

.h-10 {
    height: 2.5rem;
}

.list-disc {
    list-style-type: disc;
}

.pl-4 {
    padding-left: 1rem;
}

.space-y-1>*+* {
    margin-top: 0.25rem;
}

/* --- Components --- */

/* Global Centered Login Container */
.app-login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 1rem;
    position: relative;
    z-index: 10;
}

/* Login Logo Container Fix */
.flex.justify-center.mb-4 .logo-box {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0;
    box-shadow: none !important;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Sidebar Layout */
.layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    width: 280px;
    height: 100vh !important;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2200;
    box-sizing: border-box;
    overflow: hidden;
}

.sidebar.collapsed {
    width: 80px;
    overflow: visible !important;
}

/* Sidebar Header */
.sidebar-header {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.75rem;
}

/* Sidebar colapsado — nav con scroll vertical */
.sidebar.collapsed .sidebar-nav {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0 !important;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    position: relative;
    pointer-events: none;
}

.sidebar.collapsed .sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.sidebar.collapsed .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.sidebar.collapsed .nav-item {
    position: relative;
    justify-content: center;
    padding: 0.75rem 0;
    width: 80px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Expandida: scroll vertical con overflow-x sin conflicto */
.sidebar:not(.collapsed) .sidebar-nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ——— Tooltip JS: #sidebar-tooltip en el body ——— */
#sidebar-tooltip {
    position: fixed;
    left: 90px;
    background: #ffffff;
    color: #1e293b;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid #e2e8f0;
    opacity: 0;
    transition: opacity 0.15s ease;
    transform: translateY(-50%);
}

#sidebar-tooltip.visible {
    opacity: 1;
}

[data-theme="military"] #sidebar-tooltip,
[data-theme="grey"] #sidebar-tooltip,
[data-theme="dark"] #sidebar-tooltip {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

[data-theme="pink"] #sidebar-tooltip {
    background: #fff1f2;
    color: #9d174d;
    border-color: #fbcfe8;
}

/* Evitar que tooltips se queden pegados en el login */
.login-mode #sidebar-tooltip {
    display: none !important;
}


.sidebar.collapsed .sidebar-header .sidebar-title,
.sidebar.collapsed .nav-item span {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

.logo-box {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    flex-shrink: 0;
    padding: 4px;
    overflow: hidden;
}

[data-theme="military"] img[src*="logo-torre"],
[data-theme="grey"] img[src*="logo-torre"],
[data-theme="dark"] img[src*="logo-torre"],
[data-theme="military"] .logo-box img,
[data-theme="grey"] .logo-box img,
[data-theme="dark"] .logo-box img {
    filter: brightness(0) invert(1) !important;
}

.logo-box i {
    color: var(--primary) !important;
}

/* --- Unified Iconic Search System --- */
.search-icon-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    background: transparent;
    border: none !important;
    border-radius: 9999px;
    padding: 0;
    width: 32px;
    /* Standard icon size roughly */
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 32px;
}

.search-icon-wrapper.open {
    width: 280px;
    background: white;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 38px;
    padding: 0 4px;
}

.search-icon-input-container {
    flex: 1;
    overflow: hidden;
}

.search-icon-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 0.9rem;
    outline: none;
    color: var(--text-main);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.search-icon-wrapper.open .search-icon-input {
    opacity: 1;
    transform: translateX(0);
}

.search-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* Remove any circle radius */
}

.search-icon-btn:hover {
    color: var(--primary);
    background: transparent !important;
}

.search-icon-btn.active {
    color: var(--primary);
}

.search-container-header {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Mobile Search Fixes */
@media (max-width: 1366px) {
    .search-container-header.w-full {
        width: 100% !important;
        order: -1;
        margin-bottom: 0.75rem;
        display: block !important;
    }

    .search-icon-wrapper.open {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 0;
        height: 44px;
        box-shadow: var(--shadow-md);
    }

    .search-icon-wrapper.open .search-icon-btn {
        width: 40px;
        height: 40px;
    }

    .search-icon-input {
        font-size: 1rem;
        /* Better for mobile typing */
    }

    .header-actions-block {
        width: 100%;
    }
}

.sidebar-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sidebar-title .font-bold {
    font-size: 1rem;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

.sidebar-nav {
    flex: 1 !important;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0 !important;
    /* min-height:0 es clave: sin esto, flex-children ignoran la altura del padre */
}

/* Subtly style the scrollbar for the sidebar */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="military"] .sidebar-nav::-webkit-scrollbar-thumb,
[data-theme="grey"] .sidebar-nav::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="military"] .sidebar-nav:hover::-webkit-scrollbar-thumb,
[data-theme="grey"] .sidebar-nav:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

.nav-item i {
    color: var(--text-light);
    transition: all 0.3s;
}

.nav-item:hover {
    background: transparent;
    color: var(--primary);
}

.nav-item:hover i {
    color: var(--primary);
    /* transform search eliminated to avoid conflict with new custom animations */
}

.nav-item.active {
    background: transparent;
    color: var(--primary);
    font-weight: 600;
}

.nav-item.active i {
    color: var(--primary);
}

.nav-item.active::before {
    display: none;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    /* Changed from visible to hidden to force main-content to scroll */
    position: relative;
    background: transparent;
    min-width: 0;
}

.bottom-nav {
    display: none;
}

.topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: calc(64px + env(safe-area-inset-top, 0px));
    display: grid;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
    align-items: center;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 0;
    z-index: 2100;
    background: var(--surface-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: none;
    opacity: 1;
    overflow: visible !important;
    flex-shrink: 0;
}




.topbar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible !important;
}

.theme-switcher-container {
    overflow: visible !important;
}


.topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 250px;
    margin: 0 auto;
}

.topbar-center h1 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
}

.mobile-fixed-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: white !important;
    box-shadow: var(--shadow-premium);
    color: var(--text-main) !important;
}

/* Hide toggle on desktop if sidebar is visible */
@media (min-width: 1025px) {
    .sidebar:not(.collapsed)+.content-wrapper .mobile-fixed-toggle {
        display: none !important;
    }
}

@media (max-width: 1024.98px) {
    .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        padding: 0 1rem !important;
        padding-top: env(safe-area-inset-top, 20px) !important;
        height: calc(70px + env(safe-area-inset-top, 0px)) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        background: var(--surface-glass) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        z-index: 2000 !important;
    }

    .topbar-center {
        max-width: 100% !important;
        padding: 0 4px;
    }

    .topbar-center h1 {
        font-size: 0.95rem !important;
        text-align: center;
    }

    .user-badge {
        gap: 0.25rem !important;
    }

    .user-badge .avatar {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }

    .user-info-header {
        display: flex !important;
        max-width: 150px !important;
        margin-right: 0.5rem;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .hide-mobile-user-info {
        display: none !important;
    }

    .topbar.header-hidden {
        opacity: 0;
        pointer-events: none;
        box-shadow: none;
        transform: translateY(-100%) !important;
    }
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-height: 100%;
}

.user-info-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    max-width: 120px;
}

.user-info-header p {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.user-badge .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0 !important;
}

.user-badge .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.role-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: capitalize;
    margin-top: 1px;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    padding-top: calc(75px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 2rem !important;
    height: 100%;
    min-height: 0;
}

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--surface) 0%, #fefefe 100%);
    position: relative;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
}

.stat-card h3 {
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Base product card fix for GRID sections (Marketplace/Estudios) */
.grid .product-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

.grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 1025px) {
    .lg\:grid-cols-4 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-outline {
    background: white;
    border: 1px solid var(--border);
    color: var(--text-main);
}

.btn-outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-danger {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fee2e2;
}

[data-theme="military"] .btn-danger,
[data-theme="grey"] .btn-danger,
[data-theme="dark"] .btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

.btn-danger:hover {
    background: #fee2f2;
}

[data-theme="military"] .btn-danger:hover,
[data-theme="grey"] .btn-danger:hover,
[data-theme="dark"] .btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

.btn-danger-outline {
    background: transparent !important;
    border: 1px solid #fee2e2 !important;
    color: #ef4444 !important;
}

.btn-danger-outline:hover {
    background: #fef2f2 !important;
}

/* Danger Zone Soft Styles */
.card-danger-soft {
    border: 1.5px solid #fee2e2 !important;
    background: #fff8f8 !important;
    border-radius: var(--radius-lg);
}

[data-theme="military"] .card-danger-soft,
[data-theme="grey"] .card-danger-soft,
[data-theme="dark"] .card-danger-soft {
    background: rgba(239, 68, 68, 0.05) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.btn-danger-soft {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1.5px solid #fecaca !important;
}

[data-theme="military"] .btn-danger-soft,
[data-theme="grey"] .btn-danger-soft,
[data-theme="dark"] .btn-danger-soft {
    background: rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
    color: #fca5a5 !important;
}

.btn-primary-soft {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1.5px solid #dbeafe !important;
}

[data-theme="military"] .btn-primary-soft,
[data-theme="grey"] .btn-primary-soft,
[data-theme="dark"] .btn-primary-soft {
    background: rgba(37, 99, 235, 0.25) !important;
    color: #93c5fd !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
}

.btn-warning-soft {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1.5px solid #fef3c7 !important;
}

[data-theme="military"] .btn-warning-soft,
[data-theme="grey"] .btn-warning-soft,
[data-theme="dark"] .btn-warning-soft {
    background: rgba(217, 119, 6, 0.25) !important;
    color: #fde047 !important;
    border-color: rgba(217, 119, 6, 0.5) !important;
}

/* Global Lucide SVG Fix */
.btn i, .btn svg {
    pointer-events: none;
    display: inline-block;
    vertical-align: middle;
}

/* Inputs */
.input-group {
    margin-bottom: 1.25rem;
}

.input-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
}

.input-field {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--surface);
    color: var(--text-main);
}

.input-field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    background: white;
}

.input-field::placeholder {
    color: var(--text-light);
}

.password-toggle {
    all: unset;
    display: flex !important;
    /* all:unset lo resetea a inline — hay que recuperarlo */
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #94a3b8;
    /* visible en fondos claros */
    width: 24px;
    height: 24px;
    z-index: 10;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #475569;
}

/* En el login (glassmorphism oscuro), usar color blanco */
.glass .password-toggle,
.glass .input-group .password-toggle {
    color: rgba(255, 255, 255, 0.75) !important;
}

.glass .password-toggle:hover,
.glass .input-group .password-toggle:hover {
    color: #ffffff !important;
}

.password-toggle i {
    pointer-events: none;
    stroke-width: 1.5px;
}

/* Ocultar el ojo nativo de navegadores como Edge/Chrome */
input::-ms-reveal,
input::-ms-clear {
    display: none !important;
}

/* --- Profile View Styles --- */
.profile-view-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 0;
}

.profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .profile-form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Misc */
.animate-fade-in {
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shadow-premium {
    box-shadow: var(--shadow-premium) !important;
}

.badge {
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-gray {
    background-color: #f1f5f9;
    color: #475569;
}

.product-image-placeholder {
    height: 120px;
    background: #f1f5f9;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}

.segmented-control {
    display: flex;
    width: 100%;
}

.segmented-control button {
    flex: 1;
    /* Esto fuerza a que cada botón tome el mismo ancho disponible */
    width: 100%;
    /* Refuerzo */
    display: flex;
    /* Para centrar contenido con flex */
    align-items: center;
    justify-content: center;
    /* Centro horizontal */
    text-align: center;
    transition: all 0.2s;
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-weight: 600;
}

.segmented-control button:hover {
    background-color: #f8fafc;
    /* bg-slate-50 */
    color: var(--text-main);
}

.segmented-control button.active {
    background-color: var(--primary);
    /* Blue 600 */
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

@keyframes bounce-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.animate-bounce-subtle {
    animation: bounce-subtle 2s infinite ease-in-out;
}

.modal-content {
    background: var(--surface);
    padding: 2rem;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    animation: scaleUp 0.2s forwards;
}

.modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.close-modal {
    cursor: pointer;
    color: var(--text-muted);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: auto !important;
    height: auto !important;
}

.close-modal:hover {
    color: var(--text-main);
    transform: rotate(90deg);
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    background: var(--surface);
    color: var(--text-main);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 320px;
    max-width: 400px;
    border-left: 4px solid var(--primary);
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    pointer-events: auto;
    opacity: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-success {
    border-left-color: #22c55e;
}

/* Green 500 */
.toast-error {
    border-left-color: #ef4444;
}

/* Red 500 */
.toast-info {
    border-left-color: #3b82f6;
}

/* Blue 500 */

.toggle-sidebar-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-sidebar-btn:hover {
    background-color: #f1f5f9;
    color: var(--primary);
    color: var(--primary);
}

/* --- User Card Responsive Layout (Default: Desktop Row) --- */
.user-card-layout {
    flex-direction: row;
    align-items: center;
}

.user-card-header {
    margin-bottom: 0;
}

.user-card-actions {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    width: auto;
}

.user-card-badges {
    justify-content: flex-start;
}

.user-card-buttons {
    justify-content: flex-start;
    padding-top: 0;
    border-top: none;
}

/* --- Section Header (Desktop Default) --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.sidebar.collapsed .toggle-sidebar-btn {
    margin: 0 auto;
    margin-top: 10px;
    transform: rotate(180deg);
}


/* --- Mobile Overlay Default --- */
.mobile-overlay {
    display: none;
}

/* --- Mobile / Tablet Adaptability (Max Width: 1024.98px) --- */
@media (max-width: 1024.98px) {
    .desktop-only {
        display: none !important;
    }

    /* --- CRITICAL MOBILE STABILITY ENFORCEMENT --- */
    /* 1. Global Reset & Overflow Protection */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        touch-action: pan-y !important;
    }

    /* Force border-box everywhere on mobile */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    /* 1. Global Reset for Mobile Scroll/Zoom */
    html,
    body {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative;
        touch-action: auto !important;
        /* Restore native touch behavior */
        -webkit-overflow-scrolling: touch;
    }


    #app {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Prevent any element from exceeding viewport width */
    *,
    *:before,
    *:after {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Force inputs to 16px to prevent iOS zoom-on-focus */
    input,
    select,
    textarea,
    .input-field {
        font-size: 16px !important;
    }


    /* 2. Layout Structure */
    .layout {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        position: relative !important;
        background: var(--background) !important;
        padding-top: 0 !important;
    }

    /* Force background to fill everything */
    html,
    body {
        background: var(--background) !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }


    .content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        flex: 1 !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: relative;
    }


    .main-content {
        flex: 1 !important;
        min-height: 0 !important;
        width: 100% !important;
        padding: 0.75rem !important;
        /* Desktop header height buffer */
        padding-top: calc(75px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 80px !important;
        /* Maintain scrollability if parent allows */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative;
        background: transparent !important;
    }

    /* Standardize admin main content mobile padding */
    .main-content.role-admin,
    .main-content.role-admin-principal,
    .main-content.role-admin-master {
        padding: 0.75rem !important;
        padding-top: calc(95px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 80px !important;
        overflow-y: auto !important;
        background: transparent !important;
        height: 100%;
    }

    /* Modal Mobile Adjustments */
    .modal-content {
        padding: 1.5rem !important;
        width: 92% !important;
        max-width: 92% !important;
        margin: 0 auto;
        max-height: 85vh !important;
        border-radius: 1.25rem !important;
        position: relative;
    }

    .modal-header h3 {
        font-size: 1.15rem !important;
    }

    /* Force grids to single column on mobile */
    .grid-cols-3,
    .grid-cols-4,
    .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Table Responsiveness Utility */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    .table-responsive table {
        min-width: 600px;
        /* Minimum width to force scroll on very small screens */
    }

    /* Force flex rows to columns on mobile inside modals */
    .modal-body .flex.gap-4 {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .modal-body .flex.gap-4>.flex-1 {
        width: 100% !important;
    }

    /* Ensure cropper container fits on mobile */
    [style*="min-width: 320px"] {
        min-width: 100% !important;
    }

    #cropperContainer {
        width: 250px !important;
        height: 250px !important;
    }

    /* Modal Button Mobile Optimization */
    .modal-body .flex.justify-end,
    .modal-body .flex.justify-center {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-top: 1.5rem !important;
    }

    .modal-body .flex.justify-end .btn,
    .modal-body .flex.justify-center .btn {
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
    }






    /* Removing duplicate Iconic Search Styles from mobile section to use the unified one above */

    .header-actions-block {
        width: 100% !important;
        margin-top: 0.5rem;
    }


    /* 3. Grid & Flex Destruct for Mobile - STRICTLY PHONES ONLY */
    @media (max-width: 640px) {

        /* Force grids to single column */
        /* 3. Grid & Flex Destruct for Mobile */
        /* Force grids to single column by default, but handle stats specifically */
        .grid-cols-2,
        .grid-cols-3,
        .grid-cols-4,
        div[class*="grid-cols-"],
        div[style*="display: grid"],
        div[style*="grid-template-columns"] {
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
            grid-template-columns: 1fr !important;
            width: 100% !important;
            gap: 0.75rem !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }

    /* TABLET ADAPTATION (iPad) 641px - 1024.98px */
    @media (min-width: 641px) and (max-width: 1024.98px) {

        /* Ensure grids use 2 or 3 columns instead of 1, preventing stretch */
        .grid-cols-3,
        .grid-cols-4,
        .grid-cols-5,
        .lg\:grid-cols-5 {
            grid-template-columns: repeat(2, 1fr) !important;
            display: grid !important;
        }

        .stats-grid {
            grid-template-columns: repeat(4, 1fr) !important;
            /* Allow stats to be 4 cols on tablet if space permits, or 2x2 */
        }

        /* If screen is narrower tablet (portrait), maybe 2x2 */
        @media (max-width: 900px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        .profile-form-grid {
            grid-template-columns: 1fr 1fr !important;
        }

        /* Prevent buttons from being excessively wide */
        .btn {
            width: auto !important;
            min-width: 120px;
        }

        /* Exception for modal buttons or full-width intended buttons */
        .w-full {
            width: 100% !important;
        }

        .modal-body .flex.justify-end,
        .modal-body .flex.justify-center {
            flex-direction: row !important;
            /* Restore row layout for buttons on tablet */
            gap: 1rem !important;
            margin-top: 1.5rem !important;
        }

        /* Restore inputs natural width or max-width container */
        .input-group {
            max-width: 100% !important;
        }

        /* Liquidaciones: Restore row layout */
        .liquidacion-footer {
            flex-direction: row !important;
            align-items: center !important;
        }

        .liquidacion-btn {
            width: auto !important;
        }
    }

    /* Dashboard Compact Enhancements */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        flex-direction: row !important;
        gap: 0.35rem !important;
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }

    .stat-card {
        padding: 0.4rem 0.2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
        aspect-ratio: 1 / 0.9 !important;
        /* Slightly shorter than square */
        text-align: center !important;
        border-radius: 12px !important;
    }

    .stat-card>div:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 2;
    }

    .stat-card h3 {
        font-size: 1rem !important;
        margin-top: 0 !important;
        line-height: 1 !important;
    }

    .stat-card p {
        font-size: 0.55rem !important;
        line-height: 1 !important;
        margin-bottom: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .stat-icon {
        width: 20px !important;
        height: 20px !important;
        margin-bottom: 2px !important;
        order: 1;
    }

    .stat-icon i {
        width: 14px !important;
        height: 14px !important;
    }


    h2.text-2xl {
        font-size: 1.15rem !important;
        margin-bottom: 0.15rem !important;
    }

    p.text-muted.mb-8,
    .subtitle-dash {
        margin-bottom: 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Admin Dashboard Specific Mobile Optimizations */
    .admin-dashboard-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
        height: auto !important;
        padding-bottom: 2rem !important;
    }

    .cursor-pointer {
        cursor: pointer !important;
    }

    .main-content.role-admin-master,
    .main-content.role-admin-principal,
    .main-content.role-admin {
        display: block !important;
        padding: 0.75rem !important;
        padding-top: 70px !important;
        padding-bottom: 80px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 !important;
        background: transparent !important;
        height: 100%;
    }

    .wallet-premium-container.admin-theme {
        overflow: hidden !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    .role-stats-container {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .title-stats,
    .header-marketplace h3 {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    .role-stats-container {
        padding: 0.15rem 0 !important;
        margin-bottom: 0.1rem !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        flex-shrink: 0 !important;
    }

    .title-stats {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        margin-bottom: 0.5rem !important;
        padding-left: 0.25rem !important;
    }

    .role-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.25rem !important;
        width: 100% !important;
    }

    .role-stat-item {
        padding: 0.15rem 0.1rem !important;
        min-height: 42px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    .role-stat-item i {
        margin-bottom: 2px !important;
        color: var(--primary) !important;
        width: 14px !important;
        height: 14px !important;
    }

    .role-stat-item p.text-3xl {
        font-size: 1rem !important;
        margin-top: 0 !important;
        line-height: 1 !important;
        color: var(--text-main) !important;
        font-weight: 800 !important;
    }

    .role-stat-item p.text-sm {
        font-size: 0.55rem !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        margin-bottom: 1px !important;
        text-transform: uppercase;
    }

    .marketplace-pending-card {
        padding: 0.5rem !important;
        margin-top: 0 !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 300px !important;
        overflow: visible !important;
    }

    .header-marketplace {
        margin-bottom: 0 !important;
        padding: 0.5rem 0.75rem !important;
    }

    .header-marketplace h3 {
        font-size: 0.75rem !important;
        margin: 0 !important;
    }

    .header-marketplace button {
        font-size: 9px !important;
    }

    .pending-list-scrollable {
        overflow-y: auto !important;
        flex: 1 !important;
        padding: 0.25rem !important;
        display: block !important;
        width: 100% !important;
    }

    .redemption-card-compact {
        padding: 0.5rem !important;
        margin-bottom: 0.4rem !important;
        border-radius: 10px !important;
    }

    .redemption-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }

    .redemption-row>div {
        width: auto !important;
    }

    .redemption-row .btn {
        width: auto !important;
        margin: 0 !important;
    }

    .card.p-6.mb-8,
    .card.p-6 {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Compact stats grid for admin dashboard */
    .admin-dashboard-container .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.35rem !important;
        margin-bottom: 0.35rem !important;
        flex-shrink: 0 !important;
    }

    .admin-dashboard-container .stat-card {
        padding: 0.25rem !important;
        min-height: 40px !important;
        aspect-ratio: auto !important;
    }

    .admin-dashboard-container .stat-card p {
        font-size: 0.65rem !important;
        margin-bottom: 0 !important;
    }

    .admin-dashboard-container .stat-card h3 {
        font-size: 1.1rem !important;
    }

    .admin-dashboard-container .stat-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.6rem !important;
        margin-bottom: 2px !important;
    }

    .dashboard-details-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        flex: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Dashboard No-Scroll Optimizations */
    .doctor-dashboard-container,
    .employee-dashboard-container,
    .wallet-premium-container.employee-theme {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        flex: 1 !important;
        height: auto !important;
        max-height: none !important;
        touch-action: none;
    }

    .doctor-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        margin-bottom: 0.25rem !important;
        flex-shrink: 0 !important;
    }

    .doctor-stats .card {
        padding: 0.6rem !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 80px !important;
        max-height: 100px !important;
    }

    .doctor-stats .text-4xl {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
    }

    .doctor-stats .text-sm,
    .doctor-stats p {
        font-size: 9px !important;
    }

    .historic-card {
        padding: 0.75rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Employee Theme Customizations (Differentiator) - Removed mobile color override to match PC themes */
    /* 
    .employee-theme .emp-hero {
        background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%) !important;
        box-shadow: 0 10px 30px rgba(30, 58, 138, 0.4) !important;
    } 
    */

    .employee-theme .sub-card-dark {
        background: var(--surface-grad) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .employee-theme .sub-card-dark .sub-card-val b {
        color: #60a5fa !important;
    }

    .employee-theme .sub-card-dark .sub-card-small {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .employee-theme .sub-card-dark .sub-card-val span {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    .employee-theme .icon-info {
        background: #f59e0b !important;
    }

    /* Admin Theme Customizations */
    .admin-theme .admin-hero {
        background: var(--surface-grad) !important;
        background-color: var(--surface) !important;
        box-shadow: var(--shadow-md) !important;
    }

    [data-theme="default"] .admin-theme .admin-hero .card-icon-pill,
    [data-theme="pink"] .admin-theme .admin-hero .card-icon-pill,
    :root:not([data-theme]) .admin-theme .admin-hero .card-icon-pill {
        background: rgba(37, 99, 235, 0.1) !important;
        color: var(--primary) !important;
    }

    [data-theme="default"] .admin-theme .admin-hero .card-icon-pill i,
    [data-theme="pink"] .admin-theme .admin-hero .card-icon-pill i,
    :root:not([data-theme]) .admin-theme .admin-hero .card-icon-pill i {
        color: var(--primary) !important;
    }

    .admin-theme .sub-card-blue {
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
        border: 1px solid var(--border) !important;
    }

[data-theme="military"] .admin-theme .sub-card-blue,
[data-theme="grey"] .admin-theme .sub-card-blue,
[data-theme="pink"] .admin-theme .sub-card-blue,
    [data-theme="dark"] .admin-theme .sub-card-blue {
        background: var(--surface-grad) !important;
        background-color: var(--surface) !important;
    }

    .admin-theme .sub-card-val b {
        color: var(--text-main) !important;
    }


    .employee-theme .card-icon-pill {
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }

    /* Important: override global flex resets for wallet structure */
    .employee-theme .historic-grid,
    .employee-theme .pts-row,
    .employee-theme .sub-card-val {
        flex-direction: row !important;
        display: flex !important;
        width: auto !important;
    }

    .employee-theme .sub-card-val {
        flex-direction: column !important;
    }

    /* Marketplace Admin buttons visibility fix */
    .product-card .flex.gap-1\.5 i,
    .product-card .flex.gap-1\.5 .btn i,
    .product-card .btn i {
        width: 14px !important;
        height: 14px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .product-card .btn-icon-square {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .d-flex-row-mobile-allowed {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
    }

    /* Marketplace 2-column Grid Mobile (NO SIDE SCROLL) */
    .marketplace-scroll {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        overflow-x: visible !important;
        padding: 1rem 0 !important;
        gap: 12px !important;
    }


    .marketplace-scroll .product-card {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        scroll-snap-align: none !important;
        height: auto !important;
        min-height: 0 !important;
        /* Removed high min-height */
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .marketplace-scroll .product-card h3 {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        height: auto !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        color: var(--text-dark) !important;
    }

    .marketplace-scroll .product-card .fb-marketplace-img {
        height: 110px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
    }

    .marketplace-scroll .product-card .btn {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 9px !important;
        border-radius: 12px !important;
        margin-top: 4px !important;
        padding: 4px 8px !important;
    }

    .product-card .flex.gap-1\.5 i,
    .product-card .flex.gap-1\.5 .btn i,
    .product-card .btn i {
        width: 16px !important;
        height: 16px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .marketplace-scroll .product-card .text-3xl {
        font-size: 1.25rem !important;
    }

    .marketplace-scroll .product-card .bg-gray-100\/80 {
        display: none !important;
    }

    /* Cart Modal Mobile Fix */
    .cart-modal-container {
        height: auto !important;
        max-height: 85vh !important;
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        bottom: 0 !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .cart-items-container {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 1rem !important;
        max-height: 50vh !important;
    }

    .cart-footer {
        padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 8px) !important;
        background: var(--surface) !important;
        border-top: 1px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
        z-index: 20;
        margin-top: auto;
        box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.05) !important;
    }

    /* Exception: Small inline controls/badges usually need flex-row */
    .badge,
    .btn,
    .items-center,
    .user-badge,
    .toggle-sidebar-btn,
    .close-modal,
    .modal-header,
    .segmented-control,
    .d-flex-row-mobile-allowed {
        flex-direction: row !important;
    }

    /* Reset margins for former rows */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 4. Sidebar Handling */
    .sidebar {
        position: fixed !important;
        z-index: 2000 !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        /* Full dynamic viewport height */
        max-height: 100dvh !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translateX(0) !important;
        transition: transform 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        border-right: none !important;
        background: var(--surface) !important;
        overscroll-behavior: contain;
    }

    .sidebar.active-mobile-menu {
        transform: translateX(0) !important;
    }

    /* Collapsed state is hidden */
    .sidebar.collapsed {
        transform: translateX(-100%) !important;
    }

    /* 3. Mobile Overlay Backdrop */
    .mobile-overlay {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 1950 !important;
        /* High Z-index but below sidebar */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease !important;
        touch-action: none !important;
        /* Prevent touch pass-through */
    }

    .mobile-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Scroll Locking Logic */
    body.mobile-open {
        overflow: hidden !important;
        position: fixed !important;
        /* Hard lock */
        width: 100% !important;
    }

    body.mobile-open .main-content {
        overflow: hidden !important;
        pointer-events: none !important;
        /* Disable interaction with background */
    }

    /* 5. Components Specific Fixes */

    /* Login */
    .min-h-screen {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .max-w-md {
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Cards */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0.5rem !important;
    }

    /* Inputs */
    .input-field,
    .input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Exceptions for small / icon-only buttons */
    .user-card-buttons .btn,
    .btn.w-11,
    .btn.w-10,
    .btn.w-9,
    .btn.w-8,
    .btn[class*="w-11"],
    .btn[class*="w-10"],
    .btn[class*="w-9"],
    .btn[class*="w-8"],
    .btn-icon-square {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* User Card */
    .user-card-layout {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .user-card-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    .user-card-badges {
        justify-content: space-between !important;
    }

    .user-card-buttons {
        justify-content: flex-end !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border) !important;
    }

    /* Section Header */
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .section-header h2 {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.25rem !important;
    }

    .section-header button {
        width: 100% !important;
    }

    /* KDS / Tables Scroll Handling - STRICT WIDTH */
    .overflow-x-auto {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Toast Notifications */
    .toast-container {
        left: 1rem !important;
        right: 1rem !important;
        top: 1rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .toast {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: translateY(-10px);
    }

    .toast.show {
        transform: translateY(0);
    }

    /* Modals */
    .modal-content {
        width: 90% !important;
        max-width: 90% !important;
        max-height: 80vh !important;
        margin: auto !important;
        padding: 1.5rem !important;
    }

    .topbar {
        height: 52px !important;
        grid-template-columns: 1fr auto 1fr !important;
        padding: 0 0.5rem !important;
    }

    .mobile-fixed-toggle {
        display: none !important;
    }

    .mobile-fixed-toggle svg {
        width: 24px !important;
        height: 24px !important;
    }

    .sidebar-header {
        padding-left: 1.5rem !important;
        justify-content: flex-start !important;
    }

    /* 6. Text Sizing */
    h1,
    h2,
    h3,
    .text-xl,
    .text-2xl,
    .text-3xl {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    p,
    span,
    div {
        overflow-wrap: break-word !important;
    }

    .hide-on-mobile {
        display: none !important;
    }


    /* Bottom Navigation Bar Styles */
    .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0.75rem;
        right: 0.75rem;
        height: calc(72px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface-glass) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 9999 !important;
        align-items: center;
        justify-content: space-around;
        padding-left: 12px;
        padding-right: 12px;
        margin: 0 auto;
        max-width: 440px;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: none !important;
        transition: opacity 0.15s ease;
        transform: none !important;
        opacity: 1;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        will-change: auto;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* OCULTO: solo visual, la barra se mantiene en su posicion para ser tocable */
    .bottom-nav-hidden {
        opacity: 0 !important;
        transform: translateY(150%) scale(0.9) !important;
        /* pointer-events desactivado cuando está oculto */
        pointer-events: none !important;
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        position: relative;
        flex: 1;
        height: 100%;
        gap: 4px;
        cursor: pointer !important;
    }

    .bottom-nav-item i,
    .bottom-nav-item svg {
        width: 24px !important;
        height: 24px !important;
        transition: all 0.3s ease;
        position: relative;
        z-index: 5 !important;
        /* High enough to stay above ::before */
    }

    .bottom-nav-item span {
        position: relative;
        z-index: 5 !important;
    }

    .bottom-nav-item.active {
        color: var(--primary);
    }

    .bottom-nav-item.active::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
        width: 48px;
        height: 48px;
        background: #eff6ff;
        border-radius: 50%;
        z-index: 1 !important;
        /* Explicitly lower than icons/text */
        animation: scaleIn 0.3s ease-out forwards;
    }

    @keyframes scaleIn {
        from {
            transform: translate(-50%, -70%) scale(0.5);
            opacity: 0;
        }

        to {
            transform: translate(-50%, -70%) scale(1);
            opacity: 1;
        }
    }

    .bottom-nav-item.active i {
        color: var(--primary);
        transform: translateY(-2px);
    }

    /* Adjust main content padding for floating bottom nav */
    .main-content {
        padding-bottom: 90px !important;
        padding-top: calc(95px + env(safe-area-inset-top, 0px)) !important;
        background: transparent !important;
        overflow-y: auto !important;
    }

    .layout {
        background: var(--bg-main) !important;
        height: 100dvh !important;
    }


    /* Total Mobile Scroll & Gesture Lock for Login */
    /* Total Mobile Scroll & Gesture Lock for Login */
    html.login-mode,
    body.login-mode {
        /* overflow: hidden !important; */
        /* position: fixed !important; REMOVED to fix iPad scroll issue */
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        /* overscroll-behavior: none !important; */
        /* touch-action: none !important; */
    }



    .login-screen-view {
        position: absolute !important;
        /* Changed from fixed */
        inset: 0 !important;
        width: 100vw !important;
        min-height: 100dvh !important;
        /* Changed height to min-height */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--background) !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        /* Allow scroll if needed */
        /* touch-action: none !important; */
    }

    .login-card-container {
        padding: 1.25rem !important;
        width: 90% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .login-credentials-box {
        display: none !important;
    }
}


/* --- Optimized Premium Doctor Wallet (Mobile First) --- */
.wallet-premium-container {
    padding: 0.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: transparent;
    flex: 1;
    overflow: hidden;
    touch-action: none;
}

/* Dashboard Centering for Admin, Doctor, and Employee */
.wallet-premium-container.centered-layout {
    justify-content: center !important;
    align-items: center !important;
    min-height: 70vh;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.wallet-premium-container.centered-layout .wallet-main-card,
.wallet-premium-container.centered-layout .historic-section,
.wallet-premium-container.centered-layout {
    width: 100%;
}

/* Ensure parent doesn't scroll when wallet is shown */
.main-content:has(.wallet-premium-container) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0.5rem !important;
    padding-top: calc(95px + env(safe-area-inset-top, 0px)) !important;
    height: 100%;
}

/* Mobile specific padding for wallet containers */
@media (max-width: 1366px) {
    .main-content:has(.wallet-premium-container) {
        overflow: hidden !important;
        padding-top: calc(95px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* Total Scroll Lock for Fixed Views (Validar Entrada) */
body:has(.no-scroll-view),
html:has(.no-scroll-view),
.layout:has(.no-scroll-view),
.content-wrapper:has(.no-scroll-view) {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: fixed !important;
    width: 100% !important;
    left: 0;
    touch-action: none !important;
}

@media (min-width: 1025px) {
    .content-wrapper:has(.no-scroll-view) {
        left: 80px !important;
        width: calc(100% - 80px) !important;
    }
}

.main-content:has(.no-scroll-view) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force hide bars and remove padding when no-bars-view is present */
.content-wrapper:has(.no-bars-view) .topbar,
.content-wrapper:has(.no-bars-view) .bottom-nav {
    display: none !important;
}

.content-wrapper:has(.no-bars-view) .main-content {
    padding-top: 0 !important;
}

.wallet-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
}

.wallet-avatar-img {
    width: 32px;
    /* Smaller for mobile visibility */
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0 !important;
    overflow: hidden;
    border: 1.5px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.wallet-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wallet-title-group h1 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

.wallet-title-group p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

/* Main Dark Card Compact */
.wallet-main-card {
    background: var(--surface-grad) !important;
    background-color: var(--surface) !important;
    border-radius: 18px;
    padding: 0.85rem;
    color: var(--text-main) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1);
    flex-shrink: 0;
    border: 1px solid var(--border-soft);
}

.wallet-main-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 40%);
    opacity: 0.6;
}

.balance-large {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main) !important;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    margin-bottom: 2px;
}

.balance-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.wallet-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

.pts-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pts-label-group b {
    color: var(--text-main);
    display: block;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
}

.pts-label-group span {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Historic Section Compact */
.historic-title-row {
    margin-bottom: 0.15rem;
    padding: 0 0.25rem;
}

.historic-title-row h2 {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

.historic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.sub-card {
    padding: 0.6rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.03);
    flex: 1;
}

.sub-card-blue {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid rgba(191, 219, 254, 0.3);
}

.sub-card-green {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    border: 1px solid rgba(167, 243, 208, 0.3);
}

.card-icon-pill {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.icon-pts {
    background: #fbbf24;
}

.icon-cash {
    background: #2dd4bf;
}

.sub-card-small {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-bottom: -5px;
    font-weight: 600;
}

.sub-card-val b {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    line-height: 1;
}

.sub-card-val span {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* --- KDS Kanban Board --- */
.kds-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    height: calc(100vh - 180px);
    padding: 1rem;
}

@media (max-width: 1400px) {
    .kds-board {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        padding: 0.75rem;
    }
}

@media (max-width: 1100px) {
    .kds-board {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }
}

.tab-active {
    background: var(--primary) !important;
    color: white !important;
    opacity: 1 !important;
}
.tab-inactive {
    background: transparent !important;
    color: var(--text-muted) !important;
}

@media (max-width: 768px) {
    .kds-board {
        grid-template-columns: 1fr;
        height: auto;
    }
}

.kds-column {
    background: #f1f5f9;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    border: 2px dashed transparent;
}

.kds-column.drag-over {
    background: #e2e8f0;
    border-color: var(--primary);
}

.column-header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.column-header h3 {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #64748b;
}

.column-cards {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.order-card {
    background: white;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    cursor: grab;
}

.order-card:active {
    cursor: grabbing;
}

.order-user {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.order-items-summary {
    font-size: 0.8rem;
    color: #64748b;
}

@media (max-width: 1366px) {

    /* Doctor History Mobile Adaptations */
    .doctor-history-card {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 16px !important;
        gap: 0.5rem !important;
    }

    .doctor-history-card .history-content {
        gap: 0.5rem !important;
        flex: 1;
        min-width: 0;
    }

    .doctor-history-card .history-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        flex-shrink: 0;
    }

    .doctor-history-card .history-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .doctor-history-card h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
    }

    .doctor-history-card p.text-xs {
        font-size: 0.65rem !important;
    }

    .doctor-history-card p.text-sm {
        font-size: 0.75rem !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: 100%;
        line-height: 1.2;
    }

    .doctor-history-card .history-amount span {
        font-size: 1.1rem !important;
    }

    .doctor-history-card .history-amount p {
        font-size: 8px !important;
    }

    /* Cashback List Mobile */
    .cashback-list-item {
        padding: 0.5rem 0.75rem !important;
        align-items: flex-start !important;
    }

    .cashback-list-item p.font-bold {
        font-size: 0.75rem !important;
    }

    .cashback-list-item .truncate {
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2;
    }

    /* Sub Card Fixes */
    .sub-card-small {
        margin-bottom: 0 !important;
        line-height: 1.2;
    }

    .sub-card {
        padding: 0.5rem !important;
        min-height: 90px;
        justify-content: space-between;
    }

    /* Cart Item Mobile Specifics */
    .cart-items-container>div {
        flex-direction: row !important;
        align-items: center !important;
    }

    .cart-items-container h4 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 140px !important;
    }
}

/* --- Liquidaciones Section --- */
.liquidacion-card {
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
    background: white;
}

.liquidacion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.liquidacion-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.liquidacion-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.liquidacion-info {
    flex: 1;
    min-width: 0;
}

.liquidacion-name {
    font-size: 0.875rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.liquidacion-email {
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.liquidacion-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
}

.liquidacion-amount-wrapper {
    flex: 1;
    min-width: 0;
}

.liquidacion-label {
    font-size: 0.625rem;
    font-weight: 600;
}

.liquidacion-amount {
    font-size: 1.125rem;
    margin-top: 0.25rem;
}

.liquidacion-btn {
    white-space: nowrap;
    min-width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
}

.liquidacion-list-container {
    max-width: 100%;
    overflow: hidden;
    padding: 1rem;
}

/* Mobile Optimizations for Liquidaciones */
@media (max-width: 1023.98px) {
    .liquidacion-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
        border-radius: 16px !important;
    }

    .liquidacion-header {
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .liquidacion-icon {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    .liquidacion-icon i {
        width: 24px !important;
        height: 24px !important;
    }

    .liquidacion-name {
        font-size: 1rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.25rem;
    }

    .liquidacion-email {
        font-size: 0.813rem !important;
    }

    .liquidacion-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        padding-top: 1.25rem !important;
    }

    .liquidacion-amount-wrapper {
        width: 100%;
        text-align: left;
    }

    .liquidacion-label {
        font-size: 0.813rem !important;
        letter-spacing: 0.05em;
        margin-bottom: 0.375rem;
    }

    .liquidacion-amount {
        font-size: 2rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
    }

    .liquidacion-btn {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 1rem !important;
        min-height: 52px;
        justify-content: center !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        gap: 0.5rem !important;
    }

    .liquidacion-btn i {
        width: 18px !important;
        height: 18px !important;
    }

    .liquidacion-list-container {
        padding: 1rem !important;
    }

    .liquidacion-list-container h3 {
        font-size: 0.875rem !important;
        margin-bottom: 1.25rem !important;
        letter-spacing: 0.05em;
    }

    /* Header summary card - Total Pendiente */
    .card.bg-blue-600 {
        padding: 2rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: 20px !important;
    }

    .card.bg-blue-600 p {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .card.bg-blue-600 h2 {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }

    .card.bg-blue-600 h2 span {
        font-size: 1.25rem !important;
        opacity: 0.8;
    }
}

/* --- Advanced Profile Cropper (Premium Style) --- */
.whatsapp-cropper-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #000;
    z-index: 2000000;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-out;
    touch-action: none;
    font-family: 'Outfit', 'Inter', sans-serif;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.whatsapp-cropper-header {
    padding: 1.5rem 1rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    letter-spacing: 0.02em;
}

.whatsapp-cropper-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000;
}

#cropperContainer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cropperImg {
    max-width: none !important;
    max-height: none !important;
    user-select: none;
    -webkit-user-drag: none;
}

/* The visible crop area */
.crop-area-box {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.crop-area-box.aspect-square {
    border-radius: 50%;
}

.crop-area-box.aspect-landscape {
    border-radius: 16px;
}

/* Transition only when switching modes, not during drag */
.crop-area-box.no-transition {
    transition: none !important;
}

/* Grid Lines */
.crop-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    pointer-events: none;
}

.crop-grid::before,
.crop-grid::after {
    content: '';
    border: 0.5px solid rgba(255, 255, 255, 0.3);
}

.crop-grid-line-h {
    border-top: 0.5px solid rgba(255, 255, 255, 0.3);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
    grid-column: 1 / -1;
    grid-row: 2;
}

.crop-grid-line-v {
    border-left: 0.5px solid rgba(255, 255, 255, 0.3);
    border-right: 0.5px solid rgba(255, 255, 255, 0.3);
    grid-row: 1 / -1;
    grid-column: 2;
}

/* Corner Handles */
.crop-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid white;
    pointer-events: auto;
}

.handle-tl {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0;
}

.handle-tr {
    top: -2px;
    right: -2px;
    border-left: 0;
    border-bottom: 0;
}

.handle-bl {
    bottom: -2px;
    left: -2px;
    border-right: 0;
    border-top: 0;
}

.handle-br {
    bottom: -2px;
    right: -2px;
    border-left: 0;
    border-top: 0;
}

/* Middle Handles */
.handle-tm {
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.handle-bm {
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.handle-lm {
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
}

.handle-rm {
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
}

.whatsapp-cropper-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: #000;
    z-index: 50;
}

.crop-aspect-selector {
    display: flex;
    justify-content: center;
    gap: 2rem;
    color: rgba(255, 255, 255, 0.6);
}

.aspect-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.aspect-btn.active {
    color: white;
}

.aspect-icon {
    width: 20px;
    height: 20px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

.aspect-icon.original {
    width: 16px;
    height: 24px;
}

.aspect-icon.free {
    width: 22px;
    height: 14px;
}

.aspect-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.whatsapp-cropper-footer {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 60;
    padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.75rem));
    flex-shrink: 0;
}

.whatsapp-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    transition: background 0.2s;
}

.whatsapp-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.whatsapp-btn.confirm {
    color: #3b82f6;
    font-weight: 700;
}

/* --- Horizontal Scroll Sections (Cafeteria) --- */
.horizontal-scroll-section {
    margin-bottom: 2rem;
}

.horizontal-scroll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-right: 1rem;
}

.horizontal-scroll-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scroll-arrows {
    display: flex;
    gap: 0.5rem;
}

.scroll-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

.scroll-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.horizontal-scroll-wrapper {
    position: relative;
    width: 100%;
}

.horizontal-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.horizontal-scroll::-webkit-scrollbar {
    display: block;
    height: 6px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.horizontal-scroll .product-card {
    min-width: 240px;
    max-width: 240px;
    scroll-snap-align: start;
    flex-shrink: 0;
}

@media (max-width: 1023.98px) {
    .horizontal-scroll .product-card {
        min-width: 220px;
        max-width: 220px;
    }

    .scroll-arrows {
        display: none;
    }

    /* Ensure floating buttons are always visible on mobile if not hidden by JS */
    .scroll-floating-btn {
        display: flex;
        width: 40px;
        height: 40px;
        opacity: 1 !important;
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        pointer-events: auto;
        z-index: 10;
    }

    /* Position properly within screen bounds */
    .scroll-floating-btn.left {
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        transform: translateY(-50%) translateX(-2px);
    }

    .scroll-floating-btn.right {
        right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        transform: translateY(-50%) translateX(2px);
    }
}

/* Floating Scroll Buttons */
.horizontal-scroll-wrapper {
    position: relative;
    /* Create context for absolute positioning */
}

/* Base button style - PERMANENTLY VISIBLE BY DEFAULT */
.scroll-floating-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-gray-600);
    transition: all 0.2s;
    opacity: 1;
    pointer-events: auto;
}

/* Hover effects for interaction feedback */
.scroll-floating-btn:hover {
    transform: translateY(-50%) scale(1.1);
    background: var(--primary);
    color: white;
}

.scroll-floating-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
}

.scroll-floating-btn.left {
    left: -22px;
    /* Half width outside */
}

.scroll-floating-btn.right {
    right: -22px;
    /* Half width outside */
}

/* End of styles */
/* --- Elegant & Fun Icon Animations --- */

/* 1. Spin (Activity, Clock) */
@keyframes icon-spin-elegant {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2) rotate(360deg);
    }
}

.nav-item:hover [data-lucide="activity"],
.nav-item:hover [data-lucide="clock"] {
    animation: icon-spin-elegant 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 1.1 Gear Spin (Settings specific) */
@keyframes icon-gear-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

.nav-item:hover [data-lucide="settings"] {
    animation: icon-gear-rotate 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Bounce (Users, User, Smile) */
@keyframes icon-bounce-fun {

    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-4px) scale(1.1);
    }

    80% {
        transform: translateY(1px) scale(0.95);
    }
}

.nav-item:hover [data-lucide="users"],
.nav-item:hover [data-lucide="user"] {
    animation: icon-bounce-fun 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. Swing (Shopping Bag, Cart, Bell) */
@keyframes icon-swing-bag {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    60% {
        transform: rotate(8deg);
    }

    80% {
        transform: rotate(-4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.nav-item:hover [data-lucide="shopping-bag"],
.nav-item:hover [data-lucide="shopping-cart"] {
    transform-origin: top center;
    animation: icon-swing-bag 0.7s ease-in-out;
}

/* 4. Pop/Pulse (Dashboard, Monitor, Layout) */
@keyframes icon-pop-pulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.2);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.nav-item:hover [data-lucide="layout-dashboard"],
.nav-item:hover [data-lucide="monitor"],
.nav-item:hover [data-lucide="check-square"] {
    animation: icon-pop-pulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 5. Trending Up / Arrow (Puntos, Trending) */
@keyframes icon-slide-tr {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(3px, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.nav-item:hover [data-lucide="trending-up"] {
    animation: icon-slide-tr 0.5s ease;
}

/* 6. Wiggle/Tilt (Coffee, Shield, File) */
@keyframes icon-wiggle-tilt {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-12deg);
    }

    50% {
        transform: rotate(12deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.nav-item:hover [data-lucide="coffee"],
.nav-item:hover [data-lucide="shield"],
.nav-item:hover [data-lucide="file-text"],
.nav-item:hover [data-lucide="list"],
.nav-item:hover [data-lucide="sliders"] {
    animation: icon-wiggle-tilt 0.5s ease-in-out;
}

/* 7. Flip Coin (Cashback, Dollar, Wallet) */
@keyframes icon-flip-y {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.nav-item:hover [data-lucide="dollar-sign"],
.nav-item:hover [data-lucide="wallet"] {
    animation: icon-flip-y 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* 8. Bar Chart Growth */
@keyframes icon-grow-bars {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(1);
    }
}

.nav-item:hover [data-lucide="bar-chart-2"] {
    transform-origin: bottom;
    animation: icon-grow-bars 0.5s ease;
}

/* --- Admin Dashboard - Mobile No-Scroll Optimization --- */
@media (max-width: 991.98px) {
    .admin-dashboard-container {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
    }

    .stat-card {
        padding: 0.75rem !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
        /* Compact */
    }

    .stat-card>div>p {
        font-size: 0.65rem !important;
        margin-bottom: 0.25rem !important;
    }

    .stat-card h3 {
        font-size: 1.2rem !important;
    }

    .stat-icon {
        width: 2rem !important;
        height: 2rem !important;
        padding: 0.4rem !important;
    }

    .dashboard-details-row {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        min-height: 0 !important;
    }

    /* Role Stats Compact */
    .role-stats-container {
        padding: 0.5rem 0.75rem !important;
        flex-shrink: 0 !important;
    }

    .title-stats {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }

    .role-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .role-stat-item {
        padding: 0.25rem !important;
    }

    /* Pending Redemptions Fluid Fill */
    .marketplace-pending-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .header-marketplace {
        padding: 0.5rem 0.75rem !important;
        flex-shrink: 0;
    }

    .pending-list-scrollable {
        flex: none !important;
        overflow: visible !important;
        padding: 0.5rem !important;
    }

    .redemption-card-compact {
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
    }
}

/* --- RESPONSIVE VIEW ADAPTATION (Phone, Tablet, PC) --- */

/* 1. Phone View (< 768px): Compact, Touch-Optimized */
@media (max-width: 767.98px) {
    .layout .content-wrapper {
        padding-bottom: 80px !important;
        /* Safe area for bottom nav */
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    .card,
    .glass {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    /* Hide sidebar strictly */
    .sidebar {
        display: none !important;
    }

    /* History Improvements */
    .doctor-history-card {
        padding: 1rem !important;
        gap: 0.75rem !important;
    }

    .history-content {
        gap: 0.75rem !important;
    }

    .history-content p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Prevent char-by-char wrapping for dates */
    .text-\[10px\], .text-xs {
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* 2. Tablet View (768px - 1024.98px): Balanced, No Sidebar */
@media (min-width: 768px) and (max-width: 1024.98px) {
    .layout .content-wrapper {
        padding-bottom: 90px !important;
        /* Safe area for bottom nav */
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Slightly larger text than phone */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.4rem !important;
    }

    .card,
    .glass {
        padding: 1.5rem !important;
        border-radius: 20px !important;
    }

    /* Hide sidebar strictly */
    .sidebar {
        display: none !important;
    }
}

/* 3. PC View (>= 1025px): Spacious, Sidebar Visible */
@media (min-width: 1025px) {
    .layout .content-wrapper {
        padding-bottom: 2rem !important;
        /* Regular padding */
    }

    /* Premium spacious feel */
    h1 {
        font-size: 2.25rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    .card,
    .glass {
        padding: 2.5rem !important;
        border-radius: 24px !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover,
    .glass:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
    }

    .layout {
        flex-direction: row !important;
    }

    /* Ensure sidebar is visible */
    .sidebar {
        display: flex !important;
        flex-shrink: 0 !important;
    }
}

/* --- Password Toggle Button --- */
.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.password-toggle:hover {
    color: var(--text-main);
    background-color: var(--border-soft);
}

/* --- KDS Board (Cafeteria Staff) --- */
.kds-board {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow-x: auto;
    min-height: calc(100vh - 180px);
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .kds-board {
        flex-direction: column;
        overflow-x: hidden;
        padding: 1rem;
        gap: 1rem;
    }
}

.kds-column {
    flex: 1;
    min-width: 320px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
}

@media (max-width: 1024px) {
    .kds-column {
        min-width: 0;
        width: 100%;
        max-height: none;
    }
}

.column-header {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
}

.column-header h3 {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.column-count {
    background: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-soft);
}

.column-cards {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-card {
    background: white;
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-soft);
    cursor: grab;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.order-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-light);
}

.order-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.order-id {
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--primary);
}

.order-time {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 600;
}

.order-user {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 0.75rem;
    font-family: 'Outfit', sans-serif;
}

.order-items-summary {
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-soft);
    padding-top: 0.75rem;
    line-height: 1.5;
}

.order-items-summary div b {
    color: var(--text-main);
    margin-right: 4px;
}

/* --- Cafeteria Ready Notification --- */
@keyframes coffee-shake {
    0% {
        transform: scale(1) rotate(0);
    }

    15% {
        transform: scale(1.1) rotate(-8deg);
    }

    30% {
        transform: scale(1.1) rotate(6deg);
    }

    45% {
        transform: scale(1.1) rotate(-6deg);
    }

    60% {
        transform: scale(1.1) rotate(4deg);
    }

    75% {
        transform: scale(1.1) rotate(-2deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.coffee-ready {
    color: #ef4444 !important;
    /* Red */
    animation: coffee-shake 0.8s cubic-bezier(.36, .07, .19, .97) infinite;
    display: inline-block;
    transform-origin: center;
}

.text-ready {
    color: #ef4444 !important;
}

/* --- Active Order Banner (User Cafeteria View) --- */
@keyframes banner-pulse-blue {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12);
    }
}

@keyframes banner-pulse-green {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15);
    }
}

.order-banner-pulse-blue {
    animation: banner-pulse-blue 2.5s ease-in-out infinite;
    transition: transform 0.15s ease, box-shadow 0.3s ease;
}

.order-banner-pulse-blue:active {
    transform: scale(0.99);
}

.order-banner-pulse-green {
    animation: banner-pulse-green 2s ease-in-out infinite;
    transition: transform 0.15s ease, box-shadow 0.3s ease;
}

.order-banner-pulse-green:active {
    transform: scale(0.99);
}

/* --- Dark Mode: Order Status Badges --- */
[data-theme="military"] .bg-slate-100,
[data-theme="grey"] .bg-slate-100,
[data-theme="dark"] .bg-slate-100,
[data-theme="military"] .bg-slate-50\/50,
[data-theme="grey"] .bg-slate-50\/50,
[data-theme="dark"] .bg-slate-50\/50 {
    background-color: rgba(51, 65, 85, 0.6) !important;
}

[data-theme="military"] .bg-orange-100,
[data-theme="grey"] .bg-orange-100,
[data-theme="dark"] .bg-orange-100 {
    background-color: rgba(194, 65, 0, 0.25) !important;
}

[data-theme="military"] .bg-green-100,
[data-theme="grey"] .bg-green-100,
[data-theme="dark"] .bg-green-100,
[data-theme="military"] .bg-green-50\/30,
[data-theme="grey"] .bg-green-50\/30,
[data-theme="dark"] .bg-green-50\/30 {
    background-color: rgba(21, 128, 61, 0.2) !important;
}

[data-theme="military"] .bg-blue-100,
[data-theme="grey"] .bg-blue-100,
[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(37, 99, 235, 0.25) !important;
}

[data-theme="military"] .text-slate-600,
[data-theme="grey"] .text-slate-600,
[data-theme="dark"] .text-slate-600 {
    color: #94a3b8 !important;
}

[data-theme="military"] .text-orange-600,
[data-theme="grey"] .text-orange-600,
[data-theme="dark"] .text-orange-600 {
    color: #fb923c !important;
}

[data-theme="military"] .text-green-700,
[data-theme="grey"] .text-green-700,
[data-theme="dark"] .text-green-700,
[data-theme="military"] .text-green-600,
[data-theme="grey"] .text-green-600,
[data-theme="dark"] .text-green-600 {
    color: #4ade80 !important;
}

[data-theme="military"] .text-blue-600,
[data-theme="grey"] .text-blue-600,
[data-theme="dark"] .text-blue-600 {
    color: #60a5fa !important;
}

[data-theme="military"] .text-slate-700,
[data-theme="grey"] .text-slate-700,
[data-theme="dark"] .text-slate-700 {
    color: #cbd5e1 !important;
}

[data-theme="military"] .text-slate-800,
[data-theme="grey"] .text-slate-800,
[data-theme="dark"] .text-slate-800 {
    color: #e2e8f0 !important;
}

[data-theme="military"] .text-slate-500,
[data-theme="grey"] .text-slate-500,
[data-theme="dark"] .text-slate-500 {
    color: #94a3b8 !important;
}

[data-theme="military"] .text-slate-400,
[data-theme="grey"] .text-slate-400,
[data-theme="dark"] .text-slate-400 {
    color: #64748b !important;
}

[data-theme="military"] .border-green-200,
[data-theme="grey"] .border-green-200,
[data-theme="dark"] .border-green-200 {
    border-color: rgba(21, 128, 61, 0.3) !important;
}

[data-theme="military"] .border-slate-200,
[data-theme="grey"] .border-slate-200,
[data-theme="dark"] .border-slate-200 {
    border-color: var(--border) !important;
}

[data-theme="military"] .border-slate-100,
[data-theme="grey"] .border-slate-100,
[data-theme="dark"] .border-slate-100 {
    border-color: var(--border-soft) !important;
}

/* --- Audit Section Styles --- */
.audit-card {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.audit-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.audit-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--border-soft);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.audit-details {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--background);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

[data-theme="military"] .audit-card,
[data-theme="grey"] .audit-card,
[data-theme="dark"] .audit-card {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="military"] .audit-tag,
[data-theme="grey"] .audit-tag,
[data-theme="dark"] .audit-tag {
    background: #334155;
    color: #cbd5e1;
}

[data-theme="military"] .audit-details,
[data-theme="grey"] .audit-details,
[data-theme="dark"] .audit-details {
    background: #0f172a;
}

.z-5000 {
    z-index: 5000 !important;
}

/* Force hide sidebar when any modal is open */
body.modal-open {
    overflow: hidden !important;
    height: 100dvh !important;
}



.modal-overlay {
    z-index: 999999 !important;
    pointer-events: auto !important; /* Allow interaction inside modal */
}

.modal-content {
    pointer-events: auto !important;
}

.z-5000 {
    z-index: 999999 !important;
}

/* Removed redundant navigation-hiding emergency override */

.modal-overlay,
.cart-modal-container {
    z-index: 9999999 !important;
}

/* Cropper must always appear above any modal */
.whatsapp-cropper-overlay {
    z-index: 99999999 !important;
}

/* ========================================
   DARK MODE — Mobile Navigation Drawer
   Fixes hardcoded bg-white / bg-slate-*
   on the options menu that appears on mobile
   ======================================== */

/* Main drawer background */
[data-theme="military"] .animate-fade-in.min-h-\[calc\(100vh-80px\)\],
[data-theme="grey"] .animate-fade-in.min-h-\[calc\(100vh-80px\)\],
[data-theme="dark"] .animate-fade-in.min-h-\[calc\(100vh-80px\)\] {
    background-color: var(--bg) !important;
}

/* Header section (profile area at top) */
[data-theme="military"] .animate-fade-in .px-6.pt-8.pb-6.bg-white,
[data-theme="grey"] .animate-fade-in .px-6.pt-8.pb-6.bg-white,
[data-theme="dark"] .animate-fade-in .px-6.pt-8.pb-6.bg-white,
[data-theme="military"] .animate-fade-in .rounded-b-\[2\.5rem\].bg-white,
[data-theme="grey"] .animate-fade-in .rounded-b-\[2\.5rem\].bg-white,
[data-theme="dark"] .animate-fade-in .rounded-b-\[2\.5rem\].bg-white {
    background-color: var(--surface) !important;
}

/* Profile card inside header */
[data-theme="military"] .animate-fade-in .bg-slate-50\/80,
[data-theme="grey"] .animate-fade-in .bg-slate-50\/80,
[data-theme="dark"] .animate-fade-in .bg-slate-50\/80,
[data-theme="military"] .animate-fade-in a.bg-slate-50\/80,
[data-theme="grey"] .animate-fade-in a.bg-slate-50\/80,
[data-theme="dark"] .animate-fade-in a.bg-slate-50\/80 {
    background-color: var(--surface-2, #1e293b) !important;
    border-color: var(--border) !important;
}

[data-theme="military"] .animate-fade-in a.bg-slate-50\/80 h3,
[data-theme="grey"] .animate-fade-in a.bg-slate-50\/80 h3,
[data-theme="dark"] .animate-fade-in a.bg-slate-50\/80 h3 {
    color: var(--text-main) !important;
}

[data-theme="military"] .animate-fade-in a.bg-slate-50\/80 p,
[data-theme="grey"] .animate-fade-in a.bg-slate-50\/80 p,
[data-theme="dark"] .animate-fade-in a.bg-slate-50\/80 p {
    color: var(--text-muted, #94a3b8) !important;
}

/* Nav items — both active (bg-slate-50) and inactive (bg-white) */
[data-theme="military"] .animate-fade-in a.bg-slate-50,
[data-theme="grey"] .animate-fade-in a.bg-slate-50,
[data-theme="dark"] .animate-fade-in a.bg-slate-50,
[data-theme="military"] .animate-fade-in a.bg-white,
[data-theme="grey"] .animate-fade-in a.bg-white,
[data-theme="dark"] .animate-fade-in a.bg-white {
    background-color: var(--surface-2, #1e293b) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

[data-theme="military"] .animate-fade-in a.bg-white:hover,
[data-theme="grey"] .animate-fade-in a.bg-white:hover,
[data-theme="dark"] .animate-fade-in a.bg-white:hover,
[data-theme="military"] .animate-fade-in a.bg-slate-50:hover,
[data-theme="grey"] .animate-fade-in a.bg-slate-50:hover,
[data-theme="dark"] .animate-fade-in a.bg-slate-50:hover {
    background-color: var(--surface, #0f172a) !important;
}

/* Nav item text & icon color */
[data-theme="military"] .animate-fade-in a span,
[data-theme="grey"] .animate-fade-in a span,
[data-theme="dark"] .animate-fade-in a span,
[data-theme="military"] .animate-fade-in a .font-outfit,
[data-theme="grey"] .animate-fade-in a .font-outfit,
[data-theme="dark"] .animate-fade-in a .font-outfit {
    color: var(--text-main) !important;
}

/* Divider line */
[data-theme="military"] .animate-fade-in .bg-slate-200\/50,
[data-theme="grey"] .animate-fade-in .bg-slate-200\/50,
[data-theme="dark"] .animate-fade-in .bg-slate-200\/50 {
    background-color: var(--border) !important;
}

/* Logout button */
[data-theme="military"] .animate-fade-in button.bg-white,
[data-theme="grey"] .animate-fade-in button.bg-white,
[data-theme="dark"] .animate-fade-in button.bg-white {
    background-color: var(--surface-2, #1e293b) !important;
    border-color: var(--border) !important;
}

[data-theme="military"] .animate-fade-in button.bg-white:hover,
[data-theme="grey"] .animate-fade-in button.bg-white:hover,
[data-theme="dark"] .animate-fade-in button.bg-white:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Dashboard & Reports Visual Enhancements */
.dashboard-card {
    background: var(--surface);
    border-radius: 24px;
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
}

.glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

[data-theme='dark'] .glass-card {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.gradient-purple {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.gradient-amber {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.gradient-green {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.gradient-indigo {
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

.gradient-rose {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.stat-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dashboard-card:hover .stat-icon-box {
    transform: scale(1.1) rotate(5deg);
}

.chart-container-premium {
    position: relative;
    padding: 20px;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent);
}

.animate-pop-in {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Custom Table Design */
.premium-table thead th {
    background: var(--background);
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
}

.premium-table tbody tr {
    transition: all 0.2s ease;
}

.premium-table tbody tr:hover {
    background-color: var(--border-soft);
}

/* Hold to Confirm Button Style */
.hold-btn {
    position: relative;
    overflow: hidden !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hold-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--hold-progress, 0%);
    background: rgba(255, 255, 255, 0.2);
    z-index: 0;
    transition: width 0.05s linear;
}

.hold-btn.holding {
    transform: scale(0.96);
    animation: hold-pulse 1s infinite alternate;
}

.hold-btn span,
.hold-btn i {
    position: relative;
    z-index: 1;
}

@media (max-width: 1024.98px) {
    /* Robust Scroll Lock for Mobile */
    html.modal-open,
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
    }

    /* Hide background blobs entirely on mobile when modal is open to avoid artifacts */
    body.modal-open .bg-decor {
        display: none !important;
    }

    .modal-overlay {
        background: rgba(15, 23, 42, 0.9) !important;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        z-index: 9999999 !important;
    }

    /* Standard Modals (Centered Boxes) */
    .modal-content {
        margin: auto;
        width: auto;
        max-width: 95%;
        height: auto;
        min-height: 0;
        max-height: 90%;
        border-radius: 1.5rem;
        padding: 1.5rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        background: var(--surface);
    }

    /* TARGETED Full-screen Modals (e.g. Profile) */
    .modal-full-screen.modal-content {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .modal-full-screen.modal-content .modal-body {
        height: 100% !important;
    }

    .modal-overlay.full-screen-overlay {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }

    .modal-body {
        padding: 0;
        height: auto;
        overflow-y: auto;
    }
}


/* --- Missing Utility Classes for app.js Compatibility --- */
.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-5xl { font-size: 3rem !important; }
.text-\[9px\] { font-size: 9px !important; }
.text-\[10px\] { font-size: 10px !important; }
.text-\[11px\] { font-size: 11px !important; }
.text-\[12px\] { font-size: 12px !important; }
.text-\[13px\] { font-size: 13px !important; }

.shrink-0 { flex-shrink: 0 !important; }
.shrink { flex-shrink: 1 !important; }
.grow { flex-grow: 1 !important; }


.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-black { font-weight: 900 !important; }

.rounded-xl { border-radius: 1rem !important; }
.rounded-2xl { border-radius: 1.5rem !important; }
.rounded-3xl { border-radius: 2rem !important; }

.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em !important; }

.px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.pt-10 { padding-top: 2.5rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-10 { padding-bottom: 2.5rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-8 { margin-top: 2rem !important; }
.pl-1 { padding-left: 0.25rem !important; }

.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }

.w-1\.5 { width: 0.375rem !important; }
.h-1\.5 { height: 0.375rem !important; }
.w-7 { width: 1.75rem !important; }
.h-7 { height: 1.75rem !important; }
.w-8 { width: 2rem !important; }
.w-9 { width: 2.25rem !important; }
.h-9 { height: 2.25rem !important; }
.w-10 { width: 2.5rem !important; }
.w-11 { width: 2.75rem !important; }
.w-12 { width: 3rem !important; }
.h-10 { height: 2.5rem !important; }
.h-11 { height: 2.75rem !important; }
.h-12 { height: 3rem !important; }
.w-14 { width: 3.5rem !important; }
.h-14 { height: 3.5rem !important; }
.h-16 { height: 4rem !important; }

.shrink-0 { flex-shrink: 0 !important; }
.min-w-0 { min-width: 0 !important; }
.min-w-\[150px\] { min-width: 150px !important; }
.max-h-\[50vh\] { max-height: 50vh !important; }

.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05) !important; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-black\/20 { background-color: rgba(0, 0, 0, 0.2) !important; }
.bg-red-400\/5 { background-color: rgba(248, 113, 113, 0.05) !important; }
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; }

.text-white { color: #ffffff !important; }
.text-white\/30 { color: rgba(255, 255, 255, 0.3) !important; }
.text-white\/40 { color: rgba(255, 255, 255, 0.4) !important; }
.text-blue-400 { color: #60a5fa !important; }
.text-red-400 { color: #f87171 !important; }
.text-red-500\/80 { color: rgba(239, 68, 68, 0.8) !important; }
.text-green-400\/80 { color: rgba(74, 222, 128, 0.8) !important; }
.text-green-500\/60 { color: rgba(34, 197, 94, 0.6) !important; }

.backdrop-blur-3xl { backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Premium POS Cart Styles Enhanced --- */
.premium-cart-overlay {
    background: var(--premium-cart-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.premium-cart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 500px;
    padding: 2rem;
    color: #ffffff !important;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.premium-cart-empty-bar {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: 0.9rem;
}

@media (min-width: 640px) {
    .premium-cart {
        border-radius: 44px !important;
    }
}

.premium-cart-items-container {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-right: -0.5rem;
    flex: 1;
}

/* Theme-Aware Text Utilities for Cart */
.premium-cart-text { color: #ffffff !important; }
.premium-cart-text-muted { color: rgba(255, 255, 255, 0.5) !important; }

/* Subtle inner glow for premium feel */
.premium-cart::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

.premium-surface {
    background: var(--premium-cart-surface) !important;
    border: 1px solid var(--premium-cart-border) !important;
    border-radius: 12px !important;
}

.premium-cart-close-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 100001;
}

.premium-cart-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.premium-cart-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.premium-btn-gradient {
    background: linear-gradient(to right, #c16e2b, #d98d4f) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 12px !important;
    font-weight: 700 !important;
}

.premium-btn-gradient:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 18px 35px -5px rgba(37, 99, 235, 0.6), 0 0 20px rgba(59, 130, 246, 0.6) !important;
}

.premium-text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

.premium-text-extra-muted {
    color: rgba(255, 255, 255, 0.2) !important;
}

.premium-border {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Transition for the group hover item */
.group:hover .premium-surface {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Fix for inputs inside cart */
.premium-cart select,
.premium-cart textarea {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: white !important;
}

.premium-cart select option {
    background-color: #1e293b;
    color: white;
}

/* --- Botones y Textos: Personalización de Tema --- */

/* Tema Oscuro: Botones no blancos (solo los textos en blanco) */
[data-theme="military"] button:not(.premium-ignore):not(.btn-primary):not(.btn-danger):not(.bg-blue-600),
[data-theme="grey"] button:not(.premium-ignore):not(.btn-primary):not(.btn-danger):not(.bg-blue-600),
[data-theme="dark"] button:not(.premium-ignore):not(.btn-primary):not(.btn-danger):not(.bg-blue-600),
[data-theme="military"] .btn:not(.premium-ignore):not(.btn-primary):not(.btn-danger):not(.bg-blue-600),
[data-theme="grey"] .btn:not(.premium-ignore):not(.btn-primary):not(.btn-danger):not(.bg-blue-600),
[data-theme="dark"] .btn:not(.premium-ignore):not(.btn-primary):not(.btn-danger):not(.bg-blue-600) {
    background-color: var(--surface) !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

[data-theme="military"] button:not(.premium-ignore):not(.btn-primary),
[data-theme="grey"] button:not(.premium-ignore):not(.btn-primary),
[data-theme="dark"] button:not(.premium-ignore):not(.btn-primary),
[data-theme="military"] .btn:not(.premium-ignore):not(.btn-primary),
[data-theme="grey"] .btn:not(.premium-ignore):not(.btn-primary),
[data-theme="dark"] .btn:not(.premium-ignore):not(.btn-primary) {
    color: #ffffff !important;
}
[data-theme="military"] button:not(.premium-ignore):not(.btn-primary) i,
[data-theme="grey"] button:not(.premium-ignore):not(.btn-primary) i,
[data-theme="dark"] button:not(.premium-ignore):not(.btn-primary) i,
[data-theme="military"] .btn:not(.premium-ignore):not(.btn-primary) i,
[data-theme="grey"] .btn:not(.premium-ignore):not(.btn-primary) i,
[data-theme="dark"] .btn:not(.premium-ignore):not(.btn-primary) i {
    color: #ffffff !important;
}

/* Tema Rosa y Blanco (Claro): Textos no blancos SOLO en botones secundarios/transparentes */
[data-theme="pink"] button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white),
[data-theme="pink"] .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white),
body:not([data-theme="military"]) button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white),
body:not([data-theme="grey"]) button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white),
body:not([data-theme="dark"]) button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white),
body:not([data-theme="military"]) .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white),
body:not([data-theme="grey"]) .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white),
body:not([data-theme="dark"]) .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) {
    color: var(--text-main) !important;
}
[data-theme="pink"] button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i,
[data-theme="pink"] .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i,
body:not([data-theme="military"]) button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i,
body:not([data-theme="grey"]) button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i,
body:not([data-theme="dark"]) button:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i,
body:not([data-theme="military"]) .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i,
body:not([data-theme="grey"]) .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i,
body:not([data-theme="dark"]) .btn:not(.btn-primary):not(.btn-danger):not(.bg-blue-600):not(.text-white) i {
    color: var(--text-main) !important;
}

[data-theme="military"] body,
[data-theme="military"] .bg-decor {
    background-color: #7d7463 !important;
    background: #7d7463 !important;
}

[data-theme="grey"] body,
[data-theme="grey"] .bg-decor {
    background-color: #111111 !important;
    background: #111111 !important;
}

/* Force specific card backgrounds in themes */
[data-theme="military"] .card, 
[data-theme="military"] .sub-card, 
[data-theme="military"] .wallet-main-card {
    background: var(--surface-grad) !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

[data-theme="grey"] .card, 
[data-theme="grey"] .sub-card, 
[data-theme="grey"] .wallet-main-card {
    background: var(--surface-grad) !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

/* --- Fix: Visibilidad de iniciales en avatars --- */
/* En temas claros (blanco y rosa), forzamos color negro para las iniciales */
[data-theme="pink"] .user-avatar-initials,
[data-theme="default"] .user-avatar-initials,
:root:not([data-theme]) .user-avatar-initials {
    color: #000000 !important;
}

/* Tambin nos aseguramos de que si las clases bg-xxx-500 no existen, tengan un fondo claro digno */
.user-avatar-initials:not([class*="bg-"]) {
    background-color: #f1f5f9 !important; /* light grey fallback */
}
/* --- Mobile Optimization for Premium Cafeteria Cart --- */
@media (max-width: 640px) {
    .premium-cart {
        padding: 1.25rem !important;
        gap: 1.5rem !important;
        height: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .premium-cart-overlay {
        align-items: flex-end !important;
    }

    .premium-cart-close-btn {
        top: 1rem !important;
        right: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .premium-cart h3 {
        font-size: 1.75rem !important;
    }

    .premium-cart p.text-lg {
        font-size: 0.9rem !important;
    }

    .premium-cart .premium-surface.p-8 {
        padding: 1.25rem !important;
    }

    .premium-cart .text-5xl {
        font-size: 2rem !important;
    }

    .premium-cart .text-xl {
        font-size: 1rem !important;
    }

    .premium-cart-items-container {
        max-height: none !important;
        margin-bottom: 1rem !important;
    }

    .premium-btn-gradient {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .premium-btn-gradient .text-xl {
        font-size: 1.15rem !important;
    }

    /* Fix product items distribution in cart */
    .premium-cart-items-container .group {
        padding: 0.85rem !important;
        gap: 0.75rem !important;
        border-radius: 20px !important;
        margin-bottom: 0.75rem !important;
    }

    .premium-cart-items-container .w-16.h-16 {
        width: 3.25rem !important;
        height: 3.25rem !important;
        border-radius: 14px !important;
    }

    .premium-cart-items-container h4 {
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
    }

    .premium-cart-items-container .premium-cart-pill {
        padding: 4px 8px !important;
        gap: 0.5rem !important;
        border-radius: 12px !important;
    }

    .premium-cart-items-container .premium-cart-pill span {
        font-size: 0.8rem !important;
    }

    .premium-cart-items-container .opacity-0 {
        opacity: 0.6 !important; /* Always semi-visible on mobile */
    }

    .premium-cart-items-container .w-10.h-10 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
}

/* --- Cafeteria Mobile Refinements --- */
@media (max-width: 640px) {
    .cafeteria-feed .product-card {
        max-width: 240px !important; /* Narrower = Shorter image */
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        padding: 0.5rem !important; /* Ultra minimal padding */
    }

    .cafeteria-feed .product-card .product-image-placeholder {
        margin-bottom: 0.4rem !important;
    }

    .cafeteria-feed .product-card h3 {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 0.15rem !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }

    .cafeteria-feed .product-card .flex.justify-between {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 0.5rem !important;
    }

    .cafeteria-feed .product-card .text-right {
        text-align: left !important;
    }

    .cafeteria-feed .product-card .text-xl {
        font-size: 0.95rem !important; /* Smaller price text */
    }

    .cafeteria-feed .product-card .btn {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        height: auto !important;
        min-height: 34px !important;
        font-size: 0.75rem !important;
    }
}

/* --- Premium Ranking / Leaderboard Styles Re-imagined --- */
.ranking-container {
    padding: 2.5rem;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 40%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.8) 100%);
    border-radius: 48px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.ranking-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

@media (max-width: 1024px) {
    .ranking-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 1.5rem;
        border-radius: 32px;
    }
}

.ranking-list-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 10;
}

.ranking-list-container {
    background: rgba(30, 41, 59, 0.4);
    border-radius: 32px;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
}

.ranking-list-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ranking-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.rank-pos {
    font-weight: 900;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.2);
    min-width: 30px;
    font-family: 'Inter', sans-serif;
}

.rank-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: #1e293b;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    position: relative;
}

.rank-avatar::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.rank-info {
    flex: 1;
}

.rank-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
}

.rank-alias {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

.rank-pts {
    font-weight: 900;
    color: white;
    font-size: 1.1rem;
    text-align: right;
}

.rank-pts span {
    font-size: 0.7rem;
    opacity: 0.4;
    margin-left: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

/* 3D Podium Styles */
.podium-side {
    height: 500px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    perspective: 1200px;
    padding-bottom: 2rem;
}

.podium-block-3d {
    width: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.podium-block-3d:hover {
    transform: translateY(-10px) translateZ(30px);
}

.podium-face-front {
    width: 100%;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    border-radius: 24px 24px 8px 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.podium-face-front::after {
    content: attr(data-rank);
    position: absolute;
    bottom: 10px;
    font-size: 6rem;
    line-height: 1;
    opacity: 0.1;
    color: white;
}

.podium-block-3d.first { order: 2; z-index: 5; }
.podium-block-3d.second { order: 1; z-index: 4; }
.podium-block-3d.third { order: 3; z-index: 3; }

.podium-block-3d.first .podium-face-front {
    height: 240px;
    border-color: rgba(245, 158, 11, 0.3);
}

.podium-block-3d.second .podium-face-front {
    height: 180px;
    border-color: rgba(148, 163, 184, 0.2);
}

.podium-block-3d.third .podium-face-front {
    height: 130px;
    border-color: rgba(180, 83, 9, 0.2);
}

.podium-user-data {
    position: absolute;
    top: -120px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.podium-avatar-wrapper-3d {
    position: relative;
}

.podium-avatar-premium {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 4px solid #334155;
    background: #1e293b;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    overflow: hidden;
    position: relative;
}

.podium-block-3d.first .podium-avatar-premium {
    width: 104px;
    height: 104px;
    border-color: #f59e0b;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.4);
}

.podium-block-3d.second .podium-avatar-premium {
    border-color: #94a3b8;
}

.podium-block-3d.third .podium-avatar-premium {
    border-color: #b45309;
}

.podium-crown-premium {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    color: #f59e0b;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8));
    z-index: 10;
}

.podium-pts-premium {
    font-weight: 900;
    font-size: 1.4rem;
    color: white;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.podium-label-premium {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 800;
    margin-top: -4px;
}

.podium-username-premium {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

.btn-view-move {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    margin-top: 1rem;
}

.btn-view-move:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}



/* --- Adaptive Marketplace Layout --- */
.marketplace-adaptive-layout {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding-bottom: 80px !important;
}

@media (min-width: 1025px) {
    .marketplace-adaptive-layout {
        display: flex !important;
        flex-wrap: wrap !important;
        grid-template-columns: none !important;
        gap: 24px !important;
        justify-content: flex-start !important;
        padding-left: 10px !important;
    }

    .marketplace-adaptive-layout .product-card {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        flex-shrink: 0 !important;
    }
}

.theme-bubble { aspect-ratio: 1/1 !important; flex-shrink: 0 !important; object-fit: cover !important; }