/* ========================================
   XAZAI - Açai Bar & Smoothies
   Brand Colors: Purple, Pink, Dark
   ======================================== */

:root {
    --primary: #7b2d8e;
    --primary-light: #a855c7;
    --primary-dark: #5a1d6b;
    --accent: #e91e8c;
    --accent-light: #ff5cb8;
    --accent-soft: #f472b6;
    --bg: #0d0d1a;
    --bg-card: #1a1a2e;
    --bg-card-hover: #222240;
    --bg-surface: #16162b;
    --text: #f0e6f6;
    --text-light: #c4b5d4;
    --text-muted: #a99bb5;
    --text-white: #ffffff;
    --border: #2d2d4a;
    --border-light: #3d3d5c;
    --shadow: 0 4px 24px rgba(123, 45, 142, 0.15);
    --shadow-hover: 0 8px 40px rgba(123, 45, 142, 0.3);
    --shadow-glow: 0 0 30px rgba(233, 30, 140, 0.2);
    --radius: 20px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --gradient-primary: linear-gradient(135deg, #7b2d8e, #e91e8c);
    --gradient-card: linear-gradient(145deg, #1a1a2e, #222240);
    --gradient-hero: linear-gradient(135deg, #0d0d1a 0%, #1a0a2e 30%, #2d1040 60%, #1a0a2e 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
}

.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ========================================
   REUSABLE
   ======================================== */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 224, 150, 0.4), 0 0 60px rgba(0, 224, 150, 0.15); }
    50% { box-shadow: 0 0 30px rgba(0, 224, 150, 0.6), 0 0 80px rgba(0, 224, 150, 0.25); }
}

@keyframes expand-down {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 1000px; }
}

.logo-text {
    font-size: 42px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.logo-subtitle {
    font-size: 13px;
    color: var(--text-light);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 300;
}

/* ========================================
   NAVBAR
   ======================================== */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: rgba(13, 13, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: 100%;
    overflow: hidden;
}

.nav-left, .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-small {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img-nav {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.logo-small .logo-text {
    font-size: 22px;
    letter-spacing: 2px;
}

.logo-small .logo-sub {
    font-size: 9px;
    color: var(--text-light);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: -4px;
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.category-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-surface);
    padding: 4px;
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow-x: auto;

    scrollbar-width: none;
    touch-action: pan-x;
}

.category-tabs::-webkit-scrollbar { display: none; }

.tab {
    padding: 9px 18px;
    border: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 12px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab:hover {
    color: var(--text);
    background: rgba(123, 45, 142, 0.1);
}

.tab.active {
    background: var(--gradient-primary);
    color: var(--text-white);
    box-shadow: 0 2px 12px rgba(233, 30, 140, 0.3);
}

.tab i { font-size: 13px; }

/* Arma tu Bowl highlight tab */
.tab.tab-highlight {
    background: linear-gradient(135deg, #00c896, #00e096);
    color: #0d0d1a;
    font-weight: 700;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 224, 150, 0.3);
}

.tab.tab-highlight:hover {
    background: linear-gradient(135deg, #00b886, #00d086);
    color: #0d0d1a;
}

.tab.tab-highlight.active {
    background: linear-gradient(135deg, #00c896, #00e096);
    color: #0d0d1a;
    box-shadow: 0 2px 16px rgba(0, 224, 150, 0.5);
}

.cart-btn {
    position: relative;
    background: none;
    border: 1px solid var(--border);
    font-size: 20px;
    color: var(--text);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.cart-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: var(--text-white);
    font-size: 10px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    transform: scale(0);
    box-shadow: 0 0 10px rgba(233, 30, 140, 0.5);
}

.cart-count.has-items { transform: scale(1); }

.user-menu { position: relative; }

.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}

.user-btn:hover { border-color: var(--primary-light); color: var(--accent-soft); }
.user-btn i { font-size: 18px; }

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    border: 1px solid var(--border);
    min-width: 180px;
    overflow: hidden;
    z-index: 110;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}

.dropdown-item:hover {
    background: rgba(123, 45, 142, 0.15);
    color: var(--accent-soft);
}

/* ========================================
   HERO
   ======================================== */
/* .hero section removed — unused */

/* ========================================
   MENU SECTION
   ======================================== */
.menu-section, .build-bowl-section {
    padding: 48px 36px;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 120px;
    overflow-x: hidden;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 30px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.section-header p {
    font-size: 15px;
    color: var(--text-light);
    font-weight: 300;
}

/* ========================================
   PRODUCTS LIST (Vertical stack)
   ======================================== */
.products-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========================================
   HORIZONTAL PRODUCT CARD
   ======================================== */
.product-card-h {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid var(--border);
    position: relative;
}

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

.product-card-h.expanded {
    border-color: var(--accent);
    box-shadow: 0 0 25px rgba(233, 30, 140, 0.2);
}

.card-h-main {
    display: flex;
    align-items: stretch;
    min-height: 140px;
}

.card-h-image {
    width: 150px;
    min-width: 150px;
    background: linear-gradient(135deg, #1a0a2e, #2d1040, #1a0a2e);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-h-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(233, 30, 140, 0.08) 0%, transparent 70%);
}

.card-h-image .card-emoji {
    font-size: 56px;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    position: relative;
    z-index: 1;
}

.card-h-image .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    transition: transform 0.4s ease;
}

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

.product-card-h:hover .card-emoji {
    transform: scale(1.15) rotate(5deg);
}

.card-badge-sm {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--gradient-primary);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(233, 30, 140, 0.3);
}

.card-h-body {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-tagline {
    font-size: 11px;
    color: var(--accent-soft);
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-description {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-h-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.card-price {
    font-size: 22px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-card-add {
    padding: 8px 18px;
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.btn-card-add:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

/* ========================================
   INLINE EXPAND (replaces modal)
   ======================================== */
.card-expand {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    animation: expand-down 0.35s ease;
    overflow: hidden;
}

.expand-inner {
    padding: 24px;
}

.expand-section {
    margin-bottom: 16px;
}

.expand-info-row {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-xs);
    border: 1px solid rgba(255,255,255,0.04);
}

.expand-info-row .expand-text-line {
    margin-bottom: 2px;
}

.expand-text-line {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 4px;
}

.expand-text-line i {
    color: var(--accent-soft);
    font-size: 10px;
    margin-right: 4px;
}

.expand-text-line strong {
    color: var(--text);
    font-weight: 600;
}

.expand-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.expand-section h4 i {
    color: var(--accent);
    font-size: 13px;
}

.expand-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-base {
    background: rgba(123, 45, 142, 0.12);
    color: var(--accent-soft);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(123, 45, 142, 0.2);
}

.tag-topping {
    background: rgba(233, 30, 140, 0.1);
    color: var(--accent-light);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(233, 30, 140, 0.2);
}

/* Size buttons (reused) */
.size-options {
    display: flex;
    gap: 12px;
}

.size-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
}

.size-btn:hover { border-color: var(--primary-light); }

.size-btn.active {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.1);
    box-shadow: 0 0 15px rgba(233, 30, 140, 0.15);
}

.size-icon {
    font-size: 16px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.size-btn span:nth-child(2) {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.size-price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

/* Extra toppings grid (compact) */
.toppings-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.topping-item-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: var(--transition);
    font-size: 11px;
    background: var(--bg-card);
    color: var(--text);
}

.topping-item-compact:hover {
    border-color: var(--primary-light);
    background: rgba(123, 45, 142, 0.08);
}

.topping-item-compact:has(input:checked) {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.1);
    box-shadow: 0 0 10px rgba(233, 30, 140, 0.1);
}

.topping-item-compact input { display: none; }

.topping-emoji { font-size: 15px; flex-shrink: 0; }
.topping-name { font-weight: 500; font-size: 11px; flex: 1; line-height: 1.2; }

.topping-price {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-soft);
    white-space: nowrap;
}

/* Note input */
.note-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-card);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    resize: none;
    outline: none;
    transition: var(--transition);
}
.note-input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 8px rgba(123, 45, 142, 0.15);
}
.note-input::placeholder { color: var(--text-light); font-size: 11px; }

/* Expand actions row */
.expand-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 4px;
    border: 1px solid var(--border);
}

.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--bg-surface);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.qty-btn:hover {
    background: var(--accent);
    color: white;
}

.qty-value {
    font-size: 18px;
    font-weight: 700;
    min-width: 30px;
    text-align: center;
    color: var(--text-white);
}

.expand-total {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.expand-total-label {
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.expand-total-price {
    font-size: 26px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-add-expand {
    margin-left: auto;
    padding: 14px 28px;
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.btn-add-expand:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

/* ========================================
   FLOATING CHECKOUT BAR
   ======================================== */
.floating-checkout {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #00c896, #00e096);
    border: none;
    border-radius: 60px;
    padding: 12px 16px 12px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 90;
    animation: pulse-glow 2s ease-in-out infinite;
    min-width: 340px;
}

.floating-checkout-info {
    display: flex;
    flex-direction: column;
}

.floating-items {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

.floating-total {
    font-size: 20px;
    font-weight: 800;
    color: #0d0d1a;
}

.floating-checkout-btn {
    padding: 12px 24px;
    background: #0d0d1a;
    color: #00e096;
    border: none;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
    margin-left: auto;
}

.floating-checkout-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ========================================
   LOGIN MODAL (for checkout)
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.login-modal-content {
    background: var(--bg-card);
    padding: 48px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    width: 100%;
    max-width: 440px;
    text-align: center;
    z-index: 1;
    border: 1px solid var(--border);
    animation: scaleIn 0.3s ease;
    position: relative;
}

.login-modal-content::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius);
    padding: 1px;
    background: var(--gradient-primary);
    -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;
    opacity: 0.5;
    pointer-events: none;
}

.login-logo {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.logo-img-modal {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.logo-img-payment {
    height: 55px;
    width: auto;
    object-fit: contain;
}

.login-modal-content h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.login-subtitle {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 32px;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: rotate(90deg);
}

/* Phone input group */
.phone-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.country-select-wrapper {
    flex-shrink: 0;
}

.country-code-select {
    height: 100%;
    padding: 14px 8px 14px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background: var(--bg-surface);
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none;
    min-width: 110px;
    text-align: center;
}

.country-code-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.15);
}

.phone-number-wrapper {
    position: relative;
    flex: 1;
}

.phone-number-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 15px;
}

.phone-number-wrapper input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    transition: var(--transition);
    background: var(--bg-surface);
    color: var(--text);
}

.phone-number-wrapper input::placeholder { color: var(--text-light); letter-spacing: 0; }

.phone-number-wrapper input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.15);
}

.input-group {
    position: relative;
    margin-bottom: 16px;
}

.input-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 15px;
}

.input-group input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: var(--transition);
    background: var(--bg-surface);
    color: var(--text);
}

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

.input-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.15);
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 8px;
    letter-spacing: 0.5px;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

.btn-guest {
    width: 100%;
    padding: 14px;
    background: transparent;
    color: var(--accent-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 12px;
}

.btn-guest:hover {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.05);
}

.login-error {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 16px;
    opacity: 0;
    transition: opacity 0.3s;
}

.login-error.show { opacity: 1; }

/* ========================================
   CART SIDEBAR
   ======================================== */
.cart-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-card);
    z-index: 310;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
    border-left: 1px solid var(--border);
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.cart-header h3 {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-white);
}

.cart-header h3 i { color: var(--accent); }

.cart-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cart-close:hover { background: var(--accent); color: white; border-color: var(--accent); }

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.cart-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.2;
    color: var(--accent);
}

.cart-item {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.cart-item:hover { border-color: var(--border-light); }

.cart-item-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.cart-item-emoji {
    font-size: 32px;
    line-height: 1;
}

.cart-item-info { flex: 1; }

.cart-item-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 2px;
}

.cart-item-size {
    font-size: 11px;
    color: var(--accent-soft);
    font-weight: 500;
}

.cart-item-toppings {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 4px;
    line-height: 1.4;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    opacity: 0.5;
    transition: var(--transition);
}

.cart-item-remove:hover { opacity: 1; }

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--border);
}

.cart-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.cart-qty-btn:hover { background: var(--accent); color: white; }

.cart-item-qty span {
    font-size: 13px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    color: var(--text-white);
}

.cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-soft);
}

.cart-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}

.cart-subtotal, .cart-tax {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.cart-delivery-note {
    font-size: 11px;
    color: var(--text-light);
    text-align: center;
    padding: 6px 10px;
    background: rgba(233, 30, 140, 0.06);
    border-radius: 6px;
    margin-bottom: 12px;
    line-height: 1.4;
}
.cart-delivery-note i {
    color: var(--accent);
    margin-right: 4px;
}

.btn-checkout {
    width: 100%;
    padding: 14px;
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.3px;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

/* ========================================
   BUILD YOUR BOWL
   ======================================== */
.build-steps {
    display: grid;
    gap: 24px;
}

.build-step {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.build-step h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--gradient-primary);
    color: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.build-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.build-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
    color: var(--text);
}

.build-option:hover {
    border-color: var(--primary-light);
    background: rgba(123, 45, 142, 0.08);
}

.build-option.selected {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.1);
    box-shadow: 0 0 15px rgba(233, 30, 140, 0.15);
}

.build-emoji { font-size: 28px; }

.build-name {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.build-price {
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-soft);
}

.build-summary {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--accent);
    position: relative;
    overflow: hidden;
}

