/* ═══════════════════════════════════════════════════════════════════════
   H2B — layout do app: header, sidebar, bottom nav, drawer, views.
   Transcrito do sistema de referência. Ranking e planos removidos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Splash ── */
#h2b-splash{position:fixed;inset:0;z-index:99999;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .4s ease;pointer-events:none}
@keyframes h2bBar{0%{width:0}100%{width:100%}}

/* ── App shell ── */
#app{display:none;flex-direction:column;height:100dvh;overflow:hidden}
.app-hdr{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);padding:0 14px;height:56px;display:flex;align-items:center;gap:8px;flex-shrink:0;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.app-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:7px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 2px 8px rgba(79,70,229,.35);color:#fff;font-size:15px}
.app-logo-text{font-family:'Sora',sans-serif;font-size:16px;font-weight:900;letter-spacing:-.02em;background:linear-gradient(135deg,#7c3aed,#a855f7 60%,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#7c3aed}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.av-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;cursor:pointer;flex-shrink:0;border:2.5px solid rgba(255,255,255,.9);box-shadow:0 1px 5px rgba(79,70,229,.45),0 0 0 1px rgba(99,102,241,.25);background-clip:padding-box;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.av-btn:hover{transform:scale(1.07);box-shadow:0 2px 12px rgba(99,102,241,.35)}
#hdr-menu-btn{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,#4f46e5,#7c3aed);border:none;border-radius:24px;padding:5px 6px 5px 12px;cursor:pointer;flex-shrink:0;box-shadow:0 3px 12px rgba(99,102,241,.45);font-family:inherit}
#hdr-menu-btn i{font-size:20px;color:#fff}

.app-body{flex:1;display:flex;overflow:hidden;min-height:0}
.main-area{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}

/* ── Sidebar (desktop) ── */
.sidebar{display:none}
@media(min-width:768px){
  .sidebar{display:flex;flex-direction:column;width:268px;min-width:268px;background:#ffffff!important;border-right:1px solid rgba(124,58,237,.08)!important;box-shadow:1px 0 24px rgba(37,99,235,.04);overflow-y:auto;flex-shrink:0;padding:6px 5px}
  .bottom-nav{display:none}
}
@media(min-width:1200px){
  .sidebar{width:290px;min-width:290px}
  .app-hdr{height:56px}
  .view-scroll{padding:20px 24px}
}
.sb-sec{padding:5px 3px 2px}
.sb-lbl{font-size:9px;font-weight:800;color:#a5a8cc!important;letter-spacing:.08em;text-transform:uppercase;padding:0 5px;margin:8px 0 3px}
.sb-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;font-size:13px;color:#4c4f82!important;cursor:pointer;transition:all .13s;border:none;background:none!important;width:100%;font-family:inherit;font-weight:600;position:relative;text-align:left}
.sb-item:hover{background:#edf0ff!important;color:#1e1b4b!important;transform:translateX(2px)}
.sb-item.active{background:rgba(99,102,241,.12)!important;color:#4f46e5!important;font-weight:800}
.sb-item.active i{color:#4f46e5!important}
.sb-item i{font-size:17px;flex-shrink:0}
.sb-item-menu{background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(99,102,241,.10))!important;border:1.5px solid rgba(124,58,237,.38)!important;color:#7c3aed!important;font-weight:800!important;letter-spacing:.05em}
.sb-item-menu i{color:#7c3aed!important}
.sb-item-menu:hover{background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(99,102,241,.16))!important}
.sb-badge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;min-width:18px;text-align:center}
.sb-badge-b{background:var(--blue);color:#fff}
.sb-badge-g{background:var(--green);color:#fff}
.sb-badge-r{background:var(--red);color:#fff}
.sb-auto-btn.is-active{color:#059669!important;font-weight:800}
.sb-auto-btn.is-active i{color:#059669}
.sb-profile{margin:5px 3px;padding:10px 11px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--sf2)!important}
.sb-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.sbm-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;background:var(--sf2);border:1.5px solid var(--border2);border-radius:9px;padding:7px 2px;font-size:9.8px;font-weight:800;color:var(--t2);cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap;overflow:hidden}
.sbm-btn.active{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(99,102,241,.35)}
.sbm-btn:not(.active):hover{background:var(--sf3)}

/* ── Bottom nav (mobile) ── */
.bottom-nav{display:flex;align-items:stretch;background:var(--surface);border-top:1px solid var(--border);height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);position:relative;z-index:100;flex-shrink:0;box-shadow:0 -2px 16px rgba(0,0,0,.06)}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px 4px 8px;gap:3px;cursor:pointer;border:none;background:none;font-family:inherit;position:relative;transition:transform .1s;-webkit-tap-highlight-color:transparent}
.bn:active{transform:scale(.93)}
.bn i{font-size:23px;color:#9ca3af;transition:color .15s,transform .15s}
.bn span{font-size:10px;font-weight:600;color:#9ca3af;transition:color .15s;letter-spacing:.01em}
.bn.active i{color:#4f46e5;transform:scale(1.08)}
.bn.active span{color:#4f46e5;font-weight:800}
.bn::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);width:24px;height:2.5px;background:linear-gradient(90deg,#6366f1,#7c3aed);border-radius:0 0 3px 3px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.bn.active::before{transform:translateX(-50%) scaleX(1)}
.bn.bn-auto{position:relative;margin-top:-18px;flex-shrink:0}
.bn.bn-auto .bn-auto-ring{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4f46e5);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(124,58,237,.45),0 0 0 3px #fff;transition:transform .15s,box-shadow .15s;position:relative}
.bn.bn-auto:active .bn-auto-ring{transform:scale(.92)}
.bn.bn-auto .bn-auto-ring i{color:#fff;font-size:22px}
.bn.bn-auto span{color:#7c3aed;font-weight:800;font-size:10px;margin-top:3px}
.bn.bn-auto.is-active .bn-auto-ring{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 18px rgba(5,150,105,.45),0 0 0 3px #fff;animation:autoPulse 2s ease-in-out infinite}
@keyframes autoPulse{0%,100%{box-shadow:0 4px 18px rgba(5,150,105,.45),0 0 0 3px #fff}50%{box-shadow:0 4px 24px rgba(5,150,105,.7),0 0 0 4px rgba(5,150,105,.15)}}
.bn-badge{position:absolute;top:-4px;right:-6px;background:#ef4444;color:#fff;font-size:9px;font-weight:800;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center;border:1.5px solid #fff;display:none}
.bn-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:#10b981;border:2px solid #fff;border-radius:50%;display:none}
.bn-dot.is-auto{display:block;animation:pulseDot 2s infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.15)}}
.bn-av-wrap{width:28px;height:28px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;justify-content:center;border:2px solid rgba(99,102,241,.3);transition:border-color .15s}
.bn-av-wrap i{font-size:16px;color:#fff}
.bn.bn-profile i{display:none}
.bn.bn-profile .bn-av-wrap i{display:block}
@media(max-width:360px){.bn span{font-size:9px}.bn i{font-size:20px}.bn-auto-ring{width:40px;height:40px}}

/* ── Views ── */
.view{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.view-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}
.banner{font-size:13px;padding:9px 14px;display:flex;align-items:flex-start;gap:8px;flex-shrink:0;border-bottom:1px solid transparent;color:#1e1b4b}
.banner i{font-size:15px;flex-shrink:0;margin-top:1px}
.banner.al-amber{background:rgba(245,158,11,.07);border-bottom-color:rgba(245,158,11,.2)}
.banner.al-blue{background:rgba(59,130,246,.07);border-bottom-color:rgba(59,130,246,.2)}
.banner.al-purple{background:rgba(99,102,241,.07);border-bottom-color:rgba(99,102,241,.2)}

/* ── Drawer ── */
.drawer-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;display:none}
.drawer-ov.show{display:block}
.drawer{position:fixed;right:0;top:0;bottom:0;width:270px;background:var(--surface);box-shadow:-8px 0 40px rgba(99,102,241,.15);z-index:160;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;padding-top:env(safe-area-inset-top);display:flex;flex-direction:column}
.drawer.show{transform:translateX(0)}
.d-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r);font-size:14px;color:#4c4f82;cursor:pointer;transition:all .12s;border:none;background:none;width:100%;font-family:inherit;text-align:left}
.d-item:hover{background:#f0f4ff;color:#1e1b4b}
.d-item i{font-size:17px;flex-shrink:0}
.d-quick-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--sf2);border:1.5px solid var(--border2);border-radius:12px;padding:11px 8px;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;transition:all .12s;min-height:42px}
.d-quick-btn i{font-size:16px;flex-shrink:0}
.d-quick-btn:hover{background:#eef2ff;border-color:#c7d2fe}
.d-quick-btn:active{transform:scale(.97)}

/* Em telas largas a bottom nav some (a regra da sidebar vem antes desta). */
@media(min-width:768px){.bottom-nav{display:none}}

/* ── Modo celular forçado no PC ── */
html.force-cel .sidebar{display:none!important}
html.force-cel .bottom-nav{display:flex!important}
html.force-cel .main-area{max-width:520px;margin:0 auto;width:100%;border-left:1.5px solid var(--border);border-right:1.5px solid var(--border)}
html.force-cel .jobs-view{flex-direction:column!important}
html.force-cel .jlist-panel{width:100%!important;min-width:0!important;border-right:none!important;flex:1!important}
html.force-cel .jdetail{display:none!important}
html.force-cel .mob-detail.show{display:flex!important}
html.force-cel .view-scroll{padding:14px 12px}
html.force-pc .sidebar{display:flex!important}
html.force-pc .bottom-nav{display:none!important}
html.force-pc .jobs-view{flex-direction:row!important}
html.force-pc .jlist-panel{width:390px!important;flex:none!important;border-right:1px solid var(--border)!important}
html.force-pc .jdetail{display:flex!important}
html.force-pc .mob-detail{display:none!important}

/* ── Mobile polish ── */
@media (max-width:640px){
  .btn{padding:11px 18px;font-size:14px;min-height:42px}
  .btn-sm{padding:8px 14px;font-size:12px;min-height:36px}
  .btn-xs{min-height:30px}
  .input{padding:11px 14px;font-size:15px;min-height:44px}
  html,body,#app{overflow-x:hidden;max-width:100vw}
  .modal{border-radius:22px 22px 0 0}
}
@media(max-width:400px){
  .modal{margin:0;border-radius:20px 20px 0 0;max-height:96dvh}
  .mhdr{padding:12px 14px}
  .mbody{padding:10px 14px}
}