/* ============================================================
 * VISUAL "SUAVE E MODERNO" (item 29, fechado pelo Felipe em 03/11/2026)
 * Escritório (Rafaella, Francys e sócio): fundo quase branco,
 * cartões com sombra leve, cantos redondos, letra Plus Jakarta
 * Sans e amarelo só em detalhes. Claro e escuro (automático ou
 * escolhido no botão da lua). Menu recolhido no botão "Menu".
 * Carregado por último: só troca cores, letras, cantos e o menu.
 * ============================================================ */
:root{
  --bg:#F5F5F2; --surface:#FFFFFF; --surface-2:#EEEDE8; --ink:#1E2125; --muted:#5E6168; --line:#E4E2DB;
  --side:var(--surface); --side-ink:var(--ink); --side-muted:var(--muted); --side-hover:var(--surface-2);
  --amarelo:#E8B23A; --gold:#B8862B; --steel:#2F6690;
  --accent:#1E2125; --on-accent:#FFFFFF; --accent-soft:rgba(232,178,58,.16);
  --ok:#2F7D57; --warn:#A8670A; --bad:#BE4339; --ok-soft:rgba(47,125,87,.11); --warn-soft:rgba(232,178,58,.18); --bad-soft:rgba(190,67,57,.1);
  --plan:#A9ACB1; --shadow:0 1px 2px rgba(20,22,25,.04),0 8px 24px rgba(20,22,25,.06); --shadow-p:0 1px 3px rgba(20,22,25,.12);
  --f-display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --r:20px; --borda:transparent;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121417; --surface:#1B1E22; --surface-2:#262A30; --ink:#ECEDEE; --muted:#A5A9AF; --line:#2C3036;
  --accent:#ECEDEE; --on-accent:#121417; --accent-soft:rgba(232,178,58,.14);
  --ok:#6CC59B; --warn:#E6B55C; --bad:#F08378; --ok-soft:rgba(108,197,155,.12); --warn-soft:rgba(232,178,58,.14); --bad-soft:rgba(240,131,120,.12);
  --plan:#5D646B; --shadow:none; --shadow-p:none; --borda:var(--line); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121417; --surface:#1B1E22; --surface-2:#262A30; --ink:#ECEDEE; --muted:#A5A9AF; --line:#2C3036;
  --accent:#ECEDEE; --on-accent:#121417; --accent-soft:rgba(232,178,58,.14);
  --ok:#6CC59B; --warn:#E6B55C; --bad:#F08378; --ok-soft:rgba(108,197,155,.12); --warn-soft:rgba(232,178,58,.14); --bad-soft:rgba(240,131,120,.12);
  --plan:#5D646B; --shadow:none; --shadow-p:none; --borda:var(--line); color-scheme:dark}
/* A cor das empresas fica nos detalhes (bolinha da escolha e o desenho da faixa), não nos botões. */
body[data-emp]{--accent:var(--ink); --accent-soft:rgba(232,178,58,.16)}
body{background:var(--bg); color:var(--ink); font:16px/1.5 var(--f-body); letter-spacing:-.005em}
h1,h2,h3{font-family:var(--f-display); font-weight:700; letter-spacing:-.02em}
h1{font-weight:800}
a{color:inherit}
.eyebrow{color:var(--muted); letter-spacing:.08em}

/* Cartões, botões e campos */
.panel,.kpi,.card,.cartao,.semana-mini,.carimbo,.notas,.pix,.conf,.atalho,.qa{border-radius:var(--r)!important; border:1px solid var(--borda)!important; box-shadow:var(--shadow); background:var(--surface)}
.btn{border-radius:999px; border:0; background:var(--surface-2); color:var(--ink); min-height:40px; padding:0 16px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px}
.btn.sm{min-height:34px; padding:0 13px} .btn.xs{min-height:30px; padding:0 11px; font-size:13.5px}
.btn.primary,.btn.forte,button.primary{background:var(--accent); color:var(--on-accent); border:0}
.btn:hover{filter:brightness(.97)}
.pill{border-radius:999px}
input,select,textarea{border-radius:12px; background:var(--surface); border:1px solid var(--line)}
.modal,.janela{border-radius:22px}

/* Topo: Menu primeiro, depois a escolha da empresa */
.app{grid-template-columns:minmax(0,1fr)}
.top{background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:0; padding:14px 32px; gap:10px}
.menu-btn{display:inline-flex!important; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:var(--surface-2); color:var(--ink); font-weight:600; cursor:pointer}
.menu-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2}
.top-marca{display:none!important}
.seg{background:var(--surface-2); border:0; border-radius:999px; padding:4px; gap:4px}
.seg button{border-radius:999px; border:0; min-height:36px; padding:0 15px; font-weight:700; color:var(--muted); background:transparent}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-p)}
.seg button[aria-pressed="true"]::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; background:var(--amarelo); vertical-align:1px}
.seg button[data-emp="alm"][aria-pressed="true"]::before{background:var(--steel)}
.seg button[data-emp="rf"][aria-pressed="true"]::before{background:var(--gold)}
.top .eye,.top .tema{border:0; background:var(--surface-2); border-radius:999px; min-height:44px; color:var(--ink)}
.tema{width:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.tema svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2}
.top .today{color:var(--muted)}

