/* ============================================================
   WSapp - Hoja de estilos unica (app.css)
   Tokens de color + layout de app + componentes reutilizables.
   ============================================================ */

/* 1. Tokens de color */
:root {
    --primary: #075e54;
    --primary-dark: #054a43;
    --secondary: #128c7e;
    --accent: #25d366;
    --bg: #f4f5f7;
    --bg-chat: #efeae2;
    --dark: #1f2933;
    --muted: #667085;
    --border: #dfe3e8;
    --card-shadow: 0 1px 3px rgba(16,24,40,0.08);
    --radius: 8px;
}

/* 2. Reset + base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--dark); line-height: 1.5; }

/* Material Symbols: heredar tamano de fuente */
.material-symbols-outlined { font-size: inherit; line-height: 1; vertical-align: middle; }

/* 3. Layout de app con sidebar */
.app-layout { display: flex; height: 100vh; }
.main-content { flex: 1; overflow-y: auto; background: var(--bg); }
.content-header { min-height: 64px; background: white; padding: 14px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.content-header h1, .content-header h5 { color: var(--dark); font-weight: 650; }
.content-body { width: 100%; max-width: 1600px; margin: 0 auto; padding: 24px; }

/* 4. Sidebar */
.sidebar { width: 240px; min-width: 240px; height: 100vh; background: var(--primary); color: white; display: flex; flex-direction: column; }
.sidebar-brand { padding: 16px; font-size: 1.2rem; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.15); }
.sidebar-logo { width: 150px; height: auto; display: block; }
.sidebar-brand small { font-size: .7rem; opacity: .7; display: block; margin-top: 2px; }
.sidebar-nav { flex: 1; padding: 8px 0; }
.sidebar-section-label { padding: 14px 16px 5px; color: rgba(255,255,255,.55); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: rgba(255,255,255,0.75); text-decoration: none; font-size: .9rem; transition: all .2s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(255,255,255,0.12); color: white; }
.sidebar-nav a .material-symbols-outlined { font-size: 1.1rem; width: 24px; text-align: center; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.15); font-size: .8rem; }
.sidebar-footer button, .sidebar-footer .btn { width: 100%; background: none; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); padding: 6px 12px; border-radius: 4px; font-size: .8rem; cursor: pointer; }