.build-summary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at top right, rgba(233, 30, 140, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.build-summary h3 {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.empty-build {
    color: var(--text-light);
    font-style: italic;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
}

.build-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.build-total {
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 700;
    margin: 16px 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.build-total span:last-child {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-add-build {
    width: 100%;
    padding: 14px;
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-add-build:disabled {
    background: var(--border);
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-add-build:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

/* ========================================
   ADMIN DASHBOARD (Full Screen)
   ======================================== */
#admin-dashboard {
    background: var(--bg);
    min-height: calc(100vh - 52px);
}

/* Admin Header Bar */
.admin-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    height: 52px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    gap: 12px;
}

.admin-header.hidden {
    display: none;
}

.admin-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-header-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.admin-header-label {
    font-size: 13px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.admin-header-nav {
    flex: 1;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
    min-width: 0;
    touch-action: pan-x;
}

.admin-header-nav::-webkit-scrollbar {
    display: none;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-header-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 16px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: var(--transition);
}

.admin-header-menu-btn:hover {
    background: rgba(123, 45, 142, 0.1);
    color: var(--text);
}

.admin-header-menu-btn.active {
    background: var(--gradient-primary);
    color: white;
}

.admin-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
}

.admin-nav-btn:hover {
    background: rgba(123, 45, 142, 0.1);
    color: var(--text);
}

.admin-nav-btn.active {
    background: var(--gradient-primary);
    color: white;
}

.admin-nav-btn i {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.admin-badge {
    background: #ff4757;
    color: white;
    font-size: 9px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    animation: pulse-dot 1.5s ease-in-out infinite;
    margin-left: 2px;
}

.admin-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #ff6b6b;
    font-size: 16px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: var(--transition);
}

.admin-logout-btn:hover {
    background: rgba(255, 107, 107, 0.1);
}

.admin-main {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px;
    box-sizing: border-box;
}

.admin-section {
    overflow-x: hidden;
    max-width: 100%;
}

.admin-section-header {
    margin-bottom: 24px;
}

.admin-section-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.admin-section-header h2 i {
    color: var(--accent);
}

.admin-section-subtitle {
    font-size: 13px;
    color: var(--text-light);
}

/* Orders Filter */
.orders-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--accent);
}

/* Orders Grid */
.admin-orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.no-orders {
    text-align: center;
    color: var(--text-light);
    padding: 60px 40px;
    font-style: italic;
    font-size: 14px;
    grid-column: 1 / -1;
}

.order-card {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 20px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.order-card.order-new {
    border-color: #f0ad4e;
    animation: pulse-border 2s ease-in-out 3;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 173, 78, 0); }
    50% { box-shadow: 0 0 15px rgba(240, 173, 78, 0.3); }
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.order-header strong {
    font-size: 15px;
    color: var(--accent-soft);
}

.order-date {
    font-size: 11px;
    color: var(--text-light);
    margin-left: 10px;
}

.order-status {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-pendiente { background: rgba(240, 173, 78, 0.15); color: #f0ad4e; }
.status-preparando { background: rgba(91, 192, 222, 0.15); color: #5bc0de; }
.status-listo { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.status-entregado { background: rgba(119, 119, 119, 0.15); color: #999; }
.status-esperando_pago { background: rgba(168, 155, 181, 0.15); color: var(--text-light); }

.order-items-list { margin-bottom: 12px; }

.order-item-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    color: var(--text);
}

.order-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-bottom: 12px;
    color: var(--text);
}
.order-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.payment-yappy {
    background: rgba(0, 175, 215, 0.15);
    color: #00AFD7;
}
.payment-efectivo {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}

/* Order Customer Info */
.order-customer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: var(--radius-xs);
    font-size: 12px;
}
.order-customer-info span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}
.order-customer-info i {
    color: var(--accent);
    font-size: 11px;
}
.order-customer-phone {
    font-weight: 600;
    color: var(--text-white) !important;
}
.order-customer-address {
    width: 100%;
    color: var(--text-light) !important;
    font-size: 11px;
}
.order-phone-link {
    color: inherit;
    text-decoration: none;
}
.order-phone-link:hover {
    color: var(--accent);
    text-decoration: underline;
}
.order-scheduled-slot {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107 !important;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
/* Delivery Info Block */
.order-delivery-info {
    background: rgba(123, 45, 142, 0.08);
    border: 1px solid rgba(123, 45, 142, 0.2);
    border-radius: var(--radius-xs);
    padding: 10px 12px;
    margin: 8px 0;
}
.order-delivery-header {
    font-size: 12px;
    color: var(--primary);
    margin-bottom: 6px;
}
.order-delivery-header i {
    margin-right: 4px;
}
.order-delivery-row {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
    line-height: 1.4;
}
.order-delivery-row i {
    color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}
.order-location-name {
    font-weight: 600;
    color: var(--text);
}
.order-delivery-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.order-delivery-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-light);
    border: 1px solid var(--border);
}
.order-delivery-chip i {
    font-size: 10px;
}
.order-map-link {
    background: rgba(66, 133, 244, 0.15);
    color: #4285F4 !important;
    border-color: rgba(66, 133, 244, 0.3);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.order-map-link:hover {
    background: rgba(66, 133, 244, 0.25);
}
.order-waze-link {
    background: rgba(51, 204, 255, 0.12);
    color: #33CCFF !important;
    border-color: rgba(51, 204, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.order-waze-link:hover {
    background: rgba(51, 204, 255, 0.22);
}
/* Item Notes in Order Cards */
.order-item-note {
    font-size: 11px;
    padding: 4px 10px;
    margin: 2px 0 6px 0;
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
    border-left: 3px solid #FFC107;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    font-style: italic;
}
.order-item-extras {
    font-size: 11px;
    padding: 2px 10px;
    margin: 1px 0 4px 0;
    color: var(--primary);
    font-weight: 500;
}
.order-item-extras i {
    margin-right: 4px;
    font-size: 10px;
}
.order-item-note i {
    margin-right: 4px;
    color: #FFC107;
}

.order-actions {
    display: flex;
    gap: 8px;
}

.order-action-btn {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    color: white;
}

.btn-preparando { background: #5bc0de; }
.btn-preparando:hover { background: #31b0d5; }
.btn-listo { background: #5cb85c; }
.btn-listo:hover { background: #449d44; }
.btn-entregado { background: #777; }
.btn-entregado:hover { background: #555; }

/* ========================================
   POS / CAJA
   ======================================== */
.pos-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    min-height: calc(100vh - 140px);
    max-width: 100%;
    overflow: hidden;
}

.pos-products {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
    overflow: hidden;
}

.pos-categories {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pos-cat-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-light);
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.pos-cat-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--accent);
}

.pos-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-width: 100%;
    overflow: hidden;
}

.pos-product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}

.pos-product-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.2);
}

.pos-product-card.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.pos-product-img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
}

.pos-product-emoji {
    font-size: 40px;
}

.pos-product-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* POS Invoice */
.pos-invoice {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 20px;
    align-self: start;
    max-width: 100%;
    overflow: hidden;
}

.pos-invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.pos-invoice-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-invoice-header h3 i { color: var(--accent); }

.pos-clear-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: #ff6b6b;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.pos-clear-btn:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: #ff6b6b;
}

.pos-invoice-items {
    padding: 12px 20px;
    min-height: 60px;
}

.pos-empty {
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
    padding: 30px 0;
    font-style: italic;
}

.pos-inv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pos-inv-item:last-child { border-bottom: none; }

.pos-inv-info {
    flex: 1;
}

.pos-inv-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.pos-inv-extras {
    font-size: 10px;
    color: var(--primary);
    margin: 1px 0;
}
.pos-inv-price-unit {
    font-size: 10px;
    color: var(--text-light);
}

.pos-inv-qty {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-surface);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.pos-inv-qty button {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
}

.pos-inv-qty button:hover { background: var(--accent); color: white; }

.pos-inv-qty span {
    width: 26px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.pos-inv-total {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    min-width: 55px;
    text-align: right;
}

.pos-inv-remove {
    background: none;
    border: none;
    color: rgba(255, 100, 100, 0.5);
    cursor: pointer;
    font-size: 11px;
    padding: 4px;
    transition: var(--transition);
}

.pos-inv-remove:hover { color: #ff6b6b; }

/* POS Totals */
.pos-invoice-totals {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

.pos-total-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-light);
    padding: 4px 0;
}

.pos-total-main {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* POS Payment */
.pos-payment-method {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

.pos-payment-method h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.pos-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pos-method-btn {
    padding: 8px 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.pos-method-btn.active {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.1);
    color: var(--accent);
}

.pos-cash-change {
    margin-top: 10px;
}

.pos-cash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pos-cash-row label {
    font-size: 12px;
    color: var(--text-light);
}

.pos-cash-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 8px;
}

.pos-cash-input-wrap span {
    font-size: 13px;
    color: var(--text-light);
}

.pos-cash-input-wrap input {
    width: 80px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.pos-change-value {
    font-size: 16px;
    font-weight: 700;
    color: #00e096;
}

/* POS Charge Button */
.pos-charge-btn {
    margin: 12px 20px;
    padding: 14px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px);
}

.pos-charge-btn:disabled {
    background: var(--border);
    cursor: not-allowed;
    opacity: 0.5;
}

/* POS Payment Detail Fields (tarjeta, ACH, Yappy) */
.pos-payment-details {
    margin-top: 10px;
    padding: 10px 0 2px;
}
.pos-ref-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    margin-top: 6px;
    outline: none;
    transition: var(--transition);
}
.pos-ref-input:focus { border-color: var(--accent); }

/* POS Customer Search */
.pos-customer-search {
    padding: 10px 20px 4px;
    border-top: 1px solid var(--border);
}
.pos-customer-search h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pos-customer-search h4 i { color: var(--accent); }
.pos-required-badge { font-size: 9px; background: rgba(233, 30, 140, 0.15); color: var(--accent); padding: 2px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.pos-customer-fields { display: flex; flex-direction: column; gap: 6px; }
.pos-customer-hint { font-size: 11px; color: var(--accent); margin: 4px 0 0; opacity: 0.8; }
.pos-customer-hint.hidden { display: none; }
.pos-customer-required-flash { animation: custFlash 0.5s ease 3; }
@keyframes custFlash { 0%, 100% { border-color: var(--border); } 50% { border-color: var(--accent); box-shadow: 0 0 12px rgba(233, 30, 140, 0.3); } }
.pos-customer-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    padding-left: 10px;
    gap: 6px;
}
.pos-customer-input-wrap > i { color: var(--text-light); font-size: 12px; flex-shrink: 0; }
.pos-customer-input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    padding: 8px 4px;
    outline: none;
}
.pos-customer-search-btn {
    padding: 8px 14px;
    border: none;
    background: var(--gradient-primary);
    color: white;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
}
.pos-customer-result {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 12px;
    background: rgba(92, 184, 92, 0.1);
    border: 1px solid rgba(92, 184, 92, 0.3);
    border-radius: 6px;
    font-size: 12px;
    color: #5cb85c;
    font-weight: 600;
}
.pos-customer-result span { flex: 1; }
.pos-customer-clear {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
}
.pos-customer-clear:hover { color: #ff4757; }


.pos-charge-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

/* POS Sales Today */
.pos-sales-today {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
}

.pos-sales-today h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pos-sales-today h4 i { color: var(--accent); }

.pos-sales-summary {
    display: flex;
    gap: 16px;
}

.pos-sale-stat {
    flex: 1;
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.pos-sale-label {
    font-size: 10px;
    color: var(--text-light);
    display: block;
    margin-bottom: 4px;
}

.pos-sale-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}

/* ========================================
   INVENTARIO
   ======================================== */
.inventory-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    max-width: 100%;
    overflow: hidden;
}

.inventory-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    overflow: hidden;
    min-width: 0;
}

.inventory-item.inactive {
    opacity: 0.5;
}

.inventory-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.inventory-emoji {
    font-size: 32px;
    flex-shrink: 0;
    width: 50px;
    text-align: center;
}

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

.inventory-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-cat {
    font-size: 10px;
    color: var(--text-light);
    text-transform: capitalize;
}

.inventory-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    margin-right: 12px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #444;
    border-radius: 26px;
    cursor: pointer;
    transition: var(--transition);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
    background: #00e096;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

/* ========================================
   POS SIZE PICKER
   ======================================== */
.pos-product-card {
    position: relative;
}

.pos-size-picker {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(13, 13, 26, 0.95);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 5;
    animation: fadeIn 0.15s ease;
}

.pos-size-btn {
    width: 85%;
    padding: 10px 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pos-size-btn:hover {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--accent);
}

.pos-size-btn .size-label {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.pos-size-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 14px;
    cursor: pointer;
}

/* ========================================
   ORDER CANCEL
   ======================================== */
.status-cancelado {
    background: rgba(255, 71, 87, 0.15);
    color: #ff4757;
}

.status-en_camino {
    background: rgba(91, 192, 222, 0.15);
    color: #5bc0de;
}

.status-alta_demanda {
    background: rgba(240, 173, 78, 0.15);
    color: #f0ad4e;
}

.btn-encamino {
    background: linear-gradient(135deg, #5bc0de, #46b8da) !important;
}

.btn-cancelar {
    background: #ff4757 !important;
}

.btn-cancelar:hover {
    background: #ee3344 !important;
}

.cancel-form {
    margin-top: 10px;
    padding: 12px;
    background: rgba(255, 71, 87, 0.06);
    border: 1px solid rgba(255, 71, 87, 0.2);
    border-radius: var(--radius-xs);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cancel-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

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

.cancel-form input:focus {
    outline: none;
    border-color: #ff4757;
}

.cancel-confirm-btn {
    padding: 10px;
    background: #ff4757;
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.cancel-confirm-btn:hover {
    background: #ee3344;
}

.order-cancel-reason {
    font-size: 11px;
    color: #ff4757;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(255, 71, 87, 0.06);
    border-radius: var(--radius-xs);
}

.order-cancel-reason i {
    margin-right: 4px;
}

/* ========================================
   EXPENSES / GASTOS
   ======================================== */
.expense-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.expense-form-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-white);
}

.expense-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.expense-form-grid .full-width {
    grid-column: 1 / -1;
}

.expense-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.expense-field input,
.expense-field select,
.expense-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

.expense-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a89bb5' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.expense-field input:focus,
.expense-field select:focus,
.expense-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.expense-img-upload {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.expense-img-upload:hover {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.03);
}

.expense-img-upload i {
    font-size: 28px;
    color: var(--text-light);
}

.expense-img-upload span {
    font-size: 12px;
    color: var(--text-light);
}

.expense-img-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.expense-img-upload.has-image {
    padding: 0;
    border-style: solid;
    border-color: var(--accent);
}

.expense-img-upload.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xs);
}

.expense-save-btn {
    margin-top: 16px;
    width: 100%;
    padding: 14px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.expense-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

.expense-date-group {
    margin-bottom: 20px;
}

.expense-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.expense-date-header:hover {
    border-color: var(--accent);
}

.expense-date-header .date-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expense-date-header .date-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
}

.expense-date-header .date-count {
    font-size: 11px;
    color: var(--text-light);
    background: var(--bg-surface);
    padding: 2px 8px;
    border-radius: 10px;
}

.expense-date-header .date-total {
    font-size: 15px;
    font-weight: 700;
    color: #ff4757;
}

.expense-date-toggle {
    font-size: 12px;
    color: var(--text-light);
    transition: transform 0.2s;
    margin-right: 10px;
}
.expense-date-group.collapsed .expense-date-toggle {
    transform: rotate(-90deg);
}

.expense-items {
    display: flex;
    padding: 8px 0 0;
    gap: 8px;
    flex-direction: column;
}

.expense-date-group.collapsed .expense-items {
    display: none;
}

.expense-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    margin-left: 16px;
}

.expense-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.expense-card-icon.cat-proveedor { background: rgba(91, 192, 222, 0.15); color: #5bc0de; }
.expense-card-icon.cat-servicios { background: rgba(240, 173, 78, 0.15); color: #f0ad4e; }
.expense-card-icon.cat-mantenimiento { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.expense-card-icon.cat-inventario { background: rgba(233, 30, 140, 0.15); color: #e91e8c; }
.expense-card-icon.cat-otro { background: rgba(119, 119, 119, 0.15); color: #999; }

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

.expense-card-desc {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expense-card-cat {
    font-size: 11px;
    color: var(--text-light);
}

.expense-card-amount {
    font-size: 14px;
    font-weight: 700;
    color: #ff4757;
    flex-shrink: 0;
}

.expense-card-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid var(--border);
}

.expense-card:hover {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.04);
}

.expense-card-has-img {
    color: var(--text-light);
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.5;
}

.expense-card-chevron {
    color: var(--text-light);
    font-size: 11px;
    opacity: 0.3;
    flex-shrink: 0;
}

/* ═══ Expense Detail Modal ═══ */
.exp-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    padding: 20px;
}
.exp-detail-overlay.active { opacity: 1; }

.exp-detail-panel {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s;
    border: 1px solid var(--border);
}
.exp-detail-overlay.active .exp-detail-panel { transform: translateY(0); }

.exp-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.exp-detail-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.exp-detail-close {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}
.exp-detail-close:hover { color: var(--accent); }

.exp-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* View Mode */
.exp-detail-img-container {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.exp-detail-img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
    background: #0a0a14;
}

.exp-detail-row-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg-surface);
    border-radius: 12px;
    margin-bottom: 16px;
}
.exp-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.exp-detail-desc {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.exp-detail-cat {
    font-size: 12px;
    color: var(--text-light);
}
.exp-detail-amount {
    margin-left: auto;
    font-size: 20px;
    font-weight: 700;
    color: #ff4757;
}

.exp-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.exp-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-light);
}
.exp-detail-meta-item i {
    width: 16px;
    text-align: center;
    opacity: 0.6;
}

/* Edit Mode */
.exp-detail-edit .expense-field {
    margin-bottom: 14px;
}
.exp-detail-edit .expense-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 6px;
}
.exp-detail-edit .expense-field input,
.exp-detail-edit .expense-field select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
.exp-detail-edit .expense-field input:focus,
.exp-detail-edit .expense-field select:focus {
    border-color: var(--accent);
    outline: none;
}
.exp-edit-img-preview {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}
.exp-edit-img-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
    background: #0a0a14;
}

/* Footer buttons */
.exp-detail-footer {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}
.exp-detail-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    transition: 0.2s;
}
.exp-btn-edit {
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
    flex: 1;
}
.exp-btn-edit:hover { border-color: var(--accent); color: var(--accent); }
.exp-btn-save {
    background: #7b2d8e;
    color: #fff;
    flex: 1;
}
.exp-btn-save:hover { background: #9b3dae; }
.exp-btn-cancel {
    background: var(--bg-surface);
    color: var(--text-light);
    border: 1px solid var(--border);
}
.exp-btn-cancel:hover { color: var(--text); }
.exp-btn-delete {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}
.exp-btn-delete:hover { background: rgba(255, 71, 87, 0.2); }

@media (max-width: 480px) {
    .exp-detail-panel { max-width: 100%; border-radius: 12px; }
    .exp-detail-amount { font-size: 17px; }
    .exp-detail-footer { flex-wrap: wrap; }
    .exp-detail-btn { flex: 1; justify-content: center; min-width: 45%; }
}

.expense-img-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.expense-img-modal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius);
}

/* ========================================
   DASHBOARD
   ======================================== */
