/* Forwartrans HR · web/css/app.css — the app shell and every employee screen.
   Reads only the tokens of tokens.css. Layout is one column, max 520px, thumb-reachable:
   the primary action of every screen sits in the lower half of a phone, the tab bar is fixed at the
   bottom, and nothing needs a second hand. */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body{ margin:0 }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-texto); font-size:var(--t-m); line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{ margin:0; font-family:var(--f-titulo) }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums }
button{ font-family:inherit; font-size:inherit; cursor:pointer; border:0 }
:focus-visible{ outline:none; box-shadow:var(--foco) }
[hidden]{ display:none !important }
.oculto-visual{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ── header ─────────────────────────────────────────────────────────────── */
.hd{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:calc(var(--e-3) + env(safe-area-inset-top)) var(--e-4) var(--e-3);
  display:flex; align-items:center; gap:var(--e-3); position:sticky; top:0; z-index:10;
}
.hd .lg{
  width:38px; height:38px; border-radius:var(--r-s); background:var(--red); color:#fff;
  display:grid; place-items:center; font-family:var(--f-titulo); font-weight:700; font-size:13px;
  flex:none; overflow:hidden;
}
.hd .lg img{ width:100%; height:100%; object-fit:contain; background:#fff }
.hd .who{ flex:1; min-width:0 }
.hd .who b{ display:block; font-size:var(--t-m); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hd .who span{ font-size:var(--t-xs); color:var(--ink-3); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.net{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--good-soft); color:var(--good); white-space:nowrap }
.net.off{ background:var(--warn-soft); color:var(--warn) }
.sair{ background:none; border:1px solid var(--line); border-radius:var(--r-s); min-height:40px; padding:0 12px; font-size:var(--t-xs); font-weight:600; color:var(--ink-2) }
.sair:active{ background:var(--bg) }

.wrap{ padding:var(--e-4) var(--e-4) 96px; max-width:520px; margin:0 auto }

/* ── login / forced password change ─────────────────────────────────────── */
.plena{ position:fixed; inset:0; z-index:60; background:var(--bg); overflow-y:auto;
        display:grid; place-items:center; padding:var(--e-5) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom)); }
.caixa{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
        border-radius:var(--r-l); box-shadow:var(--sh); padding:var(--e-5) var(--e-4); }
.caixa .lg-big{ width:60px; height:60px; border-radius:16px; font-size:19px; margin:0 auto var(--e-3);
                background:var(--red); color:#fff; display:grid; place-items:center;
                font-family:var(--f-titulo); font-weight:700 }
.caixa h1{ font-size:var(--t-xl); text-align:center }
.caixa .sub{ color:var(--ink-3); font-size:var(--t-s); margin:var(--e-1) 0 var(--e-4); text-align:center }
.erro{ color:var(--bad); font-size:var(--t-s); font-weight:600; min-height:20px; margin-top:var(--e-3) }
.nota{ font-size:var(--t-xs); color:var(--ink-3); line-height:1.6; margin-top:var(--e-3) }
.regras{ font-size:var(--t-xs); color:var(--ink-2); margin:var(--e-2) 0 0; padding-left:var(--e-4); line-height:1.7 }

/* ── forms ──────────────────────────────────────────────────────────────── */
label{ display:block; font-size:var(--t-s); color:var(--ink-2); font-weight:600; margin:var(--e-3) 0 var(--e-1) }
input,select,textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--r-m); padding:14px;
  font-family:inherit; font-size:16px;    /* 16px keeps iOS Safari from zooming on focus */
  background:var(--surface); color:var(--ink); min-height:var(--alvo);
}
input[type=file]{ padding:12px; font-size:var(--t-s) }
.btn{
  background:var(--blue); color:#fff; border-radius:var(--r-m); min-height:var(--alvo);
  padding:14px 18px; font-weight:600; font-size:var(--t-m); width:100%;
}
.btn:active{ filter:brightness(.94) }
.btn:disabled{ opacity:.45 }
.btn.ghost{ background:var(--surface); color:var(--ink-2); border:1px solid var(--line) }
.btn.perigo{ background:var(--red) }

/* ── cards ──────────────────────────────────────────────────────────────── */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
       padding:var(--e-4); box-shadow:var(--sh); margin-bottom:var(--e-3) }
