/* mobile/assets/css/mobile.css — VAREDUX v12 Mobile PWA
   Touch-first, viewport-fit=cover, bottom nav, câmera overlay
   Importa design-system.css via /design-system.css (shared)       */

/* ── RESET MOBILE ──────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:15px; overflow:hidden; height:100%; -webkit-text-size-adjust:100%; }
body { font-family:-apple-system,'DM Sans',sans-serif; background:var(--bg); color:var(--t1);
       height:100%; overflow:hidden; -webkit-font-smoothing:antialiased; }

/* ── SHELL ─────────────────────────────────────────────────────── */
.m-shell    { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
.m-header   { background:var(--bg2); border-bottom:1px solid var(--bd); padding:.65rem 1rem;
              display:flex; align-items:center; justify-content:space-between; flex-shrink:0; min-height:54px; }
.m-title    { font-size:1rem; font-weight:700; color:var(--t1); }
.m-sub      { font-size:.7rem; color:var(--t3); margin-top:.05rem; }
.m-content  { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.m-nav      { background:var(--bg2); border-top:1px solid var(--bd); display:flex;
              justify-content:space-around; flex-shrink:0;
              padding-bottom:env(safe-area-inset-bottom,0); }
.m-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:.18rem;
              padding:.6rem .25rem; cursor:pointer; transition:all .13s; color:var(--t3);
              min-height:50px; -webkit-tap-highlight-color:transparent; }
.m-nav-item.active { color:var(--g); }
.m-nav-icon { font-size:1.3rem; line-height:1; }
.m-nav-lbl  { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }

/* ── SCREENS ───────────────────────────────────────────────────── */
.m-screen   { display:none; padding:1rem; }
.m-screen.active { display:block; animation:mFadeIn .2s ease; }
@keyframes mFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── BUTTONS ───────────────────────────────────────────────────── */
.m-btn      { display:flex; align-items:center; justify-content:center; gap:.4rem;
              padding:.85rem 1.1rem; border-radius:12px; font-size:.9rem; font-weight:700;
              cursor:pointer; border:1px solid transparent; font-family:inherit;
              transition:all .13s; user-select:none; min-height:52px; -webkit-tap-highlight-color:transparent; }
.m-btn:active { transform:scale(.97); }
.m-btn-p    { background:var(--g); color:#040E18; }
.m-btn-o    { background:var(--gs); color:var(--g); border-color:rgba(0,233,107,.3); }
.m-btn-gh   { background:var(--bg3); color:var(--t1); border-color:var(--bd); }
.m-btn-red  { background:var(--reddim); color:var(--red); }
.m-btn-full { width:100%; }

/* ── FORMS ─────────────────────────────────────────────────────── */
.m-fi       { width:100%; padding:.78rem 1rem; background:var(--bg3); border:1.5px solid var(--bd);
              border-radius:12px; color:var(--t1); font-size:1rem; outline:none;
              transition:border-color .15s; font-family:inherit; -webkit-appearance:none; }
.m-fi:focus { border-color:var(--g); }
.m-fi::placeholder { color:var(--t3); }
.m-fg       { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.m-fg label { font-size:.78rem; font-weight:700; color:var(--t2); padding-left:.15rem; }

/* ── CARDS ─────────────────────────────────────────────────────── */
.m-card        { background:var(--bg2); border:1px solid var(--bd); border-radius:14px;
                 padding:1rem; margin-bottom:.75rem; }
.m-card-title  { font-size:.9rem; font-weight:700; color:var(--t1); margin-bottom:.6rem; }

/* ── METRIC CARDS ──────────────────────────────────────────────── */
.m-mc   { background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:.9rem; }
.m-mc-v { font-size:2rem; font-weight:900; font-family:'DM Mono',monospace;
          letter-spacing:-.04em; line-height:1; }
.m-mc-l { font-size:.65rem; font-weight:700; color:var(--t3); text-transform:uppercase;
          letter-spacing:.5px; margin-top:.25rem; }
.m-g2   { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }

/* ── CHIPS ─────────────────────────────────────────────────────── */
.m-chip   { display:inline-flex; align-items:center; gap:3px; padding:4px 10px;
            border-radius:20px; font-size:.7rem; font-weight:700; }
.m-chip-g { background:var(--gs);      color:var(--g);    border:1px solid rgba(0,233,107,.2); }
.m-chip-r { background:var(--reddim);  color:var(--red);  border:1px solid rgba(255,79,90,.2); }
.m-chip-a { background:var(--ambdim);  color:var(--amb);  border:1px solid rgba(255,176,32,.2); }
.m-chip-b { background:var(--bluedim); color:var(--blue); border:1px solid rgba(74,173,255,.2); }

/* ── PROGRESS ──────────────────────────────────────────────────── */
.m-prog { height:8px; background:var(--bg4); border-radius:20px; overflow:hidden; }
.m-pb   { height:100%; border-radius:20px; transition:width .5s ease; }
.m-pb-g { background:var(--g); }
.m-pb-a { background:var(--amb); }
.m-pb-r { background:var(--red); }

/* ── LIST ITEMS ────────────────────────────────────────────────── */
.m-list-item  { display:flex; align-items:center; gap:.75rem; padding:.9rem 0;
                border-bottom:1px solid var(--bd); cursor:pointer; }
.m-list-item:last-child { border-bottom:none; }
.m-list-icon  { width:42px; height:42px; border-radius:11px; display:flex;
                align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.m-list-main  { flex:1; min-width:0; }
.m-list-title { font-size:.88rem; font-weight:600; color:var(--t1);
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-list-sub   { font-size:.73rem; color:var(--t3); margin-top:.1rem; }
.m-list-end   { color:var(--t3); font-size:.8rem; flex-shrink:0; }

/* ── CAMERA / OCR ──────────────────────────────────────────────── */
.m-cam-wrap    { border-radius:16px; overflow:hidden; background:var(--bg3);
                 border:2px dashed var(--bd); min-height:280px; display:flex;
                 align-items:center; justify-content:center; position:relative; }
.m-cam-wrap video { width:100%; height:100%; object-fit:cover; }
.m-cam-overlay { position:absolute; inset:0; display:flex; align-items:center;
                 justify-content:center; pointer-events:none; }
.m-scan-frame  { width:70%; aspect-ratio:4/3; border:2px solid var(--g); border-radius:8px;
                 box-shadow:0 0 0 1000px rgba(0,0,0,.4); position:relative; }
.m-scan-corner { position:absolute; width:20px; height:20px; border-color:var(--g); border-style:solid; border-width:0; }
.m-scan-corner.tl  { top:0;    left:0;  border-top-width:3px;    border-left-width:3px;  border-radius:4px 0 0 0; }
.m-scan-corner.tr  { top:0;    right:0; border-top-width:3px;    border-right-width:3px; border-radius:0 4px 0 0; }
.m-scan-corner.bl  { bottom:0; left:0;  border-bottom-width:3px; border-left-width:3px;  border-radius:0 0 0 4px; }
.m-scan-corner.br  { bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; border-radius:0 0 4px 0; }
@keyframes scanLine { 0%,100%{top:15%} 50%{top:80%} }
.m-scan-line   { position:absolute; left:10%; right:10%; height:2px;
                 background:var(--g); opacity:.75; animation:scanLine 2s ease-in-out infinite;
                 box-shadow:0 0 8px var(--g); }

/* ── RESULT GRID ───────────────────────────────────────────────── */
.m-result-score { font-size:3.5rem; font-weight:900; font-family:'DM Mono',monospace;
                  text-align:center; line-height:1; }
.m-q-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(36px,1fr));
            gap:4px; margin:.75rem 0; }
.m-q-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
            border-radius:6px; font-size:.65rem; font-weight:700; }
.m-q-ok   { background:rgba(0,233,107,.15);  color:var(--g);   border:1px solid rgba(0,233,107,.25); }
.m-q-no   { background:rgba(255,79,90,.15);  color:var(--red); border:1px solid rgba(255,79,90,.25); }

/* ── BOTTOM SHEET ──────────────────────────────────────────────── */
.m-sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200; display:none; }
.m-sheet-overlay.open { display:block; }
.m-sheet { position:fixed; bottom:0; left:0; right:0; background:var(--bg2);
           border-radius:20px 20px 0 0; padding:1.2rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom,0));
           z-index:201; transform:translateY(100%); transition:transform .28s cubic-bezier(.32,0,.67,0);
           max-height:90dvh; overflow-y:auto; }