/* Dashboard Date Controls */
.dash-date-controls { margin-bottom: 24px; }
.dash-range-tabs { display: flex; gap: 8px; margin-bottom: 12px; justify-content: center; flex-wrap: wrap; }
.dash-range-btn { padding: 6px 18px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 13px; transition: var(--transition); }
.dash-range-btn.active { background: var(--gradient-primary); border-color: var(--accent); color: white; font-weight: 600; }
.dash-range-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.dash-date-inputs { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.dash-nav-arrows { display: flex; align-items: center; gap: 16px; }
.dash-nav-arrows button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.dash-nav-arrows button:hover { background: var(--gradient-primary); border-color: var(--accent); color: white; }
.dash-nav-arrows span { font-size: 16px; font-weight: 700; color: var(--text-white); min-width: 180px; text-align: center; }
.dash-custom-range { display: flex; align-items: center; gap: 8px; }
.dash-custom-range input[type="date"] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 6px 10px; font-size: 13px; }
.dash-apply-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--gradient-primary); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* POS Tip */
.pos-tip-section { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.pos-tip-label { font-size: 13px; color: var(--text-light); min-width: 55px; }
.pos-tip-type-row { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.pos-tip-type-btn { padding: 3px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-light); cursor: pointer; font-size: 11px; font-weight: 600; transition: var(--transition); letter-spacing: 0.3px; white-space: nowrap; }
.pos-tip-type-btn.active { background: var(--bg-surface); border-color: var(--accent); color: var(--accent); }
.pos-tip-options { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.pos-tip-btn { padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 12px; transition: var(--transition); }
.pos-tip-btn.active { background: var(--gradient-primary); border-color: var(--accent); color: white; }
.pos-tip-pct-btn { padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 12px; transition: var(--transition); }
.pos-tip-pct-btn.active { background: var(--gradient-primary); border-color: var(--accent); color: white; }
.pos-tip-custom { flex-basis: 100%; margin-top: 2px; }
.pos-tip-custom .pos-cash-input-wrap { max-width: 120px; }

/* POS Discount Section */
.pos-discount-section { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.pos-discount-label { font-size: 13px; color: var(--text-light); min-width: 65px; }
.pos-discount-options { display: flex; gap: 4px; flex-wrap: wrap; }
.pos-discount-btn { padding: 4px 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 12px; transition: var(--transition); }
.pos-discount-btn small { font-size: 9px; opacity: 0.7; display: block; margin-top: -1px; }
.pos-discount-btn.active { background: linear-gradient(135deg, #00c853, #00e096); border-color: #00e096; color: white; }
.pos-discount-btn.active small { opacity: 1; }
.pos-discount-custom { margin-top: 4px; }
.pos-discount-custom .pos-cash-input-wrap { max-width: 100px; }
.pos-discount-line { color: #00e096 !important; }
.pos-discount-savings { color: #00e096 !important; font-weight: 600; }

/* POS Delivery Section */
.pos-delivery-section { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pos-delivery-label { font-size: 13px; color: var(--text-light); display: flex; align-items: center; gap: 6px; }
.pos-delivery-label i { color: var(--accent); }
.pos-delivery-toggle { display: flex; align-items: center; }
.pos-delivery-fields { display: flex; gap: 8px; padding: 6px 0 8px; align-items: center; }
.pos-delivery-fields .pos-cash-input-wrap { max-width: 110px; flex-shrink: 0; }
.pos-delivery-fields .pos-ref-input { flex: 1; }
.pos-delivery-line span { display: flex; align-items: center; gap: 5px; }
.pos-delivery-line i { color: var(--accent); font-size: 11px; }

/* POS Extras Divider */
.pos-extras-divider {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* POS Extra Card */
.pos-extra-card {
    border-color: rgba(194, 120, 236, 0.3) !important;
}
.pos-extra-card:hover {
    border-color: var(--accent) !important;
}

/* Inventory Tabs */
.inv-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.inv-tab-btn { padding: 8px 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 14px; transition: var(--transition); }
.inv-tab-btn.active { background: var(--gradient-primary); border-color: var(--accent); color: white; font-weight: 600; }
.inv-tab-content.hidden { display: none; }
.inv-size-filter { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.inv-size-btn { padding: 4px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-light); cursor: pointer; font-size: 12px; font-weight: 600; transition: var(--transition); }
.inv-size-btn.active { background: var(--gradient-primary); border-color: var(--accent); color: white; }
.inv-size-btn i { font-size: 10px; margin-right: 3px; }
/* Inventory Quantity */
.inventory-qty-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; }
.inventory-qty-input { width: 60px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 4px; font-size: 14px; }
.inventory-qty-label { font-size: 11px; color: var(--text-light); }
.ingredient-group-title { font-size: 14px; font-weight: 700; color: var(--accent); padding: 12px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }

/* Smoothie Options */
.expand-options-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.option-pill { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; transition: var(--transition); font-size: 13px; color: var(--text); }
.option-pill.active { border-color: var(--accent); background: rgba(233,30,140,.15); color: var(--accent); }
.option-pill input { display: none; }
.option-pill-price { font-size: 11px; opacity: .6; }

/* Financial Waterfall */
.dash-waterfall-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 24px;
}
.dash-wf-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}
.dash-wf-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-wf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
}
.dash-wf-row .dash-wf-label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-wf-row .dash-wf-label i {
    width: 20px;
    text-align: center;
    opacity: 0.7;
}
.dash-wf-row.income {
    background: rgba(92, 184, 92, 0.08);
    color: #7ddb7d;
}
.dash-wf-row.deduction {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255,255,255,0.6);
}
.dash-wf-row.deduction .dash-wf-amount {
    color: #ff6b6b;
}
.dash-wf-row.subtotal {
    background: rgba(91, 192, 222, 0.08);
    color: #5bc0de;
    font-weight: 600;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 4px 0;
}
.dash-wf-row.profit {
    background: linear-gradient(135deg, rgba(0, 224, 150, 0.15), rgba(0, 224, 150, 0.05));
    color: #00e096;
    font-size: 16px;
    margin-top: 4px;
    border: 1px solid rgba(0, 224, 150, 0.3);
}
.dash-wf-row.loss {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.15), rgba(255, 71, 87, 0.05));
    color: #ff4757;
    font-size: 16px;
    margin-top: 4px;
    border: 1px solid rgba(255, 71, 87, 0.3);
}
.dash-wf-note {
    margin-top: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Commissions Detail */
.dash-comm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dash-comm-row.no-comm {
    opacity: 0.6;
}
.dash-comm-method {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.dash-comm-method i {
    width: 20px;
    text-align: center;
    opacity: 0.6;
}
.dash-comm-rate {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.dash-comm-detail {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dash-comm-sales {
    font-size: 12px;
    opacity: 0.5;
}
.dash-comm-fee {
    font-weight: 700;
    color: #ff6b6b;
    min-width: 80px;
    text-align: right;
}
.dash-comm-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    font-weight: 600;
    font-size: 15px;
}
.dash-comm-note {
    font-size: 11px;
    color: #ffa500;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.dash-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.dash-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    overflow: hidden;
}

.dash-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.dash-summary-icon.green { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.dash-summary-icon.red { background: rgba(255, 71, 87, 0.15); color: #ff4757; }
.dash-summary-icon.accent { background: rgba(233, 30, 140, 0.15); color: #e91e8c; }
.dash-summary-icon.blue { background: rgba(91, 192, 222, 0.15); color: #5bc0de; }
.dash-summary-icon.orange { background: rgba(255, 165, 0, 0.15); color: #ffa500; }
.dash-summary-icon.teal { background: rgba(0, 206, 209, 0.15); color: #00ced1; }

.dash-summary-info {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.dash-summary-label,
.dash-summary-info > span {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

.dash-summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 2px;
    white-space: nowrap;
}

.dash-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.dash-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
}

.dash-panel h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-panel h3 i {
    color: var(--accent);
}

.dash-payment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dash-payment-label {
    font-size: 13px;
    color: var(--text-light);
    min-width: 70px;
}

.dash-payment-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--bg-surface);
    border-radius: 4px;
    overflow: hidden;
}

.dash-payment-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.dash-payment-bar-fill.efectivo { background: #5cb85c; }
.dash-payment-bar-fill.yappy { background: #5bc0de; }
.dash-payment-bar-fill.tarjeta { background: #f0ad4e; }
.dash-payment-bar-fill.pedidosya { background: #ff3246; }
.dash-payment-bar-fill.ubereats { background: #06C167; }

.dash-payment-amount {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    min-width: 70px;
    text-align: right;
}

.dash-top-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dash-top-rank {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    flex-shrink: 0;
}

.dash-top-rank:first-child { background: rgba(233, 30, 140, 0.15); color: var(--accent); }

.dash-top-name {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

.dash-top-qty {
    font-size: 12px;
    color: var(--text-light);
}

.dash-top-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    min-width: 60px;
    text-align: right;
}

.dash-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dash-timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.dash-timeline-icon.order { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.dash-timeline-icon.expense { background: rgba(255, 71, 87, 0.15); color: #ff4757; }

.dash-timeline-info {
    flex: 1;
}

.dash-timeline-title {
    font-size: 13px;
    color: var(--text);
}

.dash-timeline-date {
    font-size: 11px;
    color: var(--text-light);
}

.dash-timeline-amount {
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.dash-timeline-amount.income { color: #5cb85c; }
.dash-timeline-amount.expense { color: #ff4757; }

/* ========================================
   FACTURACION
   ======================================== */
.fact-controls { margin-bottom: 24px; }
.fact-filters { margin-bottom: 16px; }
.fact-date-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fact-date-range label { font-size: 12px; color: var(--text-light); font-weight: 500; }
.fact-date-range input[type="date"] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); padding: 8px 12px; font-family: 'Poppins', sans-serif; font-size: 12px; }
.fact-filter-btn { padding: 8px 16px; background: var(--gradient-primary); color: white; border: none; border-radius: var(--radius-xs); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.fact-quick-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.fact-quick-btn { padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; color: var(--text-light); font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; cursor: pointer; transition: var(--transition); }
.fact-quick-btn:hover { border-color: var(--primary-light); }
.fact-quick-btn.active { background: var(--gradient-primary); color: white; border-color: transparent; }
.fact-summary { display: flex; gap: 16px; flex-wrap: wrap; }
.fact-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 24px; flex: 1; min-width: 140px; text-align: center; }
.fact-stat-label { display: block; font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.fact-stat-value { display: block; font-size: 24px; font-weight: 700; color: var(--text-white); }
.fact-stat-accent { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.fact-list { display: flex; flex-direction: column; gap: 8px; }
.fact-card { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; cursor: pointer; transition: var(--transition); }
.fact-card:hover { border-color: var(--primary-light); transform: translateY(-1px); }
.fact-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.fact-card-icon.order { background: rgba(0,224,150,0.12); color: #00e096; }
.fact-card-icon.sale { background: rgba(233,30,140,0.12); color: var(--accent); }
.fact-card-info { flex: 1; }
.fact-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
.fact-card-sub { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.fact-card-amount { font-size: 16px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.fact-card-date { font-size: 11px; color: var(--text-light); white-space: nowrap; }
.fact-card-method { font-size: 10px; padding: 3px 8px; border-radius: 12px; background: rgba(255,255,255,0.06); color: var(--text-light); white-space: nowrap; }

/* Invoice Modal */
.fact-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fact-modal.hidden { display: none; }
.fact-modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.fact-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.fact-modal-header h3 { font-size: 16px; font-weight: 700; color: var(--text-white); display: flex; align-items: center; gap: 8px; }
.fact-modal-header h3 i { color: var(--accent); }
.fact-modal-close { background: none; border: none; color: var(--text-light); font-size: 18px; cursor: pointer; padding: 4px; }
.fact-modal-body { padding: 24px; }
.fact-inv-header { text-align: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.fact-inv-logo { font-size: 20px; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.fact-inv-sub { font-size: 11px; color: var(--text-light); }
.fact-inv-number { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 8px; }
.fact-inv-date { font-size: 11px; color: var(--text-light); }
.fact-inv-items { margin-bottom: 16px; }
.fact-inv-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.fact-inv-item-name { color: var(--text); flex: 1; }
.fact-inv-item-qty { color: var(--text-light); width: 40px; text-align: center; }
.fact-inv-item-total { color: var(--text); font-weight: 600; width: 70px; text-align: right; }
.fact-inv-item-extras { font-size: 10px; color: var(--primary); padding: 1px 0 4px 20px; }
.fact-inv-totals { border-top: 1px dashed var(--border); padding-top: 12px; }
.fact-inv-total-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-light); padding: 4px 0; }
.fact-inv-total-main { font-size: 18px; font-weight: 700; color: var(--text-white); padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.fact-inv-footer { text-align: center; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--text-light); }

/* Payment Details in Invoice Detail */
.fact-payment-details {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(91, 192, 222, 0.08);
    border: 1px solid rgba(91, 192, 222, 0.2);
    border-radius: var(--radius-xs);
}
.fact-pd-line {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 3px 0;
}
.fact-pd-line span:first-child { color: var(--text-light); }
.fact-pd-line span:last-child { color: var(--text); font-weight: 600; }
.fact-modal-actions { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.fact-print-btn { flex: 1; padding: 12px; background: var(--gradient-primary); color: white; border: none; border-radius: var(--radius-xs); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Print styles */
@media print {
    body * { visibility: hidden; }
    .fact-modal, .fact-modal * { visibility: visible; }
    .fact-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 99999; }
    .fact-modal-content { max-width: 100%; max-height: 100%; border: none; background: white; color: #000; }
    .fact-modal-header, .fact-modal-actions { display: none; }
    .fact-modal-body { color: #000; }
    .fact-modal-body * { color: #000 !important; -webkit-text-fill-color: #000 !important; border-color: #ccc !important; }
}

/* ========================================
   ADMIN RESPONSIVE
   ======================================== */
@media (max-width: 900px) {
    .admin-header {
        height: 44px;
        padding: 0 8px;
        gap: 8px;
    }
    .admin-header-left { display: none; }
    .admin-nav-btn span { display: none; }
    .admin-nav-btn { padding: 6px 10px; gap: 0; }
    .admin-nav-btn i { font-size: 16px; width: auto; }
    .admin-main { padding: 16px; }
    .pos-layout {
        grid-template-columns: 1fr;
    }
    .pos-invoice {
        max-height: none;
    }
    .admin-orders-grid {
        grid-template-columns: 1fr;
    }
    .inventory-list {
        grid-template-columns: 1fr;
    }
    .expense-form-grid {
        grid-template-columns: 1fr;
    }
    .dash-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-grid-2col {
        grid-template-columns: 1fr;
    }
    .dash-wf-row { padding: 8px 10px; font-size: 12px; }
    .dash-wf-row.profit, .dash-wf-row.loss { font-size: 14px; }
    .dash-comm-detail { flex-direction: column; align-items: flex-end; gap: 2px; }
    .dash-comm-sales { font-size: 11px; }
    .pos-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    .pos-product-card {
        padding: 10px 8px;
        gap: 6px;
    }
    .pos-product-img {
        width: 70px;
        height: 70px;
        border-radius: 8px;
    }
    .pos-product-name {
        font-size: 10px;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }
    .pos-product-price {
        font-size: 11px;
        line-height: 1.3;
        word-break: break-word;
    }
}

/* POS Responsive — Phones */
@media (max-width: 600px) {
    .admin-main {
        padding: 8px;
    }
    .pos-layout {
        gap: 12px;
    }
    .pos-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .pos-product-card {
        padding: 8px 4px;
        gap: 4px;
    }
    .pos-product-img {
        width: 64px;
        height: 64px;
    }
    .pos-product-name {
        font-size: 11px;
        white-space: nowrap;
    }
    .pos-product-price {
        font-size: 11px;
        white-space: nowrap;
    }
    .inventory-item {
        padding: 10px 12px;
        gap: 10px;
    }
    .inventory-img {
        width: 40px;
        height: 40px;
    }
    .inventory-emoji {
        font-size: 26px;
        width: 40px;
    }
    .inventory-name {
        font-size: 12px;
    }
    .inventory-price {
        font-size: 12px;
        margin-right: 8px;
    }
    .toggle-switch {
        width: 40px;
        height: 22px;
    }
}

/* ========================================
   CONFIRMATION
   ======================================== */
.confirmation-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirmation-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 48px 40px;
    text-align: center;
    max-width: 400px;
    animation: scaleIn 0.3s ease;
    border: 1px solid var(--border);
}

.confirmation-icon {
    font-size: 64px;
    color: #5cb85c;
    margin-bottom: 20px;
}

.confirmation-modal h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-white);
}

.confirmation-modal p {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.confirmation-detail { font-size: 12px !important; }

.btn-confirm-ok {
    margin-top: 24px;
    padding: 12px 40px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-confirm-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    font-size: 13px;
    font-weight: 500;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
}

.toast.show { transform: translateX(0); }
.toast-success { border-left: 4px solid #5cb85c; }
.toast-success i { color: #5cb85c; }
.toast-warning { border-left: 4px solid #f0ad4e; }
.toast-warning i { color: #f0ad4e; }
.toast-info { border-left: 4px solid #5bc0de; }
.toast-info i { color: #5bc0de; }

/* ========================================
   CATEGORY DIVIDER (Inicio view)
   ======================================== */
.category-divider {
    padding: 28px 0 12px;
}

.category-divider h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-divider h3 i {
    color: var(--accent);
    font-size: 18px;
}

.category-divider:first-child {
    padding-top: 0;
}

/* ========================================
   PROMO CARD - Arma tu Bowl
   ======================================== */
.promo-card-arma {
    margin-top: 28px;
    background: linear-gradient(135deg, #00c896, #00e096);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

.promo-card-arma:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 224, 150, 0.35);
}

.promo-card-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
}

.promo-emoji {
    font-size: 48px;
    flex-shrink: 0;
}

.promo-info {
    flex: 1;
}

.promo-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0d0d1a;
    margin-bottom: 4px;
}

.promo-info p {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

.promo-arrow {
    font-size: 22px;
    color: #0d0d1a;
    flex-shrink: 0;
    transition: var(--transition);
}

.promo-card-arma:hover .promo-arrow {
    transform: translateX(5px);
}

/* ========================================
   PAYMENT MODAL (Yappy)
   ======================================== */
.payment-modal-content {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 32px 28px;
    max-width: 440px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideUp 0.3s ease-out;
    border: 1px solid var(--border);
}

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

.payment-header {
    text-align: center;
    margin-bottom: 24px;
}

.payment-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-white);
    margin-top: 8px;
}

.payment-summary {
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
}

.payment-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-light);
}

.payment-line i {
    margin-right: 6px;
    color: var(--accent);
}

/* Payment order detail */
.payment-order-detail {
    margin-bottom: 12px;
    max-height: 260px;
    overflow-y: auto;
}
.pay-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pay-item:last-child { border-bottom: none; }
.pay-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.pay-item-info { display: flex; flex-direction: column; flex: 1; }
.pay-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pay-item-size { font-size: 11px; color: var(--text-light); }
.pay-item-price { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.pay-item-toppings { font-size: 10px; color: var(--text-light); margin-top: 3px; line-height: 1.3; }
.pay-item-note { font-size: 10px; color: var(--accent-soft); margin-top: 3px; font-style: italic; }
.pay-item-note i { margin-right: 4px; font-size: 9px; }
.pay-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
.pay-item-qty {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    overflow: hidden;
}
.pay-qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
}
.pay-qty-btn:hover { background: rgba(233, 30, 140, 0.15); }
.pay-item-qty span {
    width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.pay-item-remove {
    background: none;
    border: none;
    color: rgba(255,100,100,0.6);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    transition: var(--transition);
}
.pay-item-remove:hover { color: #ff6b6b; }

/* Payment address */
.payment-address {
    margin-bottom: 20px;
}
.payment-address h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.payment-address h4 i {
    color: var(--accent);
    margin-right: 6px;
}
.address-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-card);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    resize: none;
    outline: none;
    transition: var(--transition);
}
.address-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(233, 30, 140, 0.15);
}
.address-input::placeholder { color: var(--text-light); font-size: 11px; }

/* Scheduled banner */
.scheduled-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(233, 30, 140, 0.1);
    border: 1px solid rgba(233, 30, 140, 0.3);
    border-radius: var(--radius-xs);
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-soft);
}
.scheduled-banner i { color: var(--accent); }

/* Map container */
.map-container {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    position: relative;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.map-search {
    display: flex;
    gap: 0;
    position: relative;
    z-index: 1000;
}
.map-search-input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    outline: none;
}
.map-search-input::placeholder { color: var(--text-light); }
.map-search-input:focus { background: var(--bg-card); }
.map-search-btn {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--accent);
    cursor: pointer;
    transition: var(--transition);
    font-size: 13px;
}
.map-search-btn:hover { background: var(--accent); color: white; }
.map-render { z-index: 1; }
.custom-map-marker { background: none !important; border: none !important; }

/* Map autocomplete suggestions */
.map-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    max-height: 180px;
    overflow-y: auto;
    z-index: 1100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.map-suggestion-item {
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.map-suggestion-item:last-child { border-bottom: none; }
.map-suggestion-item:hover {
    background: rgba(233, 30, 140, 0.08);
    color: var(--text-white);
}
.map-suggestion-item i {
    color: var(--accent);
    margin-top: 2px;
    font-size: 10px;
    flex-shrink: 0;
}

/* Tip section */
.tip-section {
    margin-bottom: 20px;
}
.tip-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}
.tip-section h4 i {
    color: #ff6b9d;
    margin-right: 6px;
}
/* Tip type toggle */
.tip-type-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.tip-type-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.tip-type-btn i { margin-right: 4px; }
.tip-type-btn.active {
    border-color: #ff6b9d;
    background: rgba(255, 107, 157, 0.1);
    color: #ff6b9d;
}
.tip-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.tip-btn {
    flex: 1;
    padding: 10px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.tip-btn:hover {
    border-color: var(--primary-light);
    background: rgba(123, 45, 142, 0.08);
}
.tip-btn.active {
    border-color: #ff6b9d;
    background: rgba(255, 107, 157, 0.12);
    color: #ff6b9d;
    box-shadow: 0 0 12px rgba(255, 107, 157, 0.15);
}
.tip-btn-custom {
    font-size: 11px;
}
.tip-btn-custom i { margin-right: 3px; font-size: 10px; }
.tip-custom-input {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--bg-surface);
}
.tip-currency {
    padding: 10px 10px 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-soft);
}
.tip-custom-input input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    padding: 10px 8px;
    outline: none;
    width: 0;
}
.tip-custom-input input::placeholder { color: var(--text-light); }
.tip-custom-apply {
    padding: 10px 16px;
    border: none;
    background: var(--gradient-primary);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.tip-custom-apply:hover { opacity: 0.9; }
.payment-line-tip i { color: #ff6b9d; }

.payment-line-subtotal {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 10px;
}

.payment-line-delivery .delivery-fee-info {
    font-size: 10px;
    color: var(--accent);
    font-weight: 400;
    margin-left: 6px;
}
.payment-line-delivery #payment-delivery {
    font-weight: 600;
    transition: all 0.3s ease;
}

.payment-line-total {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 4px;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-white);
}

.payment-methods h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 16px;
}

.btn-pay-yappy {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #00c896, #00e096);
    color: #0d0d1a;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
}

.btn-pay-yappy:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 224, 150, 0.4);
}

.btn-pay-yappy:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pay-btn-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pay-icon-yappy {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.15);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.pay-icon-yappy i {
    font-size: 18px;
}

.pay-label {
    font-size: 15px;
}

.yappy-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    color: var(--text-light);
    font-size: 14px;
}

.spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #00e096;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.yappy-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 10px;
    color: #ff6b7a;
    font-size: 13px;
    margin-top: 8px;
}

.payment-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.payment-divider::before,
.payment-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

.btn-pay-cash {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    background: transparent;
    color: var(--text-white);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
}

.btn-pay-cash:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
}

.btn-pay-cash .pay-btn-content {
    gap: 10px;
}

.btn-pay-cash i.fa-money-bill-wave {
    color: #00e096;
    font-size: 18px;
}

.payment-secure {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 18px;
}

.payment-secure i {
    color: #00e096;
    margin-right: 4px;
}

/* ========================================
   YAPPY MODAL INTEGRATION
   ======================================== */

/* Yappy button container */
#yappy-btn-container {
    margin: 0;
}

.btn-yappy-custom {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, #1cb2f5 0%, #1a90e4 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: opacity 0.2s;
}
.btn-yappy-custom:hover { opacity: 0.9; }
.btn-yappy-custom:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-yappy-custom .spinner-sm {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Make the Yappy button match XAZAI design */
#yappy-btn-container btn-yappy .yappy-button {
    border-radius: 14px !important;
    width: 100% !important;
    min-height: 52px !important;
    font-size: 16px !important;
}

/* When Yappy payment modal is open, hide XAZAI content and let Yappy take over */
#payment-modal.yappy-active .payment-modal-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide all children inside payment-modal-content EXCEPT payment-methods */
#payment-modal.yappy-active .payment-modal-content > *:not(.payment-methods) {
    display: none !important;
}

/* Inside payment-methods, hide everything except yappy container */
#payment-modal.yappy-active .payment-methods > *:not(#yappy-btn-container) {
    display: none !important;
}

/* Hide the payment-methods heading and dividers */
#payment-modal.yappy-active .payment-methods {
    padding: 0 !important;
    margin: 0 !important;
}

#payment-modal.yappy-active {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center !important;
    justify-content: center !important;
}

/* Hide the original Yappy "Pagar con" button when payment is processing */
#payment-modal.yappy-active btn-yappy .yappy-button {
    display: none !important;
}

/* Center the Yappy dialog on screen */
#payment-modal.yappy-active #yappy-btn-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10001 !important;
}

/* Override Yappy dialog's position:fixed so it respects flex centering */
#payment-modal.yappy-active dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    max-width: 500px !important;
    width: 90vw !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    overflow: visible !important;
}

#payment-modal.yappy-active app-dialog {
    display: block !important;
}

/* Ensure Yappy's backdrop covers screen */
#payment-modal.yappy-active btn-yappy .yappy-backdrop {
    z-index: 10000 !important;
}

/* ========================================
   STORE STATUS INDICATOR
   ======================================== */
.store-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    white-space: nowrap;
}

.store-status.open {
    border-color: rgba(0, 224, 150, 0.3);
    background: rgba(0, 224, 150, 0.08);
}

.store-status.closed {
    border-color: rgba(255, 107, 107, 0.3);
    background: rgba(255, 107, 107, 0.08);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-light);
    flex-shrink: 0;
}

.store-status.open .status-dot {
    background: #00e096;
    box-shadow: 0 0 8px rgba(0, 224, 150, 0.6);
    animation: pulse-dot 2s ease-in-out infinite;
}

.store-status.closed .status-dot {
    background: #ff6b6b;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    color: var(--text-light);
    letter-spacing: 0.3px;
}

.store-status.open .status-text {
    color: #00e096;
}

.store-status.closed .status-text {
    color: #ff6b6b;
}

.store-status.alta-demanda {
    border-color: rgba(240, 173, 78, 0.3);
    background: rgba(240, 173, 78, 0.08);
}

.store-status.alta-demanda .status-dot {
    background: #f0ad4e;
    box-shadow: 0 0 8px rgba(240, 173, 78, 0.6);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.store-status.alta-demanda .status-text {
    color: #f0ad4e;
}

/* ========================================
   SCHEDULE ORDER MODAL
   ======================================== */
.schedule-modal-content {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 40px 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    position: relative;
    animation: scaleIn 0.3s ease;
    border: 1px solid var(--border);
}

.schedule-icon {
    font-size: 52px;
    color: var(--accent);
    margin-bottom: 16px;
}

.schedule-modal-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 8px;
}

.schedule-subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 28px;
    line-height: 1.5;
}

