body {
            font-family: 'Inter', sans-serif;
        }

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

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

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

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

        /* Payment method radio styling */
        .payment-option {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .payment-option:hover {
            transform: translateY(-1px);
        }

        .payment-option.selected {
            border-color: #3b82f6;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.02));
        }

        .dark .payment-option.selected {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
        }

        /* Scrollbar */
        .order-scroll::-webkit-scrollbar {
            width: 4px;
        }

        .order-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .order-scroll::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 2px;
        }

        /* ============================================================
           Acompañamiento humano + instalación remota (checkout/_acompanamiento.html)
           CSS CRUDO autosuficiente (§11: Tailwind purga clases arbitrarias y
           muchos variantes md:; por eso TODO el estilado vive acá, no en el markup).
           Familia fría índigo→cyan.
        ============================================================ */
        .acomp-wrap { margin-bottom: 2rem; }

        .acomp-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid #e2e8f0;
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(60, 82, 187, 0.10);
        }
        .dark .acomp-card {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }

        .acomp-band {
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.07) 0%, rgba(255, 255, 255, 0) 55%, rgba(34, 211, 238, 0.05) 100%);
        }
        .dark .acomp-band {
            background: linear-gradient(135deg, rgba(49, 46, 129, 0.4) 0%, transparent 55%, rgba(8, 51, 68, 0.25) 100%);
        }

        .acomp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

        /* Avatar + dot de presencia */
        .acomp-avatar-wrap { position: relative; flex-shrink: 0; }
        .avatar-initials {
            width: 2.75rem; height: 2.75rem; border-radius: 9999px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #3c52bb 0%, #26a2d0 100%);
            box-shadow: 0 2px 12px rgba(60, 82, 187, 0.30);
        }
        .avatar-initials span { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1; }
        @keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
        .status-dot {
            position: absolute; bottom: -2px; right: -2px;
            width: 0.875rem; height: 0.875rem; border-radius: 9999px;
            background-color: #25D366; /* verde WhatsApp — solo el dot de "en línea" */
            border: 2px solid #fff;
            animation: dotPulse 1.8s ease-in-out infinite;
        }
        .dark .status-dot { border-color: #0f172a; }

        /* Nombre + frase */
        .acomp-id { flex: 1 1 0; min-width: 0; }
        .acomp-name { font-size: 0.8125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #0f172a; }
        .dark .acomp-name { color: #fff; }
        .acomp-phrase { font-size: 0.75rem; line-height: 1.45; font-weight: 500; margin-top: 0.125rem; color: #475569; }
        .dark .acomp-phrase { color: #cbd5e1; }
        .acomp-phrase strong { color: #0f172a; font-weight: 700; }
        .dark .acomp-phrase strong { color: #fff; }

        /* Divisor (solo desktop) */
        .acomp-divider { display: none; }

        /* Chip "Trato directo" + toggle de instalación: pills iguales (mobile) */
        .acomp-actions { display: flex; align-items: stretch; gap: 0.5rem; width: 100%; }
        .direct-chip {
            background: linear-gradient(135deg, rgba(60, 82, 187, 0.07) 0%, rgba(38, 162, 208, 0.07) 100%);
            border: 1px solid rgba(60, 82, 187, 0.14);
        }
        .dark .direct-chip {
            background: linear-gradient(135deg, rgba(60, 82, 187, 0.12) 0%, rgba(38, 162, 208, 0.10) 100%);
            border: 1px solid rgba(60, 82, 187, 0.22);
        }
        .acomp-chip, .acomp-toggle {
            flex: 1 1 0; min-width: 0;
            display: flex; align-items: center; gap: 0.5rem;
            border-radius: 1rem; padding: 0.625rem 0.75rem;
        }
        .acomp-toggle { justify-content: center; cursor: pointer; }
        .acomp-chip-icon, .acomp-toggle-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
        .acomp-chip-text { font-size: 0.71rem; line-height: 1.35; font-weight: 500; color: #475569; }
        .dark .acomp-chip-text { color: #94a3b8; }
        .acomp-chip-text strong { color: #1e293b; font-weight: 600; }
        .dark .acomp-chip-text strong { color: #e2e8f0; }
        .acomp-toggle-label { font-size: 0.6875rem; font-weight: 600; color: #475569; line-height: 1.2; }
        .dark .acomp-toggle-label { color: #cbd5e1; }
        .acomp-chev { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: #94a3b8; transition: transform 0.3s ease; }
        .acomp-toggle[aria-expanded="true"] .acomp-chev { transform: rotate(180deg); }
        .acomp-toggle[aria-expanded="true"] .acomp-toggle-icon { color: #3c52bb; }
        .dark .acomp-toggle[aria-expanded="true"] .acomp-toggle-icon { color: #818cf8; }

        /* Panel colapsable de instalación remota (patrón max-height) */
        .install-detail { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; }
        .install-detail.open { max-height: 320px; }
        .acomp-detail-inner { padding-top: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; }
        .acomp-detail-text { font-size: 0.75rem; line-height: 1.5; color: #64748b; }
        .dark .acomp-detail-text { color: #94a3b8; }
        .acomp-detail-text strong { font-weight: 600; color: #334155; }
        .dark .acomp-detail-text strong { color: #cbd5e1; }
        .acomp-tools { display: flex; gap: 0.375rem; flex-wrap: wrap; flex-shrink: 0; }
        .tool-chip {
            font-size: 0.66rem; font-weight: 600; padding: 0.125rem 0.5rem;
            border-radius: 0.375rem; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0;
        }
        .dark .tool-chip { color: #94a3b8; background: rgba(51, 65, 85, 0.6); border-color: rgba(255, 255, 255, 0.1); }

        /* ── Desktop (≥768px): una sola fila, pills a ancho automático ── */
        @media (min-width: 768px) {
            .acomp-wrap { margin-bottom: 2.5rem; }
            .acomp-band { padding: 1.25rem 2rem; }
            .acomp-row { flex-wrap: nowrap; gap: 1.5rem; }
            .avatar-initials { width: 3.5rem; height: 3.5rem; }
            .avatar-initials span { font-size: 1.25rem; }
            .status-dot { width: 1rem; height: 1rem; }
            .acomp-name { font-size: 0.9375rem; }
            .acomp-phrase { font-size: 0.875rem; max-width: 32rem; margin-top: 0.25rem; }
            .acomp-divider { display: block; width: 1px; height: 3rem; background: #e2e8f0; flex-shrink: 0; align-self: center; }
            .dark .acomp-divider { background: #334155; }
            .acomp-actions { width: auto; gap: 0.75rem; }
            .acomp-chip, .acomp-toggle { flex: 0 0 auto; padding: 0.75rem 1rem; }
            .acomp-chip { max-width: 13rem; }
            .acomp-toggle { justify-content: flex-start; }
            .acomp-chip-text { font-size: 0.75rem; }
            .acomp-toggle-label { font-size: 0.78rem; }
            .acomp-detail-inner { flex-direction: row; align-items: center; gap: 1rem; padding-top: 0.75rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .status-dot { animation: none; }
            .install-detail, .acomp-chev { transition: none; }
        }