.m-sheet.open  { transform:none; transition:transform .32s cubic-bezier(.33,1,.68,1); }
.m-sheet-handle{ width:40px; height:4px; background:var(--bd2); border-radius:2px; margin:0 auto 1rem; }
.m-sheet-title { font-size:1rem; font-weight:800; color:var(--t1); margin-bottom:.85rem; }

/* ── ALERTS ────────────────────────────────────────────────────── */
.m-alert { padding:.85rem 1rem; border-radius:12px; border-left:3px solid;
           font-size:.85rem; margin-bottom:.7rem; }
.m-al-g  { background:var(--gs);      border-color:var(--g); }
.m-al-r  { background:var(--reddim);  border-color:var(--red); }
.m-al-a  { background:var(--ambdim);  border-color:var(--amb); }
.m-al-b  { background:var(--bluedim); border-color:var(--blue); }

/* ── TABS ──────────────────────────────────────────────────────── */
.m-tabs { display:flex; background:var(--bg3); border-radius:10px; padding:3px; margin-bottom:1rem; }
.m-tab  { flex:1; padding:.52rem .4rem; text-align:center; font-size:.75rem; font-weight:600;
          border-radius:8px; cursor:pointer; color:var(--t3); transition:all .15s; }
.m-tab.active { background:var(--bg2); color:var(--t1); box-shadow:0 2px 6px rgba(0,0,0,.3); }