.schedule-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.schedule-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}

.schedule-slot:hover {
    border-color: var(--primary-light);
    background: rgba(123, 45, 142, 0.08);
}

.schedule-slot.selected {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.1);
    box-shadow: 0 0 15px rgba(233, 30, 140, 0.15);
}

.schedule-slot-icon {
    font-size: 20px;
    color: var(--accent);
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.schedule-slot-info {
    flex: 1;
}

.schedule-slot-day {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.schedule-slot-time {
    font-size: 11px;
    color: var(--text-light);
}

.schedule-slot-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    transition: var(--transition);
    flex-shrink: 0;
}

.schedule-slot.selected .schedule-slot-check {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.btn-schedule-confirm {
    width: 100%;
    padding: 14px;
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-schedule-confirm:disabled {
    background: var(--border);
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-schedule-confirm:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

.btn-schedule-cancel {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 10px;
}

.btn-schedule-cancel:hover {
    border-color: var(--accent);
    color: var(--text);
}

/* ========================================
   ADMIN SECRET LOGIN
   ======================================== */
.admin-secret-login {
    border-color: var(--accent) !important;
}
.admin-secret-login::before {
    background: var(--gradient-primary) !important;
    opacity: 0.7 !important;
}
.logo-img-nav {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ========================================
   APP-LIKE MOBILE BEHAVIOR
   ======================================== */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    max-width: 100vw;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Prevent iOS auto-zoom on input focus */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="date"],
    input[type="password"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .navbar { flex-wrap: wrap; padding: 10px 16px; }
    .nav-left { flex-shrink: 0; }
    .nav-right { flex-shrink: 0; gap: 8px; }
    .nav-center { flex-basis: 100%; order: 3; }
    .category-tabs {
        width: 100%;
        overflow-x: auto;
        padding: 4px;
        margin-top: 8px;
    
        scrollbar-width: none;
        touch-action: pan-x;
    }
    .category-tabs::-webkit-scrollbar { display: none; }
}

/* ========================================
   RRHH - Recursos Humanos
   ======================================== */
.rrhh-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.rrhh-tab-btn { padding: 10px 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-light); cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; transition: var(--transition); display: flex; align-items: center; gap: 8px; }
.rrhh-tab-btn:hover { background: rgba(123, 45, 142, 0.1); color: var(--text); }
.rrhh-tab-btn.active { background: var(--gradient-primary); border-color: var(--accent); color: white; font-weight: 600; }
.rrhh-tab-btn i { font-size: 14px; }
.rrhh-tab-content.hidden { display: none; }

/* Shared Form Card */
.rrhh-card-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 24px; margin-bottom: 24px; }
.rrhh-card-form h3 { font-size: 16px; font-weight: 700; color: var(--text-white); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.rrhh-card-form h3 i { color: var(--accent); }
.rrhh-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; }
.rrhh-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rrhh-field label { font-size: 12px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.rrhh-field input, .rrhh-field select { padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 13px; transition: var(--transition); }
.rrhh-field input:focus, .rrhh-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1); }
.rrhh-field input[type="color"] { height: 42px; padding: 4px; cursor: pointer; }
.rrhh-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a89bb5' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* Custom Select Dropdown (inline, no native picker) */
.custom-select-wrapper { position: relative; width: 100%; }
.custom-select-trigger { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 13px; cursor: pointer; transition: var(--transition); user-select: none; min-height: 42px; }
.custom-select-trigger:hover { border-color: var(--accent); }
.custom-select-trigger.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.custom-select-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-text.placeholder { color: var(--text-light); }
.custom-select-arrow { font-size: 11px; color: var(--text-light); transition: transform 0.2s ease; margin-left: 8px; }
.custom-select-trigger.open .custom-select-arrow { transform: rotate(180deg); }
.custom-select-options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--accent); border-top: none; border-radius: 0 0 var(--radius-xs) var(--radius-xs); max-height: 200px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.custom-select-options.open { display: block; }
.custom-select-option { padding: 10px 14px; font-size: 13px; color: var(--text); cursor: pointer; transition: background 0.15s ease; display: flex; align-items: center; gap: 10px; }
.custom-select-option:hover { background: rgba(233, 30, 140, 0.1); }
.custom-select-option.selected { background: rgba(233, 30, 140, 0.15); color: var(--accent); font-weight: 600; }
.custom-select-option .role-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Permissions Grid */
.rrhh-permissions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.rrhh-perm-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xs); cursor: pointer; transition: var(--transition); font-size: 12px; color: var(--text-light); }
.rrhh-perm-item:hover { border-color: var(--accent); }
.rrhh-perm-item.active { border-color: var(--accent); background: rgba(233, 30, 140, 0.1); color: var(--accent); }
.rrhh-perm-item i { font-size: 13px; width: 16px; text-align: center; }
.rrhh-perm-item input[type="checkbox"] { display: none; }

