/* PAYCOMPIX - PWA / MOBILE APP SHELL | PHP 8.1+ | Lucide Icons */

.pwa-bottom-nav,
.pwa-install-banner { display: none; }

@media (display-mode: standalone) {
    body.app-body { -webkit-user-select: none; user-select: none; }
    input, textarea, select, code { -webkit-user-select: text; user-select: text; }
}

@media (max-width: 700px) {
    :root { --pwa-bottom-nav-height: 72px; }

    body.app-body {
        padding-bottom: calc(var(--pwa-bottom-nav-height) + env(safe-area-inset-bottom));
        background: var(--bg);
    }

    .app-topbar { min-height: 58px; padding: 0 14px; }

    .topbar-context-label,
    .topbar-divider,
    .topbar-actions > .topbar-icon-button,
    .topbar-actions > .topbar-create { display: none; }

    .topbar-context strong { max-width: 58vw; font-size: 12px; }
    .sidebar-toggle { display: inline-flex; }
    .container { padding: 20px 14px 28px; }
    .footer { display: none; }

    .page-header, .page-head, .hero, .dashboard-hero { margin-bottom: 18px; }

    .page-header h1, .page-head h1, .hero h1, .dashboard-hero-content h1 {
        font-size: 26px;
        letter-spacing: -0.035em;
    }

    .panel, .dashboard-section, .pix-form-card, .charge-panel { border-radius: 14px; }

    .pwa-bottom-nav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1200;
        min-height: var(--pwa-bottom-nav-height);
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        background: rgba(255,255,255,.96);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 28px rgba(15,23,42,.08);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .pwa-bottom-nav-link {
        min-width: 0; min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--muted);
        border-radius: 10px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
    }

    .pwa-bottom-nav-link svg { width: 20px; height: 20px; stroke-width: 2; }
    .pwa-bottom-nav-link.active { color: var(--primary); background: var(--primary-50); }

    .pwa-bottom-nav-link.is-primary {
        color: #fff;
        background: var(--primary);
        box-shadow: 0 6px 16px rgba(23,79,156,.20);
    }

    .pwa-bottom-nav-link.is-primary.active { color: #fff; background: var(--primary-hover); }

    .pwa-install-banner {
        position: fixed;
        left: 12px; right: 12px;
        bottom: calc(var(--pwa-bottom-nav-height) + 12px + env(safe-area-inset-bottom));
        z-index: 1250;
        padding: 13px;
        align-items: center;
        gap: 11px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow-lg);
    }

    .pwa-install-banner.is-visible { display: flex; }

    .pwa-install-banner-icon {
        width: 38px; height: 38px; flex: 0 0 38px;
        display: grid; place-items: center;
        color: var(--primary); background: var(--primary-50);
        border-radius: 10px;
    }

    .pwa-install-banner-icon svg { width: 19px; height: 19px; }
    .pwa-install-banner-content { min-width: 0; flex: 1; }
    .pwa-install-banner-content strong { display: block; color: var(--text); font-size: 12px; }
    .pwa-install-banner-content span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }
    .pwa-install-banner-actions { display: flex; gap: 6px; }

    .pwa-install-button, .pwa-install-close {
        min-height: 34px; padding: 0 10px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 8px;
        font-size: 10px; font-weight: 700; cursor: pointer;
    }

    .pwa-install-button { color: #fff; background: var(--primary); }
    .pwa-install-close { width: 34px; padding: 0; color: var(--muted); background: var(--bg-secondary); }
    .pwa-install-close svg { width: 16px; height: 16px; }
}

@media (max-width: 390px) {
    .pwa-bottom-nav-link { font-size: 9px; }
    .pwa-bottom-nav-link svg { width: 19px; height: 19px; }
}

