/* ===============================
           ESTILOS COMPLETOS - OPTIMIZADOS PARA MÓVILES
           =============================== */
        :root {
            --rojo: #E63946;
            --rojo-oscuro: #c1121f;
            --azul: #1D3557;
            --azul-claro: #457B9D;
            --amarillo: #FFD700;
            --amarillo-oscuro: #FFC300;
            --blanco: #FFFFFF;
            --gris-claro: #F1FAEE;
            --gris: #E8E8E8;
            --oscuro: #2D3436;
            --cian: #00D2FF;
            --verde: #25D366;
            --naranja: #FF6B35;
            --morado: #8B5CF6;
            --sombra: 0 10px 40px rgba(0, 0, 0, 0.2);
            --sombra-hover: 0 15px 50px rgba(0, 0, 0, 0.3);
            --borde-radius: 24px;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 50%, #0d0d35 100%);
            color: var(--oscuro);
            min-height: 100vh;
            overscroll-behavior: none;
        }
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--amarillo);
            border-radius: 50%;
            animation: float 6s infinite;
            opacity: .6;
        }
        @keyframes float {
            0%,
            100% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: .6;
            }
            50% {
                transform: translateY(50vh) scale(1);
                opacity: 1;
            }
            90% {
                opacity: .6;
            }
            100% {
                transform: translateY(0) scale(0);
                opacity: 0;
            }
        }
        .header {
            background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 5px 30px rgba(230, 57, 70, 0.3);
            flex-wrap: wrap;
            gap: 8px;
            min-height: 60px;
        }
        .logo-container {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            user-select: none;
            touch-action: manipulation;
        }
        .logo-icon {
            font-size: 1.8rem;
            animation: fly 2s infinite;
        }
        @keyframes fly {
            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-4px) rotate(-3deg);
            }
            75% {
                transform: translateY(4px) rotate(3deg);
            }
        }
        .logo-text {
            font-size: 1.4rem;
            font-weight: 900;
            color: var(--blanco);
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
        }
        .logo-text .super {
            color: var(--amarillo);
        }
        .nav-buttons {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .nav-btn {
            padding: 6px 12px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s;
            border: 2px solid transparent;
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .5px;
            white-space: nowrap;
            touch-action: manipulation;
            min-height: 36px;
        }
        .nav-btn.cliente {
            background: var(--blanco);
            color: var(--rojo);
        }
        .nav-btn.cliente:hover,
        .nav-btn.cliente.active {
            background: var(--amarillo);
            color: var(--azul);
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
        }
        .nav-btn.socio {
            background: transparent;
            color: var(--blanco);
            border-color: var(--blanco);
        }
        .nav-btn.socio:hover,
        .nav-btn.socio.active {
            background: var(--blanco);
            color: var(--rojo);
            transform: translateY(-2px);
        }
        .sub-nav {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .sub-nav-btn {
            padding: 8px 14px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s;
            border: 2px solid var(--gris);
            font-size: .8rem;
            background: var(--blanco);
            color: #666;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            touch-action: manipulation;
            min-height: 40px;
        }
        .sub-nav-btn:hover {
            border-color: var(--rojo);
            color: var(--rojo);
        }
        .sub-nav-btn.active {
            background: var(--rojo);
            color: white;
            border-color: var(--rojo);
        }
        .sub-nav-btn.map-btn {
            background: var(--azul);
            color: white;
            border-color: var(--azul);
        }
        .sub-nav-btn.map-btn.active {
            background: var(--amarillo);
            color: var(--azul);
            border-color: var(--amarillo);
        }
        .main-container {
            max-width: 950px;
            margin: 12px auto;
            padding: 0 12px 90px;
            position: relative;
            z-index: 1;
        }
        .card {
            background: var(--blanco);
            border-radius: var(--borde-radius);
            padding: 18px;
            margin-bottom: 16px;
            box-shadow: var(--sombra);
            border: 3px solid transparent;
            transition: all .2s;
            position: relative;
            overflow: hidden;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: var(--sombra-hover);
        }
        .card.destacada {
            border-color: var(--amarillo);
        }
        .card.destacada::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--rojo), var(--amarillo), var(--rojo));
            animation: rainbow 3s linear infinite;
        }
        @keyframes rainbow {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 200% 50%;
            }
        }
        .card-title {
            font-size: 1.2rem;
            font-weight: 900;
            color: var(--azul);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .map-fullscreen {
            width: 100%;
            height: 400px;
            border-radius: 16px;
            overflow: hidden;
            border: 4px solid var(--amarillo);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        .location-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
            border-radius: 12px;
            margin-bottom: 12px;
            font-weight: 600;
            color: var(--azul);
            font-size: .85rem;
        }
        .location-dot {
            width: 10px;
            height: 10px;
            background: var(--verde);
            border-radius: 50%;
            animation: locPulse 1.5s infinite;
        }
        @keyframes locPulse {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
            }
        }
        .category-filters {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--gris);
        }
        .cat-filter {
            padding: 6px 14px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s;
            border: 2px solid var(--gris);
            font-size: .75rem;
            background: var(--blanco);
            color: #666;
            white-space: nowrap;
            touch-action: manipulation;
            min-height: 34px;
        }
        .cat-filter:hover {
            border-color: var(--rojo);
            color: var(--rojo);
        }
        .cat-filter.active {
            background: var(--rojo);
            color: white;
            border-color: var(--rojo);
        }
        .cat-filter.all {
            background: var(--azul);
            color: white;
            border-color: var(--azul);
        }
        .restaurant-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
        }
        .restaurant-card {
            background: linear-gradient(135deg, var(--gris-claro), var(--blanco));
            border-radius: 16px;
            padding: 16px;
            cursor: pointer;
            transition: all .2s;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
            touch-action: manipulation;
        }
        .restaurant-card:hover {
            border-color: var(--rojo);
            transform: scale(1.02);
            box-shadow: 0 10px 30px rgba(230, 57, 70, 0.2);
        }
        .restaurant-card.selected {
            border-color: var(--amarillo);
            background: linear-gradient(135deg, #FFF9E6, #FFF3CC);
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        }
        .restaurant-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            background: var(--verde);
            color: white;
            padding: 3px 8px;
            border-radius: 20px;
            font-size: .65rem;
            font-weight: 700;
            z-index: 1;
        }
        .restaurant-distance {
            position: absolute;
            top: 8px;
            left: 8px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 20px;
            font-size: .65rem;
            font-weight: 700;
            z-index: 1;
        }
        .restaurant-image {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 12px;
            margin-bottom: 8px;
        }
        .menu-image {
            width: 76px;
            height: 76px;
            border-radius: 18px;
            object-fit: cover;
            flex-shrink: 0;
            border: 2px solid var(--gris-claro);
            background: #fff;
        }
        .cart-item-image {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            object-fit: cover;
            margin-right: 8px;
            background: #fff;
        }
        .restaurant-name {
            font-weight: 900;
            font-size: 1rem;
            color: var(--azul);
            text-align: center;
            margin: 4px 0;
        }
        .restaurant-info {
            font-size: .75rem;
            color: #666;
            text-align: center;
            margin: 2px 0;
        }
        .restaurant-categories {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 6px 0;
        }
        .restaurant-cat-tag {
            background: var(--azul-claro);
            color: white;
            padding: 2px 8px;
            border-radius: 20px;
            font-size: .6rem;
            font-weight: 600;
        }
        .verification-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 20px;
            font-size: .65rem;
            font-weight: 700;
            margin-left: 4px;
        }
        .verification-badge.verified {
            background: #d4edda;
            color: #155724;
        }
        .menu-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: var(--gris-claro);
            border-radius: 14px;
            transition: all .2s;
            cursor: pointer;
            gap: 8px;
            margin-bottom: 4px;
            touch-action: manipulation;
        }
        .menu-item:hover {
            background: #FFF3CC;
            transform: translateX(4px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .menu-info {
            flex: 1;
            min-width: 0;
        }
        .menu-info h4 {
            font-weight: 700;
            color: var(--azul);
            font-size: .9rem;
            word-break: break-word;
        }
        .menu-info p {
            font-size: .75rem;
            color: #666;
            margin-top: 2px;
        }
        .menu-price {
            font-size: 1rem;
            font-weight: 900;
            color: var(--rojo);
            white-space: nowrap;
        }
        .add-btn {
            background: var(--rojo);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s;
            font-size: .7rem;
            white-space: nowrap;
            touch-action: manipulation;
            min-height: 34px;
        }
        .add-btn:hover {
            background: var(--rojo-oscuro);
            transform: scale(1.05);
        }
        .add-btn.added {
            background: var(--verde);
        }
        .delivery-fee-box {
            background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
            border: 2px solid var(--verde);
            border-radius: 12px;
            padding: 12px;
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .delivery-fee-box.cerca {
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-color: #4caf50;
        }
        .delivery-fee-box.lejos {
            background: linear-gradient(135deg, #fff3e0, #ffe0b2);
            border-color: var(--naranja);
        }
        .delivery-fee-icon {
            font-size: 1.6rem;
        }
        .delivery-fee-info {
            flex: 1;
        }
        .delivery-fee-info strong {
            color: var(--azul);
            font-size: .9rem;
        }
        .delivery-fee-info p {
            font-size: .75rem;
            color: #666;
            margin-top: 2px;
        }
        .delivery-fee-price {
            font-size: 1rem;
            font-weight: 900;
            color: var(--naranja);
            white-space: nowrap;
        }
        .delivery-fee-price.cerca {
            color: #2e7d32;
        }
        .payment-method-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }
        .payment-method-card {
            padding: 16px;
            border-radius: 14px;
            text-align: center;
            cursor: pointer;
            transition: all .2s;
            border: 3px solid var(--gris);
            background: #f8f8f8;
            touch-action: manipulation;
        }
        .payment-method-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .payment-method-card.selected {
            border-color: var(--verde);
            background: linear-gradient(135deg, #f0fff4, #e8f5e9);
            box-shadow: 0 0 25px rgba(37, 211, 102, 0.3);
        }
        .payment-method-card.transfer.selected {
            border-color: var(--azul);
            background: linear-gradient(135deg, #e8f0fe, #d4e4ff);
            box-shadow: 0 0 25px rgba(29, 53, 87, 0.3);
        }
        .payment-method-icon {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 6px;
        }
        .payment-method-title {
            font-weight: 900;
            font-size: 1rem;
            color: var(--azul);
            margin-bottom: 4px;
        }
        .payment-method-desc {
            font-size: .75rem;
            color: #666;
        }
        .transfer-info-box {
            background: #f0f7ff;
            border: 2px solid var(--azul-claro);
            border-radius: 12px;
            padding: 14px;
            margin: 10px 0;
            display: none;
        }
        .transfer-info-box.show {
            display: block;
        }
        .partner-type-selector {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }
        .partner-type-card {
            padding: 24px 16px;
            border-radius: 16px;
            text-align: center;
            cursor: pointer;
            transition: all .2s;
            border: 3px solid var(--gris);
            background: #f8f8f8;
            touch-action: manipulation;
        }
        .partner-type-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }
        .partner-type-card.selected {
            border-color: var(--amarillo);
            background: linear-gradient(135deg, #FFF9E6, #FFF3CC);
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        }
        .partner-type-card.restaurant-card-type.selected {
            border-color: var(--rojo);
            background: linear-gradient(135deg, #FFF0F0, #FFE8E8);
        }
        .partner-type-card.driver-card-type.selected {
            border-color: var(--naranja);
            background: linear-gradient(135deg, #FFF5F0, #FFEBE0);
        }
        .partner-type-card.colmado-card-type.selected {
            border-color: var(--morado);
            background: linear-gradient(135deg, #F3E8FF, #EDE9FE);
        }
        .partner-type-icon {
            font-size: 3.5rem;
            display: block;
            margin-bottom: 8px;
        }
        .partner-type-title {
            font-weight: 900;
            font-size: 1.1rem;
            color: var(--azul);
            margin-bottom: 4px;
        }
        .partner-type-desc {
            font-size: .8rem;
            color: #666;
        }
        .form-group {
            margin-bottom: 12px;
        }
        .form-label {
            display: block;
            font-weight: 600;
            color: var(--azul);
            margin-bottom: 4px;
            font-size: .8rem;
        }
        .form-input,
        .form-textarea,
        .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: .9rem;
            font-family: inherit;
            transition: all .2s;
            background: #f8f8f8;
            -webkit-appearance: none;
            appearance: none;
        }
        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--rojo);
            box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
            background: white;
        }
        .form-textarea {
            resize: vertical;
            min-height: 60px;
        }
        .upload-area {
            border: 3px dashed #ddd;
            border-radius: 12px;
            padding: 14px;
            text-align: center;
            cursor: pointer;
            transition: all .2s;
            background: #fafafa;
            position: relative;
            min-height: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            touch-action: manipulation;
        }
        .upload-area:hover {
            border-color: var(--naranja);
            background: #fff5f0;
        }
        .upload-area.has-file {
            border-color: var(--verde);
            background: #f0fff4;
        }
        .upload-icon {
            font-size: 1.8rem;
        }
        .upload-text {
            font-weight: 600;
            color: #666;
            font-size: .8rem;
        }
        .upload-preview {
            max-width: 100%;
            max-height: 150px;
            border-radius: 10px;
            margin-top: 4px;
            display: none;
        }
        .upload-preview.show {
            display: block;
        }
        .upload-remove {
            position: absolute;
            top: 6px;
            right: 6px;
            background: var(--rojo);
            color: white;
            border: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            font-weight: bold;
            font-size: .8rem;
            display: none;
            align-items: center;
            justify-content: center;
            touch-action: manipulation;
        }
        .upload-area.has-file .upload-remove {
            display: flex;
        }
        .file-input {
            display: none;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s;
            border: none;
            font-size: .85rem;
            text-align: center;
            width: 100%;
            text-transform: uppercase;
            letter-spacing: .5px;
            touch-action: manipulation;
            min-height: 44px;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
            color: white;
            box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(230, 57, 70, 0.5);
        }
        .btn-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .btn-whatsapp {
            background: linear-gradient(135deg, #25D366, #128C7E);
            color: white;
            box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
            font-size: 1rem;
        }
        .btn-gold {
            background: linear-gradient(135deg, var(--amarillo), var(--amarillo-oscuro));
            color: var(--azul);
            font-weight: 900;
        }
        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
        }
        .btn-gold:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .btn-orange {
            background: linear-gradient(135deg, var(--naranja), #e55d2b);
            color: white;
        }
        .btn-orange:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .btn-approve {
            background: var(--verde);
            color: white;
            padding: 4px 10px;
            font-size: .7rem;
            width: auto;
            min-height: 30px;
        }
        .btn-reject {
            background: var(--rojo);
            color: white;
            padding: 4px 10px;
            font-size: .7rem;
            width: auto;
            min-height: 30px;
        }
        .btn-outline {
            background: transparent;
            border: 2px solid var(--azul);
            color: var(--azul);
            padding: 4px 10px;
            font-size: .7rem;
            width: auto;
            min-height: 30px;
        }
        .btn-outline:hover {
            background: var(--azul);
            color: white;
        }
        .btn-secondary {
            background: #e0e0e0;
            color: #333;
            width: auto;
            display: inline-block;
            min-height: 36px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 8px;
            margin-bottom: 16px;
        }
        .stat-card {
            background: linear-gradient(135deg, var(--azul), var(--azul-claro));
            color: white;
            padding: 12px;
            border-radius: 12px;
            text-align: center;
        }
        .stat-value {
            font-size: 1.4rem;
            font-weight: 900;
        }
        .stat-label {
            font-size: .7rem;
            opacity: .9;
            margin-top: 2px;
        }
        .table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: .75rem;
            min-width: 600px;
        }
        th {
            background: var(--azul);
            color: white;
            padding: 8px;
            text-align: left;
        }
        td {
            padding: 6px 8px;
            border-bottom: 1px solid #ddd;
            vertical-align: middle;
        }
        tr:hover td {
            background: var(--gris-claro);
        }
        .doc-thumb {
            width: 36px;
            height: 28px;
            border-radius: 5px;
            object-fit: cover;
            cursor: pointer;
            border: 1px solid #ddd;
            transition: all .2s;
            touch-action: manipulation;
        }
        .doc-thumb:hover {
            transform: scale(1.1);
            border-color: var(--naranja);
        }
        .photo-thumb {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--naranja);
        }
        .image-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 5000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            touch-action: manipulation;
        }
        .image-modal img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 14px;
        }
        .image-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: var(--rojo);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            touch-action: manipulation;
        }
        .image-modal-close:hover {
            background: var(--rojo-oscuro);
            transform: rotate(90deg);
        }
        .fab {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 1.6rem;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(230, 57, 70, 0.5);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s;
            touch-action: manipulation;
        }
        .fab:hover {
            transform: scale(1.1);
        }
        .fab-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: var(--amarillo);
            color: var(--azul);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: .7rem;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .toast {
            position: fixed;
            top: 15px;
            right: 15px;
            padding: 12px 18px;
            border-radius: 12px;
            color: white;
            font-weight: 600;
            z-index: 3000;
            animation: slideIn .25s ease, slideOut .25s ease 2.7s;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            max-width: 280px;
            font-size: .9rem;
        }
        .toast-success {
            background: var(--verde);
        }
        .toast-error {
            background: var(--rojo);
        }
        .toast-warning {
            background: var(--amarillo);
            color: var(--azul);
        }
        .toast-info {
            background: var(--azul-claro);
        }
        .btn-warning {
            background: linear-gradient(135deg, var(--amarillo), var(--amarillo-oscuro));
            color: var(--azul);
            font-weight: 900;
        }
        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }
        .hidden {
            display: none !important;
        }
        .section-title {
            color: var(--azul);
            margin: 14px 0 8px;
            padding-bottom: 4px;
            border-bottom: 2px solid var(--gris);
            font-size: 1.1rem;
        }
        .requirements-list {
            list-style: none;
            padding: 0;
            margin: 8px 0;
        }
        .requirements-list li {
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: .8rem;
            color: #666;
        }
        .requirements-list li.checked {
            color: var(--verde);
            font-weight: 600;
        }
        .cart-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 10px;
            margin-bottom: 4px;
            flex-wrap: wrap;
        }
        .quantity-control {
            display: flex;
            align-items: center;
            gap: 4px;
            background: var(--gris);
            border-radius: 20px;
            padding: 2px;
        }
        .qty-btn {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: none;
            background: var(--blanco);
            color: var(--azul);
            font-weight: 900;
            cursor: pointer;
            font-size: .9rem;
            transition: all .15s;
            touch-action: manipulation;
        }
        .qty-btn:hover {
            background: var(--rojo);
            color: white;
        }
        .qty-num {
            font-weight: 900;
            min-width: 22px;
            text-align: center;
            font-size: .85rem;
        }
        .status-badge {
            padding: 2px 6px;
            border-radius: 20px;
            font-size: .65rem;
            font-weight: 700;
            text-transform: uppercase;
        }
        .cart-total {
            font-size: 1.2rem;
            font-weight: 900;
            color: var(--rojo);
            text-align: right;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 3px solid var(--rojo);
        }
        .cat-check-label {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: #f0f0f0;
            border-radius: 20px;
            cursor: pointer;
            font-size: .75rem;
            transition: all 0.2s;
            user-select: none;
            touch-action: manipulation;
        }
        .registration-map {
            width: 100%;
            height: 250px;
            border-radius: 12px;
            border: 2px solid var(--gris);
            margin-top: 6px;
        }
        .confirm-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: manipulation;
        }
        .confirm-modal-content {
            background: white;
            padding: 24px;
            border-radius: 16px;
            max-width: 380px;
            width: 90%;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }
        .confirm-modal-content h3 {
            color: var(--verde);
            margin-bottom: 8px;
            font-size: 1.1rem;
        }
        .confirm-modal-content button {
            margin-top: 12px;
            width: auto;
            padding: 8px 24px;
        }
        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                text-align: center;
                padding: 10px 12px;
            }
            .partner-type-selector {
                grid-template-columns: 1fr;
            }
            .restaurant-grid {
                grid-template-columns: 1fr 1fr;
            }
            .stats-grid {
                grid-template-columns: 1fr 1fr;
            }
            .map-fullscreen {
                height: 300px;
            }
            .logo-text {
                font-size: 1.2rem;
            }
            .nav-btn {
                font-size: .7rem;
                padding: 4px 10px;
            }
            .card {
                padding: 14px;
            }
        }
        @media (max-width: 480px) {
            .restaurant-grid {
                grid-template-columns: 1fr;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .map-fullscreen {
                height: 240px;
            }
            .card {
                padding: 12px;
            }
            .payment-method-selector {
                grid-template-columns: 1fr;
            }
        }
    

        /* FIX SUPERSWISH: evitar choque del botón de mensaje con Realizar/Enviar pedido */
        #supportChat {
            bottom: 92px !important;
            right: 18px !important;
        }
        #fabCart {
            bottom: 20px !important;
            right: 18px !important;
        }
        #deliveryForm {
            padding-bottom: 24px;
        }
        [data-action="sendOrder"] {
            position: relative;
            z-index: 5;
            margin-bottom: 18px;
            min-height: 54px;
        }
        body.checkout-mode #supportChat {
            display: none !important;
        }
        @media (max-width: 768px) {
            .main-container {
                padding-bottom: 130px !important;
            }
            #supportChat {
                width: 48px !important;
                height: 48px !important;
                font-size: 1.25rem !important;
                left: 16px !important;
                right: auto !important;
                bottom: 86px !important;
            }
            #fabCart {
                width: 54px !important;
                height: 54px !important;
                right: 16px !important;
                bottom: 18px !important;
            }
            body.checkout-mode #supportChat {
                display: none !important;
            }
        }



/* Resalta el pedido abierto desde una notificación push */
.ssw-push-highlight {
  outline: 4px solid #ff7a1a !important;
  box-shadow: 0 0 0 8px rgba(255,122,26,.18), 0 14px 34px rgba(7,17,31,.20) !important;
  border-radius: 14px !important;
  animation: sswPushPulse 1.1s ease-in-out 0s 3;
}
@keyframes sswPushPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }


/* SuperSwish splash Android: la web normal NO muestra splash.
   Solo se activa en Android instalado/app/WebView para no tapar la web. */
#superswishLaunchSplash{
  position:fixed; inset:0; z-index:9999999;
  background:#b40000 url('/superswish-splash-full.png') center center/cover no-repeat;
  opacity:1; visibility:visible; transition:opacity .35s ease, visibility .35s ease;
  pointer-events:none;
  display:none;
}
body.ssw-android-app #superswishLaunchSplash{display:none!important;}
#superswishLaunchSplash.hidden{opacity:0;visibility:hidden;}