.card h2{ font-size:var(--t-s); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2);
          display:flex; align-items:center; gap:var(--e-2); margin-bottom:var(--e-3) }
.card h2 .sp{ flex:1 }
.kv{ display:flex; justify-content:space-between; gap:var(--e-3); padding:11px 0;
     border-top:1px solid var(--line); font-size:var(--t-m) }
.kv:first-of-type{ border-top:0 }
.kv .k{ color:var(--ink-2) }
.kv .v{ font-family:var(--f-mono); font-weight:600; text-align:right }
.pos{ color:var(--good) } .neg{ color:var(--bad) }
.vazio{ color:var(--ink-3); font-size:var(--t-s); padding:var(--e-2) 0 }

/* ── the big button — 90% of the product ────────────────────────────────── */
.big{
  width:100%; border-radius:var(--r-l); padding:26px 20px; color:#fff; box-shadow:var(--sh);
  display:flex; flex-direction:column; align-items:center; gap:var(--e-1);
  margin-bottom:var(--e-3); background:var(--good); transition:transform .12s, filter .12s;
  min-height:150px;
}
.big:active{ transform:scale(.985); filter:brightness(.95) }
.big.sair-agora{ background:var(--red) }
.big:disabled{ background:var(--ink-3); opacity:.75 }
.big .lbl{ font-family:var(--f-titulo); font-weight:700; font-size:var(--t-xl); letter-spacing:-.01em }
.big .tmr{ font-family:var(--f-mono); font-weight:600; font-size:var(--t-timer); line-height:1.1; letter-spacing:-.02em }
.big .sub{ font-size:var(--t-s); opacity:.95; text-align:center }

.linha2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2); margin-bottom:var(--e-3) }
.sbtn{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
       min-height:var(--alvo); padding:14px 12px; color:var(--ink-2); font-weight:600;
       font-size:var(--t-s); box-shadow:var(--sh);
       display:flex; flex-direction:column; align-items:center; gap:var(--e-1) }
.sbtn:active{ background:var(--bg) }
.sbtn .ic{ font-size:20px }
.sbtn:disabled{ opacity:.45 }
.sbtn.ligado{ border-color:var(--warn); background:var(--warn-soft); color:var(--warn) }

/* ── banners (queue, gate, reminders) ───────────────────────────────────── */
.aviso{ display:flex; align-items:flex-start; gap:var(--e-3); border-radius:var(--r-m);
        padding:14px; font-size:var(--t-s); margin-bottom:var(--e-3);
        background:var(--surface); border:1px solid var(--line); line-height:1.45 }
.aviso .ic{ font-size:22px; flex:none; line-height:1.2 }
.aviso .tx{ flex:1 }
.aviso .tx b{ display:block }
.aviso .act{ flex:none; align-self:center; background:var(--surface); border:1px solid var(--line);
             border-radius:var(--r-s); min-height:44px; padding:10px 14px; font-weight:600;
             font-size:var(--t-s); color:var(--ink-2) }