/* Save Button */
.rrhh-save-btn { margin-top: 8px; width: 100%; padding: 14px; background: var(--gradient-primary); color: white; border: none; border-radius: var(--radius-sm); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px; }
.rrhh-save-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4); }
.rrhh-save-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Roles Grid */
.rrhh-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.rrhh-role-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; transition: var(--transition); position: relative; border-left: 4px solid var(--role-color, var(--accent)); }
.rrhh-role-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); }
.rrhh-role-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rrhh-role-name { font-size: 15px; font-weight: 700; color: var(--text-white); }
.rrhh-role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; color: white; }
.rrhh-role-perms { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.rrhh-role-perm-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--text-light); }
.rrhh-role-actions { display: flex; gap: 8px; }
.rrhh-role-actions button { padding: 6px 12px; border: 1px solid var(--border); background: transparent; border-radius: 6px; font-family: 'Poppins', sans-serif; font-size: 11px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 4px; }
.rrhh-btn-edit { color: var(--accent); }
.rrhh-btn-edit:hover { background: rgba(233, 30, 140, 0.1); border-color: var(--accent); }
.rrhh-btn-delete { color: #ff6b6b; }
.rrhh-btn-delete:hover { background: rgba(255, 107, 107, 0.1); border-color: #ff6b6b; }

/* Collaborators Grid */
.rrhh-collab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; }
.rrhh-collab-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: var(--transition); }
.rrhh-collab-card:hover { border-color: rgba(233, 30, 140, 0.3); }
.rrhh-collab-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-light); flex-shrink: 0; overflow: hidden; border: 2px solid var(--border); }
.rrhh-collab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rrhh-collab-info { flex: 1; min-width: 0; }
.rrhh-collab-name { font-size: 14px; font-weight: 600; color: var(--text-white); }
.rrhh-collab-detail { font-size: 11px; color: var(--text-light); }
.rrhh-collab-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.rrhh-bio-btn { padding: 6px 12px; background: var(--gradient-primary); color: white; border: none; border-radius: 6px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.rrhh-bio-btn:hover { opacity: 0.85; transform: scale(1.02); }
.rrhh-bio-btn.registered { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }

/* Pendientes (Yellow) */
.rrhh-pendientes { background: rgba(240, 173, 78, 0.08); border: 1px dashed rgba(240, 173, 78, 0.4); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 24px; }
.rrhh-pendientes-title { font-size: 15px; font-weight: 700; color: #f0ad4e; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.rrhh-pendientes-title i { font-size: 16px; }
.rrhh-sub-title { font-size: 16px; font-weight: 600; color: var(--text-white); margin: 20px 0 12px; display: flex; align-items: center; gap: 8px; }
.rrhh-sub-title i { color: var(--accent); font-size: 14px; }

/* RRHH inline attendance styles removed — unused (standalone att-* used instead) */

/* Today's Log Entries */
.rrhh-log-entry { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.rrhh-log-entry:last-child { border-bottom: none; }
.rrhh-log-type { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.rrhh-log-type.entrada { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.rrhh-log-type.salida { background: rgba(255, 71, 87, 0.15); color: #ff4757; }
.rrhh-log-info { flex: 1; }
.rrhh-log-name { font-size: 13px; font-weight: 600; color: var(--text); }
.rrhh-log-time { font-size: 11px; color: var(--text-light); }
.rrhh-empty { text-align: center; color: var(--text-light); padding: 24px; font-size: 13px; font-style: italic; }

/* Camera Modal */
.rrhh-camera-content { background: var(--bg-card); border-radius: var(--radius); padding: 28px; max-width: 480px; width: 90%; text-align: center; position: relative; animation: scaleIn 0.3s ease; border: 1px solid var(--border); }
.rrhh-camera-content h2 { font-size: 20px; font-weight: 700; color: var(--text-white); margin-bottom: 4px; }
.rrhh-camera-subtitle { font-size: 13px; color: var(--text-light); margin-bottom: 16px; }
.rrhh-camera-viewport { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: #000; margin-bottom: 16px; }
.rrhh-camera-viewport video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.rrhh-face-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; height: 230px; border: 2px dashed rgba(233, 30, 140, 0.5); border-radius: 50%; pointer-events: none; }
.rrhh-countdown { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10; }
.rrhh-countdown span { font-size: 120px; font-weight: 800; color: white; text-shadow: 0 0 40px rgba(233, 30, 140, 0.8); animation: countdownPulse 1s ease-in-out; }
@keyframes countdownPulse { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.rrhh-scan-line { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #00e096, transparent); box-shadow: 0 0 15px rgba(0, 224, 150, 0.6); z-index: 5; animation: scanDown 2s ease-in-out; }
@keyframes scanDown { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }
.rrhh-scan-result { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 15; animation: fadeIn 0.3s ease; }
.rrhh-scan-result i { font-size: 60px; color: #5cb85c; }
.rrhh-scan-result span { font-size: 18px; font-weight: 700; color: white; }
.rrhh-capture-btn { padding: 14px 40px; background: var(--gradient-primary); color: white; border: none; border-radius: 30px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; }
.rrhh-capture-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4); }
.rrhh-capture-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Confirmation Overlay */
.rrhh-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rrhh-confirm-modal { background: var(--bg-card); border-radius: var(--radius); padding: 48px 40px; text-align: center; max-width: 400px; width: 100%; animation: scaleIn 0.3s ease; border: 1px solid var(--border); }
.rrhh-checkmark { width: 80px; height: 80px; margin-bottom: 20px; }
.rrhh-checkmark-circle { stroke: #5cb85c; stroke-width: 2; stroke-dasharray: 166; stroke-dashoffset: 166; animation: rrhhStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.rrhh-checkmark-check { stroke: #5cb85c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: rrhhStroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards; }
@keyframes rrhhStroke { to { stroke-dashoffset: 0; } }
.rrhh-confirm-modal h2 { font-size: 24px; font-weight: 700; color: var(--text-white); margin-bottom: 8px; }
.rrhh-confirm-role { margin-bottom: 16px; }
.rrhh-confirm-type { font-size: 18px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rrhh-confirm-type.entrada { color: #5cb85c; }
.rrhh-confirm-type.salida { color: #ff4757; }
.rrhh-confirm-time { font-size: 36px; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; }
.rrhh-confirm-date { font-size: 13px; color: var(--text-light); margin-bottom: 24px; }

/* Reports Stats */
.rrhh-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.rrhh-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; overflow: hidden; }
.rrhh-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.rrhh-stat-icon.green { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.rrhh-stat-icon.red { background: rgba(255, 71, 87, 0.15); color: #ff4757; }
.rrhh-stat-icon.accent { background: rgba(233, 30, 140, 0.15); color: #e91e8c; }
.rrhh-stat-icon.blue { background: rgba(91, 192, 222, 0.15); color: #5bc0de; }
.rrhh-stat-info { display: flex; flex-direction: column-reverse; align-items: center; width: 100%; min-width: 0; }
.rrhh-stat-info span { font-size: 10px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rrhh-stat-value { font-size: 22px; font-weight: 700; color: var(--text-white); margin-bottom: 2px; }

/* Report Controls */
.rrhh-report-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.rrhh-report-range { display: flex; gap: 4px; }
.rrhh-range-btn { padding: 8px 16px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-light); border-radius: 20px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--transition); }
.rrhh-range-btn.active { background: var(--gradient-primary); color: white; border-color: var(--accent); }
.rrhh-report-custom { display: flex; align-items: center; gap: 8px; }
.rrhh-report-custom input { padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 12px; }
.rrhh-apply-btn { padding: 8px 14px; background: var(--gradient-primary); color: white; border: none; border-radius: var(--radius-xs); cursor: pointer; transition: var(--transition); }

/* Report Table */
.rrhh-report-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; overflow-x: auto; }
.rrhh-report-table-wrap h3 { font-size: 15px; font-weight: 700; color: var(--text-white); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.rrhh-report-table-wrap h3 i { color: var(--accent); }
.rrhh-table { width: 100%; border-collapse: collapse; }
.rrhh-table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.rrhh-table td { padding: 10px 14px; font-size: 13px; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.rrhh-table tr:hover td { background: rgba(123, 45, 142, 0.05); }
.rrhh-table .type-entrada { color: #5cb85c; font-weight: 600; }
.rrhh-table .type-salida { color: #ff4757; font-weight: 600; }
.rrhh-table-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }

/* --- Turnos (Shifts) --- */
.turnos-list { display: flex; flex-direction: column; gap: 16px; }
.turnos-collab-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.turnos-collab-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.turnos-collab-name { font-weight: 600; font-size: 14px; color: var(--text); }
.turnos-grid { overflow-x: auto; }
.turnos-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; min-width: 560px; }
.turnos-day-label { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.turnos-grid-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; min-width: 560px; }
.turnos-day-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 8px; transition: background 0.2s; }
.turnos-day-active { background: rgba(0, 224, 150, 0.08); border: 1px solid rgba(0, 224, 150, 0.25); }
.turnos-day-off { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); opacity: 0.6; }
.turnos-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.turnos-switch input { opacity: 0; width: 0; height: 0; }
.turnos-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 20px; transition: 0.3s; }
.turnos-switch-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
.turnos-switch input:checked + .turnos-switch-slider { background: #00e096; }
.turnos-switch input:checked + .turnos-switch-slider::before { transform: translateX(16px); }
.turnos-time-group { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.turnos-time-group select { width: 100%; padding: 3px 2px; font-size: 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.turnos-save-btn { margin-top: 12px; width: auto; align-self: flex-end; font-size: 12px; padding: 8px 16px; }

/* --- Puntualidad (Punctuality) --- */
.punct-summary-table { margin-top: 8px; }
.punct-summary-table th { font-size: 10px; }
.punct-summary-table td { font-size: 12px; }
.punct-collab-row { cursor: pointer; transition: background 0.2s; }
.punct-collab-row:hover td { background: rgba(123, 45, 142, 0.08); }
.punct-expanded td { background: rgba(123, 45, 142, 0.06); }
.punct-on-time { color: #00e096 !important; font-weight: 600; }
.punct-late { color: #ffa500 !important; font-weight: 600; }
.punct-absent { color: #ff4757 !important; font-weight: 600; }
.punct-bar-wrap { display: flex; align-items: center; gap: 6px; }
.punct-bar { height: 6px; border-radius: 3px; min-width: 4px; transition: width 0.3s; }
.punct-bar-wrap span { font-size: 12px; font-weight: 600; }
.punct-detail-row td { padding: 0 !important; }
.punct-detail-grid { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px 12px; background: rgba(0, 0, 0, 0.15); }
.punct-detail-item { display: grid; grid-template-columns: 80px 90px 60px 80px 50px; gap: 8px; padding: 4px 8px; border-radius: 4px; font-size: 11px; align-items: center; }
.punct-detail-item.punct-on-time { background: rgba(0, 224, 150, 0.06); }
.punct-detail-item.punct-late { background: rgba(255, 165, 0, 0.08); }
.punct-detail-item.punct-absent { background: rgba(255, 71, 87, 0.08); }
.punct-detail-date { font-weight: 600; color: var(--text); }
.punct-detail-shift { color: var(--text-light); }
.punct-detail-actual { font-weight: 600; }
.punct-detail-status { font-weight: 700; font-size: 10px; text-transform: uppercase; }
.punct-detail-hours { color: var(--text-light); text-align: right; }

/* RRHH Responsive */
@media (max-width: 900px) {
    .rrhh-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .rrhh-form-grid { grid-template-columns: 1fr; }
    .rrhh-collab-grid, .rrhh-roles-grid { grid-template-columns: 1fr; }
    .punct-detail-item { grid-template-columns: 1fr 1fr; gap: 4px; }
    .punct-summary-table { font-size: 10px; }
    .punct-summary-table th, .punct-summary-table td { padding: 6px 4px; }
}

/* ========================================
   ASISTENCIA STANDALONE
   ======================================== */
.att-standalone-container { max-width: 500px; margin: 0 auto; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 120px); justify-content: center; }
.att-clock-display { text-align: center; padding: 30px; margin-bottom: 30px; background: rgba(123, 45, 142, 0.08); border-radius: var(--radius-sm); border: 1px solid rgba(123, 45, 142, 0.2); width: 100%; }
.att-clock-time { font-size: 64px; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.att-clock-date { font-size: 15px; color: var(--text-light); margin-top: 6px; }
.att-type-selection { text-align: center; width: 100%; }
.att-type-selection h2 { font-size: 22px; font-weight: 700; color: var(--text-white); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.att-type-selection h2 i { color: var(--accent); }
.att-instruction { font-size: 14px; color: var(--text-light); margin-bottom: 20px; }
.att-type-btns { display: flex; gap: 12px; margin-bottom: 24px; }
.att-type-btn { flex: 1; padding: 18px; border: 2px solid var(--border); background: var(--bg-surface); color: var(--text-light); border-radius: var(--radius-sm); font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 10px; }
.att-type-btn.active[data-att-type="entrada"] { background: rgba(92, 184, 92, 0.15); border-color: #5cb85c; color: #5cb85c; }
.att-type-btn.active[data-att-type="salida"] { background: rgba(255, 71, 87, 0.15); border-color: #ff4757; color: #ff4757; }
.att-start-scan-btn { width: 100%; padding: 20px; background: var(--gradient-primary); color: white; border: none; border-radius: var(--radius-sm); font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 12px; }
.att-start-scan-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 30px rgba(233, 30, 140, 0.5); }

/* Scan Overlay */
.att-scan-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.att-scan-overlay.hidden { display: none; }
.att-scan-container { width: 100%; max-width: 500px; position: relative; padding: 0 16px; }
.att-scan-close { position: absolute; top: 8px; right: 24px; z-index: 20; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.2); color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.att-scan-close:hover { background: rgba(255,71,87,0.4); border-color: #ff4757; }
.att-scan-viewport { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: #111; }
.att-scan-viewport video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

/* Sci-fi Face Guide — 4 corners */
.att-face-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 260px; pointer-events: none; }
.att-face-corners::before, .att-face-corners::after, .att-face-guide::before, .att-face-guide::after { content: ''; position: absolute; width: 30px; height: 30px; }
.att-face-corners::before { top: 0; left: 0; border-top: 3px solid #00e096; border-left: 3px solid #00e096; border-top-left-radius: 8px; }
.att-face-corners::after { top: 0; right: 0; border-top: 3px solid #00e096; border-right: 3px solid #00e096; border-top-right-radius: 8px; }
.att-face-guide::before { bottom: 0; left: 0; border-bottom: 3px solid #00e096; border-left: 3px solid #00e096; border-bottom-left-radius: 8px; }
.att-face-guide::after { bottom: 0; right: 0; border-bottom: 3px solid #00e096; border-right: 3px solid #00e096; border-bottom-right-radius: 8px; }

/* Scan Animations */
.att-scan-line { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #00e096, #00ff88, #00e096, transparent); box-shadow: 0 0 20px rgba(0, 224, 150, 0.8), 0 0 60px rgba(0, 224, 150, 0.3); z-index: 5; animation: attScanDown 2.5s ease-in-out; }
.att-scan-line.hidden { display: none; }
@keyframes attScanDown { 0% { top: 15%; } 50% { top: 85%; } 100% { top: 15%; } }
.att-scan-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 280px; border: 2px solid rgba(0, 224, 150, 0.5); border-radius: 50%; z-index: 4; animation: attPulseRing 1.5s ease-in-out infinite; }
.att-scan-pulse.hidden { display: none; }
@keyframes attPulseRing { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } }

/* Scan Status & Result */
.att-scan-status { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; z-index: 10; }
.att-scan-status span { background: rgba(0, 0, 0, 0.65); padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; color: white; font-family: 'Poppins', sans-serif; }
.att-scan-result { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 15; animation: fadeIn 0.3s ease; }
.att-scan-result.hidden { display: none; }
.att-scan-result i.fa-check-circle { font-size: 64px; color: #00e096; filter: drop-shadow(0 0 20px rgba(0, 224, 150, 0.6)); }
.att-scan-result i.fa-times-circle { font-size: 64px; color: #ff4757; filter: drop-shadow(0 0 20px rgba(255, 71, 87, 0.6)); }
.att-scan-result span { font-size: 18px; font-weight: 700; color: white; font-family: 'Poppins', sans-serif; }

/* Scan Info Bar */
.att-scan-info { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; }
.att-scan-clock { font-size: 24px; font-weight: 700; color: white; font-variant-numeric: tabular-nums; font-family: 'Poppins', sans-serif; }
.att-scan-type { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; }
.att-scan-type.entrada { color: #5cb85c; }
.att-scan-type.salida { color: #ff4757; }

/* Asistencia Responsive */
@media (max-width: 768px) {
    .att-clock-time { font-size: 48px; }
    .att-type-btn { font-size: 16px; padding: 14px; }
    .att-start-scan-btn { font-size: 16px; padding: 16px; }
}

/* ============================================ */
/* COMPORTAMIENTO — Analytics Dashboard         */
/* ============================================ */

/* Date Controls */
.beh-date-controls { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.beh-range-btn { padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-light); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); font-family: 'Poppins', sans-serif; }
.beh-range-btn:hover { border-color: var(--accent); color: var(--accent); }
.beh-range-btn.active { background: var(--gradient-primary); color: white; border-color: transparent; }

/* KPI Grid */
.beh-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.beh-kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; overflow: hidden; }
.beh-kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.beh-kpi-icon.accent { background: rgba(233, 30, 140, 0.15); color: #e91e8c; }
.beh-kpi-icon.green { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.beh-kpi-icon.blue { background: rgba(91, 192, 222, 0.15); color: #5bc0de; }
.beh-kpi-icon.red { background: rgba(255, 71, 87, 0.15); color: #ff4757; }
.beh-kpi-info { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.beh-kpi-value { font-size: 22px; font-weight: 700; color: var(--text-white); }
.beh-kpi-label { font-size: 10px; text-transform: uppercase; color: var(--text-light); letter-spacing: 0.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Panels */
.beh-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.beh-panel h3 { font-size: 14px; font-weight: 600; color: var(--text-white); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.beh-panel h3 i { color: var(--accent); }
.beh-panel-sub { font-size: 12px; color: var(--text-light); margin: -8px 0 16px 0; }
.beh-panel-full { margin-bottom: 24px; }
.beh-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }

/* Heatmap */
.beh-heatmap { display: grid; grid-template-columns: 50px repeat(17, 1fr); gap: 2px; }
.beh-heat-label { font-size: 10px; color: var(--text-light); display: flex; align-items: center; justify-content: center; font-weight: 500; }
.beh-heat-label.beh-heat-header { font-size: 9px; }
.beh-heat-cell { aspect-ratio: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.8); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: default; position: relative; min-width: 0; }
.beh-heat-cell:hover { transform: scale(1.35); z-index: 2; box-shadow: 0 0 12px rgba(233, 30, 140, 0.5); }
.beh-heat-cell[data-count="0"] { background: rgba(255,255,255,0.03) !important; color: transparent; }
.beh-heatmap-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; justify-content: center; font-size: 11px; color: var(--text-light); }
.beh-legend-gradient { width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(to right, rgba(233,30,140,0.08), rgba(233,30,140,1)); }

/* Time Slots (Products by Time) */
.beh-time-slot { margin-bottom: 16px; }
.beh-time-slot:last-child { margin-bottom: 0; }
.beh-time-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-white); margin-bottom: 8px; }
.beh-time-header i { color: var(--accent); font-size: 14px; }
.beh-time-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--text-light); }
.beh-time-item .beh-item-rank { font-size: 11px; font-weight: 700; color: var(--accent); min-width: 18px; }
.beh-time-item .beh-item-emoji { font-size: 16px; }
.beh-time-item .beh-item-name { flex: 1; }
.beh-time-item .beh-item-count { font-weight: 600; color: var(--text-white); }

/* Payment Bars */
.beh-pay-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.beh-pay-row:last-child { border-bottom: none; }
.beh-pay-label { font-size: 13px; color: var(--text-light); min-width: 70px; font-weight: 500; }
.beh-pay-bar-bg { flex: 1; height: 10px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
.beh-pay-bar-fill { height: 100%; border-radius: 5px; transition: width 0.6s ease; }
.beh-pay-bar-fill.efectivo { background: #5cb85c; }
.beh-pay-bar-fill.yappy { background: #5bc0de; }
.beh-pay-bar-fill.tarjeta { background: #f0ad4e; }
.beh-pay-bar-fill.pedidosya { background: #ff3246; }
.beh-pay-bar-fill.ubereats { background: #06C167; }
.beh-pay-value { font-size: 13px; font-weight: 600; color: var(--text-white); min-width: 50px; text-align: right; }
.beh-pay-pct { font-size: 11px; color: var(--text-light); min-width: 40px; text-align: right; }

/* Device Bars */
.beh-device-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.beh-device-row:last-child { border-bottom: none; }
.beh-device-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.beh-device-icon.mobile { background: rgba(91, 192, 222, 0.15); color: #5bc0de; }
.beh-device-icon.desktop { background: rgba(233, 30, 140, 0.15); color: #e91e8c; }
.beh-device-icon.tablet { background: rgba(240, 173, 78, 0.15); color: #f0ad4e; }
.beh-device-info { flex: 1; }
.beh-device-name { font-size: 13px; font-weight: 600; color: var(--text-white); }
.beh-device-bar { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.beh-device-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.beh-device-pct { font-size: 16px; font-weight: 700; color: var(--text-white); min-width: 45px; text-align: right; }
.beh-device-note { font-size: 11px; color: var(--text-light); margin-top: 12px; font-style: italic; }

/* Customer Patterns */
.beh-cust-bar-container { margin-bottom: 16px; }
.beh-cust-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.beh-cust-bar-label span:first-child { color: var(--text-light); }
.beh-cust-bar-label span:last-child { color: var(--text-white); font-weight: 600; }
.beh-cust-bar { height: 12px; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; display: flex; }
.beh-cust-bar-new { background: #5bc0de; height: 100%; transition: width 0.6s ease; }
.beh-cust-bar-returning { background: #e91e8c; height: 100%; transition: width 0.6s ease; }
.beh-cust-legend { display: flex; gap: 16px; margin-bottom: 16px; font-size: 11px; color: var(--text-light); }
.beh-cust-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.beh-cust-legend .beh-leg-new::before { background: #5bc0de; }
.beh-cust-legend .beh-leg-returning::before { background: #e91e8c; }
.beh-cust-stat { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.beh-cust-stat:last-child { border-bottom: none; }
.beh-cust-rank { width: 24px; height: 24px; border-radius: 50%; background: rgba(233, 30, 140, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.beh-cust-name { flex: 1; color: var(--text-light); }
.beh-cust-count { font-weight: 700; color: var(--text-white); }

/* Empty State */
.beh-empty { text-align: center; padding: 40px 20px; color: var(--text-light); font-size: 14px; }
.beh-empty i { font-size: 32px; margin-bottom: 12px; display: block; opacity: 0.3; }

/* Comportamiento Responsive */
@media (max-width: 900px) {
    .beh-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .beh-grid-2col { grid-template-columns: 1fr; }
    .beh-panel-full { overflow-x: auto; }
    .beh-heatmap { min-width: 600px; }
}

@media (max-width: 768px) {
    .hero h1 { font-size: 28px; }
    .hero { padding: 40px 20px; }
    .menu-section, .build-bowl-section { padding: 20px 12px; padding-bottom: 120px; }
    .cart-sidebar { width: 100%; }

    .products-list { gap: 12px; }

    .card-h-main { flex-direction: row; min-height: 120px; }
    .card-h-image { width: 110px; min-width: 110px; }

    .expand-actions { flex-direction: column; align-items: center; }
    .quantity-selector { align-self: center; }
    .expand-total { align-items: center; margin-bottom: 10px; }
    .btn-add-expand { margin-left: 0; width: 100%; justify-content: center; }

    .toppings-grid-compact { grid-template-columns: repeat(2, 1fr); }
    .size-options { flex-direction: row; gap: 8px; }
    .size-btn { padding: 8px 6px; gap: 4px; }
    .size-btn span:nth-child(2) { font-size: 12px; }
    .size-price { font-size: 12px !important; }
    .size-icon { font-size: 14px; }

    .floating-checkout {
        left: 12px;
        right: 12px;
        bottom: 16px;
        transform: none;
        min-width: auto;
        border-radius: 18px;
        padding: 10px 14px 10px 22px;
    }

    .login-modal-content { margin: 16px; padding: 32px 24px; }
    .admin-panel { margin: 10px; }
    .section-header h2 { font-size: 24px; }
    .build-options { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .tab { padding: 8px 12px; font-size: 11px; }
    .store-status { padding: 4px 10px; font-size: 10px; }
    .status-text { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .payment-modal-content { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding: 28px 20px; }
    .schedule-modal-content { width: 95%; padding: 32px 20px; }
    .modal-overlay { padding: 0; align-items: flex-end; }

    /* Mobile: When Yappy is active */
    #payment-modal.yappy-active { align-items: center !important; padding: 0 !important; }
    #payment-modal.yappy-active .dialog-container {
        padding: 24px !important;
        width: 92vw !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 480px) {
    .navbar { padding: 8px 12px; flex-wrap: wrap; gap: 0; }
    .nav-left, .nav-right { gap: 6px; }
    .nav-right { gap: 6px; }
    .hero h1 { font-size: 24px; }
    .user-btn span { display: none; }
    .user-btn { padding: 6px 10px; }
    .logo-small .logo-text { font-size: 18px; }
    .logo-small .logo-sub { display: none; }
    .logo-img-nav { height: 48px; }

    .store-status { padding: 4px 10px; font-size: 10px; gap: 5px; }
    .status-dot { width: 7px; height: 7px; }
    .status-text { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .cart-btn { padding: 6px 10px; font-size: 18px; }

    .menu-section, .build-bowl-section { padding: 16px 10px; padding-bottom: 110px; }
    .products-list { gap: 10px; }

    .product-card-h { border-radius: 16px; }
    .card-h-main { min-height: 110px; }
    .card-h-image { width: 95px; min-width: 95px; }
    .card-h-image .card-emoji { font-size: 40px; }
    .card-h-image .card-img { border-radius: 16px 0 0 16px; }
    .card-h-body { padding: 12px 14px; }
    .card-tagline { font-size: 10px; margin-bottom: 1px; }
    .card-title { font-size: 15px; margin-bottom: 4px; }
    .card-description { font-size: 11px; -webkit-line-clamp: 2; margin-bottom: 8px; line-height: 1.4; }
    .card-price { font-size: 18px; }
    .card-h-bottom { gap: 8px; }
    .btn-card-add { padding: 7px 14px; font-size: 11px; border-radius: 10px; }
    .card-badge-sm { font-size: 8px; padding: 2px 7px; top: 6px; left: 6px; }

    .floating-checkout {
        left: 10px;
        right: 10px;
        bottom: 12px;
        border-radius: 16px;
        padding: 10px 12px 10px 18px;
        gap: 14px;
    }
    .floating-total { font-size: 18px; }
    .floating-items { font-size: 10px; }
    .floating-checkout-btn { padding: 10px 18px; font-size: 13px; border-radius: 12px; }

    .category-tabs { margin-top: 6px; gap: 2px; }
    .tab { padding: 7px 12px; font-size: 11px; border-radius: 10px; gap: 5px; }
    .tab i { font-size: 12px; }

    .expand-inner { padding: 18px 14px; }
    .topping-item-compact { padding: 7px 8px; font-size: 10px; }

    .cart-header { padding: 16px 18px; }
    .cart-items { padding: 12px 18px; }
    .cart-footer { padding: 16px 18px; }

    .build-step { padding: 18px 16px; border-radius: 16px; }
    .build-summary { padding: 20px 16px; border-radius: 16px; }

    .toast-container { bottom: 80px; right: 12px; left: 12px; }
    .toast { font-size: 12px; padding: 12px 16px; }

    .category-divider h3 { font-size: 17px; }
    .category-divider { padding: 20px 0 10px; }

    .promo-card-arma { border-radius: 16px; margin-top: 20px; }
    .promo-card-inner { padding: 18px 20px; gap: 14px; }
    .promo-emoji { font-size: 38px; }
    .promo-info h3 { font-size: 17px; }
    .promo-info p { font-size: 12px; }
}

@media (max-width: 360px) {
    .logo-img-nav { height: 40px; }
    .store-status { padding: 3px 8px; font-size: 9px; }
    .status-text { max-width: 70px; }
    .cart-btn { padding: 5px 8px; font-size: 16px; }
    .user-btn { padding: 5px 8px; }
    .user-btn i { font-size: 16px; }
    .card-h-image { width: 85px; min-width: 85px; }
    .card-title { font-size: 14px; }
    .card-price { font-size: 16px; }
    .btn-card-add { padding: 6px 12px; font-size: 10px; }
    .tab { padding: 6px 10px; font-size: 10px; }
}

/* ========================================
   REORDER SECTION - "Volver a comprar"
   ======================================== */
.reorder-section {
    margin-bottom: 28px;
    padding: 20px 16px;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.08), rgba(255, 107, 157, 0.04));
    border: 1px solid rgba(233, 30, 140, 0.2);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

.reorder-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), #ff6b9d, var(--accent));
}

.reorder-header {
    margin-bottom: 14px;
}

.reorder-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.reorder-header h3 i {
    color: var(--accent);
    font-size: 16px;
}

.reorder-header p {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
}

.reorder-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;

    scrollbar-width: none;
    padding-bottom: 8px;
}

.reorder-scroll::-webkit-scrollbar { display: none; }

.reorder-card {
    min-width: 140px;
    max-width: 140px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.reorder-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(233, 30, 140, 0.2);
    transform: translateY(-2px);
}

.reorder-card-img {
    width: 100%;
    height: 90px;
    background: linear-gradient(135deg, #1a0a2e, #2d1040);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reorder-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reorder-emoji {
    font-size: 36px;
}

.reorder-card-info {
    padding: 8px 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.reorder-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reorder-price {
    font-size: 11px;
    color: var(--accent-soft);
    font-weight: 600;
}

.reorder-add-btn {
    margin: 4px 10px 8px;
    padding: 6px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.reorder-add-btn:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

/* ========================================
   MIS PEDIDOS - Customer Order Tracking
   ======================================== */
.mis-pedidos-section {
    padding: 48px 36px;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 120px;
    overflow-x: hidden;
}

.mis-pedidos-section .section-header {
    margin-bottom: 28px;
}

.mis-pedidos-section .section-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mis-pedidos-section .section-header h2 i {
    color: var(--accent);
}

.mis-pedidos-section .section-header p {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
}

.mp-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white);
    margin: 24px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-subtitle i {
    color: var(--accent-soft);
    font-size: 14px;
}

.mp-empty {
    text-align: center;
    color: var(--text-light);
    padding: 32px 20px;
    font-size: 13px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
}

.mp-empty i {
    margin-right: 6px;
    color: var(--accent-soft);
}

/* Order Card */
.mp-order-card {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    border: 1px solid var(--border);
    margin-bottom: 14px;
    transition: var(--transition);
}

.mp-order-card.mp-active {
    border-color: rgba(168, 85, 199, 0.3);
    box-shadow: 0 2px 12px rgba(123, 45, 142, 0.1);
}

.mp-order-card.mp-cancelled {
    opacity: 0.6;
    border-color: rgba(255, 71, 87, 0.3);
}

.mp-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.mp-order-number {
    font-size: 15px;
    color: var(--accent-soft);
    font-weight: 700;
}

.mp-order-date {
    font-size: 11px;
    color: var(--text-light);
    margin-left: 10px;
}

.mp-order-items {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 10px;
    line-height: 1.6;
}

.mp-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.mp-order-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-white);
}

.mp-cancel-reason {
    margin-top: 10px;
    font-size: 12px;
    color: #ff4757;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 71, 87, 0.08);
    border-radius: var(--radius-xs);
}

/* Status Stepper */
.mp-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 14px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
}

.mp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    z-index: 1;
}

.mp-step-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--transition);
}

.mp-step.pending .mp-step-icon {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-light);
    border: 2px solid var(--border);
}

.mp-step.active .mp-step-icon {
    background: var(--gradient-primary);
    color: white;
    border: 2px solid var(--accent);
    box-shadow: 0 0 16px rgba(233, 30, 140, 0.5);
    animation: pulse-step 2s ease-in-out infinite;
}

.mp-step.completed .mp-step-icon {
    background: rgba(92, 184, 92, 0.15);
    color: #5cb85c;
    border: 2px solid #5cb85c;
}

@keyframes pulse-step {
    0%, 100% { box-shadow: 0 0 8px rgba(233, 30, 140, 0.3); }
    50% { box-shadow: 0 0 24px rgba(233, 30, 140, 0.7); }
}

.mp-step-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-light);
    white-space: nowrap;
}

.mp-step.active .mp-step-label {
    color: var(--accent);
    font-weight: 700;
}

.mp-step.completed .mp-step-label {
    color: #5cb85c;
    font-weight: 600;
}

.mp-step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 4px;
    margin-top: 19px;
    transition: background 0.4s ease;
}

.mp-step-line.completed {
    background: linear-gradient(90deg, #5cb85c, #7dd87d);
}

/* Tab styling for Mis Pedidos */
.tab-mis-pedidos:not(.hidden) {
    display: flex;
}

/* ========================================
   MIS PEDIDOS & REORDER RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .mis-pedidos-section { padding: 20px 14px; padding-bottom: 120px; }
    .mis-pedidos-section .section-header h2 { font-size: 19px; }
    .mp-step-icon { width: 32px; height: 32px; font-size: 12px; }
    .mp-step-label { font-size: 9px; }
    .mp-step-line { margin-top: 16px; }
    .mp-order-card { padding: 14px 16px; }
    .reorder-card { min-width: 130px; max-width: 130px; }
    .reorder-card-img { height: 80px; }
}

@media (max-width: 480px) {
    .mis-pedidos-section { padding: 16px 10px; padding-bottom: 110px; }
    .mp-stepper { padding: 10px 4px; }
    .mp-step-icon { width: 28px; height: 28px; font-size: 11px; }
    .mp-step-label { font-size: 8px; }
    .mp-step-line { margin-top: 14px; }
    .mp-order-number { font-size: 13px; }
    .reorder-card { min-width: 120px; max-width: 120px; }
    .reorder-card-img { height: 72px; }
    .reorder-emoji { font-size: 30px; }
    .reorder-name { font-size: 11px; }
}

/* ========================================
   STORE STATUS TOGGLE (Admin)
   ======================================== */
.store-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.store-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.store-toggle-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.store-toggle-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.store-toggle-btn.active[data-store-status="auto"] {
    background: rgba(150, 150, 150, 0.2);
    border-color: rgba(150, 150, 150, 0.4);
    color: #ccc;
}

.store-toggle-btn.active[data-store-status="abierto"] {
    background: rgba(0, 224, 150, 0.15);
    border-color: rgba(0, 224, 150, 0.4);
    color: #00e096;
}

.store-toggle-btn.active[data-store-status="cerrado"] {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

.store-toggle-btn.active[data-store-status="alta_demanda"] {
    background: rgba(240, 173, 78, 0.15);
    border-color: rgba(240, 173, 78, 0.4);
    color: #f0ad4e;
}

/* ========================================
   HOME ORDER TRACKER
   ======================================== */
.home-tracker {
    background: linear-gradient(135deg, var(--bg-card), rgba(233, 30, 140, 0.04));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.home-tracker::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: tracker-shimmer 3s ease-in-out infinite;
}

@keyframes tracker-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.home-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.home-tracker-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-tracker-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.home-tracker-order {
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
}

.home-tracker-time {
    font-size: 11px;
    color: var(--text-light);
}

.ht-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 4px;
}

.ht-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
}

.ht-step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.5s ease;
    position: relative;
}

.ht-step.completed .ht-step-icon {
    background: linear-gradient(135deg, #00e096, #00c9a7);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 224, 150, 0.3);
}

.ht-step.completed .ht-step-icon::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00e096;
    color: white;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
}

.ht-step.active .ht-step-icon {
    background: linear-gradient(135deg, var(--accent), #ff6b9d);
    color: white;
    animation: ht-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(233, 30, 140, 0.4);
}

.ht-step.pending .ht-step-icon {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-light);
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

@keyframes ht-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(233, 30, 140, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(233, 30, 140, 0.6);
    }
}

.ht-step-label {
    font-size: 10px;
    color: var(--text-light);
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}

.ht-step.active .ht-step-label {
    color: var(--accent);
    font-weight: 700;
}

.ht-step.completed .ht-step-label {
    color: #00e096;
}

.ht-line {
    flex: 1;
    height: 3px;
    margin: 0 6px;
    margin-top: 24px;
    border-radius: 2px;
    transition: background 0.5s ease;
    position: relative;
}

.ht-line.completed {
    background: linear-gradient(90deg, #00e096, #00c9a7);
    box-shadow: 0 0 6px rgba(0, 224, 150, 0.3);
}

.ht-line.active {
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.ht-line.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, var(--accent), #ff6b9d);
    border-radius: 2px;
    animation: ht-line-progress 1.5s ease-in-out infinite;
}

@keyframes ht-line-progress {
    0% { left: -40%; }
    100% { left: 100%; }
}

.ht-line.pending {
    background: rgba(255, 255, 255, 0.05);
}

.ht-message {
    text-align: center;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.ht-message i {
    margin-right: 6px;
    color: var(--accent);
}

.ht-items-summary {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 12px;
    text-align: center;
    opacity: 0.7;
}

/* ========================================
   RATING MODAL
   ======================================== */
.rating-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.rating-overlay.hidden {
    display: none;
}

.rating-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    max-width: 380px;
    width: 100%;
    animation: scaleIn 0.3s ease;
}

.rating-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #ffb700);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.rating-modal h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.rating-order-ref {
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 20px;
}

.rating-stars {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.rating-stars i {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-stars i.hovered {
    color: rgba(255, 215, 0, 0.5);
    transform: scale(1.1);
}

.rating-stars i.active {
    color: #ffd700;
    transform: scale(1.15);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

#rating-comment {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    resize: none;
    height: 80px;
    margin-bottom: 16px;
    transition: border-color 0.3s;
}

#rating-comment:focus {
    outline: none;
    border-color: var(--accent);
}

#rating-comment::placeholder {
    color: var(--text-light);
}

.btn-rating-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #ff6b9d);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-rating-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233, 30, 140, 0.3);
}

.btn-rating-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-rating-skip {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 13px;
    cursor: pointer;
    padding: 10px;
    margin-top: 4px;
    transition: color 0.2s;
}

.btn-rating-skip:hover {
    color: var(--text);
}

/* Rating display in order cards (read-only) */
.mp-rating-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding: 8px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 8px;
}

.mp-rating-display i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.12);
}

.mp-rating-display i.filled {
    color: #ffd700;
}

.mp-rate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin-top: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    background: rgba(255, 215, 0, 0.08);
    color: #ffd700;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mp-rate-btn:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
}

/* ========================================
   HIGH DEMAND WARNING
   ======================================== */
.high-demand-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(240, 173, 78, 0.1);
    border: 1px solid rgba(240, 173, 78, 0.25);
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
    color: #f0ad4e;
}

.high-demand-banner i {
    font-size: 18px;
    flex-shrink: 0;
}

/* ========================================
   RESPONSIVE: STORE TOGGLE + TRACKER + RATING
   ======================================== */
@media (max-width: 900px) {
    .store-toggle {
        gap: 6px;
        padding: 10px 12px;
    }
    .store-toggle-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .home-tracker {
        padding: 16px;
    }
    .ht-step-icon {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    .ht-step-label {
        font-size: 9px;
    }
    .ht-step.completed .ht-step-icon::after {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
    .store-toggle {
        gap: 4px;
        padding: 8px 10px;
    }
    .store-toggle-label {
        font-size: 10px;
        width: 100%;
        margin-bottom: 4px;
    }
    .store-toggle-btn {
        padding: 5px 8px;
        font-size: 10px;
    }
    .rating-modal {
        padding: 28px 20px;
    }
    .rating-stars i {
        font-size: 30px;
    }
}

/* ========================================
   MESAS / TABLE MANAGEMENT
   ======================================== */

/* Leyenda de estados */
.mesas-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 12px;
}
.mesa-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.mesa-legend-item i { font-size: 10px; }
.mesa-legend-item.libre { color: #5cb85c; }
.mesa-legend-item.ocupada { color: #ff4757; }
.mesa-legend-item.cuenta_pedida { color: #f0ad4e; }

/* Grid de tarjetas de mesa */
.mesas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.mesa-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 160px;
    justify-content: center;
}
.mesa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.mesa-card.status-libre { border-color: #5cb85c; }
.mesa-card.status-ocupada { border-color: #ff4757; }
.mesa-card.status-cuenta_pedida { border-color: #f0ad4e; }

.mesa-card-icon { font-size: 34px; }
.mesa-card.status-libre .mesa-card-icon { color: #5cb85c; }
.mesa-card.status-ocupada .mesa-card-icon { color: #ff4757; }
.mesa-card.status-cuenta_pedida .mesa-card-icon { color: #f0ad4e; }

.mesa-card-name { font-size: 16px; font-weight: 700; color: var(--text-white); }
.mesa-card-status {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mesa-card.status-libre .mesa-card-status { background: rgba(92,184,92,0.15); color: #5cb85c; }
.mesa-card.status-ocupada .mesa-card-status { background: rgba(255,71,87,0.15); color: #ff4757; }
.mesa-card.status-cuenta_pedida .mesa-card-status { background: rgba(240,173,78,0.15); color: #f0ad4e; }
.mesa-card-info { font-size: 12px; color: var(--text-light); }
.mesa-card-total { font-size: 18px; font-weight: 700; color: var(--accent); }

.mesas-actions-bar { display: flex; gap: 10px; padding: 4px 0 10px; }
.mesas-add-btn {
    padding: 10px 20px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Detalle de mesa */
.mesa-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mesa-back-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mesa-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.mesa-detail-header h3 { font-size: 20px; font-weight: 700; color: var(--text-white); }

.mesa-detail-status {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-libre { background: rgba(92,184,92,0.15); color: #5cb85c; }
.badge-ocupada { background: rgba(255,71,87,0.15); color: #ff4757; }
.badge-cuenta_pedida { background: rgba(240,173,78,0.15); color: #f0ad4e; }

.mesa-diner-count-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12px;
    color: var(--text-light);
}
.mesa-count-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--transition);
}
.mesa-count-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Tabs de comensales */
.mesa-diners {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.mesa-diner-tab {
    min-width: 130px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    flex-shrink: 0;
}
.mesa-diner-tab:hover { border-color: var(--primary-light); }
.mesa-diner-tab.active { border-color: var(--accent); background: rgba(233,30,140,0.08); }
.mesa-diner-tab-name { font-size: 13px; font-weight: 600; color: var(--text); }
.mesa-diner-tab-info { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.mesa-diner-tab-add {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 20px;
    min-width: 50px;
}
.mesa-diner-tab-add:hover { border-color: var(--accent); color: var(--accent); }

/* Layout de pedido tipo POS */
.mesa-order-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    margin-bottom: 20px;
}
.mesa-products-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mesa-diner-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mesa-diner-name-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.mesa-diner-name-edit i { color: var(--accent); font-size: 13px; flex-shrink: 0; }
.mesa-diner-name-edit input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}
.mesa-save-name-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(92,184,92,0.2);
    color: #5cb85c;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.mesa-diner-items {
    flex: 1;
    padding: 10px 14px;
    overflow-y: auto;
    max-height: 320px;
    min-height: 120px;
}
.mesa-diner-item-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
}
.mesa-diner-item-name { flex: 1; color: var(--text); }
.mesa-diner-item-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mesa-qty-btn {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mesa-remove-item-btn {
    border: none;
    background: none;
    color: #ff4757;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    opacity: 0.7;
}
.mesa-remove-item-btn:hover { opacity: 1; }
.mesa-diner-item-price { color: var(--accent); font-weight: 600; white-space: nowrap; }
.mesa-diner-totals {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
}

/* Sección de cuenta de mesa */
.mesa-bill-section {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.mesa-bill-section h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mesa-bill-section h4 i { color: var(--accent); }
.mesa-bill-diner-card {
    padding: 12px 14px;
    background: var(--bg-surface);
    border-radius: var(--radius-xs);
    margin-bottom: 8px;
}
.mesa-bill-diner-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 6px;
}
.mesa-bill-diner-items {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 8px;
}
.mesa-pay-diner-btn {
    padding: 7px 14px;
    background: rgba(92,184,92,0.15);
    border: 1px solid rgba(92,184,92,0.3);
    color: #5cb85c;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mesa-pay-diner-btn:hover { background: rgba(92,184,92,0.25); }
.mesa-bill-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-white);
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    margin-bottom: 14px;
}
.mesa-bill-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mesa-bill-btn {
    flex: 1;
    padding: 12px;
    background: var(--gradient-primary);
    border: none;
    color: white;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Barra de acciones de mesa */
.mesa-action-bar {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.mesa-action-btn {
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
}
.mesa-btn-open { background: #5cb85c; }
.mesa-btn-open:hover { background: #4cae4c; }
.mesa-btn-bill { background: #f0ad4e; }
.mesa-btn-bill:hover { background: #ec971f; }
.mesa-btn-close { background: var(--gradient-primary); }

/* Modal de pago de mesa */
#mesa-pay-modal { z-index: 1150; }
.mesa-pay-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.mesa-pay-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mesa-pay-content h3 i { color: var(--accent); }
.mesa-pay-summary {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border-radius: var(--radius-xs);
    font-size: 12px;
}
.mesa-pay-summary-items {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    margin-bottom: 8px;
    color: var(--text-light);
}
.mesa-pay-sub {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--text);
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.mesa-pay-tip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    flex-wrap: wrap;
}
.mesa-tip-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.mesa-tip-btn.active {
    border-color: #ff6b9d;
    background: rgba(255,107,157,0.12);
    color: #ff6b9d;
}
.mesa-pay-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: var(--text);
    margin: 14px 0;
}
.mesa-pay-total-row strong {
    font-size: 22px;
    color: var(--accent);
}
.mesa-method-btn {
    padding: 9px 14px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mesa-method-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--accent);
}

/* Responsive Mesas — tablet first */
@media (max-width: 1000px) {
    .mesa-order-layout {
        grid-template-columns: 1fr;
    }
    .mesa-diner-panel {
        order: -1;
    }
}
@media (max-width: 700px) {
    .mesas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mesa-detail-header { gap: 8px; }
    .mesa-action-btn { padding: 12px 16px; font-size: 12px; }
}

/* ── Inventory per-size toggles ── */
.inventory-size-toggles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 8px;
}
.inv-size-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
}
.toggle-switch.toggle-sm {
    transform: scale(0.75);
    transform-origin: right center;
}

/* Inventory dual prices */
.inventory-prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 8px;
}
.inv-price-tag {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}
.inv-price-tag.main {
    color: var(--accent);
    font-weight: 700;
}

/* Disabled size button in ordering */
.size-btn.disabled-size {
    opacity: 0.4;
    cursor: not-allowed;
    border-style: dashed;
    pointer-events: none;
}
.size-btn.disabled-size:hover {
    transform: none;
}
.size-agotado {
    font-size: 9px;
    color: #ff4757;
    font-weight: 700;
    display: block;
    width: 100%;          /* ocupa toda la fila del flex-wrap → queda debajo del texto */
    text-align: center;
    margin-top: 0;
    line-height: 1.2;
}

/* Void invoice button */
.fact-void-btn {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.fact-void-btn:hover { background: #c0392b; }
.fact-void-btn.disabled { opacity: 0.5; pointer-events: none; }

/* Voided invoice card */
.fact-card.voided {
    opacity: 0.55;
    position: relative;
}
.fact-card.voided::after {
    content: 'ANULADA';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 18px;
    font-weight: 900;
    color: #e74c3c;
    opacity: 0.35;
    pointer-events: none;
    letter-spacing: 4px;
}
.fact-voided-badge {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    letter-spacing: 1px;
}
.fact-void-reason-block {
    background: #fdf0ed;
    border-left: 3px solid #e74c3c;
    padding: 8px 12px;
    margin-top: 12px;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: #333;
}
.fact-void-reason-block strong { color: #e74c3c; }

/* Mesa Bowl Builder */
.mesa-bowl-builder {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
    grid-column: 1 / -1;
    color: var(--text);
}
.mesa-bowl-step h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mesa-bowl-step h4 small {
    font-weight: 400;
    color: var(--text-light);
    font-size: 11px;
}
.mesa-bowl-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.mesa-bowl-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mesa-bowl-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}
.mesa-bowl-opt:hover { border-color: var(--accent); }
.mesa-bowl-opt.selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.mesa-bowl-opt-emoji { font-size: 16px; }
.mesa-bowl-opt-name { font-weight: 600; }
.mesa-bowl-opt-price { color: var(--accent); font-size: 11px; font-weight: 600; }
.mesa-bowl-opt.selected .mesa-bowl-opt-price { color: rgba(255,255,255,0.85); }

.mesa-bowl-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}
.mesa-bowl-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 0;
    color: var(--text);
}
.mesa-bowl-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.mesa-bowl-add-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s;
}
.mesa-bowl-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mesa-bowl-add-btn:not(:disabled):hover { opacity: 0.9; }

/* ========================================
   MESA PAYMENT MODAL — Expanded
   ======================================== */
.mesa-pay-section {
    margin-bottom: 14px;
}
.mesa-pay-section-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 6px;
}
.mesa-pay-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.mesa-discount-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mesa-discount-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.mesa-discount-btn small {
    font-size: 9px;
    opacity: 0.7;
}
.mesa-discount-btn.active {
    border-color: #00e096;
    background: rgba(0, 224, 150, 0.12);
    color: #00e096;
}
.mesa-discount-custom {
    margin-top: 6px;
}
.mesa-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    max-width: 140px;
}
.mesa-input-wrap span {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-light);
}
.mesa-input-wrap input {
    background: none;
    border: none;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    width: 80px;
    outline: none;
}
.mesa-tip-type-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.mesa-tip-type-btn {
    padding: 5px 14px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.mesa-tip-type-btn.active {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.1);
    color: var(--accent);
}
.mesa-tip-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mesa-tip-pct-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.mesa-tip-pct-btn.active {
    border-color: #ff6b9d;
    background: rgba(255, 107, 157, 0.12);
    color: #ff6b9d;
}
.mesa-tip-custom {
    margin-top: 6px;
}
.mesa-pay-totals {
    padding: 10px 0;
    border-top: 1px solid var(--border);
    margin: 10px 0;
}
.mesa-pay-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-light);
    padding: 3px 0;
}
.mesa-pay-line-total {
    font-size: 16px;
    color: var(--text);
    font-weight: 700;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}
.mesa-pay-line-total strong {
    color: var(--accent);
    font-size: 20px;
}
.mesa-discount-savings {
    color: #00e096;
    font-weight: 700;
}
.mesa-cash-change {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border-radius: var(--radius-xs);
}
.mesa-cash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.mesa-cash-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}
.mesa-change-row {
    margin-bottom: 0;
}
.mesa-change-value {
    font-size: 18px;
    font-weight: 700;
    color: #00e096;
}
.mesa-payment-details {
    margin-top: 8px;
}
.mesa-ref-input {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    width: 180px;
    outline: none;
}
.mesa-ref-input:focus {
    border-color: var(--accent);
}

/* ========================================
   MENU ADMIN
   ======================================== */
.menu-admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 100%;
}
/* Filters wrapper with arrows */
.menu-filters-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    flex: 1;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}
.menu-filters-arrow {
    display: none; /* hidden by default on desktop */
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--accent);
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    transition: var(--transition);
    z-index: 2;
    flex-shrink: 0;
    padding: 0;
}
.menu-filters-arrow:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.menu-filters-arrow.hidden-arrow {
    opacity: 0.25;
    pointer-events: none;
}
.menu-admin-filters {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;

    scrollbar-width: none;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    min-width: 0;
    flex: 1;
    padding-left: 2px;
    padding-right: 2px;
}
.menu-admin-filters::-webkit-scrollbar { display: none; }
.menu-filter-btn {
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.menu-filter-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--accent);
}
.menu-add-btn {
    padding: 10px 20px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.menu-add-btn:hover { opacity: 0.9; }
.menu-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.menu-admin-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    transition: var(--transition);
    position: relative;
}
.menu-admin-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow);
}
.menu-admin-card-img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-admin-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-admin-card-emoji {
    font-size: 28px;
}
.menu-admin-card-body {
    flex: 1;
    min-width: 0;
}
.menu-admin-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-admin-card-cat {
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.menu-admin-card-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-top: 2px;
}
.menu-admin-edit-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.menu-admin-edit-btn:hover {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--accent);
}

/* Menu Form Modal */
.menu-form-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.menu-form-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    width: 100%;
    max-width: 640px;
    position: relative;
    margin: 20px 0;
}
.menu-form-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.menu-form-content h3 i { color: var(--accent); }
.menu-form-body {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
}
.menu-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.menu-form-full {
    grid-column: 1 / -1;
}
.menu-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-form-field label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.menu-form-field label .req { color: #e74c3c; }
.menu-form-field input,
.menu-form-field select,
.menu-form-field textarea {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.menu-form-field input:focus,
.menu-form-field select:focus,
.menu-form-field textarea:focus {
    border-color: var(--accent);
}
.menu-form-field textarea {
    resize: vertical;
    min-height: 60px;
}
.menu-form-toggle-field {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.menu-img-upload {
    width: 100%;
    height: 120px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}
.menu-img-upload:hover { border-color: var(--accent); }
.menu-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 6px;
    color: var(--text-light);
    font-size: 12px;
}
.menu-img-placeholder i { font-size: 24px; color: var(--accent); }
.menu-img-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
    min-height: 24px;
}
.menu-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(123, 45, 142, 0.15);
    border: 1px solid rgba(123, 45, 142, 0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-light);
}
.menu-tag-remove {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    line-height: 1;
}
.menu-tag-input-row {
    display: flex;
    gap: 6px;
}
.menu-tag-input-row input {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    outline: none;
}
.menu-tag-input-row input:focus {
    border-color: var(--accent);
}
.menu-tag-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.menu-tag-add-btn:hover {
    background: var(--gradient-primary);
    color: white;
}
.menu-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.menu-form-cancel {
    padding: 10px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-light);
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.menu-form-save {
    padding: 10px 20px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}
.menu-form-save:hover { opacity: 0.9; }
.menu-form-delete {
    padding: 10px 20px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    border-radius: var(--radius-xs);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.menu-form-delete:hover { background: rgba(231, 76, 60, 0.2); }

/* ========================================
   RESPONSIVE — Mesa Payment Modal
   ======================================== */
@media (max-width: 480px) {
    .mesa-pay-content {
        padding: 16px;
        max-width: 100%;
    }
    .mesa-discount-options,
    .mesa-tip-options {
        gap: 4px;
    }
    .mesa-discount-btn,
    .mesa-tip-btn,
    .mesa-tip-pct-btn {
        padding: 5px 8px;
        font-size: 11px;
    }
    .mesa-pay-line-total strong {
        font-size: 18px;
    }
    .mesa-ref-input {
        width: 140px;
    }
    .mesa-cash-row {
        flex-wrap: wrap;
    }
}

/* ========================================
   RESPONSIVE — Menu Admin
   ======================================== */
#admin-sec-menu {
    overflow-x: hidden;
}
@media (max-width: 900px) {
    .menu-filters-arrow {
        display: flex;
    }
    .menu-admin-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .menu-form-grid {
        grid-template-columns: 1fr;
    }
    .menu-form-content {
        max-width: 100%;
        padding: 16px;
        margin: 10px 0;
    }
    .menu-form-body {
        max-height: 68vh;
    }
}
@media (max-width: 600px) {
    .menu-admin-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .menu-filters-wrapper {
        width: 100%;
    }
    .menu-add-btn {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }
    .menu-filter-btn {
        padding: 6px 10px;
        font-size: 10px;
    }
    .menu-admin-grid {
        grid-template-columns: 1fr;
    }
    .menu-admin-card {
        padding: 8px 10px;
    }
    .menu-admin-card-img {
        width: 48px;
        height: 48px;
    }
    .menu-admin-card-title {
        font-size: 12px;
    }
    .menu-admin-card-price {
        font-size: 11px;
    }
    .menu-form-overlay {
        padding: 8px;
        align-items: flex-start;
    }
    .menu-form-content {
        padding: 14px;
        margin: 8px 0;
        border-radius: 12px;
    }
    .menu-form-content h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .menu-form-body {
        max-height: 62vh;
        padding-right: 2px;
    }
    .menu-form-field input,
    .menu-form-field select,
    .menu-form-field textarea {
        font-size: 14px;
        padding: 10px;
    }
    .menu-img-upload {
        height: 100px;
    }
    .menu-form-actions {
        flex-direction: column;
    }
    .menu-form-save, .menu-form-cancel, .menu-form-delete {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }
}
@media (max-width: 380px) {
    .menu-admin-card-img {
        width: 40px;
        height: 40px;
    }
    .menu-admin-card-title {
        font-size: 11px;
    }
    .menu-form-overlay {
        padding: 4px;
    }
    .menu-form-content {
        padding: 12px;
    }
}

/* ========================================
   USUARIOS / CUSTOMERS SECTION
   ======================================== */

/* Search */
.usr-search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.usr-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 14px;
}
.usr-search-wrap input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}
.usr-search-wrap input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.15);
}

/* Stats Row */
.usr-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.usr-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 12px;
    text-align: center;
    overflow: hidden;
}
.usr-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
}
.usr-stat-label {
    display: block;
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Sort Bar */
.usr-sort-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;

    padding-bottom: 4px;
}
.usr-sort-btn {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}
.usr-sort-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
}
.usr-sort-btn:hover:not(.active) {
    border-color: var(--primary-light);
    color: var(--text);
}

/* Customer Grid */
.usr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

/* Customer Card */
.usr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.usr-card:hover {
    border-color: rgba(233, 30, 140, 0.3);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.usr-card:active {
    transform: scale(0.98);
}
.usr-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    text-transform: uppercase;
}
.usr-card-info {
    flex: 1;
    min-width: 0;
}
.usr-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usr-card-phone {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 1px;
}
.usr-card-meta {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.usr-card-meta span {
    font-size: 10px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 3px;
}
.usr-card-meta i {
    font-size: 9px;
    color: var(--accent-soft);
}
.usr-card-arrow {
    color: var(--text-light);
    font-size: 12px;
    flex-shrink: 0;
}
.usr-source-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.usr-source-badge.online { background: rgba(0, 224, 150, 0.12); color: #00e096; }
.usr-source-badge.pos { background: rgba(233, 30, 140, 0.12); color: var(--accent); }
.usr-source-badge.both { background: rgba(168, 85, 247, 0.12); color: #a855f7; }

/* Empty State */
.usr-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
    grid-column: 1 / -1;
}
.usr-empty i {
    font-size: 48px;
    color: var(--border);
    margin-bottom: 12px;
    display: block;
}
.usr-empty p {
    font-size: 14px;
}

/* Detail View */
.usr-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-light);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: var(--transition);
}
.usr-back-btn:hover {
    border-color: var(--primary-light);
    color: var(--text);
}

/* Profile Header */
.usr-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.usr-profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    text-transform: uppercase;
}
.usr-profile-info {
    flex: 1;
    min-width: 0;
}
.usr-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
}
.usr-profile-phone {
    font-size: 13px;
    color: var(--accent-soft);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.usr-profile-address {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Detail Stats */
.usr-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.usr-d-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}
.usr-d-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    font-size: 14px;
}
.usr-d-stat-icon.orders { background: rgba(233, 30, 140, 0.12); color: var(--accent); }
.usr-d-stat-icon.spent { background: rgba(0, 224, 150, 0.12); color: #00e096; }
.usr-d-stat-icon.avg { background: rgba(91, 192, 222, 0.12); color: #5bc0de; }
.usr-d-stat-icon.first { background: rgba(240, 173, 78, 0.12); color: #f0ad4e; }
.usr-d-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-white);
}
.usr-d-stat-label {
    display: block;
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    margin-top: 2px;
}

/* History Header */
.usr-history-header {
    margin-bottom: 12px;
}
.usr-history-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 8px;
}
.usr-history-header h3 i {
    color: var(--accent);
}

/* Timeline */
.usr-timeline-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: var(--transition);
}
.usr-timeline-item:hover {
    border-color: rgba(233, 30, 140, 0.2);
}
.usr-tl-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.usr-tl-icon.online { background: rgba(0, 224, 150, 0.12); color: #00e096; }
.usr-tl-icon.pos { background: rgba(233, 30, 140, 0.12); color: var(--accent); }
.usr-tl-body {
    flex: 1;
    min-width: 0;
}
.usr-tl-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.usr-tl-id {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
}
.usr-tl-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
}
.usr-tl-date {
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 4px;
}
.usr-tl-items {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usr-tl-method {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-light);
    margin-left: 6px;
}
.usr-loading {
    text-align: center;
    padding: 30px;
    color: var(--text-light);
    font-size: 13px;
}
.usr-no-history {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-size: 13px;
}
.usr-no-history i {
    font-size: 36px;
    color: var(--border);
    display: block;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 900px) {
    .usr-grid {
        grid-template-columns: 1fr;
    }
    .usr-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .usr-stats-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .usr-stat-value {
        font-size: 18px;
    }
    .usr-stat-label {
        font-size: 9px;
    }
    .usr-profile {
        flex-direction: column;
        text-align: center;
    }
    .usr-profile-phone,
    .usr-profile-address {
        justify-content: center;
    }
    .usr-d-stat-value {
        font-size: 15px;
    }
}

/* ========================================
   ORDER TYPE SELECTION MODAL
   ======================================== */
.order-type-modal-content {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 32px 24px;
    max-width: 440px;
    width: 90%;
    position: relative;
    animation: scaleIn 0.3s ease;
    border: 1px solid var(--border);
}

.order-type-header {
    text-align: center;
    margin-bottom: 24px;
}

.order-type-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
}

.order-type-header h2 i {
    color: var(--accent);
    margin-right: 8px;
}

.order-type-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-type-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}

.order-type-btn:hover {
    border-color: var(--accent);
    background: rgba(233, 30, 140, 0.08);
    transform: translateX(4px);
}

.order-type-btn:active {
    transform: scale(0.98);
}

.order-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.order-type-icon i {
    font-size: 20px;
    color: #fff;
}

.order-type-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-type-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white);
}

.order-type-desc {
    font-size: 13px;
    color: var(--text-light);
}

.order-type-btn > .fa-chevron-right {
    color: var(--text-light);
    font-size: 14px;
    flex-shrink: 0;
}

/* ========================================
   ORDER TYPE BADGES (Admin + Customer)
   ======================================== */
.order-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.order-type-badge i {
    font-size: 10px;
}

.badge-delivery {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.badge-pickup {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.badge-dine_in {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

/* Admin order header with badge */
.order-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Customer order header with badge */
.mp-order-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ========================================
   SITE FOOTER
   ======================================== */
.site-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 32px 20px 64px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    text-align: center;
}

/* Hide footer when admin is visible */
#admin-dashboard:not(.hidden) ~ .site-footer {
    display: none;
}

.footer-inner {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-logo {
    height: 36px;
    width: auto;
    opacity: 0.9;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
}

.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-links a i {
    font-size: 13px;
    color: var(--accent);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,0.35));
}

.footer-sep {
    opacity: 0.4;
}

.footer-dev {
    color: var(--text-muted, rgba(255,255,255,0.35));
    text-decoration: none;
    transition: color 0.2s;
}

.footer-dev:hover {
    color: var(--accent);
}

.footer-dev strong {
    font-weight: 600;
}

/* ========================================
   HORARIOS ADMIN
   ======================================== */
.horarios-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1rem;
}

.horarios-info {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    color: #c4b5fd;
    display: flex;
    align-items: center;
    gap: 10px;
}

.horarios-info i {
    font-size: 1.1rem;
    color: #8b5cf6;
}

.horarios-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.horario-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    transition: all 0.2s;
}

.horario-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.horario-today {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.08);
}

.horario-closed {
    opacity: 0.6;
}

.horario-day {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    font-weight: 600;
    font-size: 0.95rem;
}

.horario-day i {
    color: #8b5cf6;
    width: 20px;
    text-align: center;
}

.horario-badge-today {
    background: #8b5cf6;
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.horario-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.horario-status-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Toggle switch */
.horario-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.horario-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.horario-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    transition: 0.3s;
}

.horario-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.horario-switch input:checked + .horario-slider {
    background: #22c55e;
}

.horario-switch input:checked + .horario-slider::before {
    transform: translateX(20px);
}

.horario-times {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.horario-times-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.horario-time-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.horario-time-group label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.horario-time-group select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
}

.horario-time-group select:focus {
    border-color: #8b5cf6;
}

.horario-separator {
    color: rgba(255, 255, 255, 0.3);
    margin-top: 14px;
}

.horarios-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

.btn-horarios-save {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-horarios-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.btn-horarios-reset {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-horarios-reset:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Preview */
.horarios-preview {
    margin-top: 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
}

.horarios-preview h3 {
    font-size: 1rem;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

.horarios-preview h3 i {
    color: #8b5cf6;
}

.horarios-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.horario-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.horario-preview-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.preview-day {
    font-weight: 500;
}

.preview-hours {
    color: #22c55e;
    font-weight: 500;
}

.preview-closed .preview-hours {
    color: #ef4444;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .horario-row {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .horario-day {
        min-width: 110px;
    }

    .horario-times {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .horarios-actions {
        flex-direction: column;
    }

    .btn-horarios-save, .btn-horarios-reset {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════
   INTEGRACIONES — PedidosYa & Uber Eats
   ═══════════════════════════════════════════════ */

.integ-subtitle {
    color: #aaa;
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.integ-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.integ-card {
    background: #1e1e2e;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #333;
}

.integ-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
}

.integ-pedidosya .integ-card-header { background: linear-gradient(135deg, #ff0049 0%, #cc003b 100%); }
.integ-ubereats .integ-card-header { background: linear-gradient(135deg, #06C167 0%, #04a054 100%); }

.integ-card-header .integ-logo {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
}

.integ-card-header h3 {
    flex: 1;
    color: #fff;
    font-size: 1.1rem;
    margin: 0;
}

.integ-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    cursor: pointer;
}
.integ-toggle input { display: none; }
.integ-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 26px;
    transition: 0.3s;
}
.integ-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 3px;
    left: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.integ-toggle input:checked + .integ-toggle-slider { background: rgba(255,255,255,0.6); }
.integ-toggle input:checked + .integ-toggle-slider::before { transform: translateX(22px); }

.integ-card-body { padding: 20px; }

.integ-field {
    margin-bottom: 16px;
}
.integ-field label {
    display: block;
    color: #aaa;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.integ-field input {
    width: 100%;
    padding: 10px 14px;
    background: #151520;
    border: 1px solid #444;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.integ-field input:focus {
    border-color: #7b2d8e;
    outline: none;
}
.integ-field input[readonly] {
    color: #888;
    cursor: default;
}

.integ-url-row {
    display: flex;
    gap: 8px;
}
.integ-url-row input { flex: 1; }
.integ-copy-btn {
    background: #333;
    border: 1px solid #555;
    color: #ddd;
    border-radius: 8px;
    padding: 0 14px;
    cursor: pointer;
    transition: 0.2s;
}
.integ-copy-btn:hover { background: #444; }

.integ-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.integ-save-btn, .integ-test-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}
.integ-save-btn {
    background: #7b2d8e;
    color: #fff;
}
.integ-save-btn:hover { background: #9b3dae; }
.integ-test-btn {
    background: #333;
    color: #ddd;
    border: 1px solid #555;
}
.integ-test-btn:hover { background: #444; }

.integ-status {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #aaa;
    min-height: 20px;
}

/* Platform Badges on Order Cards */
.platform-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-pedidosya { background: #ff0049; color: #fff; }
.badge-ubereats { background: #06C167; color: #fff; }

/* Webhook Log Section */
.integ-log-section {
    background: #1e1e2e;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #333;
}
.integ-log-section h3 {
    color: #e0e0e0;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}
.integ-refresh-btn {
    background: #333;
    border: 1px solid #555;
    color: #ddd;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-bottom: 12px;
    transition: 0.2s;
}
.integ-refresh-btn:hover { background: #444; }

.integ-log-list { display: flex; flex-direction: column; gap: 4px; }

.integ-log-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #151520;
    border-radius: 8px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.integ-log-platform { font-size: 1rem; width: 24px; text-align: center; }
.integ-log-event { color: #e0e0e0; font-weight: 600; min-width: 90px; }
.integ-log-order { color: #7b2d8e; font-weight: 600; min-width: 50px; }
.integ-log-status { min-width: 80px; }
.integ-log-error { color: #dc3545; font-size: 0.75rem; flex: 1; }
.integ-log-time { color: #666; margin-left: auto; font-size: 0.75rem; white-space: nowrap; }

.integ-log-empty, .integ-log-loading { color: #666; text-align: center; padding: 20px; }

@media (max-width: 480px) {
    .integ-cards { grid-template-columns: 1fr; }
    .integ-log-entry { font-size: 0.75rem; gap: 8px; }
    .integ-actions { flex-direction: column; }
}

/* ========================================
   PIN Input & Biometric Auth Styles
   ======================================== */

/* PIN digits container */
.pin-input-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.pin-digit {
    width: 52px;
    height: 58px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    caret-color: var(--accent);
    transition: var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.pin-digit:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.2);
    background: var(--bg-card-hover);
}

.pin-digit.filled {
    border-color: var(--primary-light);
}

/* PIN shake animation on error */
@keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(8px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
    90% { transform: translateX(3px); }
}

.pin-shake .pin-digit {
    animation: pinShake 0.5s ease;
    border-color: #dc3545 !important;
}

/* PIN label */
.pin-label {
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 4px;
    text-align: center;
}

/* Biometric button */
.btn-biometric {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.btn-biometric:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary-light);
}

.btn-biometric:active {
    transform: scale(0.98);
}

.btn-biometric .bio-icon {
    font-size: 22px;
}

/* Admin login PIN section */
.admin-pin-section {
    margin-top: 16px;
}

.admin-pin-section .pin-label {
    margin-bottom: 8px;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--text-muted);
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* PIN error message */
.pin-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 8px;
    min-height: 20px;
    text-align: center;
}

/* Collaborator PIN section in customer login */
.collab-pin-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.collab-pin-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.collab-pin-section .pin-subtitle {
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 12px;
}

.pin-confirm-group {
    margin-top: 8px;
}

.collab-pin-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.btn-pin-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--gradient-primary);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-pin-submit:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-pin-submit:active {
    transform: translateY(0);
}

.btn-pin-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-pin-back {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-pin-back:hover {
    background: var(--bg-card-hover);
    color: var(--text);
}

/* RRHH PIN status badge */
.rrhh-pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.rrhh-pin-badge.active {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.rrhh-pin-badge.inactive {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Reset PIN button in RRHH cards */
.btn-reset-pin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-reset-pin:hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
    color: #dc3545;
}

/* Phone input in admin modal */
.admin-phone-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    text-align: center;
    letter-spacing: 1px;
    transition: var(--transition);
}

.admin-phone-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.15);
}

.admin-phone-input::placeholder {
    color: var(--text-muted);
    letter-spacing: 0;
}

/* Hide PIN section initially in admin modal */
#adminPinSection { display: none; }
#adminPinSection.visible { display: block; }

@media (max-width: 480px) {
    .pin-digit {
        width: 46px;
        height: 52px;
        font-size: 20px;
    }
    .pin-input-group {
        gap: 8px;
    }
}

/* ========================================
   MARKETING TAB STYLES
   ======================================== */
.mkt-campaigns-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.mkt-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr 0.8fr 1fr;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.mkt-utm-header {
    grid-template-columns: 2fr 1fr 0.8fr 1fr 1fr;
}
.mkt-campaign-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr 0.8fr 1fr;
    gap: 8px;
    padding: 12px 16px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    transition: background 0.15s;
}
.mkt-utm-header + .mkt-campaign-row,
.mkt-campaign-row:nth-child(n+3):not(.mkt-campaign-row:has(~ .mkt-campaign-row)) {
    grid-template-columns: 2fr 1fr 0.8fr 1fr 1fr;
}
/* Fix: UTM table rows inherit parent grid */
#mkt-utm-orders .mkt-campaign-row {
    grid-template-columns: 2fr 1fr 0.8fr 1fr 1fr;
}
.mkt-campaign-row:last-child {
    border-bottom: none;
}
.mkt-campaign-row:hover {
    background: rgba(255,255,255,0.03);
}
.mkt-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.mkt-actions {
    display: flex;
    gap: 6px;
}
.mkt-action-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}
.mkt-action-btn:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
}
.mkt-action-btn.mkt-del:hover {
    background: rgba(255,71,87,0.15);
    color: #ff4757;
    border-color: rgba(255,71,87,0.3);
}
.mkt-campaign-form,
.mkt-utm-generator {
    padding: 4px 0;
}
.utm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.utm-field.utm-full {
    grid-column: 1 / -1;
}
.utm-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.utm-field label i {
    margin-right: 4px;
    color: var(--accent);
    font-size: 10px;
}
.utm-field input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.utm-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,100,255,0.15);
}
.utm-field input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 12px;
}
.utm-generate-btn {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    font-family: inherit;
}
.utm-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(200,100,255,0.3);
}
.utm-generate-btn i {
    margin-right: 6px;
}
.utm-result {
    margin-top: 14px;
    padding: 14px;
    background: rgba(0,200,100,0.06);
    border: 1px solid rgba(0,200,100,0.2);
    border-radius: var(--radius-sm);
}
.utm-result label {
    display: block;
    font-size: 12px;
    color: #4ade80;
    font-weight: 600;
    margin-bottom: 8px;
}
.utm-result label i {
    margin-right: 4px;
}
.utm-output-row {
    display: flex;
    gap: 8px;
}
.utm-output-input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 12px;
    font-family: 'Courier New', monospace;
    box-sizing: border-box;
}
.utm-copy-btn {
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s;
    font-family: inherit;
}
.utm-copy-btn:hover {
    transform: translateY(-1px);
}
.utm-copy-btn i {
    margin-right: 4px;
}
@media (max-width: 600px) {
    .utm-form-grid {
        grid-template-columns: 1fr;
    }
}
.mkt-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.mkt-utm-result {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.mkt-utm-result label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Marketing responsive */
@media (max-width: 768px) {
    .mkt-table-header {
        display: none;
    }
    .mkt-campaign-row,
    #mkt-utm-orders .mkt-campaign-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px 12px;
    }
    .mkt-campaign-row > span:nth-child(n+4) {
        font-size: 12px;
    }
    .mkt-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* ── Meta Pixel Status Bar ── */
.mkt-pixel-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.mkt-pixel-status.active { border-color: rgba(0,224,150,0.3); }
.mkt-pixel-status.inactive { border-color: rgba(255,71,87,0.3); }
.mkt-pixel-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; background: rgba(24,119,242,0.15); color: #1877F2;
}
.mkt-pixel-info { flex: 1; }
.mkt-pixel-info strong { display: block; font-size: 14px; color: var(--text-white); }
.mkt-pixel-info span { font-size: 12px; color: var(--text-muted); }
.mkt-pixel-id { font-family: monospace; font-size: 12px; color: var(--text-muted); }
.mkt-pixel-badge {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.mkt-pixel-badge.on { background: rgba(0,224,150,0.15); color: #00e096; }
.mkt-pixel-badge.off { background: rgba(255,71,87,0.15); color: #ff4757; }

/* ── Loading ── */
.mkt-loading {
    color: var(--text-muted); text-align: center; padding: 20px;
}

/* ── Campaign Form Wrap ── */
.mkt-campaign-form-wrap {
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.02);
}

/* ── Conversion Funnel ── */
.mkt-funnel { display: flex; flex-direction: column; gap: 10px; }
.mkt-funnel-step { display: flex; flex-direction: column; gap: 4px; }
.mkt-funnel-bar-wrap {
    height: 24px; background: rgba(255,255,255,0.05);
    border-radius: 6px; overflow: hidden;
}
.mkt-funnel-bar {
    height: 100%; border-radius: 6px;
    transition: width 0.5s ease;
}
.mkt-funnel-info {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text);
}
.mkt-funnel-label { flex: 1; }
.mkt-funnel-rate {
    font-size: 11px; padding: 2px 8px;
    border-radius: 10px; background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}

/* ── Retention ── */
.mkt-retention-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 16px;
}
.mkt-retention-stat { text-align: center; }
.mkt-retention-number {
    font-size: 28px; font-weight: 700; line-height: 1;
}
.mkt-retention-label {
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px; margin-top: 4px;
}
.mkt-retention-metrics {
    display: flex; gap: 24px; padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm); font-size: 13px;
    margin-bottom: 12px;
}
.mkt-retention-metrics div { display: flex; align-items: center; gap: 6px; }
.mkt-retention-top { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mkt-retention-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mkt-retention-row:last-child { border-bottom: none; }

/* ── Revenue by Source ── */
.mkt-source-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0;
}

/* ── Daily Trend Chart ── */
.mkt-trend-chart {
    display: flex; align-items: flex-end; gap: 4px;
    height: 160px; padding: 8px 0;
}
.mkt-trend-bar-col {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; height: 100%; justify-content: flex-end;
}
.mkt-trend-count {
    font-size: 10px; color: var(--text-muted);
    margin-bottom: 4px; min-height: 14px;
}
.mkt-trend-bar {
    width: 100%; max-width: 28px; border-radius: 4px 4px 0 0;
    background: var(--gradient-primary);
    transition: height 0.3s ease;
    min-height: 2px;
}
.mkt-trend-label {
    font-size: 9px; color: var(--text-muted);
    margin-top: 6px; white-space: nowrap;
}

/* ── Marketing Responsive ── */
@media (max-width: 768px) {
    .mkt-pixel-status { flex-wrap: wrap; }
    .mkt-pixel-id { display: none; }
    .mkt-retention-grid { grid-template-columns: repeat(2, 1fr); }
    .mkt-retention-metrics { flex-direction: column; gap: 8px; }
    .mkt-trend-chart { height: 120px; }
    .mkt-trend-label { font-size: 8px; }
}