/* ================================================================
           SUPERSWISH - CAPA VISUAL PREMIUM
           Modernización comercial: rojo vino vivo, brillo 3D, vectores,
           glassmorphism, microinteracciones y profundidad sin cambiar lógica.
           ================================================================ */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap');

        :root {
            --rojo: #C90D3B;
            --rojo-vivo: #F2174D;
            --rojo-vino: #8A012A;
            --rojo-oscuro: #590018;
            --azul: #071A3E;
            --azul-claro: #1177C8;
            --azul-electrico: #00A7FF;
            --amarillo: #FFE24A;
            --amarillo-oscuro: #FFB703;
            --oro: #FFD36A;
            --blanco: #FFFFFF;
            --gris-claro: #F7FAFF;
            --gris: #E8EDF7;
            --oscuro: #101828;
            --cian: #00E5FF;
            --verde: #20D86D;
            --naranja: #FF7A1A;
            --morado: #9B5CFF;
            --glass: rgba(255, 255, 255, 0.78);
            --glass-strong: rgba(255, 255, 255, 0.92);
            --linea-premium: rgba(255,255,255,.34);
            --sombra: 0 22px 70px rgba(4, 9, 28, 0.28), 0 4px 18px rgba(201, 13, 59, 0.10);
            --sombra-hover: 0 34px 95px rgba(4, 9, 28, 0.38), 0 12px 34px rgba(242, 23, 77, 0.23);
            --sombra-vino: 0 18px 50px rgba(138, 1, 42, .36);
            --borde-radius: 28px;
            --ring-premium: 0 0 0 1px rgba(255,255,255,.38), inset 0 1px 0 rgba(255,255,255,.45);
        }

        html {
            scroll-behavior: smooth;
            background: #060B1D;
        }

        body {
            font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
            color: var(--oscuro);
            background:
                radial-gradient(circle at 12% 10%, rgba(242, 23, 77, .50) 0, rgba(242, 23, 77, 0) 28%),
                radial-gradient(circle at 86% 18%, rgba(0, 167, 255, .34) 0, rgba(0, 167, 255, 0) 30%),
                radial-gradient(circle at 50% 90%, rgba(255, 226, 74, .18) 0, rgba(255, 226, 74, 0) 32%),
                linear-gradient(135deg, #050816 0%, #071A3E 42%, #2A0320 72%, #070A1A 100%);
            background-attachment: fixed;
            letter-spacing: -0.01em;
        }

        body::before,
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
        }

        body::before {
            z-index: 0;
            opacity: .45;
            background-image:
                url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1'%3E%3Cpath d='M20 20h30v30H20zM128 22l26 14-14 26-26-14zM30 124l36 18M116 116c24 0 42 18 42 42M78 64l20 20-20 20-20-20z'/%3E%3C/g%3E%3Cg fill='rgba(255,226,74,0.28)'%3E%3Ccircle cx='35' cy='76' r='2'/%3E%3Ccircle cx='138' cy='92' r='2'/%3E%3Ccircle cx='88' cy='150' r='2'/%3E%3C/g%3E%3C/svg%3E"),
                linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
                linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 240px 240px, 48px 48px, 48px 48px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.15));
        }

        body::after {
            z-index: 0;
            background:
                conic-gradient(from 220deg at 18% 18%, rgba(255,226,74,.18), rgba(242,23,77,.18), rgba(0,167,255,.18), rgba(255,226,74,.18)),
                radial-gradient(circle at 62% 34%, rgba(255,255,255,.10), transparent 22%);
            mix-blend-mode: screen;
            opacity: .62;
            filter: blur(54px);
        }

        ::selection {
            background: rgba(255, 226, 74, .82);
            color: #071A3E;
        }

        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }
        ::-webkit-scrollbar-track {
            background: #070A1A;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo-vino), var(--azul-electrico));
            border-radius: 999px;
            border: 3px solid #070A1A;
        }

        .particles {
            opacity: .82;
            filter: drop-shadow(0 0 10px rgba(255, 226, 74, .58));
        }
        .particle {
            width: 5px;
            height: 5px;
            background: radial-gradient(circle, #fff 0%, var(--amarillo) 35%, var(--rojo-vivo) 100%);
            box-shadow: 0 0 18px rgba(255, 226, 74, .75), 0 0 34px rgba(242, 23, 77, .34);
        }

        .header {
            background:
                linear-gradient(135deg, rgba(138, 1, 42, .96), rgba(242, 23, 77, .94) 45%, rgba(89, 0, 24, .96)),
                url("data:image/svg+xml,%3Csvg width='260' height='90' viewBox='0 0 260 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 74 C62 18 103 116 154 36 S238 38 252 8' fill='none' stroke='rgba(255,255,255,.22)' stroke-width='3'/%3E%3Cpath d='M0 36h46l10-12 12 24 10-12h74' fill='none' stroke='rgba(255,226,74,.36)' stroke-width='2'/%3E%3C/svg%3E");
            background-size: cover, 260px 90px;
            border-bottom: 1px solid rgba(255,255,255,.22);
            box-shadow: 0 18px 56px rgba(89, 0, 24, .48), inset 0 -1px 0 rgba(255,255,255,.2);
            backdrop-filter: blur(20px) saturate(1.35);
        }
        .header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
            transform: translateX(-120%);
            animation: headerShine 7s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes headerShine {
            0%, 42% { transform: translateX(-120%); }
            58%, 100% { transform: translateX(120%); }
        }

        .logo-container {
            position: relative;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            box-shadow: var(--ring-premium);
        }
        .logo-icon {
            filter: drop-shadow(0 8px 10px rgba(0,0,0,.28)) drop-shadow(0 0 14px rgba(255,226,74,.55));
            transform-origin: center;
        }
        .logo-text {
            color: #fff;
            text-shadow: 0 3px 0 rgba(0,0,0,.28), 0 0 22px rgba(255,255,255,.20);
            letter-spacing: -0.055em;
        }
        .logo-text .super {
            background: linear-gradient(180deg, #fff6ae, var(--amarillo) 48%, #ff9f1c 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: none;
            filter: drop-shadow(0 3px 4px rgba(0,0,0,.22));
        }

        .nav-buttons,
        .sub-nav,
        .category-filters {
            gap: 8px;
        }
        .nav-btn,
        .sub-nav-btn,
        .cat-filter,
        .btn,
        .add-btn,
        .qty-btn,
        .btn-approve,
        .btn-reject,
        .btn-outline,
        .btn-secondary {
            position: relative;
            overflow: hidden;
            transform: translateZ(0);
            box-shadow: 0 8px 22px rgba(4, 9, 28, .12), inset 0 1px 0 rgba(255,255,255,.38);
        }
        .nav-btn::after,
        .sub-nav-btn::after,
        .cat-filter::after,
        .btn::after,
        .add-btn::after {
            content: '';
            position: absolute;
            top: -55%;
            left: -85%;
            width: 50%;
            height: 210%;
            transform: rotate(25deg);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
            transition: left .55s ease;
            pointer-events: none;
        }
        .nav-btn:hover::after,
        .sub-nav-btn:hover::after,
        .cat-filter:hover::after,
        .btn:hover::after,
        .add-btn:hover::after {
            left: 130%;
        }

        .nav-btn.cliente,
        .nav-btn.socio.active,
        .btn-gold,
        .sub-nav-btn.map-btn.active {
            background: linear-gradient(135deg, #fff7b0, var(--amarillo), var(--amarillo-oscuro));
            color: #071A3E;
            border-color: rgba(255,255,255,.5);
            box-shadow: 0 12px 28px rgba(255, 183, 3, .34), inset 0 1px 0 rgba(255,255,255,.72);
        }
        .nav-btn.cliente:hover,
        .nav-btn.cliente.active {
            background: linear-gradient(135deg, #fffdf0, var(--amarillo), #ffad05);
            color: #071A3E;
            transform: translateY(-3px) scale(1.02);
        }
        .nav-btn.socio {
            border-color: rgba(255,255,255,.55);
            background: rgba(255,255,255,.10);
            color: white;
            backdrop-filter: blur(10px);
        }
        .nav-btn.socio:hover {
            background: rgba(255,255,255,.95);
            color: var(--rojo-vino);
            transform: translateY(-3px) scale(1.02);
        }

        .main-container {
            max-width: 1040px;
            padding-left: 14px;
            padding-right: 14px;
            z-index: 2;
        }

        .card {
            isolation: isolate;
            background:
                linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,250,255,.90)),
                radial-gradient(circle at 0 0, rgba(255,226,74,.18), transparent 28%),
                radial-gradient(circle at 100% 8%, rgba(0,167,255,.13), transparent 24%);
            border: 1px solid rgba(255,255,255,.76);
            box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.86);
            backdrop-filter: blur(18px) saturate(1.22);
        }
        .card::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background:
                linear-gradient(120deg, rgba(255,255,255,.45), transparent 26%, transparent 70%, rgba(255,226,74,.18)),
                radial-gradient(circle at 12% 0%, rgba(242,23,77,.12), transparent 22%);
            opacity: .8;
            pointer-events: none;
        }
        .card:hover {
            transform: translateY(-5px) scale(1.004);
            box-shadow: var(--sombra-hover);
        }
        .card.destacada {
            border: 1px solid rgba(255, 226, 74, .72);
            box-shadow: 0 24px 80px rgba(255, 183, 3, .18), var(--sombra), inset 0 1px 0 rgba(255,255,255,.86);
        }
        .card.destacada::before {
            height: 6px;
            background: linear-gradient(90deg, var(--rojo-vino), var(--rojo-vivo), var(--amarillo), var(--azul-electrico), var(--rojo-vino));
            background-size: 280% 100%;
            box-shadow: 0 0 22px rgba(255, 226, 74, .52);
        }

        .card-title,
        .section-title,
        h2,
        h3 {
            color: var(--azul);
            letter-spacing: -0.035em;
        }
        .card-title {
            font-size: clamp(1.15rem, 1.7vw, 1.45rem);
            text-shadow: 0 1px 0 rgba(255,255,255,.7);
        }
        .section-title {
            border-bottom: 0;
            position: relative;
            padding-bottom: 10px;
        }
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 92px;
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--rojo-vivo), var(--amarillo), var(--azul-electrico));
            box-shadow: 0 0 14px rgba(242,23,77,.22);
        }

        .sub-nav-btn,
        .cat-filter {
            background: rgba(255,255,255,.86);
            color: #344054;
            border: 1px solid rgba(7, 26, 62, .10);
            backdrop-filter: blur(12px);
        }
        .sub-nav-btn:hover,
        .cat-filter:hover {
            color: var(--rojo-vino);
            border-color: rgba(242,23,77,.48);
            transform: translateY(-2px);
            box-shadow: 0 13px 32px rgba(242,23,77,.16), inset 0 1px 0 rgba(255,255,255,.65);
        }
        .sub-nav-btn.active,
        .cat-filter.active {
            background: linear-gradient(135deg, var(--rojo-vivo), var(--rojo-vino));
            color: white;
            border-color: rgba(255,255,255,.42);
            box-shadow: var(--sombra-vino), inset 0 1px 0 rgba(255,255,255,.34);
        }
        .cat-filter.all,
        .sub-nav-btn.map-btn {
            background: linear-gradient(135deg, var(--azul), #0B3B78 72%, var(--azul-electrico));
            color: white;
            border-color: rgba(255,255,255,.32);
        }

        .location-bar,
        .delivery-fee-box,
        .transfer-info-box {
            background:
                linear-gradient(135deg, rgba(255,255,255,.86), rgba(236,255,245,.88)),
                radial-gradient(circle at 0 0, rgba(32,216,109,.20), transparent 38%);
            border: 1px solid rgba(32,216,109,.42);
            box-shadow: 0 16px 38px rgba(32,216,109,.13), inset 0 1px 0 rgba(255,255,255,.72);
        }
        .location-dot {
            background: radial-gradient(circle, #fff, var(--verde) 55%, #00a84d);
            box-shadow: 0 0 16px rgba(32,216,109,.7);
        }

        .map-fullscreen,
        .registration-map {
            border: 1px solid rgba(255,226,74,.70);
            box-shadow: 0 24px 72px rgba(4,9,28,.32), 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.42);
            position: relative;
            background: #071A3E;
        }
        .map-fullscreen::before,
        .registration-map::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            z-index: 401;
            box-shadow: inset 0 0 42px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.18);
        }

        .restaurant-grid {
            gap: 16px;
        }
        .restaurant-card,
        .partner-type-card,
        .payment-method-card,
        .menu-item,
        .cart-item {
            isolation: isolate;
            background:
                linear-gradient(145deg, rgba(255,255,255,.92), rgba(247,250,255,.88)),
                radial-gradient(circle at 18% 0%, rgba(255,226,74,.18), transparent 28%);
            border: 1px solid rgba(255,255,255,.80);
            box-shadow: 0 16px 40px rgba(4,9,28,.13), inset 0 1px 0 rgba(255,255,255,.82);
            backdrop-filter: blur(14px) saturate(1.16);
        }
        .restaurant-card::before,
        .partner-type-card::before,
        .payment-method-card::before,
        .menu-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255,255,255,.52), transparent 34%, rgba(255,226,74,.10));
            pointer-events: none;
            z-index: -1;
        }
        .restaurant-card::after,
        .partner-type-card::after,
        .payment-method-card::after {
            content: '';
            position: absolute;
            width: 130px;
            height: 130px;
            right: -68px;
            bottom: -70px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(242,23,77,.25), rgba(242,23,77,0) 66%);
            pointer-events: none;
        }
        .restaurant-card:hover,
        .partner-type-card:hover,
        .payment-method-card:hover {
            border-color: rgba(242,23,77,.55);
            transform: translateY(-7px) scale(1.018) rotateX(1deg);
            box-shadow: 0 24px 58px rgba(4,9,28,.22), 0 12px 35px rgba(242,23,77,.16), inset 0 1px 0 rgba(255,255,255,.86);
        }
        .restaurant-card.selected,
        .partner-type-card.selected,
        .payment-method-card.selected {
            border-color: rgba(255,226,74,.95);
            background:
                linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,246,198,.92)),
                radial-gradient(circle at 0% 0%, rgba(255,226,74,.30), transparent 34%);
            box-shadow: 0 24px 70px rgba(255,183,3,.25), 0 0 0 1px rgba(255,255,255,.62), inset 0 1px 0 rgba(255,255,255,.95);
        }

        .restaurant-image,
        .menu-image,
        .cart-item-image,
        .photo-thumb,
        .doc-thumb,
        .upload-preview {
            box-shadow: 0 14px 32px rgba(4,9,28,.18), 0 0 0 1px rgba(255,255,255,.75);
            filter: saturate(1.16) contrast(1.04);
        }
        .restaurant-image {
            height: 124px;
            border-radius: 18px;
        }
        .menu-image {
            width: 82px;
            height: 82px;
            border-radius: 20px;
        }
        .cart-item-image {
            width: 58px;
            height: 58px;
            border-radius: 16px;
        }
        .menu-image,
        .cart-item-image,
        .photo-thumb {
            border: 2px solid rgba(255,255,255,.85);
        }

        .restaurant-badge,
        .restaurant-distance,
        .verification-badge,
        .status-badge,
        .restaurant-cat-tag {
            border: 1px solid rgba(255,255,255,.35);
            box-shadow: 0 8px 18px rgba(4,9,28,.18), inset 0 1px 0 rgba(255,255,255,.36);
            backdrop-filter: blur(10px);
        }
        .restaurant-badge,
        .verification-badge.verified {
            background: linear-gradient(135deg, var(--verde), #08A84D);
            color: white;
        }
        .restaurant-distance {
            background: linear-gradient(135deg, rgba(7,26,62,.92), rgba(17,119,200,.84));
        }
        .restaurant-cat-tag {
            background: linear-gradient(135deg, var(--azul-claro), var(--morado));
        }

        .restaurant-name,
        .payment-method-title,
        .partner-type-title,
        .menu-info h4,
        .delivery-fee-info strong {
            color: var(--azul);
            letter-spacing: -0.03em;
        }
        .menu-price,
        .delivery-fee-price,
        .cart-total {
            background: linear-gradient(135deg, var(--rojo-vivo), var(--rojo-vino));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 1px 0 rgba(255,255,255,.7));
        }

        .menu-item {
            border-radius: 18px;
            margin-bottom: 8px;
        }
        .menu-item:hover {
            background:
                linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,246,198,.94)),
                radial-gradient(circle at 100% 0%, rgba(255,226,74,.24), transparent 32%);
            transform: translateX(6px) translateY(-2px);
            box-shadow: 0 18px 38px rgba(4,9,28,.16), 0 10px 22px rgba(255,183,3,.14);
        }

        .btn-primary,
        .add-btn,
        .btn-reject {
            background: linear-gradient(135deg, var(--rojo-vivo), var(--rojo), var(--rojo-vino));
            color: white;
            box-shadow: var(--sombra-vino), inset 0 1px 0 rgba(255,255,255,.34);
        }
        .btn-primary:hover,
        .add-btn:hover {
            background: linear-gradient(135deg, #ff2a60, var(--rojo-vivo), var(--rojo-vino));
            transform: translateY(-4px) scale(1.012);
            box-shadow: 0 24px 58px rgba(138,1,42,.42), 0 0 32px rgba(242,23,77,.24), inset 0 1px 0 rgba(255,255,255,.42);
        }
        .btn-whatsapp,
        .btn-approve,
        .add-btn.added {
            background: linear-gradient(135deg, #31F283, var(--verde), #087D3B);
            color: white;
            box-shadow: 0 18px 42px rgba(32,216,109,.30), inset 0 1px 0 rgba(255,255,255,.38);
        }
        .btn-orange {
            background: linear-gradient(135deg, #ff9f1c, var(--naranja), #e44800);
            box-shadow: 0 18px 42px rgba(255,122,26,.28), inset 0 1px 0 rgba(255,255,255,.35);
        }
        .btn-outline {
            border: 1px solid rgba(7,26,62,.28);
            background: rgba(255,255,255,.72);
            color: var(--azul);
        }
        .btn-outline:hover {
            background: linear-gradient(135deg, var(--azul), var(--azul-claro));
            color: white;
            transform: translateY(-2px);
        }
        .btn-secondary {
            background: linear-gradient(135deg, #f4f7fb, #dfe7f3);
            color: var(--azul);
        }
        .btn:disabled,
        .btn-primary:disabled,
        .btn-gold:disabled,
        .btn-orange:disabled {
            background: linear-gradient(135deg, #c9d1df, #aab4c4);
            color: rgba(255,255,255,.86);
            filter: grayscale(.15);
            box-shadow: none;
        }

        .form-input,
        .form-textarea,
        .form-select {
            background: rgba(255,255,255,.86);
            border: 1px solid rgba(7,26,62,.14);
            border-radius: 14px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 22px rgba(4,9,28,.06);
        }
        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus {
            border-color: rgba(242,23,77,.66);
            box-shadow: 0 0 0 4px rgba(242,23,77,.13), 0 14px 28px rgba(4,9,28,.08), inset 0 1px 0 rgba(255,255,255,.85);
            background: #fff;
        }
        .form-label {
            color: var(--azul);
            font-weight: 800;
        }

        .upload-area {
            background:
                linear-gradient(145deg, rgba(255,255,255,.86), rgba(247,250,255,.86)),
                radial-gradient(circle at 50% 0%, rgba(0,167,255,.12), transparent 36%);
            border: 2px dashed rgba(17,119,200,.36);
            box-shadow: 0 12px 28px rgba(4,9,28,.08), inset 0 1px 0 rgba(255,255,255,.76);
        }
        .upload-area:hover {
            border-color: rgba(242,23,77,.60);
            background:
                linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,246,250,.92)),
                radial-gradient(circle at 50% 0%, rgba(242,23,77,.14), transparent 36%);
            transform: translateY(-2px);
        }
        .upload-area.has-file {
            border-color: rgba(32,216,109,.66);
            background: linear-gradient(135deg, rgba(240,255,247,.92), rgba(255,255,255,.92));
        }

        .stats-grid {
            gap: 12px;
        }
        .stat-card {
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(145deg, rgba(7,26,62,.98), rgba(17,119,200,.94)),
                radial-gradient(circle at 0 0, rgba(255,226,74,.28), transparent 34%);
            border: 1px solid rgba(255,255,255,.20);
            box-shadow: 0 18px 45px rgba(7,26,62,.27), inset 0 1px 0 rgba(255,255,255,.26);
        }
        .stat-card::before {
            content: '';
            position: absolute;
            width: 110px;
            height: 110px;
            right: -48px;
            top: -55px;
            background: radial-gradient(circle, rgba(255,226,74,.38), transparent 66%);
        }
        .stat-value {
            background: linear-gradient(180deg, #fff, #fff5b0 56%, var(--amarillo));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 5px 12px rgba(0,0,0,.26));
        }

        .table-container {
            border-radius: 18px;
            box-shadow: 0 16px 42px rgba(4,9,28,.11), inset 0 1px 0 rgba(255,255,255,.62);
            border: 1px solid rgba(7,26,62,.10);
            background: rgba(255,255,255,.72);
        }
        table {
            border-collapse: separate;
            border-spacing: 0;
        }
        th {
            background: linear-gradient(135deg, var(--azul), #0D3A74);
            color: white;
            border-bottom: 1px solid rgba(255,255,255,.15);
        }
        td {
            background: rgba(255,255,255,.60);
            border-bottom: 1px solid rgba(7,26,62,.08);
        }
        tr:hover td {
            background: rgba(255,246,198,.72);
        }

        .fab {
            background:
                radial-gradient(circle at 30% 15%, rgba(255,255,255,.55), transparent 22%),
                linear-gradient(135deg, var(--rojo-vivo), var(--rojo-vino));
            box-shadow: 0 22px 52px rgba(138,1,42,.42), 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.35);
        }
        .fab:hover {
            transform: translateY(-4px) scale(1.10) rotate(-3deg);
            box-shadow: 0 28px 64px rgba(138,1,42,.52), 0 0 28px rgba(242,23,77,.34), inset 0 1px 0 rgba(255,255,255,.42);
        }
        #supportChat {
            background:
                radial-gradient(circle at 30% 15%, rgba(255,255,255,.55), transparent 22%),
                linear-gradient(135deg, #31F283, #128C7E) !important;
            box-shadow: 0 22px 52px rgba(18,140,126,.34), 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
        }
        .fab-badge {
            background: linear-gradient(135deg, #fff5b0, var(--amarillo), var(--amarillo-oscuro));
            box-shadow: 0 8px 18px rgba(255,183,3,.35), inset 0 1px 0 rgba(255,255,255,.72);
        }

        .toast {
            border: 1px solid rgba(255,255,255,.28);
            box-shadow: 0 22px 52px rgba(4,9,28,.28), inset 0 1px 0 rgba(255,255,255,.32);
            backdrop-filter: blur(18px) saturate(1.3);
        }
        .toast-success {
            background: linear-gradient(135deg, rgba(32,216,109,.94), rgba(8,125,59,.94));
        }
        .toast-error {
            background: linear-gradient(135deg, rgba(242,23,77,.96), rgba(89,0,24,.96));
        }
        .toast-warning {
            background: linear-gradient(135deg, rgba(255,226,74,.96), rgba(255,183,3,.96));
            color: #071A3E;
        }

        .confirm-modal {
            background:
                radial-gradient(circle at 50% 40%, rgba(242,23,77,.24), transparent 34%),
                rgba(4, 9, 28, .78);
            backdrop-filter: blur(12px);
        }
        .confirm-modal-content {
            background:
                linear-gradient(145deg, rgba(255,255,255,.95), rgba(247,250,255,.92)),
                radial-gradient(circle at 0 0, rgba(255,226,74,.22), transparent 34%);
            border: 1px solid rgba(255,255,255,.72);
            box-shadow: 0 34px 95px rgba(4,9,28,.42), inset 0 1px 0 rgba(255,255,255,.82);
        }

        #trackingWidget {
            background:
                linear-gradient(145deg, rgba(255,255,255,.94), rgba(247,250,255,.88)),
                radial-gradient(circle at 0 0, rgba(255,226,74,.26), transparent 34%) !important;
            border: 1px solid rgba(255,226,74,.78) !important;
            box-shadow: 0 24px 72px rgba(4,9,28,.30), 0 0 0 1px rgba(255,255,255,.32), inset 0 1px 0 rgba(255,255,255,.82) !important;
            backdrop-filter: blur(18px) saturate(1.22);
        }
        #widgetProgress {
            background: rgba(7,26,62,.10) !important;
        }
        #widgetProgressFill {
            background: linear-gradient(90deg, var(--rojo-vivo), var(--amarillo), var(--azul-electrico)) !important;
            box-shadow: 0 0 18px rgba(255,226,74,.45);
        }

        .payment-method-icon,
        .partner-type-icon,
        .delivery-fee-icon,
        .upload-icon {
            filter: drop-shadow(0 10px 16px rgba(4,9,28,.18));
        }

        .requirements-list li.checked {
            color: #087D3B;
        }
        .quantity-control {
            background: rgba(7,26,62,.08);
            box-shadow: inset 0 1px 2px rgba(4,9,28,.08);
        }
        .qty-btn {
            background: rgba(255,255,255,.08);
        }
        .qty-btn:hover {
            background: linear-gradient(135deg, var(--rojo-vivo), var(--rojo-vino));
            color: white;
            transform: scale(1.08);
        }
        .cart-total {
            border-top: 3px solid transparent;
            border-image: linear-gradient(90deg, var(--rojo-vivo), var(--amarillo), var(--azul-electrico)) 1;
        }

        @media (hover: hover) {
            .restaurant-card,
            .partner-type-card,
            .payment-method-card,
            .card,
            .menu-item,
            .btn,
            .fab {
                transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s cubic-bezier(.2,.8,.2,1), border-color .24s, background .24s, color .24s;
            }
        }

        @media (max-width: 768px) {
            .header {
                border-radius: 0 0 24px 24px;
            }
            .main-container {
                margin-top: 16px;
            }
            .restaurant-image {
                height: 108px;
            }
        }

        @media (max-width: 480px) {
            :root {
                --borde-radius: 22px;
            }
            .nav-buttons,
            .sub-nav,
            .category-filters {
                justify-content: center;
            }
            .restaurant-card:hover,
            .partner-type-card:hover,
            .payment-method-card:hover,
            .card:hover,
            .menu-item:hover {
                transform: translateY(-3px);
            }
            .fab {
                width: 58px;
                height: 58px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: .001ms !important;
            }
        }
    

        /* Ajustes de rendimiento y platos un poco más grandes sin romper móvil */
        img {
            max-width: 100%;
        }
        .restaurant-card,
        .menu-item,
        .payment-method-card,
        .partner-type-card {
            contain: layout paint;
        }
        @media (max-width: 480px) {
            .menu-image { width: 74px; height: 74px; border-radius: 18px; }
            .cart-item-image { width: 52px; height: 52px; border-radius: 15px; }
            .menu-item { align-items: flex-start; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
            .particles { display: none !important; }
        }