/* Visual alinhado ao sistema Combactec: menu lateral grafite, destaque vermelho, Nunito + Bebas Neue */
:root{
  --bg:#F1F3F2; --card:#FFFFFF; --ink:#212529; --muted:#6C757D; --line:#E2E6EA;
  --brand:#A4161A; --brand-dark:#7F1114; --brand-soft:#FBE9E9;
  --side:#2B2B2B; --side-ink:#E4E4E4; --side-muted:#8C8C8C; --side-hover:#383838;
  --in:#2B8A5E; --in-soft:#E1F3EA; --out:#A4161A; --out-soft:#FBE9E9;
  --gold:#B26B00; --gold-soft:#FDF1DC; --focus:#2D6CDF;
  --verde:#3BAA72; --laranja:#F4A261; --azul:#3B5BDB; --vermelho:#E03131;
  --sombra:0 1px 3px rgba(20,20,20,.06),0 1px 2px rgba(20,20,20,.04);
  --side-w:250px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;line-height:1.45}
button,input,select{font:inherit;color:inherit}
input[type=checkbox]{accent-color:var(--brand);width:18px;height:18px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1{font-size:1.15rem;font-weight:800;margin:0}
h2{font-size:1rem;font-weight:800;margin:0 0 6px}
.hidden{display:none!important}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.85rem}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--side)}
.login-card{width:min(400px,100%);padding:28px 24px}
.login-logo{display:block;width:min(260px,80%);height:auto;margin:0 auto 18px}
.login-card h1{font-family:"Bebas Neue","Nunito",sans-serif;font-weight:400;font-size:2rem;letter-spacing:.02em;text-align:center}
.login-card>.note{text-align:center;margin-top:2px}