/* 5. Cards / estadisticas */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-cards.fin { grid-template-columns: repeat(4, 1fr); }
.stat-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 12px; }
.stat-card.fin-card { border-top: 3px solid var(--primary); flex-direction: column; align-items: flex-start; text-align: left; }
.stat-card.fin-card .stat-value { color: var(--secondary); }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.stat-value { font-size: 1.3rem; font-weight: 700; }
.stat-label { font-size: .8rem; color: #666; }

/* 6. Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.quick-action { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; text-decoration: none; color: #333; box-shadow: var(--card-shadow); transition: border-color .15s, background-color .15s; cursor: pointer; }
.quick-action:hover { border-color: var(--primary); background: #f8fbfa; }
.quick-action .material-symbols-outlined { font-size: 2rem; display: block; margin-bottom: 8px; color: var(--primary); }
.quick-action span { font-size: .85rem; font-weight: 500; }

/* 7. Tablas */
.table { margin: 0; font-size: .85rem; }
.table th { background: #f8f9fa; font-size: .75rem; text-transform: uppercase; color: #888; }
.table td { vertical-align: middle; }

/* Badges de estado (pedidos) */
.badge-status { font-size: .72rem; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.bg-borrador { background: #e2e8f0; color: #475569; }
.bg-pendiente { background: #fef3c7; color: #92400e; }
.bg-confirmado { background: #dbeafe; color: #1e40af; }
.bg-en_preparacion { background: #ede9fe; color: #5b21b6; }
.bg-listo { background: #d1fae5; color: #065f46; }
.bg-despachado, .bg-en_camino { background: #cffafe; color: #155e75; }
.bg-entregado { background: #dcfce7; color: #166534; }
.bg-cancelado, .bg-devuelto { background: #fee2e2; color: #991b1b; }
.bg-facturado { background: #e0e7ff; color: #3730a3; }
.bg-cerrado { background: #f1f5f9; color: #475569; }
.bg-en_espera { background: #fff7ed; color: #9a3412; }

/* Stat cards con borde de estado */
.stat-card.borrador { border-left: 3px solid #94a3b8; }
.stat-card.pendiente { border-left: 3px solid #f59e0b; }
.stat-card.confirmado { border-left: 3px solid #3b82f6; }
.stat-card.preparacion { border-left: 3px solid #8b5cf6; }
.stat-card.listo { border-left: 3px solid #10b981; }
.stat-card.despachado { border-left: 3px solid #06b6d4; }
.stat-card.en_camino { border-left: 3px solid #0ea5e9; }
.stat-card.entregado { border-left: 3px solid #22c55e; }
.stat-card.cancelado { border-left: 3px solid #ef4444; }
.stat-card.facturado { border-left: 3px solid #6366f1; }

/* Timeline */
.timeline { list-style: none; padding: 0; }
.timeline li { position: relative; padding-left: 24px; padding-bottom: 12px; border-left: 2px solid #e0e0e0; }
.timeline li.active { border-left-color: var(--primary); }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #e0e0e0; }
.timeline li.active::before { background: var(--primary); }
.timeline li.current::before { background: var(--primary); box-shadow: 0 0 0 3px rgba(7,94,84,0.2); }
.timeline .time { font-size: .7rem; color: #888; }

/* Filter bar */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar select, .filter-bar input { font-size: .8rem; }

/* Boton de accion en tabla */
.btn-action { padding: 3px 8px; font-size: .75rem; }

/* 8b. Vista Stock: resumen + panel */
.summary-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.summary-card { background: white; border-radius: 10px; padding: 18px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 14px; }
.summary-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.summary-icon.products { background: #e3f2fd; color: #1565c0; }
.summary-icon.value { background: #e8f5e9; color: #2e7d32; }
.summary-icon.warning { background: #fff3e0; color: #e65100; }
.summary-icon.danger { background: #ffebee; color: #c62828; }
.summary-info h6 { margin: 0; font-size: .75rem; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.summary-info .value { font-size: 1.4rem; font-weight: 700; color: #222; }
.card-panel { background: white; border-radius: 10px; box-shadow: var(--card-shadow); overflow: hidden; }
.card-panel-header { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; }
.card-panel-body { padding: 0; }
.badge-sku { background: #f0f0f0; color: #555; padding: 3px 8px; border-radius: 4px; font-size: .8rem; font-family: monospace; }
.section { display: none; }
.section.active { display: block; }
.stock-tabs { border-bottom: 1px solid var(--border); }
.stock-tabs .nav-link { color: #444; font-size: .9rem; }
.stock-tabs .nav-link.active { color: var(--primary); font-weight: 600; background: white; }

/* Indicadores de stock */
.stock-low { color: #c62828; font-weight: 700; }
.stock-out { color: #c62828; font-weight: 700; background: #ffebee; }
.stock-ok { color: #2e7d32; }

/* 8. Boostrap card overrides */
.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.card-header { background: white; border-bottom: 1px solid #f0f0f0; font-weight: 600; font-size: .9rem; }

/* Modales */
.modal-header { background: var(--primary); color: white; }
.modal-header .btn-close { filter: brightness(0) invert(1); }
.modal-header.bg-danger { background: #c62828 !important; }
.modal-header.bg-success { background: #2e7d32 !important; }

/* 9. Botones / inputs consistente */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark, #054a43); border-color: var(--primary-dark, #054a43); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }

/* 10. Badges de estado / salud */
label.badge, .badge.estado { font-size: .72rem; }

/* 11. Util para formularios de autenticacion / landing */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: white; border-radius: 12px; padding: 32px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.login-card { width: 100%; max-width: 760px; padding: 48px 0; }

/* Brand (login / landing / onboarding) */
.brand { color: var(--primary); font-weight: 700; }

/* Landing (index) */
.navbar-custom { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.hero { padding: 72px 0 56px; }
.hero h1 { font-weight: 800; color: var(--dark); }
.step-item { background: white; border-radius: 12px; padding: 24px; text-align: center; }
.step-number { background: var(--primary); color: white; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; margin-bottom: 12px; }

/* Planes */
.plan-precio { font-size: 2.5rem; font-weight: 800; color: var(--primary); }
.plan-nombre { font-size: 1.3rem; font-weight: 700; }
.plan-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; height: 100%; }
.plan-card.destacado { border: 2px solid var(--primary); }
.plan-precio-periodo { color: var(--secondary); font-size: 0.95rem; }

/* Landing */
.feature-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 24px; height: 100%; }
.feature-card h3 { color: var(--dark); }
.feature-card ul li { margin-bottom: 6px; }
.icon { font-size: 2rem; color: var(--primary); }
.border-plan-destacado { border: 2px solid var(--primary); }
.navbar-custom { background: white; border-bottom: 1px solid var(--border); }
.brand { font-weight: 800; color: var(--primary); font-size: 1.3rem; }
.navbar-logo { height: 40px; width: auto; display: block; }

/* Onboarding */
.progress { height: 8px; }
.progress-bar { background: var(--primary); }
.step-header { font-weight: 600; }
.servicio-row, .empleado-row, .producto-row, .horario-row { background: #f8f9fa; border-radius: 8px; padding: 10px; margin-bottom: 8px; }

/* WhatsApp connect */
.container-small { max-width: 600px; margin: 0 auto; padding: 2rem 1rem; }

/* 12. Responsive helpers */
@media (max-width: 992px) {
    .stat-cards, .stat-cards.fin, .quick-actions { grid-template-columns: repeat(2, 1fr); }
    .sidebar { width: 76px; min-width: 76px; }
    .sidebar-brand { padding: 14px 10px; }
    .sidebar-logo { width: 54px; }
    .sidebar-brand small, .sidebar-section-label, .sidebar-footer .user-name, .sidebar-footer #planBadge, .sidebar-footer .progress { display: none !important; }
    .sidebar-nav a { justify-content: center; padding: 12px 8px; font-size: 0; }
    .sidebar-nav a .material-symbols-outlined { width: auto; font-size: 1.35rem; }
    .sidebar-nav a .badge { position: absolute; margin: -22px 0 0 22px !important; font-size: .6rem; }
    .sidebar-footer { padding: 10px 8px; }
    .sidebar-footer button { overflow: hidden; font-size: 0; }
    .sidebar-footer button::after { content: "Salir"; font-size: .7rem; }
    .row-cards { grid-template-columns: 1fr; }
    .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .stat-cards, .stat-cards.fin, .quick-actions { grid-template-columns: 1fr; }
    .summary-cards { grid-template-columns: 1fr; }
    .card-panel-header { align-items: stretch; flex-direction: column; gap: 10px; }
    .card-panel-header .form-control { width: 100% !important; }
}
/* 13. Landing mejorada (pulido, 2026-08-06) */

        .hero {
            position: relative;
            overflow: hidden;
            padding: 6rem 0;
            background:
                radial-gradient(circle at top right, rgba(37, 211, 102, 0.18), transparent 38%),
                linear-gradient(135deg, #f8fffb 0%, #ffffff 55%, #f4f8ff 100%);
        }

        .hero::before {
            content: "";
            position: absolute;
            width: 320px;
            height: 320px;
            top: -160px;
            left: -130px;
            border-radius: 50%;
            background: rgba(37, 211, 102, 0.08);
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.9rem;
            margin-bottom: 1.25rem;
            border: 1px solid rgba(37, 211, 102, 0.3);
            border-radius: 999px;
            background-color: rgba(255, 255, 255, 0.8);
            color: var(--primary);
            font-size: 0.9rem;
            font-weight: 700;
        }

        .hero-title {
            max-width: 850px;
            margin-right: auto;
            margin-left: auto;
            font-weight: 800;
            line-height: 1.12;
        }

        .hero-description {
            max-width: 720px;
            margin-right: auto;
            margin-left: auto;
            font-size: 1.2rem;
        }

        .hero-benefits {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem 1.5rem;
            margin-top: 1.75rem;
            padding: 0;
            list-style: none;
        }

        .hero-benefits li {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #495057;
            font-size: 0.95rem;
        }

        .hero-benefits .material-symbols-outlined {
            color: var(--primary);
            font-size: 1.2rem;
        }

        .pricing-toggle-container {
            display: flex;
            justify-content: center;
            margin-bottom: 2.5rem;
        }

        .pricing-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.55rem 0.75rem;
            border: 1px solid #dee2e6;
            border-radius: 999px;
            background-color: #fff;
            box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.06);
        }

        .pricing-toggle-label {
            color: #6c757d;
            font-weight: 600;
            transition: color 0.2s ease;
        }

        .pricing-toggle-label.active {
            color: var(--primary);
        }

        .pricing-card {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 1.75rem;
            border: 1px solid #e9ecef;
            border-radius: 1rem;
            background-color: #fff;
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease;
        }

        .pricing-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1);
        }

        .pricing-card.border-plan-destacado {
            border: 2px solid var(--primary);
        }

        .recommended-badge {
            position: absolute;
            top: -0.75rem;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .plan-price {
            margin-bottom: 0.25rem;
            color: var(--primary);
            font-size: 2.25rem;
            font-weight: 800;
            line-height: 1;
        }

        .plan-period {
            min-height: 1.5rem;
            margin-bottom: 0;
        }

        .annual-summary {
            min-height: 1.5rem;
            margin-top: 0.25rem;
            color: #198754;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .plan-features {
            flex-grow: 1;
            margin: 1.5rem 0;
            padding: 0;
            list-style: none;
            text-align: left;
        }

        .plan-features li {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            color: #495057;
        }

        .plan-features li::before {
            content: "check_circle";
            flex-shrink: 0;
            color: var(--primary);
            font-family: "Material Symbols Outlined";
            font-size: 1.15rem;
            line-height: 1.3;
        }

        .plan-features li.feature-unavailable {
            color: #868e96;
        }

        .plan-features li.feature-unavailable::before {
            content: "cancel";
            color: #adb5bd;
        }

        .feature-card {
            height: 100%;
        }

        .feature-card h3 {
            font-size: 1.3rem;
        }

        .feature-card ul li {
            margin-bottom: 0.5rem;
        }

        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .faq-section {
            background-color: #fff;
        }

        .accordion-button:not(.collapsed) {
            color: var(--primary);
            background-color: rgba(37, 211, 102, 0.08);
            box-shadow: none;
        }

        .accordion-button:focus {
            border-color: rgba(37, 211, 102, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(37, 211, 102, 0.15);
        }

        .final-cta {
            background:
                linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(255, 255, 255, 0.9));
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem 1.25rem;
            margin-bottom: 0.75rem;
        }

        .footer-links a:focus-visible,
        .navbar a:focus-visible,
        main a:focus-visible {
            outline: 3px solid rgba(37, 211, 102, 0.45);
            outline-offset: 3px;
        }

        @media (max-width: 767.98px) {
            .hero {
                padding: 4.5rem 0;
            }

            .hero-title {
                font-size: 2.35rem;
            }

            .hero-description {
                font-size: 1.05rem;
            }

            .navbar-actions {
                display: flex;
                gap: 0.5rem;
            }

            .navbar-actions .btn {
                padding-right: 0.75rem;
                padding-left: 0.75rem;
                font-size: 0.85rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }
    
/* 15. Linea visual sobria compartida */
.metric-card{height:100%;padding:18px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow)}.metric-card .value{font-size:1.35rem;font-weight:700;color:var(--dark)}.metric-card .label{margin-top:4px;color:var(--muted);font-size:.78rem}.row-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.pricing-card:hover{transform:none;box-shadow:var(--card-shadow)}
.meta-setup .meta-progress button,.meta-setup .meta-step-card,.meta-setup .meta-step-icon,.meta-setup .meta-check,.meta-setup .meta-connection-summary div,.meta-setup .meta-help-card{border-radius:var(--radius)}.meta-setup .meta-step-card{box-shadow:var(--card-shadow)}.meta-setup .meta-step-icon{background:var(--primary)}
.hero{background:#f7faf9;border-bottom:1px solid var(--border)}.hero::before{display:none}.hero-eyebrow{border-radius:6px;background:#eef7f4;border-color:#cfe4de}
.pricing-card,.feature-card,.step-item,.info-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow)}.pricing-card{padding:24px;height:100%;display:flex;flex-direction:column;position:relative}.info-panel{padding:24px}
.section-kicker{display:block;margin-bottom:6px;color:var(--primary);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.content-checklist{list-style:none;padding:0;margin:20px 0 0}.content-checklist li{position:relative;margin-bottom:10px;padding-left:25px}.content-checklist li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}
.recommended-badge{position:absolute;top:14px;right:14px}.plan-features{padding-left:0;list-style:none;text-align:left;margin:18px 0 24px}.plan-features li{padding:7px 0;border-bottom:1px solid #edf0f2}.plan-price{color:var(--primary);font-size:2rem;font-weight:750}.annual-summary{min-height:24px;color:var(--primary);font-size:.82rem;font-weight:600}footer{background:var(--primary-dark)}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:12px}
.legal-page{background:#f7f8fa}.legal-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border)}.legal-nav{min-height:64px;display:flex;align-items:center;justify-content:space-between}.legal-layout{display:grid;grid-template-columns:220px minmax(0,820px);gap:40px;justify-content:center;padding-top:40px;padding-bottom:64px}.legal-index{position:sticky;top:92px;align-self:start;display:flex;flex-direction:column;padding:16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);font-size:.86rem}.legal-index strong{margin-bottom:8px}.legal-index a{padding:5px 0;color:var(--muted);text-decoration:none}.legal-index a:hover{color:var(--primary)}
.legal-document{padding:36px 40px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow)}.legal-title{padding-bottom:24px;border-bottom:1px solid var(--border)}.legal-title h1{margin:0 0 8px;font-size:clamp(1.8rem,4vw,2.4rem)}.legal-title p{margin:0;color:var(--muted)}.legal-notice{margin:24px 0;padding:14px 16px;background:#f3f8f6;border-left:4px solid var(--primary)}.legal-document section{padding-top:22px;scroll-margin-top:82px}.legal-document h2{margin-bottom:10px;font-size:1.2rem}.legal-document p,.legal-document li{color:#475467}.legal-footer-note{margin-top:32px;padding-top:20px;border-top:1px solid var(--border)}
@media(max-width:992px){.legal-layout{grid-template-columns:1fr}.legal-index{display:none}}@media(max-width:640px){.legal-layout{padding-top:16px}.legal-document{padding:24px 18px}.content-header,.content-body{padding-left:16px;padding-right:16px}}

:root {
    --metric-blue-bg: #e3f2fd;
    --metric-blue-fg: #1565c0;
    --metric-green-bg: #e8f5e9;
    --metric-green-fg: #2e7d32;
    --metric-amber-bg: #fff3e0;
    --metric-amber-fg: #e65100;
    --metric-red-bg: #fce4ec;
    --metric-red-fg: #c62828;
}
.metric-icon-blue { background: var(--metric-blue-bg); color: var(--metric-blue-fg); }
.metric-icon-green { background: var(--metric-green-bg); color: var(--metric-green-fg); }
.metric-icon-amber { background: var(--metric-amber-bg); color: var(--metric-amber-fg); }
.metric-icon-red { background: var(--metric-red-bg); color: var(--metric-red-fg); }
.meta-page-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.meta-page-header h5{margin:0;display:flex;align-items:center;gap:9px}.meta-page-header p{margin:4px 0 0;color:var(--text-muted);font-size:.88rem}.meta-setup{max-width:1050px;margin:0 auto}.meta-status{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:700;white-space:nowrap}.meta-status span{width:8px;height:8px;border-radius:50%;background:currentColor}.meta-status-off{color:#64748b;background:#f1f5f9}.meta-status-pending{color:#b45309;background:#fff7ed}.meta-status-on{color:#047857;background:#ecfdf5}.meta-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.meta-progress button{border:0;background:#e8efed;color:#64748b;border-radius:12px;padding:11px;text-align:left;font-weight:700}.meta-progress button span{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:7px;border-radius:50%;background:#fff}.meta-progress button.active{background:#dff7e8;color:var(--primary)}.meta-step-card{background:#fff;border:1px solid #dfe8e5;border-radius:18px;padding:28px;box-shadow:0 10px 30px rgba(15,76,68,.07)}.meta-step-heading{display:flex;align-items:center;gap:14px;margin-bottom:22px}.meta-step-heading small{color:var(--primary);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.meta-step-heading h3{font-size:1.35rem;margin:2px 0 0}.meta-step-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#075e54,#128c7e)}.meta-instructions{display:grid;gap:14px;padding-left:22px}.meta-instructions li{padding-left:6px}.meta-step-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.meta-check{display:flex;align-items:center;gap:9px;padding:13px;border-radius:12px;background:#ecfdf5;color:#047857}.meta-connection-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.meta-connection-summary div{padding:15px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.meta-connection-summary span,.meta-connection-summary strong{display:block}.meta-connection-summary span{font-size:.75rem;color:#64748b;margin-bottom:5px}.meta-connection-summary strong{overflow-wrap:anywhere}.meta-help-card{display:flex;gap:14px;margin-top:18px;padding:18px;border-radius:14px;background:#eaf6f3;color:#164e46}.meta-help-card p{margin:4px 0 0;font-size:.88rem}.meta-token-secret{-webkit-text-security:disc}@media(max-width:767.98px){.meta-page-header{align-items:flex-start;flex-direction:column}.meta-progress{grid-template-columns:1fr 1fr}.meta-progress button{font-size:.78rem}.meta-step-card{padding:20px}.meta-connection-summary{grid-template-columns:1fr}.meta-step-actions{flex-direction:column-reverse}.meta-step-actions .btn{width:100%}}