/* Menu recolhido: abre por cima, em qualquer tela (item 28.3) */
.side{position:fixed; inset:0 auto 0 0; width:288px; z-index:25; height:100%; transform:translateX(-105%); transition:transform .25s ease; background:var(--surface); color:var(--ink); box-shadow:0 10px 40px rgba(0,0,0,.18)}
.side.open{transform:none}
.scrim.on{display:block; position:fixed; inset:0; background:rgba(15,17,20,.35); z-index:24}
.brand .mk{font-weight:800; letter-spacing:-.02em} .brand .mk b{color:var(--ink); font-weight:800}
.brand small{color:var(--muted)}
.nav .grp{color:var(--muted)}
.nav button{border-radius:12px; color:var(--ink)}
.nav button:hover{background:var(--surface-2)}
.nav button[aria-current="page"]{background:var(--surface-2); font-weight:700}
.nav button[aria-current="page"]::before{background:var(--amarelo)}
.nav .tag{background:var(--amarelo); color:#1E2125}
.me .sair{color:var(--muted)}
.view{max-width:1180px; width:100%; margin:0 auto}
@media (prefers-reduced-motion: reduce){.side{transition:none}}

/* Início novo: saudação, pendências, atalhos, administração do sistema e a faixa */
.ini{display:flex; flex-direction:column; gap:26px}
.ini-saud .muted{font-size:15px}
.ini-saud h1{font-size:clamp(28px,4vw,38px); margin-top:4px}
.ini-pend{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.ini-pend button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:6px; padding:20px 22px; border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--borda); min-width:0}
.ini-pend button:focus-visible,.ini-at button:focus-visible,.ini-adm button:focus-visible{outline:3px solid var(--amarelo); outline-offset:2px}
.ini-pend small{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.ini-pend small i{width:8px; height:8px; border-radius:50%; background:var(--amarelo)}
.ini-pend b{font-size:22px; letter-spacing:-.02em; line-height:1.2}
.ini-pend span{color:var(--muted); font-size:15px}
.ini-ok{padding:20px 22px; border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--borda); color:var(--muted)}
.ini h2.sec{font-size:17px; color:var(--muted); font-weight:700; margin-bottom:12px}
.ini-at{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.ini-at button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; min-height:72px; padding:0 18px; border-radius:18px; background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--borda); font-weight:700; min-width:0}
.ini-at button .ic{width:40px; height:40px; border-radius:12px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex:none}
.ini-at button svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8}
.ini-at button .pill{margin-left:auto}
.ini-adm{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:18px; border-top:1px solid var(--line)}
.ini-adm>span{font-size:15px; font-weight:700; color:var(--muted); margin-right:6px}
.ini-adm button{all:unset; cursor:pointer; padding:10px 16px; border-radius:999px; background:var(--surface-2); font-size:15px; font-weight:600}

/* Faixa de baixo: Cidade das obras + Linha da semana */
.faixa{padding:20px 24px; border-radius:24px; background:color-mix(in srgb,var(--surface-2) 70%,var(--bg)); display:flex; flex-direction:column; gap:18px}
.cidade{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:36px; padding-top:6px}
.predio{all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; width:150px; text-align:center}
.predio .p{position:relative; width:112px; border-radius:10px 10px 3px 3px; background:var(--line); overflow:hidden}
.predio .p i{position:absolute; left:0; right:0; bottom:0; transform-origin:bottom; animation:encher 1.1s ease-out both}
.predio .p em{position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,transparent 0 16px,color-mix(in srgb,var(--surface) 55%,transparent) 16px 30px),repeating-linear-gradient(0deg,transparent 0 14px,var(--bg) 14px 18px); opacity:.5}
.predio .p u{position:absolute; left:0; right:0; height:3px; background:var(--amarelo)}
.predio b{font-size:14px; line-height:1.3}
.predio span{font-size:13px; color:var(--muted)}
.predio strong{font-size:13px}
.predio strong.ok{color:var(--ok)} .predio strong.atras{color:var(--bad)}
@keyframes encher{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.predio .p i{animation:none}}
.semana-l{display:flex; flex-direction:column; gap:8px}
.semana-l .t{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:15px}
.semana-l .t span{font-size:13px; color:var(--muted)}
.dias{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.dia{display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:14px; min-height:76px; min-width:0}
.dia.hoje{background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--borda)}
.dia .d{display:flex; align-items:center; gap:6px; font-size:14px}
.dia .d i{width:8px; height:8px; border-radius:50%; flex:none}
.dia .d small{font-size:12px; color:var(--muted)}
.dia .l1{font-size:14px; font-weight:600; overflow-wrap:anywhere}
.dia .l2{font-size:13px; color:var(--muted); overflow-wrap:anywhere}