/* ── AUTH ──────────────────────────────────────────────────────── */
.m-auth-wrap  { min-height:100dvh; display:flex; flex-direction:column;
                align-items:center; justify-content:center; padding:1.5rem 1.2rem; }
.m-auth-logo  { width:64px; height:64px; background:var(--g); border-radius:18px;
                display:flex; align-items:center; justify-content:center;
                font-size:2rem; font-weight:900; color:#040E18; margin:0 auto 1.25rem; }
.m-auth-title { font-size:1.6rem; font-weight:900; text-align:center; margin-bottom:.3rem; }
.m-auth-sub   { font-size:.85rem; color:var(--t2); text-align:center; margin-bottom:1.75rem; }

/* ── FAB ───────────────────────────────────────────────────────── */
.m-fab { position:fixed; bottom:calc(70px + env(safe-area-inset-bottom,0)); right:1.2rem;
         width:58px; height:58px; background:var(--g); border-radius:50%;
         display:flex; align-items:center; justify-content:center; font-size:1.6rem;
         box-shadow:0 6px 20px rgba(0,233,107,.35); cursor:pointer; z-index:100;
         transition:transform .15s; border:none; -webkit-tap-highlight-color:transparent; }
.m-fab:active { transform:scale(.93); }

/* ── TOAST ─────────────────────────────────────────────────────── */
#m-toasts   { position:fixed; top:1rem; left:1rem; right:1rem; z-index:500;
              display:flex; flex-direction:column; gap:.35rem; pointer-events:none; }
.m-toast    { padding:.75rem 1rem; border-radius:12px; font-size:.85rem; font-weight:600;
              box-shadow:0 8px 24px rgba(0,0,0,.4); animation:mToastIn .28s ease; }
.m-toast-g  { background:var(--bg2); border:1px solid rgba(0,233,107,.35);  color:var(--g); }
.m-toast-r  { background:var(--bg2); border:1px solid rgba(255,79,90,.35);  color:var(--red); }
.m-toast-a  { background:var(--bg2); border:1px solid rgba(255,176,32,.35); color:var(--amb); }
.m-toast-b  { background:var(--bg2); border:1px solid rgba(74,173,255,.35); color:var(--blue); }
@keyframes mToastIn { from{opacity:0;transform:translateY(-8px) scale(.96)} to{opacity:1;transform:none} }

/* ── OCR STEPS ─────────────────────────────────────────────────── */
.m-ocr-steps { display:flex; flex-direction:column; gap:.5rem; padding:.75rem 0; }
.m-ocr-step  { display:flex; align-items:center; gap:.65rem; font-size:.82rem; color:var(--t2); }
.m-ocr-dot   { width:20px; height:20px; border-radius:50%; border:2px solid var(--bd);
               display:flex; align-items:center; justify-content:center; font-size:.65rem; flex-shrink:0; }
.m-ocr-dot.done   { background:var(--g); border-color:var(--g); color:#040E18; }
.m-ocr-dot.active { border-color:var(--g); animation:mPulse 1s ease-in-out infinite; }
@keyframes mPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── PORTAL DO ALUNO ───────────────────────────────────────────── */
.m-portal-code { background:var(--bg3); border:2px solid var(--g); border-radius:14px;
                 padding:1rem; text-align:center; font-size:2rem; font-weight:900;
                 font-family:'DM Mono',monospace; color:var(--g); letter-spacing:.18em;
                 margin-bottom:.8rem; cursor:pointer; }

/* ── SAFE AREAS ────────────────────────────────────────────────── */
.m-safe-top    { padding-top:env(safe-area-inset-top,0); }
.m-safe-bottom { padding-bottom:env(safe-area-inset-bottom,0); }
.m-divider     { display:flex; align-items:center; gap:.6rem; color:var(--t3); font-size:.75rem; margin:.75rem 0; }
.m-divider::before,.m-divider::after { content:''; flex:1; height:1px; background:var(--bd); }