/* ==========================================================
   DASHBOARD MOBILE - APP HOME
========================================================== */
.pwa-mobile-home{display:none}
@media(max-width:700px){
body.pwa-dashboard-mobile .dashboard-hero,body.pwa-dashboard-mobile .dashboard-summary,body.pwa-dashboard-mobile .dashboard-section{display:none}
.pwa-mobile-home{display:block}
.pwa-mobile-balance{overflow:hidden;padding:22px;color:#fff;background:radial-gradient(circle at 92% 5%,rgba(255,255,255,.12),transparent 34%),linear-gradient(145deg,var(--primary-950),var(--primary-800));border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 18px 38px rgba(11,31,58,.18)}
.pwa-mobile-balance-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.pwa-mobile-kicker{display:block;margin-bottom:7px;color:rgba(255,255,255,.62);font-size:10px;font-weight:700;letter-spacing:.08em}
.pwa-mobile-amount{display:block;font-size:clamp(30px,9vw,40px);font-weight:750;line-height:1.05;letter-spacing:-.045em}
.pwa-mobile-company{display:block;max-width:65vw;margin-top:7px;overflow:hidden;color:rgba(255,255,255,.68);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.pwa-mobile-balance-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:14px}
.pwa-mobile-balance-icon svg{width:22px;height:22px}
.pwa-mobile-charge-button{min-height:64px;margin-top:22px;padding:11px 13px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;color:var(--primary-950);background:#fff;border-radius:14px;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.10)}
.pwa-mobile-charge-button>svg:first-child{width:40px;height:40px;padding:9px;color:var(--primary);background:var(--primary-50);border-radius:11px}
.pwa-mobile-charge-button>svg:last-child{width:18px;height:18px;color:#8a98aa}
.pwa-mobile-charge-button strong,.pwa-mobile-charge-button small{display:block}.pwa-mobile-charge-button strong{font-size:14px;font-weight:750}.pwa-mobile-charge-button small{margin-top:2px;color:#7b8798;font-size:10px}
.pwa-mobile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.pwa-mobile-stat{min-width:0;padding:14px;display:flex;align-items:center;gap:11px;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;box-shadow:var(--shadow-xs)}
.pwa-mobile-stat-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-50);border-radius:10px}.pwa-mobile-stat-icon svg{width:18px;height:18px}
.pwa-mobile-stat small,.pwa-mobile-stat strong,.pwa-mobile-stat em{display:block}.pwa-mobile-stat small{color:var(--muted);font-size:9px}.pwa-mobile-stat strong{margin-top:1px;color:var(--text);font-size:19px;line-height:1.1}.pwa-mobile-stat em{margin-top:2px;color:#94a3b8;font-size:9px;font-style:normal}
.pwa-mobile-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.pwa-mobile-shortcut{min-width:0;min-height:82px;padding:12px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-secondary);background:#fff;border:1px solid var(--line);border-radius:14px;font-size:10px;font-weight:650;text-align:center;text-decoration:none}.pwa-mobile-shortcut svg{width:20px;height:20px;color:var(--primary)}
.pwa-mobile-recent{padding:17px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-xs)}
.pwa-mobile-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}.pwa-mobile-section-head span{display:block;margin-bottom:3px;color:var(--primary);font-size:9px;font-weight:750;letter-spacing:.08em}.pwa-mobile-section-head h2{margin:0;color:var(--text);font-size:15px;letter-spacing:-.02em}.pwa-mobile-section-head>a{display:inline-flex;align-items:center;gap:3px;color:var(--primary);font-size:10px;font-weight:650;text-decoration:none}.pwa-mobile-section-head>a svg{width:14px;height:14px}
.pwa-mobile-recent-list{display:flex;flex-direction:column}.pwa-mobile-recent-item{min-height:60px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:9px;color:inherit;border-bottom:1px solid var(--line-soft);text-decoration:none}.pwa-mobile-recent-item:last-child{border-bottom:0}.pwa-mobile-recent-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--primary);background:var(--primary-50);border-radius:9px}.pwa-mobile-recent-icon svg{width:16px;height:16px}.pwa-mobile-recent-info{min-width:0}.pwa-mobile-recent-info strong,.pwa-mobile-recent-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pwa-mobile-recent-info strong{color:var(--text);font-size:11px}.pwa-mobile-recent-info small{margin-top:2px;color:var(--muted);font-size:9px}.pwa-mobile-recent-value{color:var(--text);font-size:11px;white-space:nowrap}.pwa-mobile-recent-item>svg{width:15px;height:15px;color:#a0aec0}
.pwa-mobile-empty{padding:25px 12px 12px;text-align:center}.pwa-mobile-empty>span{width:46px;height:46px;margin:0 auto 10px;display:grid;place-items:center;color:var(--primary);background:var(--primary-50);border-radius:13px}.pwa-mobile-empty>span svg{width:21px;height:21px}.pwa-mobile-empty strong{display:block;font-size:13px}.pwa-mobile-empty p{margin:4px 0 14px;color:var(--muted);font-size:10px}
}