.aviso.bom{ background:var(--good-soft); border-color:var(--good-line); color:var(--good) }
.aviso.atencao{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn) }
.aviso.mau{ background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad) }
.aviso.info{ background:var(--blue-soft); border-color:#cdd9ef; color:var(--blue-dk) }
.aviso.mau .act, .aviso.atencao .act, .aviso.info .act{ color:inherit; border-color:currentColor }

/* ── the day's timeline ─────────────────────────────────────────────────── */
.tl{ display:flex; flex-direction:column }
.tl .e{ display:flex; align-items:center; gap:var(--e-3); padding:10px 0 }
.tl .e .dot{ width:11px; height:11px; border-radius:50%; flex:none; position:relative }
.tl .e .dot::after{ content:""; position:absolute; left:5px; top:11px; width:1px; height:26px; background:var(--line) }
.tl .e:last-child .dot::after{ display:none }
.tl .e b{ font-family:var(--f-mono); font-weight:600; width:56px; flex:none }
.tl .e span{ color:var(--ink-2); font-size:var(--t-s); flex:1 }
.tl .e em{ font-style:normal; font-size:11px; color:var(--ink-3) }
.d-in{ background:var(--good) } .d-out{ background:var(--red) } .d-p{ background:var(--warn) }

/* ── month sheet / lists ────────────────────────────────────────────────── */
.mes-dia{ display:flex; align-items:center; gap:var(--e-3); padding:11px 0; border-top:1px solid var(--line) }
.mes-dia:first-child{ border-top:0 }
.mes-dia .d{ font-family:var(--f-mono); width:76px; flex:none; color:var(--ink-2); font-size:var(--t-s) }
.mes-dia .c{ flex:1; font-size:var(--t-s) }
.mes-dia .s{ font-family:var(--f-mono); font-weight:600; font-size:var(--t-s) }
.mes-dia.hoje{ background:var(--blue-soft); border-radius:var(--r-s); padding-left:var(--e-2); padding-right:var(--e-2) }

.etq{ font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-block; white-space:nowrap }
.etq.azul{ background:var(--blue-soft); color:var(--blue-dk) }
.etq.bom{ background:var(--good-soft); color:var(--good) }
.etq.atencao{ background:var(--warn-soft); color:var(--warn) }
.etq.mau{ background:var(--bad-soft); color:var(--bad) }

.item{ display:flex; gap:var(--e-3); align-items:center; padding:13px 0; border-top:1px solid var(--line) }
.item:first-child{ border-top:0 }
.item .txt{ flex:1; min-width:0 }
.item .txt b{ display:block; font-weight:600 }
.item .txt small{ color:var(--ink-3); font-size:var(--t-xs); font-family:var(--f-mono) }

/* ── tab bar ────────────────────────────────────────────────────────────── */
.tabbar{ position:fixed; bottom:0; left:0; right:0; background:var(--surface);
         border-top:1px solid var(--line); display:flex; z-index:11;
         padding:6px 6px calc(6px + env(safe-area-inset-bottom)) }
.tabbar a{ flex:1; background:none; padding:9px 4px; border-radius:var(--r-s); color:var(--ink-3);
           font-size:11px; font-weight:600; text-decoration:none; position:relative;
           display:flex; flex-direction:column; align-items:center; gap:3px; min-height:52px; justify-content:center }
.tabbar a .ic{ font-size:20px }
.tabbar a.on{ color:var(--blue); background:var(--blue-soft) }
.tabbar a .badge{ position:absolute; top:2px; right:calc(50% - 22px); min-width:18px; height:18px;
                  border-radius:9px; background:var(--red); color:#fff; font-size:10px;
                  display:grid; place-items:center; padding:0 4px }

/* ── toast ──────────────────────────────────────────────────────────────── */
.toast{ position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(14px);
        background:var(--ink); color:#fff; padding:14px 18px; border-radius:var(--r-m);
        font-size:var(--t-s); z-index:40; opacity:0; pointer-events:none; transition:all .25s;
        max-width:92vw; text-align:center; line-height:1.45 }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0) }
.toast.mau{ background:var(--bad) } .toast.bom{ background:var(--good) }

/* ── layout utilities ───────────────────────────────────────────────────── */
/* These exist because the CSP is `style-src 'self'` with no 'unsafe-inline':
   a style="..." ATTRIBUTE cannot be rescued by a hash or a nonce, so the
   browser drops it silently and the spacing is simply lost in production.
   Anything static belongs in a class here. Anything genuinely dynamic (a
   per-type colour, say) must be applied from JS with element.style.setProperty,
   which the CSP does not block — it is markup, not CSSOM, that is forbidden. */
.mt-0{ margin-top:0 } .mt-6{ margin-top:6px } .mt-8{ margin-top:8px } .mt-16{ margin-top:16px }
.mb-14{ margin-bottom:14px }
.ta-dir{ text-align:right }
.ink-3{ color:var(--ink-3) }
.h-ecra{ font-size:17px; margin-bottom:8px }
.lin-check{ display:flex; align-items:center; gap:10px; margin-top:14px }
.check-g{ width:24px; height:24px; min-height:0 }
.col-acoes{ margin-top:16px; display:grid; gap:10px }
.btn-med{ min-height:44px; padding:10px 16px; width:auto }
.sbtn-peq{ min-height:40px; padding:8px 12px }
.nav-mes{ grid-template-columns:auto 1fr auto; align-items:center }
.titulo-mes{ text-align:center; font-family:var(--f-titulo); font-weight:700 }