/* Celular: barra de baixo do escritório, tabelas em cartões, tela Entrar e app do campo. */

/* ----- Abertura e Entrar ----- */
.abrindo{min-height:100vh; display:grid; place-items:center; background:var(--side)}
.abrindo .mk{font-family:var(--f-display); font-weight:200; font-size:30px; color:var(--side-ink); animation:rise .6s ease both}
.abrindo .mk b{font-weight:600; color:var(--gold)}
.entrar{display:flex; flex-direction:column; gap:14px; width:100%; max-width:400px}
.entrar h1{font-size:34px; font-weight:300}
.entrar-form{display:flex; flex-direction:column; gap:10px}
.entrar .field input{font-size:17px; padding:12px 14px}
.entrar .codigo{font-family:var(--f-mono); letter-spacing:.5em; text-align:center; font-size:24px!important}
.btn.grande{padding:13px 18px; font-size:16px; border-radius:12px; width:100%}
.ou{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px}
.ou::before,.ou::after{content:""; flex:1; height:1px; background:var(--line)}
#gBotao{display:flex; justify-content:center}

/* ----- Moldura do escritório ----- */
.top-marca{display:none; font-family:var(--f-display); font-weight:200; font-size:18px}
.top-marca b{font-weight:600; color:var(--accent)}
.me{align-items:flex-start}
.me > div{display:flex; flex-direction:column; gap:2px}
.sair{all:unset; cursor:pointer; font-size:12px; color:var(--side-muted)}
.sair:hover{color:var(--side-ink)}
.b-nav{display:none}