/* ==========================================================
   PWA MODO COBRAR V0.3
========================================================== */
.pwa-charge-mode,.pwa-charge-created{display:none}
@media(max-width:700px){
body.pwa-pix-create-mobile .pix-create-header,body.pwa-pix-create-mobile .pix-create-layout{display:none}
.pwa-charge-mode{display:block;max-width:430px;margin:0 auto}
.pwa-charge-mode-head{display:flex;align-items:center;gap:13px;margin:2px 0 24px}.pwa-charge-back{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:12px}.pwa-charge-back svg{width:19px;height:19px}.pwa-charge-mode-head span{display:block;color:var(--primary);font-size:9px;font-weight:750;letter-spacing:.09em}.pwa-charge-mode-head h1{margin:3px 0 0;font-size:19px;letter-spacing:-.03em}
.pwa-charge-form{margin:0}.pwa-charge-display{padding:28px 18px 24px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-xs)}.pwa-charge-display span{display:block;color:var(--muted);font-size:10px;font-weight:650}.pwa-charge-display strong{display:block;margin:8px 0 5px;color:var(--text);font-size:42px;font-weight:760;line-height:1;letter-spacing:-.055em}.pwa-charge-display small{color:#94a3b8;font-size:10px}.pwa-charge-display.has-value strong{color:var(--primary-950)}
.pwa-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.pwa-key{min-height:62px;display:grid;place-items:center;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:14px;font:700 21px/1 inherit;box-shadow:var(--shadow-xs);touch-action:manipulation}.pwa-key:active{transform:scale(.97);background:var(--bg-secondary)}.pwa-key-secondary{color:var(--muted);font-size:10px;font-weight:650}.pwa-key-secondary svg{width:20px;height:20px}
.pwa-charge-options{margin:4px 0 14px;background:#fff;border:1px solid var(--line);border-radius:13px}.pwa-charge-options summary{min-height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;color:var(--text-secondary);font-size:11px;font-weight:650}.pwa-charge-options summary::-webkit-details-marker{display:none}.pwa-charge-options summary span{display:flex;align-items:center;gap:8px}.pwa-charge-options summary svg{width:16px;height:16px;color:var(--primary)}.pwa-charge-options[open] summary>svg:last-child{transform:rotate(180deg)}.pwa-charge-options-body{padding:0 14px 14px}.pwa-charge-options-body label{display:block;margin-bottom:6px;color:var(--text-secondary);font-size:10px;font-weight:650}.pwa-charge-options-body input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px}.pwa-charge-options-body small{display:block;margin-top:5px;color:var(--muted);font-size:9px}
.pwa-generate-pix{width:100%;min-height:58px;padding:0 17px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:#fff;background:var(--primary);border:0;border-radius:14px;font-size:13px;font-weight:750;box-shadow:0 10px 24px rgba(23,79,156,.20)}.pwa-generate-pix svg{width:20px;height:20px}.pwa-generate-pix:disabled{cursor:not-allowed;opacity:.42;box-shadow:none}.pwa-charge-security{margin:13px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:9px}.pwa-charge-security svg{width:13px;height:13px;color:var(--success)}
body.pwa-pix-show-mobile .pix-show-header,body.pwa-pix-show-mobile .charge-metrics,body.pwa-pix-show-mobile .charge-panel{display:none}.pwa-charge-created{max-width:430px;margin:4px auto 0;padding:28px 18px 20px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-xs)}.pwa-charge-created-icon{width:62px;height:62px;margin:0 auto 16px;display:grid;place-items:center;color:var(--primary);background:var(--primary-50);border-radius:18px}.pwa-charge-created-icon.is-paid{color:var(--success);background:var(--success-bg)}.pwa-charge-created-icon svg{width:29px;height:29px}.pwa-charge-created-kicker{display:block;color:var(--primary);font-size:9px;font-weight:750;letter-spacing:.09em}.pwa-charge-created h1{margin:5px 0 10px;font-size:21px}.pwa-charge-created-amount{display:block;color:var(--text);font-size:36px;letter-spacing:-.05em}.pwa-charge-created>small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.pwa-show-qr-button{min-height:68px;margin-top:24px;padding:11px 13px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;color:#fff;background:var(--primary);border-radius:14px;text-align:left;text-decoration:none;box-shadow:0 10px 24px rgba(23,79,156,.20)}.pwa-show-qr-button.is-success{background:var(--success)}.pwa-show-qr-button>svg{width:21px;height:21px}.pwa-show-qr-button span strong,.pwa-show-qr-button span small{display:block}.pwa-show-qr-button span strong{font-size:13px}.pwa-show-qr-button span small{margin-top:2px;color:rgba(255,255,255,.72);font-size:9px}.pwa-charge-created-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.pwa-charge-created-actions a,.pwa-charge-created-actions button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--line);border-radius:11px;font:650 10px/1 inherit;text-decoration:none}.pwa-charge-created-actions svg{width:15px;height:15px;color:var(--primary)}
}


/* ==========================================================
   PAYCOMPIX MOBILE UI/UX SYSTEM v0.4
   Hierarquia, ritmo, toque, safe-area e foco operacional
========================================================== */
@media (max-width:700px){
:root{--pwa-bottom-nav-height:76px;--pwa-space:16px;--pwa-radius:18px}
html{background:#f5f7fb}
body.app-body{background:#f5f7fb;padding-bottom:calc(var(--pwa-bottom-nav-height) + env(safe-area-inset-bottom) + 12px)}
.app-topbar{min-height:56px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));background:rgba(255,255,255,.94);border-bottom:1px solid #e9edf3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.container{width:100%;max-width:100%;padding:16px max(var(--pwa-space),env(safe-area-inset-right)) 28px max(var(--pwa-space),env(safe-area-inset-left))}
.pwa-bottom-nav{min-height:var(--pwa-bottom-nav-height);padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border-top:1px solid #e7ebf1;box-shadow:0 -10px 30px rgba(15,23,42,.07)}
.pwa-bottom-nav-link{appearance:none;border:0;background:transparent;min-height:56px;font-family:inherit;cursor:pointer;border-radius:14px;color:#667085;transition:background .16s ease,color .16s ease,transform .12s ease}
.pwa-bottom-nav-link:active{transform:scale(.96)}
.pwa-bottom-nav-link.active:not(.is-primary){color:var(--primary);background:var(--primary-50)}
.pwa-bottom-nav-link.is-primary{position:relative;margin-top:-18px;min-height:66px;border-radius:20px;background:linear-gradient(145deg,#1764d8,#174f9c);box-shadow:0 10px 24px rgba(23,79,156,.28)}
.pwa-bottom-nav-link.is-primary svg{width:23px;height:23px}

/* Nova cobrança: o mobile é uma única experiência, sem formulário duplicado. */
.pix-create-header,.pix-create-layout{display:none!important}
.pwa-charge-mode{display:block!important;max-width:460px;margin:0 auto;padding-bottom:4px}
.pwa-charge-mode-head{margin:0 0 16px;gap:12px;align-items:center}
.pwa-charge-back{width:44px;height:44px;flex-basis:44px;border-radius:14px;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.pwa-charge-mode-head span{font-size:10px;letter-spacing:.075em}
.pwa-charge-mode-head h1{margin-top:2px;font-size:20px;line-height:1.2}
.pwa-charge-display{padding:22px 16px 20px;border-radius:20px;border-color:#e7ebf1;box-shadow:0 8px 26px rgba(15,23,42,.05)}
.pwa-charge-display span{font-size:11px}
.pwa-charge-display strong{margin:7px 0 5px;font-size:44px;line-height:1.02}
.pwa-charge-display small{font-size:10px}
.pwa-keypad{gap:10px;margin:12px 0}
.pwa-key{min-height:56px;border-radius:15px;border-color:#e6eaf0;font-size:18px;font-weight:650;box-shadow:0 3px 10px rgba(15,23,42,.035)}
.pwa-key-secondary{font-size:10px;font-weight:650}
.pwa-charge-options{margin:0 0 10px;border-radius:15px;border-color:#e6eaf0;overflow:hidden}
.pwa-charge-options summary{min-height:50px;padding:0 14px;font-size:11px}
.pwa-charge-options-body{padding:2px 14px 14px;border-top:1px solid #eef1f5}
.pwa-charge-options-body label{margin-top:12px}
.pwa-charge-options-body input{min-height:46px;font-size:16px;background:#fff}
.pwa-generate-pix{min-height:56px;border-radius:15px;background:linear-gradient(145deg,#1764d8,#174f9c);box-shadow:0 10px 22px rgba(23,79,156,.22);transition:transform .12s ease,opacity .16s ease}
.pwa-generate-pix:not(:disabled):active{transform:scale(.985)}
.pwa-generate-pix:disabled{background:#a9bdd8;opacity:1}
.pwa-charge-security{margin-top:10px;line-height:1.35}

/* Dashboard: reduz ruído e prioriza a ação principal. */
.pwa-mobile-balance{padding:20px;border-radius:22px;box-shadow:0 16px 34px rgba(7,28,59,.16)}
.pwa-mobile-charge-button{border-radius:15px;min-height:62px}
.pwa-mobile-stats{gap:10px}.pwa-mobile-stat{border-radius:16px;min-height:76px}.pwa-mobile-shortcuts{margin:14px 0;gap:10px}.pwa-mobile-shortcut{min-height:76px;border-radius:16px}.pwa-mobile-recent{border-radius:18px}

/* Estados de foco acessíveis sem poluir o toque. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(23,79,156,.24);outline-offset:2px}
}
@media(max-width:380px){.container{padding-left:12px;padding-right:12px}.pwa-charge-display strong{font-size:39px}.pwa-key{min-height:52px}.pwa-charge-mode-head h1{font-size:18px}}