/* ---------- Estrutura: menu lateral + conteúdo ---------- */
.app{min-height:100vh}
.side{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;z-index:20;overflow-y:auto}
.side-logo{background:#fff;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.side-logo img{display:block;width:100%;height:auto;max-width:210px;margin:0 auto}
#nav{flex:1;padding:6px 14px 14px 0}
.nav-sec{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--side-muted);padding:18px 20px 8px}
#nav button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;color:var(--side-ink);font-weight:700;font-size:.98rem;padding:12px 20px;border-radius:0 26px 26px 0;cursor:pointer;text-align:left}
#nav button:hover{background:var(--side-hover)}
#nav button[aria-current="page"]{background:var(--brand);color:#fff}
#nav svg,.topbar h1 svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side-foot{border-top:1px solid #3d3d3d;padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.side-user strong{display:block;font-size:.92rem}
.side-user small{display:block;color:var(--side-muted);font-size:.78rem;margin-bottom:4px}
.side-link{background:none;border:0;padding:2px 0;color:var(--side-muted);cursor:pointer;font-size:.86rem;font-weight:600}
.side-link:hover{color:#fff}
.side-fundo{display:none}

.main{margin-left:var(--side-w);min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:14px 24px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.topbar h1{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.topbar h1 svg{color:var(--brand);width:22px;height:22px}
.topdate{color:var(--muted);font-size:.85rem;white-space:nowrap}
.menu-btn{display:none;background:none;border:0;padding:6px;margin-left:-6px;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.wrap{width:100%;max-width:1100px;padding:22px 24px calc(32px + env(safe-area-inset-bottom,0px))}

@media (max-width:900px){
  .side{transform:translateX(-100%);transition:transform .2s ease;box-shadow:none}
  .app.menu-aberto .side{transform:none;box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .app.menu-aberto .side-fundo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:15}
  .main{margin-left:0}
  .menu-btn{display:block}
  .topbar{padding-left:16px;padding-right:16px}
  .wrap{padding-left:16px;padding-right:16px;padding-top:16px}
}
@media (max-width:600px){ .topdate{display:none} }

/* ---------- Cartões e formulários ---------- */
.card{background:var(--card);border-radius:12px;box-shadow:var(--sombra);padding:18px;margin-bottom:16px}
label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin:10px 0 4px}
label.check{display:flex;gap:8px;align-items:center;color:var(--ink);margin-top:12px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=time],input[type=month],input[type=date],select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#F8F9FA}
input:focus,select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(164,22,26,.12)}
.row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.row>*{flex:1;min-width:150px}
.row>.grow0{flex:0 0 auto;min-width:0}
.actions{margin-top:14px}
.actions>*{flex:0 0 auto;min-width:0}

.btn{padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700}
.btn:hover{background:#F8F9FA}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.small{padding:7px 12px;font-size:.85rem}
.btn.danger{color:var(--out)}
.btn.full{width:100%;margin-top:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Bater ponto ---------- */
.ponto-card{max-width:560px}
.clock{font-family:"Bebas Neue","Nunito",sans-serif;font-size:clamp(5rem,26vw,9rem);line-height:.9;margin:6px 0 4px;letter-spacing:.01em}
.date{color:var(--muted);font-weight:600}
.punch{width:100%;margin-top:20px;padding:22px;border:0;border-radius:12px;font-family:"Bebas Neue","Nunito",sans-serif;font-size:1.9rem;letter-spacing:.04em;cursor:pointer;color:#fff;transition:transform .08s}
.punch:active{transform:scale(.98)}
.punch.in{background:var(--in)} .punch.out{background:var(--out)}
.punch:disabled{opacity:.5;cursor:not-allowed}
.stamps{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.stamp{padding:6px 10px;border-radius:8px;font-weight:700;font-size:.95rem}
.stamp.in{background:var(--in-soft);color:var(--in)} .stamp.out{background:var(--out-soft);color:var(--out)}

/* ---------- Indicadores (como o dashboard do sistema) ---------- */
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.totals:empty{display:none}
.tot{background:var(--card);border-radius:12px;box-shadow:var(--sombra);border-left:5px solid var(--line);padding:16px 18px}
.tot b{display:block;font-family:"Bebas Neue","Nunito",sans-serif;font-weight:400;font-size:2.3rem;line-height:1;letter-spacing:.01em}
.tot span{display:block;margin-top:6px;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tot.c-verde{border-left-color:var(--verde)} .tot.c-azul{border-left-color:var(--azul)}
.tot.c-laranja{border-left-color:var(--laranja)} .tot.c-vermelho{border-left-color:var(--vermelho)}
.tot.pay{border-left-color:var(--gold)} .tot.pay b{color:var(--gold)}
.tot.neg b{color:var(--out)}

/* ---------- Tabelas e listas ---------- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:800;color:var(--muted);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}
tr.day.editavel{cursor:pointer}
tr.day.editavel:hover td{background:#F8F9FA}
tr.ign td{color:var(--muted);opacity:.6}
.tag{font-size:.75rem;font-weight:700;padding:2px 7px;border-radius:6px;background:#EEF0F2;color:var(--muted);margin-left:4px}
.tag.f{background:var(--gold-soft);color:var(--gold)}
.pos{color:var(--in);font-weight:700} .negv{color:var(--out);font-weight:700}

.emp{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.emp:last-child{border-bottom:0}
.emp small{color:var(--muted);display:block}
.emp .btn{margin-left:4px}
.note{font-size:.85rem;color:var(--muted)}
.erro{color:var(--out);font-size:.9rem;font-weight:600}
.msg{padding:12px 14px;border-radius:10px;background:var(--gold-soft);border-left:5px solid var(--laranja);margin-bottom:16px;font-size:.92rem;font-weight:600}
.msg.ok{background:var(--in-soft);border-left-color:var(--verde)}
.fer{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}

dialog{border:0;border-radius:14px;padding:0;background:var(--card);color:var(--ink);width:min(460px,94vw)}
dialog::backdrop{background:rgba(20,20,20,.55)}
.dlg{padding:20px}
.bat{display:flex;gap:8px;align-items:center;margin-top:8px}
.bat span{width:64px;font-size:.85rem;color:var(--muted)}

.escala{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.escala div{display:flex;flex-direction:column;gap:4px}
.escala span{font-size:.8rem;font-weight:700;color:var(--muted);text-align:center}
.escala input{padding:8px 4px!important;text-align:center}
@media (max-width:560px){.escala{grid-template-columns:repeat(4,minmax(0,1fr))}}
.alerta{color:var(--out);font-size:.75rem;display:block}

.passos{padding-left:20px;margin:8px 0}
.passos li{margin-bottom:8px}
.btn.full.instalar{margin-top:10px}
@media (prefers-reduced-motion:reduce){.punch,.side{transition:none}}