@media (max-width:900px){
  .top-marca{display:inline}
  .top .seg{order:5; width:100%; justify-content:center}
  .eye span{display:none}
  .eye{padding:6px 9px}
  .main{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .b-nav{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:20; background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px)}
  .b-nav button{all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 0 8px; font-size:11.5px; color:var(--muted); position:relative}
  .b-nav button[aria-current="page"]{color:var(--accent); font-weight:600}
  .b-nav svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7}
  .b-nav .tag{position:absolute; top:4px; left:calc(50% + 6px); font-size:10.5px; background:var(--bad); color:#fff; border-radius:10px; padding:0 5px; font-weight:600}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .pix-lista,.conf-lista{grid-template-columns:minmax(0,1fr)}
  .solta{grid-template-columns:auto minmax(0,1fr)}
  .solta .btn{grid-column:1 / -1}
  .form-grid.tres{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi.hero{grid-column:1 / -1}
  .kpi .v{font-size:21px}
  .head h1{font-size:24px}
}

/* ----- Tabelas viram cartões ----- */
@media (max-width:700px){
  .tw{overflow:visible; margin:0}
  table.resp thead{display:none}
  table.resp, table.resp tbody, table.resp tfoot, table.resp tr, table.resp td{display:block; width:100%}
  table.resp tr{border:1px solid var(--line); border-radius:11px; padding:6px 12px; margin-bottom:10px; background:var(--surface)}
  table.resp tbody tr:hover{background:var(--surface)}
  table.resp td{border:0; padding:5px 0; display:grid; grid-template-columns:minmax(90px,38%) minmax(0,1fr); gap:10px; text-align:left!important; white-space:normal!important}
  table.resp td::before{content:attr(data-l); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-top:2px}
  table.resp td:not([data-l])::before, table.resp td[data-l=""]::before{content:none}
  table.resp td:not([data-l]), table.resp td[data-l=""]{grid-template-columns:minmax(0,1fr)}
  table.resp td .acts{justify-content:flex-start}
  table.resp tfoot tr{background:var(--surface-2)}
  .crew label,.crew.com-he label{grid-template-columns:22px minmax(0,1fr) 64px 92px; gap:8px}
  .crew-cab{grid-template-columns:22px minmax(0,1fr) 64px 92px; gap:8px}
  .gantt{grid-template-columns:minmax(120px,160px) minmax(480px,1fr); overflow-x:auto}
}

/* ----- App do campo ----- */
.f-top .f-obra{display:flex; flex-direction:column; min-width:0}
.f-rede{all:unset; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:12px; padding:5px 10px; border-radius:999px; background:var(--side-hover); color:var(--side-ink); flex:none}
.f-rede svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8}
.f-rede.ok{color:#8fd3a9} .f-rede.pend{color:#f0c06d} .f-rede.off{color:#f29a91}
.f-aviso{background:var(--warn-soft); color:var(--ink); font-size:13px; padding:9px 16px; border-bottom:1px solid var(--line)}
.f-aviso.off{background:var(--bad-soft)}
.f-lembrete{display:block; width:100%; text-align:left; background:var(--warn-soft); color:var(--ink); font:inherit; font-size:15px; padding:12px 16px; border:0; border-bottom:1px solid var(--line); cursor:pointer}
.field-app.link .dias{display:none}
.f-lembrete b{text-decoration:underline; margin-left:4px}
.f-titulo h1{font-size:25px; font-weight:400}
.f-titulo p{margin:4px 0 0}
.dias{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.dias button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 14px; font-weight:600; cursor:pointer}
.dias button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.outro-dia{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.outro-dia input{border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--surface)}
.enviado{font-size:13.5px; background:var(--ok-soft); border-radius:10px; padding:9px 12px}
.enviado.pend{background:var(--warn-soft)}
.atalhos{display:grid; grid-template-columns:1.4fr 1fr .8fr; gap:8px}
.atalhos .btn{padding:10px 6px; font-size:13.5px; white-space:normal}
.lista-pres h2{margin-bottom:4px}
.lista-pres details summary{cursor:pointer; padding:12px 0 6px; color:var(--muted); font-weight:600; font-size:14px}
.pessoa{border-top:1px solid var(--line)}
.pessoa:first-of-type{border-top:0}
.marca{all:unset; cursor:pointer; display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:center; padding:12px 2px; width:100%; box-sizing:border-box}
.marca .bola{width:28px; height:28px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-weight:700; color:var(--on-accent); transition:background .15s, border-color .15s}
.pessoa.on .marca .bola{background:var(--accent); border-color:var(--accent)}
.marca .nome b{display:block; font-size:16px; font-weight:600}
.marca .nome small{color:var(--muted); font-size:12.5px}
.marca:focus-visible{outline:2px solid var(--accent); border-radius:8px}
.extras{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:0 2px 12px 46px; flex-wrap:wrap}
.he{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.he button{width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); font-size:18px; cursor:pointer}
.he b{min-width:38px; text-align:center; color:var(--ink); font-variant-numeric:tabular-nums}
.meia{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 12px; font-size:13px; cursor:pointer}
.meia.on{background:var(--accent-soft); border-color:var(--accent); font-weight:600}
.f-enviar{position:sticky; bottom:calc(64px + env(safe-area-inset-bottom,0px)); z-index:4; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.12)}
.f-enviar b{display:block; font-size:15px} .f-enviar span{font-size:12.5px; color:var(--muted)}
.f-enviar .btn.grande{width:auto}
.weather button{font-size:14.5px}
.resumo-obra{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; text-align:center}
.resumo-obra span{display:block; font-size:12px; color:var(--muted)}
.resumo-obra b{font-family:var(--f-display); font-size:20px; font-weight:500}
.etapa{display:flex; flex-direction:column; gap:10px}
.modelos-cel{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.modelos-cel button{flex:none; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 14px; cursor:pointer; font-size:13.5px}
.modelos-cel button[aria-selected="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.shot .tirar{color:var(--accent); font-weight:600; position:relative}
.shot.done b,.shot.done span{position:relative; background:rgba(0,0,0,.55); color:#fff; padding:1px 6px; border-radius:5px}
.tipos-oc{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.tipos-oc button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 12px; cursor:pointer; font-size:13.5px}
.tipos-oc button[aria-pressed="true"]{background:var(--bad-soft); border-color:var(--bad); color:var(--bad); font-weight:600}
.ocorrencia{display:flex; flex-direction:column; gap:10px}
.btn.perigo{background:var(--bad); border-color:var(--bad); color:#fff}

/* Ver deitado (item 16) e Lançar avanço (item 6). */
.dica-deitado{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; background:var(--accent-soft); border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:14.5px}
@media (orientation: landscape){ .dica-deitado{display:none} }
.desvirar{position:fixed; z-index:55; right:calc(12px + env(safe-area-inset-right, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow:0 6px 18px rgba(0,0,0,.25)}
.av-previa{font-size:15px; margin:8px 0 0}
.av-lista{margin-top:10px} .av-lista summary{cursor:pointer; font-weight:600; padding:6px 0}