@media (max-width:900px){
  .top{padding:10px 16px}
  .menu-btn span:not(.tag){display:none}
  .ini-pend{grid-template-columns:minmax(0,1fr)}
  .ini-at{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dias{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cidade{gap:18px} .predio{width:120px} .predio .p{width:92px}
}

/* Fundo da página inteira (não só da primeira tela) e a data só na saudação. */
html{background:var(--bg)}
.top .today{display:none}

/* ============================================================
 * CELULAR DO ENCARREGADO: "uma coisa de cada vez" (modelo E)
 * Faixa zebrada amarela e preta no topo, letra Barlow grande,
 * cartões com borda firme e o botão amarelo para seguir.
 * ============================================================ */
.field-app{--c-bg:#F4F2ED; --c-sup:#FFFFFF; --c-sup2:#ECE8DF; --c-linha:#D3CDBF; --c-tinta:#1B1D20; --c-suave:#57534B; --c-acc:#F2C230; --c-fx:#1B1D20;
  background:var(--c-bg); color:var(--c-tinta); font-family:"Barlow",Arial,sans-serif; font-size:18px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .field-app{--c-bg:#16181B; --c-sup:#202328; --c-sup2:#2E3238; --c-linha:#3A3F46; --c-tinta:#F2F0EA; --c-suave:#B9B5AC; --c-fx:#16181B}}
:root[data-theme="dark"] .field-app{--c-bg:#16181B; --c-sup:#202328; --c-sup2:#2E3238; --c-linha:#3A3F46; --c-tinta:#F2F0EA; --c-suave:#B9B5AC; --c-fx:#16181B}
body:has(.field-app),html:has(.field-app){background:var(--bg)}
.field-app .f-top{background:var(--c-bg)!important; color:var(--c-tinta); border-top:8px solid transparent; border-image:repeating-linear-gradient(135deg,var(--c-acc) 0 16px,var(--c-fx) 16px 32px) 8; padding:12px 16px 6px; box-shadow:none}
.field-app .f-top b{font:700 22px/1.05 "Barlow Condensed",sans-serif; text-transform:uppercase; color:var(--c-tinta)}
.field-app .f-top span{color:var(--c-suave); font-size:14px}
.field-app .f-top select{background:var(--c-sup); color:var(--c-tinta); border:2px solid var(--c-linha); border-radius:12px; font:700 17px "Barlow Condensed",sans-serif; text-transform:uppercase}
.field-app .f-acoes{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.field-app .f-sair,.field-app .f-rede{min-height:46px; padding:0 12px; border:2px solid var(--c-linha); border-radius:14px; background:var(--c-sup); color:var(--c-tinta); font:700 15px "Barlow",sans-serif}
.field-app .f-body{gap:14px}
.field-app h1,.field-app .f-titulo h1{font:700 34px/1.04 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0}
.field-app h2{font:700 20px "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.02em}
.field-app .panel,.field-app .f-cartao{background:var(--c-sup); border:2px solid var(--c-linha)!important; border-radius:24px!important; box-shadow:none}
.f-cartao{padding:20px 18px; display:flex; flex-direction:column; gap:14px}
.f-passos{display:flex; align-items:center; gap:10px; font:700 14px "Barlow",sans-serif; letter-spacing:2px; text-transform:uppercase; color:var(--c-suave)}
.f-passos .bar{display:flex; gap:5px}
.f-passos i{width:24px; height:7px; border-radius:4px; background:var(--c-linha)}
.f-passos i.on{background:var(--c-acc)}
.f-botoes{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.field-app .btn{font-family:"Barlow",sans-serif; border-radius:16px; background:var(--c-sup2); color:var(--c-tinta)}
.field-app .btn.f-sim,.field-app .btn.primary{min-height:66px; border-radius:18px; background:var(--c-acc); color:#16181B; font:800 22px "Barlow",sans-serif; width:100%}
.field-app .btn.f-sim[disabled]{opacity:.55}
.field-app .btn.f-nao{min-height:58px; border:2px solid var(--c-linha); background:transparent; font:700 19px "Barlow",sans-serif; width:100%}
.field-app .btn.f-volta{min-height:46px; background:transparent; color:var(--c-suave); font-weight:600; width:100%}
.lista-he{display:flex; flex-direction:column; gap:8px}
.he-linha{display:grid; grid-template-columns:minmax(0,1fr) 46px 48px 46px; grid-template-areas:"n m h p" "x x x x"; align-items:center; gap:6px 8px; padding:10px 10px 10px 16px; border-radius:16px; background:var(--c-sup2)}
.he-linha>b:first-child{grid-area:n; overflow-wrap:anywhere}
.he-linha button{height:46px; border:2px solid var(--c-linha); border-radius:12px; background:var(--c-sup); color:var(--c-tinta); font:700 22px "Barlow",sans-serif; cursor:pointer}
.he-linha button.mais{border:0; background:var(--c-acc); color:#16181B}
.he-linha .h{text-align:center}
.he-linha .meia{grid-area:x; height:40px; font-size:15px; font-weight:600}
.he-linha .meia.on{background:var(--c-acc); border-color:var(--c-acc); color:#16181B}
.f-resumo{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.f-resumo div{padding:12px 14px; border-radius:16px; background:var(--c-sup2)}
.f-resumo span{display:block; font-size:14px; color:var(--c-suave)}
.f-resumo b{font-size:20px}
.f-feito{color:var(--c-suave); font-size:16px} .f-feito b{color:var(--c-tinta)}
.field-app .pessoa.on .marca .bola{background:var(--c-acc); border-color:var(--c-acc); color:#16181B}
.field-app .f-nav{background:var(--c-sup); border-top:2px solid var(--c-linha)}
.field-app .f-nav button[aria-current="page"]{color:var(--c-tinta); font-weight:800}
.field-app .weather button{border:2px solid var(--c-linha); border-radius:14px; background:var(--c-sup)}
.field-app .weather button[aria-pressed="true"]{border-color:var(--c-acc); background:color-mix(in srgb,var(--c-acc) 22%,var(--c-sup))}
.field-app .muted,.field-app .small.muted{color:var(--c-suave)}

/* Pagamentos da semana: lista rápida quando a semana foi enviada */
.pagar-rapido{display:flex; flex-direction:column; gap:12px}
.aviso-env{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background:var(--warn-soft); font-size:15px}
.aviso-env i{width:10px; height:10px; border-radius:50%; background:var(--amarelo); flex:none}
.pr-total small{display:block; color:var(--muted); font-size:14px}
.pr-total b{display:block; font-size:32px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pr-total span{color:var(--muted); font-size:14px}
.pr-lista{display:flex; flex-direction:column}
.pr-linha{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:54px; padding:6px 4px; border-bottom:1px solid var(--line)}
.pr-linha:last-child{border-bottom:0}
.pr-linha small{display:block; font-size:13px; color:var(--muted)} .pr-linha small.bad{color:var(--bad)}
.pr-linha .v{font-variant-numeric:tabular-nums}
.field-app .dias{display:flex; flex-wrap:wrap; gap:8px}
.field-app .dias button{flex:1 1 40%; min-height:50px; border-radius:16px; border:2px solid var(--c-linha); background:var(--c-sup); font:700 17px "Barlow",sans-serif; color:var(--c-tinta)}
.field-app .dias button[aria-pressed="true"]{background:var(--c-tinta); color:var(--c-bg); border-color:var(--c-tinta)}
.field-app .outro-dia{flex:1 1 100%; display:flex; align-items:center; gap:8px; font-size:15px; color:var(--c-suave)}
.field-app .outro-dia input{flex:1; min-width:0}
.field-app .f-top .f-obra{flex:1; min-width:0}
.field-app{overflow-x:hidden}

/* Menu em blocos que abrem e fecham (04/11/2026) */
.nav{gap:6px}
.nav>button{font-weight:700; padding:10px 12px}
.bloco{border-radius:16px; background:var(--surface-2)}
.bloco summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px}
.bloco summary::-webkit-details-marker{display:none}
.bloco summary::after{content:""; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); margin:0 4px 4px auto; transition:transform .2s}
.bloco[open] summary::after{transform:rotate(-135deg); margin-bottom:-2px}
.bloco summary:focus-visible{outline:3px solid var(--amarelo); outline-offset:2px}
.bl-ic{width:34px; height:34px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; flex:none}
.bl-ic svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}
.bl-t{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.bl-t b{font-size:15px} .bl-t small{font-size:12.5px; color:var(--muted)}
.bloco summary .tag{margin-left:auto}
.bloco summary .tag+*{margin-left:0}
.bl-itens{display:flex; flex-direction:column; gap:2px; padding:0 6px 8px}
.bl-itens button{background:transparent}
.bl-itens button[aria-current="page"]{background:var(--surface)}
@media (prefers-reduced-motion: reduce){.bloco summary::after{transition:none}}

.me .versao{display:block; font-size:11.5px; color:var(--muted); margin-top:2px}

/* Linha da semana: todos os dias em balão; o de hoje em branco, com destaque (ajuste do Felipe, 04/11/2026). */
.dia{background:color-mix(in srgb,var(--surface) 45%,transparent); border:1px solid var(--line)}
.dia.hoje{background:var(--surface); border:2px solid var(--amarelo); box-shadow:var(--shadow)}
.dias{align-items:stretch}
.dia .l1,.dia .l2{overflow-wrap:break-word}
@media (max-width:900px){
  .dias{grid-template-columns:minmax(0,1fr); gap:6px}
  .dia{display:grid; grid-template-columns:92px minmax(0,1fr); grid-template-areas:"d l1" "d l2"; column-gap:10px; min-height:0; padding:10px 12px}
  .dia .d{grid-area:d; flex-wrap:wrap; align-content:flex-start}
  .dia .l1{grid-area:l1} .dia .l2{grid-area:l2}
}

/* iPhone: o topo desce abaixo da hora e da ilha (área segura), no escritório e no celular da obra. */
.top{padding-top:calc(14px + env(safe-area-inset-top,0px))}
.field-app .f-top{padding-top:calc(12px + env(safe-area-inset-top,0px))}
.side{padding-top:calc(22px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){
  .top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  /* No celular o Menu fica na barra de baixo, à esquerda; o topo não repete o botão. */
  .top .menu-btn{display:none!important}
}

/* Menu só no topo, também no celular; a barra de baixo fica com 4 atalhos. */
@media (max-width:900px){ .top .menu-btn{display:inline-flex!important; position:relative} .b-nav{grid-template-columns:repeat(4,1fr)} }
.menu-btn .tag{margin-left:2px; font-size:11px; background:var(--amarelo); color:#1E2125; border-radius:20px; padding:0 7px; font-weight:700}

@media (max-width:900px){ .ini-at button{font-size:15px; padding:0 12px; gap:10px; min-height:64px} .ini-at button .ic{width:34px; height:34px} }

/* Clientes: ficha com logo e cor do portal (04/11/2026). */
.cli-linha{width:100%; text-align:left; background:none; border:0; font:inherit; color:inherit; cursor:pointer; align-items:center}
.cli-selo{display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:12px; background:#fff; border:1px solid var(--line); overflow:hidden}
.cli-selo img{max-width:86%; max-height:86%; object-fit:contain}
.cli-selo.letra{font-weight:700; font-size:20px; border:0}
.cli-cor{width:22px; height:22px; border-radius:50%; border:1px solid var(--line); flex:none}
.cli-logo{display:flex; gap:14px; align-items:center; margin:6px 0 10px}
.cli-sugs{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0}
.cli-sug{width:64px; height:52px; border-radius:12px; border:2px solid transparent; font:700 18px/1 inherit; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.15)}
.cli-sug.on{outline:3px solid var(--ink, #1b1e21); outline-offset:2px}
.cli-outra{display:inline-flex; gap:10px; align-items:center; font-weight:600; margin:4px 0 8px; cursor:pointer}
.cli-outra input{width:52px; height:40px; border:1px solid var(--line); border-radius:10px; padding:2px; background:var(--surface)}
.portal-prev{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; color:#1b1e21; max-width:460px}
.pp-topo{display:flex; align-items:center; gap:14px; padding:12px 16px}
.pp-topo i{width:1px; align-self:stretch; background:#dedbd2}
.pp-topo img{max-height:38px; max-width:130px; object-fit:contain; display:block}
.pp-topo b{font-size:15px}
.pp-faixa{padding:14px 16px}
.pp-faixa small{display:block; font-size:12px; opacity:.85}
.pp-faixa b{font-size:19px}
.pp-corpo{padding:14px 16px; display:grid; gap:8px}
.pp-corpo small{color:#5f646b}
.pp-barra{height:10px; border-radius:6px; background:#eceae4; overflow:hidden}
.pp-barra span{display:block; height:100%}
.pp-botao{justify-self:start; padding:10px 16px; border-radius:10px; font-weight:700}

/* Aviso de foto ruim no relatório do celular (04/11/2026). */
.shot .foto-aviso{display:block;margin-top:4px;padding:6px 8px;border-radius:8px;background:#fbe7e3;color:#8a2d1f;font-weight:700;font-size:14px;line-height:1.3}

/* Puxar para atualizar (04/11/2026): um cartão só, com um prédio que sobe andar
 * por andar e um guindaste que trabalha enquanto atualiza. Fica abaixo do topo
 * (não cobre o Menu) e o texto cabe numa linha. */
.puxar-aviso{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;
  background:var(--surface,#fff);color:var(--ink,#1b1e21);border:2px solid var(--ink,#1b1e21);border-radius:16px;padding:8px 18px 8px 10px;
  font-weight:700;font-size:17px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.18);max-width:calc(100% - 32px)}
.puxar-aviso[hidden]{display:none}
.obra-svg{width:48px;height:48px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.obra-svg .andar{fill:transparent;stroke-dasharray:3 3;opacity:.45;transition:fill .15s,opacity .15s}
.obra-svg .andar.cheio{fill:var(--amarelo,#E8B23A);stroke-dasharray:none;opacity:1}
.obra-svg .bandeira{opacity:0;fill:var(--amarelo,#E8B23A)}
.puxar-aviso[data-fase="pronto"] .bandeira,.puxar-aviso[data-fase="feito"] .bandeira{opacity:1}
.puxar-aviso[data-fase="atualizando"] .gancho{animation:gancho 1s ease-in-out infinite alternate}
@keyframes gancho{from{transform:translate(0,0)}to{transform:translate(-8px,8px)}}
@media (prefers-reduced-motion:reduce){.puxar-aviso[data-fase="atualizando"] .gancho{animation:none}}

/* ============================================================
 * TOQUE (04/11/2026): alvo de dedo, retorno ao tocar, sem zoom
 * no toque duplo, sem a mancha cinza do Android e sem o efeito
 * de mouse grudado no celular.
 * ============================================================ */
button,a,label,select,input,textarea,summary,[data-act],[data-go],.row.click,.atalho,.obra{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
[aria-busy="true"]{opacity:.6; pointer-events:none; cursor:progress}
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm,.btn.xs{min-height:44px; padding:0 14px; font-size:14.5px}
  .acts{gap:8px}
  .seg button{min-height:44px}
  .nav button,.nav a{min-height:48px}
  button:active,[data-act]:active,[data-go]:active,.row.click:active,.atalho:active,.obra:active,summary:active{filter:brightness(.92); transform:scale(.985)}
  .btn:hover,.nav button:hover{filter:none}
}
@media (hover:none){
  .btn:hover{filter:none}
  .obra:hover,.qa:hover,.model:hover{transform:none; border-color:var(--line)}
  tbody tr:hover{background:none}
}

/* Topo do Suporte no celular (04/11/2026): Menu, "Ver como", Atualizar e os três
 * pontos numa linha só; tema e "ocultar valores" aparecem ao tocar nos três pontos. */
.top-mais{display:none}
@media (max-width:900px){
  .top-suporte .top-mais{display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; border:0; border-radius:999px; background:var(--surface-2); color:var(--ink); cursor:pointer}
  .top-mais svg{width:22px; height:22px; fill:currentColor}
  .top-mais[aria-expanded="true"]{background:var(--ink); color:var(--surface)}
  .top-suporte .ver-como .vc-txt{display:none}
  .top-suporte .ver-como{min-width:0; flex:0 1 auto}
  .top-suporte{gap:8px}
  .top-suporte .ver-como select{max-width:30vw; min-height:44px}
  .top-suporte .spacer{flex:1 1 0; min-width:0}
  .top-suporte:not(.mais-aberto) .tema,.top-suporte:not(.mais-aberto) .eye{display:none}
  .top-suporte.mais-aberto .tema,.top-suporte.mais-aberto .eye{order:4}
  .top-suporte.mais-aberto .eye span{display:inline}
}

/* Encarregado principal e avisos da presença (05/11/2026). */
.enc-faixa{background:var(--warn-soft,#fbf1d9);border-radius:14px;padding:12px 14px;font-size:16px;line-height:1.4;display:flex;flex-direction:column;gap:10px}
.enc-faixa.ok{background:var(--ok-soft,#e3f2e6)}
.enc-faixa:has(> .btn:only-child){background:none;padding:0}
.pessoa.trava .marca{opacity:.75}
.aviso-pres{display:flex;flex-direction:column;gap:12px;font-size:17px}
.aviso-pres h2{font-size:22px;margin:0}
.aviso-pres p{margin:0;line-height:1.45}
.enc-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.enc-linha small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.aviso-pres .f-botoes{display:flex;flex-direction:column;gap:10px}
.aviso-pres .btn{width:100%;min-height:56px;border-radius:16px;font-weight:800;font-size:19px}
.aviso-pres .btn.f-sim{background:var(--c-acc,#F2C230);color:#16181B;border:0}

/* Função do dia e "Cadastrar pessoa nova" no celular (rodada 2, 05/11/2026) */
.funcao-dia{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 2px 12px 46px;font-size:15px;color:var(--c-suave,var(--muted))}
.funcao-dia select{flex:1;min-width:180px;min-height:48px;font-size:17px;border:2px solid var(--c-linha,var(--line));border-radius:12px;padding:6px 10px;background:var(--c-sup,var(--surface));color:var(--c-tinta,var(--ink))}
.funcao-dia.outra select{border-color:var(--c-acc,#F2C230);font-weight:700}
.pend-cad{font-style:normal;font-weight:700;color:#8a5a00}
.cad-novo{width:100%;min-height:52px;font-size:17px;font-weight:700;border-style:dashed}
.cad-pessoa .field{font-size:16px;font-weight:600}
.cad-pessoa .field input,.cad-pessoa .field select{min-height:52px;font-size:18px;font-weight:400}
.cad-pessoa .cad-doc{max-width:320px;width:100%;font-size:15px}
.cad-pessoa .cad-doc b{font-size:17px}
.cad-mais summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:16px;color:var(--c-suave,var(--muted))}
.cad-erro{font-size:16px;font-weight:600}

/* Gasto com nota pelo celular (item 8): 5 abas embaixo e "Quem pagou?" em dois botões grandes */
.field-app .f-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.field-app .f-nav button span{font-size:12px}
.gasto-cel .gas-foto{max-width:340px;width:100%;font-size:15px}
.gasto-cel .gas-foto b{font-size:17px}
.gasto-cel .field{font-size:16px;font-weight:600}
.gasto-cel .field input,.gasto-cel .field select{min-height:52px;font-size:18px;font-weight:400}
.gas-quem{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gas-quem button{border:2px solid var(--c-linha,var(--line));border-radius:14px;background:var(--c-sup,var(--surface));color:var(--c-tinta,var(--ink));padding:12px 10px;font:700 17px/1.2 inherit;text-align:left;cursor:pointer;min-height:64px}
.gas-quem button small{display:block;font-weight:500;font-size:13.5px;color:var(--c-suave,var(--muted));margin-top:4px}
.gas-quem button[aria-pressed="true"]{border-color:var(--c-acc,#F2C230);background:color-mix(in srgb,var(--c-acc,#F2C230) 22%,var(--c-sup,#fff))}

/* "Pode atrasar X dias" na ocorrência do celular */
.oc-atraso h3{font-size:17px;margin:12px 0 0}
.tipos-oc.atraso button{min-height:44px;min-width:56px;font-size:16px;font-weight:600}
.tipos-oc.atraso button[aria-pressed="true"]{background:color-mix(in srgb,var(--c-acc,#F2C230) 30%,var(--c-sup,#fff));border-color:var(--c-acc,#F2C230);color:var(--c-tinta,var(--ink))}

/* Configurações (modelo 2, Felipe 05/11/2026): cartões grandes, um assunto por vez. Letra e toque grandes. */
.cfg-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.cfg-tile{display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; min-height:180px; padding:22px; border:1px solid var(--borda); border-radius:24px;
  background:var(--surface); box-shadow:var(--shadow); color:var(--ink); font:inherit; cursor:pointer}
.cfg-tile:hover{filter:brightness(.985)} .cfg-tile:focus-visible{outline:3px solid var(--amarelo); outline-offset:2px}
.cfg-tile b{font-size:21px; letter-spacing:-.02em}
.cfg-ic{width:56px; height:56px; border-radius:18px; background:var(--surface-2); display:grid; place-items:center; font-size:28px}
.cfg-d{color:var(--muted); font-size:16.5px; flex:1}
.cfg-rod{color:var(--muted); font-size:15px}
.cfg-mudado{display:inline-block; background:var(--warn-soft); color:var(--warn); border-radius:999px; padding:1px 10px; font-weight:700; font-size:14px}
.cfg-avancado{margin-top:20px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.cfg-topo{margin-bottom:6px}
.cfg-item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; align-items:center; padding:18px 0; border-top:1px solid var(--line)}
.cfg-item:first-child{border-top:0; padding-top:4px}
.cfg-q{font-weight:700; font-size:18.5px; grid-column:1}
.cfg-e{color:var(--muted); font-size:16px; grid-column:1}
.cfg-agora{grid-column:1; font-size:16.5px}
.cfg-acts{grid-column:2; grid-row:1/4; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.cfg-acts .btn{min-height:46px; padding:0 20px; font-size:16px}
@media (max-width:860px){.cfg-tiles{grid-template-columns:1fr 1fr} .cfg-item{grid-template-columns:1fr} .cfg-acts{grid-column:1; grid-row:auto; justify-content:flex-start}}
@media (max-width:520px){.cfg-tiles{grid-template-columns:1fr} .cfg-tile{min-height:0}}

/* Acessos (modelo B, Felipe 05/11/2026): lista de nomes e a ficha ao lado, com Sim / Não. */
.acc-duas{display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start}
.acc-lista{display:flex; flex-direction:column; gap:4px}
.acc-busca{width:100%; min-height:50px; border-radius:999px; padding:0 20px; font-size:17px; margin-bottom:8px}
.acc-nome{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border:0; border-radius:18px; background:transparent; color:var(--ink); font:inherit; cursor:pointer}
.acc-nome:hover{background:var(--surface-2)} .acc-nome.sel{background:var(--surface); box-shadow:var(--shadow)}
.acc-nome b{display:block; font-size:17.5px} .acc-nome small{color:var(--muted); font-size:14.5px}
.acc-av{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:16px; background:var(--surface-2); flex:none}
.acc-av.g{width:58px; height:58px; font-size:20px}
.acc-av.socio{background:rgba(47,125,87,.14)} .acc-av.admin{background:rgba(47,102,144,.14)} .acc-av.oper{background:rgba(184,134,43,.16)}
.acc-cab{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.acc-cab .nm{font-weight:800; font-size:22px} .acc-cab .pp{color:var(--muted)}
.acc-grupo{font-size:14.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:22px 0 4px}
.acc-sim{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; align-items:center; padding:12px 0; border-top:1px solid var(--line)}
.acc-sim .t{font-weight:700; font-size:17px} .acc-sim .e{color:var(--muted); font-size:15px}
.acc-chave{grid-row:1/3; grid-column:2; display:inline-flex; background:var(--surface-2); border-radius:999px; padding:4px; gap:2px}
.acc-chave button{min-width:70px; min-height:44px; border:0; border-radius:999px; background:transparent; font:inherit; font-weight:800; color:var(--muted); cursor:pointer}
.acc-chave button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.acc-chave button.nao[aria-pressed="true"]{background:var(--bad); color:#fff}
.acc-chave button:disabled{cursor:not-allowed; opacity:.7}
.acc-chave .so{font-size:14px; padding:0 12px}
.acc-emps{grid-column:1/3; display:flex; gap:14px; flex-wrap:wrap; font-size:15.5px; padding-top:4px}
.acc-voltar{display:none}
@media (max-width:860px){.acc-duas{grid-template-columns:1fr} .acc-duas.com-sel .acc-lista{display:none} .acc-voltar{display:inline-flex; margin-bottom:10px}
  .acc-sim{grid-template-columns:1fr} .acc-chave{grid-row:auto; grid-column:1; justify-self:start}}

/* Freio da cota (item 18): tela do suporte e recado discreto da administração. */
.cota-num{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.cota-num b{font-size:34px; line-height:1}
.cota-num span{color:var(--muted)}
.cota-barra{position:relative; height:12px; border-radius:99px; background:var(--line); margin:14px 0 10px; overflow:visible}
.cota-barra i{position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--azul, #2563eb)}
.cota-barra u{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--amarelo, #d97706)}
.recado-cota{position:fixed; right:14px; bottom:14px; z-index:55; max-width:300px; display:flex; gap:10px; align-items:center;
  padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card, #fff); box-shadow:0 6px 18px rgba(0,0,0,.12); font-size:13px}
@media (max-width:900px){.recado-cota{bottom:78px; left:14px; right:14px; max-width:none}}

/* Celular DEITADO (pedido do Felipe, 06/11/2026): o topo, a fileira de empresas e a barra de baixo
 * ocupavam quase metade da altura (118 + 59 de 390 px). Deitado e com pouca altura, tudo vai numa linha
 * fina em cima e a barra de baixo fica baixa, com o nome ao lado do ícone. Em pé e no computador nada muda.
 * O iPhone deitado tem o recorte da câmera do lado: as bordas respeitam a área segura. */
@media (max-width:950px) and (orientation:landscape) and (max-height:520px){
  .top{flex-wrap:nowrap; gap:6px; padding:4px calc(10px + env(safe-area-inset-right,0px)) 4px calc(10px + env(safe-area-inset-left,0px))!important; min-height:0}
  .top .seg{order:0; width:auto; flex:0 1 auto; min-width:0; flex-wrap:nowrap; padding:2px; gap:2px}
  .top .seg button{min-height:34px; padding:0 10px; font-size:13px; white-space:nowrap}
  .top .menu-btn,.top .atualizar,.top .eye,.top .tema,.top .top-mais{min-height:40px!important; min-width:40px; padding:0 9px}
  .top .menu-btn svg,.top .eye svg,.top .tema svg{width:18px; height:18px}
  .top-marca{display:none!important}
  .top .spacer{flex:1 1 0; min-width:0}
  .main{padding-bottom:calc(42px + env(safe-area-inset-bottom,0px))}
  .view{padding:12px calc(14px + env(safe-area-inset-right,0px)) 56px calc(14px + env(safe-area-inset-left,0px))}
  .view{gap:12px}
  .head .eyebrow{display:none}
  .head h1{font-size:21px; margin:0}
  .head p{font-size:13.5px; margin-top:2px}
  .b-nav{padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
  .b-nav button{flex-direction:row; justify-content:center; gap:7px; padding:6px 0; font-size:13px; min-height:40px; box-sizing:border-box}
  .b-nav svg{width:20px; height:20px}
  /* Deitado o nome fica ao lado do ícone: o selo de pendências vai depois do nome, sem cobrir o texto. */
  .b-nav button > svg{order:1} .b-nav button > span:not(.tag){order:2}
  .b-nav .tag{position:static; order:3; margin-left:-2px; line-height:16px}
  .toast{bottom:calc(50px + env(safe-area-inset-bottom,0px))}
  .recado-cota{bottom:50px}
  /* Início deitado: saudação menor e os prédios das obras mais baixos (a altura de cada um vem da tela; aqui só limita). */
  .ini-saud h1{font-size:24px}
  .cidade{padding-top:8px; padding-bottom:8px}
  .predio .p{max-height:120px}
  /* Cronograma deitado: coluna do nome mais larga (o nome cabe numa linha) e linhas mais baixas: cabem mais etapas. */
  .gantt{grid-template-columns:minmax(150px,230px) minmax(max(440px, calc(var(--g-sem, 12) * 38px)),1fr)!important}
  .g-name{padding:4px 8px 4px 0; line-height:1.2}
  .g-track{height:36px}
  /* Celular da obra deitado: faixa do topo e abas de baixo mais baixas. */
  .field-app .f-top{padding:6px calc(12px + env(safe-area-inset-right,0px)) 6px calc(12px + env(safe-area-inset-left,0px))!important; border-top-width:5px}
  .field-app .f-top b{font-size:18px}
  .field-app .f-top span{font-size:12.5px}
  .field-app .f-sair,.field-app .f-rede{min-height:38px}
  .field-app .f-top select{padding:3px 8px; font-size:15px}
  .f-nav{width:min(640px,100%)}
  .f-nav button{flex-direction:row; justify-content:center; gap:6px; padding:7px 0}
  .f-nav svg{width:20px; height:20px}
}
/* Recado do ícone novo no iPhone (app.js, RecadoIcone): o mesmo cartão do recado da cota, em coluna. */
.recado-icone{flex-direction:column; align-items:stretch; gap:6px; max-width:340px}
.recado-icone ol{margin:0; padding-left:18px; display:grid; gap:4px}
.recado-icone .ri-obs{font-size:12px; opacity:.8}
.recado-icone .ri-bt{display:flex; gap:8px; justify-content:flex-end}
/* Chegada e saída na presença do celular (07/11/2026) */
.hor-geral{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0}
.hor-geral label,.hor-linha label{display:flex; flex-direction:column; gap:4px; font-size:15px; font-weight:600}
.hor-geral input,.hor-linha input{height:48px; font-size:18px; border:2px solid var(--c-linha); border-radius:12px; padding:0 8px; background:var(--c-sup); color:var(--c-tinta); min-width:0}
.lista-hor{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.hor-linha{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; border:2px solid var(--c-linha); border-radius:14px}
.hor-linha .nome{grid-column:1 / -1; overflow-wrap:anywhere}
.hor-linha .he-calc{grid-column:1 / -1; font-weight:700; color:var(--c-mudo,#666)}
.hor-linha .he-calc.tem{color:var(--c-tinta)}
.hor-linha.falta{border-color:#b42318}
.hor-linha.falta .he-calc{color:#b42318}
.hor-linha .meia{grid-column:1 / -1; height:42px; border:2px solid var(--c-linha); border-radius:12px; background:var(--c-sup); color:var(--c-tinta); font-size:15px; font-weight:600}
.hor-linha .meia.on{background:var(--c-acc); border-color:var(--c-acc); color:#16181B}
.lista-he-res{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.lista-he-res div{display:flex; justify-content:space-between; gap:8px}
/* Proteções da presença (07/11/2026): conferência, aviso de quem não costuma estar na obra e nomes parecidos */
.conf-pres .lista-conf{list-style:none; margin:6px 0; padding:0; display:flex; flex-direction:column; gap:8px}
.conf-pres .lista-conf li{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:2px solid var(--c-linha); border-radius:12px}
.conf-pres .lista-conf li span{font-size:15px; color:var(--c-mudo,#555)}
.conf-pres .conf-pergunta{font-size:19px; margin:6px 0 0}
.alerta-novo{margin:10px 0; padding:14px; border:3px solid #b54708; border-radius:14px; background:#fff7e6; color:#3d2400}
.alerta-novo p{margin:0 0 10px; font-size:17px}
.pessoa .parecido{display:block; font-style:normal; font-size:13px; font-weight:700; color:#8a5a00}
/* Presença a confirmar na tela Equipe (07/11/2026) */
.conf-escr .conf-grupo{border:2px solid var(--c-linha); border-radius:12px; padding:10px 12px; margin:8px 0}
.conf-escr .conf-grupo ul{margin:6px 0 8px 18px; padding:0}
.conf-escr .conf-tit{font-size:15px}