vira card; cada vira linha rotulada (rótulo = cabeçalho da coluna,
posto por JS em data-label). As tabelas analíticas do Financeiro (.tnr1/.tnr2) NÃO
levam .tcard de propósito → seguem em rolagem horizontal (comparativo lado a lado). */
table.tcard{display:block;width:100%}
table.tcard thead{display:none}
table.tcard tbody{display:block}
table.tcard tbody tr{display:block;background:var(--cr2);border:1px solid var(--bl);border-radius:var(--r);margin-bottom:10px;padding:6px 13px;box-shadow:var(--sh)}
table.tcard td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--bl);text-align:right;white-space:normal;width:auto}
table.tcard td:last-child{border-bottom:none}
table.tcard td::before{content:attr(data-label);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tn);text-align:left;flex-shrink:0}
table.tcard td:empty{display:none}
table.tcard .acts{justify-content:flex-end;width:100%}
/* v4.0.10 (fatia 3): MODAIS em TELA CHEIA no celular. A caixa (.modal) vira fullscreen;
o cabeçalho (.mhd) gruda no topo e o rodapé de botões (.mft) gruda embaixo, com o
corpo (campos soltos) rolando no meio. Bases .ov/.modal/.mhd/.mft vêm ANTES deste
bloco @media no arquivo → override vence sem prefixo (lição da v4.0.9). */
.ov{padding:0;align-items:stretch}
.modal{max-width:none;max-height:none;width:100%;border-radius:0;padding:0 16px;display:flex;flex-direction:column}
.modal .mhd{position:sticky;top:0;z-index:3;background:var(--cr2);margin:0 -16px 14px;padding:15px 16px;border-bottom:1px solid var(--bl);flex-shrink:0}
.modal .mft{position:sticky;bottom:0;z-index:3;background:var(--cr2);margin:auto -16px 0;padding:12px 16px;flex-shrink:0}
/* calendário da Agenda: grid encolhível + cabeçalho quebra linha + aperta padding.
⚠️ PREFIXO #page-agenda OBRIGATÓRIO: as classes .ag-* são definidas DEPOIS deste
bloco @media no arquivo, então sem o ID a regra-base (mesma especificidade, ordem
posterior) vence e anula o conserto. Com #page-agenda ganhamos especificidade. */
#page-agenda .ag-days,#page-agenda .ag-dow{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
#page-agenda .ag-mes{min-width:0}
#page-agenda .ag-mesx{padding:10px 6px 12px}
#page-agenda .ag-day{padding:3px}
/* ===== FATIA 2 — tabela de Pedidos (aba Pedidos) vira cards empilhados =====
Escopado em #page-pedidos: a aba Pedidos usa .
A tabela de pedidos do detalhe do cliente (#cl-det) reusa a classe .pped
mas tem 7 colunas (checkbox, sem Tipo/Lucro) — fica de fora, fatia futura. */
#page-pedidos .pped-tw{max-height:none;overflow:visible}
#page-pedidos table.pped{display:block;width:100%}
#page-pedidos .pped thead{display:none}
#page-pedidos .pped tbody,#page-pedidos .pped tfoot{display:block;width:100%}
#page-pedidos .pped tbody tr{
display:block;position:relative;background:var(--cr2);border:1px solid var(--bl);
border-radius:var(--r);padding:10px 14px 4px;margin-bottom:10px;box-shadow:var(--sh);
}
#page-pedidos .pped tbody tr.r-ab{box-shadow:inset 4px 0 0 var(--gd2),var(--sh)}
#page-pedidos .pped tbody tr.r-av{box-shadow:inset 4px 0 0 var(--pu),var(--sh)}
#page-pedidos .pped tbody tr.r-ab td:first-child,#page-pedidos .pped tbody tr.r-av td:first-child,
#page-pedidos .pped tbody tr.r-ab:hover td:first-child,#page-pedidos .pped tbody tr.r-av:hover td:first-child{box-shadow:none}
#page-pedidos .pped tbody td{
display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:7px 0;border-bottom:1px dashed var(--bl);text-align:right;width:100%;
}
#page-pedidos .pped tbody td:last-child{border-bottom:none}
#page-pedidos .pped tbody td::before{
content:attr(data-label);font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;color:var(--tn);text-align:left;flex-shrink:0;
}
/* col 1 = Tipo: badge no topo do card, sem rótulo, sem linha divisória */
#page-pedidos .pped tbody td:nth-child(1){border-bottom:none;padding:2px 0 8px;justify-content:flex-start}
#page-pedidos .pped tbody td:nth-child(1)::before{display:none}
/* col 3 = Fragrância: rótulo em cima, frag+casa empilhados embaixo */
#page-pedidos .pped tbody td:nth-child(3){flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}
/* col 9 = Ações: linha final, sem rótulo, botões à direita, separada por borda */
#page-pedidos .pped tbody td:nth-child(9){border-top:1px solid var(--bl);border-bottom:none;padding-top:9px;margin-top:2px}
#page-pedidos .pped tbody td:nth-child(9)::before{display:none}
#page-pedidos .pped tbody td:nth-child(9) .acts{justify-content:flex-end;width:100%}
/* Totais (tfoot) viram um card-resumo com os números lado a lado */
#page-pedidos .pped tfoot tr{
display:flex;justify-content:space-around;flex-wrap:wrap;gap:10px;
background:var(--cr3);border:2px solid rgba(224,182,60,.6);border-radius:var(--rs);
padding:12px 14px;
}
#page-pedidos .pped tfoot td{display:flex;flex-direction:column;align-items:center;gap:3px;border:none;padding:0;width:auto}
#page-pedidos .pped tfoot td:empty{display:none}
#page-pedidos .pped tfoot td::before{
content:attr(data-label);font-size:9px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;color:var(--tn);
}
}
/* ════════ TELA DE LOGIN (v2.0) — Firebase Auth, layout "split" aprovado ════════ */
#login-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;font-family:'DM Sans',sans-serif;background:radial-gradient(circle at 30% 15%,#EBEBED,#CFD0D4 80%)}
body.dark #login-ov{background:radial-gradient(circle at 30% 20%,#1A1A1D,#0A0B0C 75%)}
#login-ov *{box-sizing:border-box}
.lg-theme{position:fixed;top:18px;right:18px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #BBBCC2;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);color:#3F4047;transition:all .2s}
body.dark .lg-theme{border-color:rgba(224,182,60,.3);background:rgba(255,255,255,.08);color:var(--gd2)}
.lg-theme:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.lg-theme:active{transform:translateY(0)}
.lg-theme .ic{width:19px;height:19px}
.lg-card{display:flex;width:100%;max-width:760px;min-height:440px;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);animation:lg-su .3s ease}
@keyframes lg-su{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.lg-brand{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center;overflow:hidden;transition:background .4s ease;background:linear-gradient(155deg,#E3E3E5,#D2D3D7);border-right:1px solid #CCCDD1}
body.dark .lg-brand{background:linear-gradient(155deg,#1A1A1C,#0D0D0E);border-right:none}
.lg-brand::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(190,138,5,.14),transparent 65%);top:-60px;right:-80px}
body.dark .lg-brand::before{background:radial-gradient(circle,rgba(224,182,60,.16),transparent 65%)}
.lg-tronco{width:206px;aspect-ratio:720/618;margin:0 auto 16px;position:relative;z-index:1;background:url(logo-easy-claro.png) center/contain no-repeat}.sb-logo img{display:none}.sb-logo span[role="img"]{display:block;width:112px;height:78px;margin-bottom:2px;background:url(logo-easy.png) center/contain no-repeat}
body.dark .lg-tronco{background-image:url(logo-easy.png)}
.lg-name{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:#9F7304;letter-spacing:.14em;text-transform:uppercase;line-height:1;position:relative;z-index:1}
body.dark .lg-name{color:var(--gd2)}
.lg-tag{font-size:11.5px;color:#55565F;letter-spacing:.12em;margin-top:14px;position:relative;z-index:1;max-width:200px}
body.dark .lg-tag{color:rgba(225,226,229,.55)}
.lg-line{height:1px;width:60px;background:linear-gradient(90deg,transparent,rgba(190,138,5,.55),transparent);margin:18px auto 0;position:relative;z-index:1}
.lg-form{flex:1;padding:46px 40px;display:flex;flex-direction:column;justify-content:center;transition:background .4s ease;background:#F8F8F8}
body.dark .lg-form{background:#18181A}
.lg-tt{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;margin-bottom:3px;color:#111214}
body.dark .lg-tt{color:#E1E2E5}
.lg-hint{font-size:13px;color:#55565F;margin-bottom:24px}
body.dark .lg-hint{color:rgba(225,226,229,.55)}
.lg-fld{margin-bottom:15px}
.lg-form label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#55565F;margin-bottom:6px}
body.dark .lg-form label{color:var(--gd2)}
.lg-form input{width:100%;padding:12px 13px;border:1px solid #BBBCC2;border-radius:8px;background:#fff;color:#111214;font-family:'DM Sans',sans-serif;font-size:14px;transition:border-color .14s,box-shadow .14s,background .4s ease}
body.dark .lg-form input{background:#1E1E21;border-color:rgba(224,182,60,.25);color:#E1E2E5}
.lg-form input:focus{outline:none;border-color:var(--gd);box-shadow:0 0 0 3px rgba(224,182,60,.16)}
.lg-pw{position:relative;display:flex;align-items:center}
.lg-pw input{padding-right:44px}
.lg-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:7px;color:#55565F;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:color .15s}
body.dark .lg-eye{color:rgba(225,226,229,.55)}
.lg-eye:hover{color:var(--gd)}
.lg-eye:active{transform:translateY(-50%) scale(.9)}
.eye-svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eye-iris{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.eye-slash{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .32s cubic-bezier(.4,0,.2,1)}
.lg-eye.show .eye-slash{stroke-dashoffset:0}
.lg-eye.show .eye-iris{transform:scaleY(.18)}
.lg-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:13px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;margin-top:10px;background:var(--gd);color:#fff;letter-spacing:.02em}
.lg-btn:hover{background:#9F7304;transform:translateY(-2px);box-shadow:0 6px 16px rgba(190,138,5,.32)}
.lg-btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(190,138,5,.3)}
.lg-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.lg-err{display:none;margin-top:12px;font-size:12.5px;color:#fff;background:#993333;border-radius:8px;padding:9px 12px}
.lg-foot{margin-top:16px;font-size:11px;color:#55565F;opacity:.85;display:flex;align-items:center;gap:5px}
body.dark .lg-foot{color:rgba(225,226,229,.5)}
@media(max-width:640px){.lg-card{flex-direction:column;min-height:0}.lg-brand{padding:30px 24px;border-right:none;border-bottom:1px solid #CCCDD1}.lg-tronco{width:120px}.lg-form{padding:32px 26px}}
/* ═══ AGENDA (v4.0.0) ═══ cores dos 3 tipos (dark-aware) */
/* v4.3.0: `.ag-leg` (legenda) é IRMÃ do `.ag-grid`, não filha — ficava fora do escopo destas variáveis
e as bolinhas saíam com `background:var(--ag-a)` indefinido (transparentes). Incluída nos 2 seletores. */
/* v4.3.1: 4o tipo `f` = PRODUCAO de splits (verde so como dot/traco — micro-acento, nunca fundo de botao). */
#page-agenda,.ag-leg,.ag-grid,.ag-hoje-card,#m-agenda-ev,#m-producao{--ag-a:var(--gd2);--ag-p:#3b82c4;--ag-l:#8b5c9e;--ag-f:#3D7A52}
body.dark #page-agenda,body.dark .ag-leg,body.dark .ag-grid,body.dark .ag-hoje-card,body.dark #m-agenda-ev,body.dark #m-producao{--ag-a:var(--gd2);--ag-p:#5aa0e0;--ag-l:#b083c4;--ag-f:#5FA57A}
.ag-leg{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px 2px}
.ag-leg span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tn);font-weight:600}
.ag-leg .ag-d{width:11px;height:11px;border-radius:50%}
.ag-d.a{background:var(--ag-a)}.ag-d.p{background:var(--ag-p)}.ag-d.l{background:var(--ag-l)}.ag-d.f{background:var(--ag-f)}
@media(max-width:820px){.ag-duo,.ag-duo.meio{grid-template-columns:minmax(0,1fr)}}
.ag-ph{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bl)}
.ag-ph h2{font-family:'Playfair Display',serif;font-size:17px;margin:0}
.ag-ph small{font-size:12px;color:var(--tn)}
.ag-mes{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;text-align:center}
.ag-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:5px}
.ag-dow div{text-align:center;font-size:10px;font-weight:700;color:var(--tn);padding:4px 0;letter-spacing:.4px}
.ag-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ag-day{aspect-ratio:1/.88;border-radius:9px;border:1px solid transparent;padding:5px;cursor:pointer;position:relative;transition:.12s;background:var(--cr2)}
.ag-day:hover{border-color:var(--bd);background:var(--cr3)}
.ag-day .agn{font-size:12.5px;font-weight:600}
.ag-day.out{opacity:.28;pointer-events:none}
.ag-day.today{background:var(--gp);border-color:var(--gd)}
.ag-day.today .agn{color:var(--gd2);font-weight:800}
.ag-day.sel{border-color:var(--gd);box-shadow:0 0 0 2px rgba(224,182,60,.3)}
.ag-dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.ag-dots i{width:6px;height:6px;border-radius:50%}
.ag-dots i.a{background:var(--ag-a)}.ag-dots i.p{background:var(--ag-p)}.ag-dots i.l{background:var(--ag-l)}.ag-dots i.f{background:var(--ag-f)}
.ag-ph .ag-bk{font-size:12px;font-weight:700;color:var(--gd2);background:var(--gp);border:0;border-radius:8px;padding:6px 11px;cursor:pointer;display:none}
.ag-pbody{padding:8px 8px 14px;max-height:520px;overflow-y:auto}
.ag-gl{font-size:10.5px;font-weight:800;color:var(--gd2);letter-spacing:.6px;margin:10px 12px 5px;text-transform:uppercase}
.ag-ev{display:flex;gap:11px;align-items:center;padding:10px 12px;margin:5px 8px;border-radius:11px;border:1px solid var(--bl);background:var(--cr2);position:relative;cursor:pointer;transition:.14s}
.ag-ev:hover{background:var(--cr3);transform:translateX(2px)}
.ag-ev::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:4px}
.ag-ev.a::before{background:var(--ag-a)}.ag-ev.p::before{background:var(--ag-p)}.ag-ev.l::before{background:var(--ag-l)}.ag-ev.f::before{background:var(--ag-f)}
.ag-ev .agem{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;margin-left:4px;background:var(--cr3);font-size:17px}
.ag-ev.a .agem{color:var(--ag-a)}.ag-ev.p .agem{color:var(--ag-p)}.ag-ev.l .agem{color:var(--ag-l)}.ag-ev.f .agem{color:var(--ag-f)}
.ag-ev .agtx{flex:1;min-width:0}
.ag-ev .agt1{font-weight:700;font-size:13.5px}
.ag-ev .agt2{font-size:11.5px;color:var(--tn);margin-top:1px}
.ag-ev.feito .agt1{text-decoration:line-through;opacity:.6}
/* v4.3.0: botão de concluir (círculo → ✓ dourado). Só nos compromissos; postagem tem fluxo próprio. */
.ag-ev .agok{width:21px;height:21px;flex:none;padding:0;border-radius:50%;border:2px solid var(--bd);background:transparent;cursor:pointer;display:grid;place-items:center;color:transparent;transition:.14s}
.ag-ev .agok .ic{width:12px;height:12px}
.ag-ev .agok:hover{border-color:var(--gd2);color:var(--gd2)}
.ag-ev.feito .agok{background:var(--gd2);border-color:var(--gd2);color:#fff}
.ag-ev.feito{opacity:.74}
/* selo do registro histórico (tarefa concluída / envio já postado) */
.ag-ev .agreg{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tn);background:var(--cr3);border-radius:6px;padding:3px 7px;white-space:nowrap}
.ag-ev .agatr{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#BD8E16;background:rgba(242,188,51,.15);border:1px solid rgba(242,188,51,.35);border-radius:6px;padding:2px 7px;white-space:nowrap}
body.dark .ag-ev .agatr{color:#F2BC33}
.ag-ev .aghr{font-size:11.5px;font-weight:700;background:var(--cr3);border-radius:7px;padding:3px 8px;white-space:nowrap;color:var(--tn);display:inline-flex;align-items:center;gap:4px}
.ag-ev .aglanc{background:var(--gd2);color:#fff;border:0;border-radius:7px;padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.ag-dv .agsh{font-size:10.5px;font-weight:800;color:var(--tn);letter-spacing:.5px;margin:12px 12px 4px;text-transform:uppercase}
.ag-dv .aghour{display:flex;gap:11px;align-items:flex-start}
.ag-dv .aghh{font-size:11px;color:var(--tn);width:46px;text-align:right;padding-top:11px;font-weight:700;flex:none}
.ag-dv .agslot{flex:1;border-top:1px solid var(--bl);padding:6px 0;min-height:20px}
.ag-empty{text-align:center;color:var(--tn);padding:44px 12px;font-size:13px}
/* ═══ v4.4.0 — AGENDA + BANCADA (proposta 17) ═══════════════════════════════════════
UM número comanda a tela: a carga de produção do dia. Ela mora dentro da régua (a barrinha
embaixo de cada dia), decide a ALTURA da régua e decide QUEM fica com a coluna da direita.
Dia cheio: régua fina, bancada larga. Dia limpo: régua vira instrumento de planejamento e a
direita passa a ser o Próximos — nunca sobra coluna ociosa. */
.ag-rcard{margin-bottom:16px}
.ag-rh{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--bl);flex-wrap:wrap}
.ag-rh h2{font-family:'Playfair Display',serif;font-size:17px;margin:0}
.ag-rh small{font-size:12px;color:var(--tn)}
.ag-rh .ag-racts{margin-left:auto;display:flex;align-items:center;gap:6px}
.ag-rbtn{font-size:11.5px;font-weight:700;color:var(--tn);background:var(--cr2);border:1px solid var(--bd);border-radius:8px;padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ag-rbtn:hover{border-color:var(--gd);color:var(--ft)}
.ag-rbtn.on{color:var(--gd2);border-color:var(--gd);background:var(--gp)}
body.dark .ag-rbtn.on{background:rgba(224,182,60,.16)}
.ag-reg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ag-rd{padding:9px 3px 10px;text-align:center;cursor:pointer;transition:.12s;border-right:1px solid var(--bl);min-width:0}
.ag-rd:last-child{border-right:0}
.ag-rd:hover{background:var(--cr3)}
.ag-rd .rs{font-size:9.5px;font-weight:800;color:var(--tn);letter-spacing:.3px;text-transform:uppercase}
.ag-rd .rn{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;line-height:1.15;margin-top:1px}
.ag-rd.hoje{background:var(--gp)}
.ag-rd.hoje .rn,.ag-rd.hoje .rs{color:var(--gd)}
body.dark .ag-rd.hoje{background:rgba(224,182,60,.17)}
body.dark .ag-rd.hoje .rn,body.dark .ag-rd.hoje .rs{color:var(--gd2)}
.ag-rd.sel{box-shadow:inset 0 -2.5px 0 var(--gd)}
.ag-rd.fds{opacity:.55}
.ag-rd .ag-dots{justify-content:center;margin-top:4px;min-height:6px}
/* a barrinha de carga: MESMO número que comanda o layout */
.ag-rbar{height:3px;border-radius:3px;background:var(--ag-f);margin:5px auto 0;max-width:76%;opacity:.85}
/* régua MÉDIA e LARGA: cresce quando não há trabalho — vira planejamento */
.ag-reg.media .ag-rd{padding:12px 4px 13px}
.ag-reg.media .ag-rd .rn{font-size:20px}
.ag-reg.larga .ag-rd{padding:12px 6px 11px;text-align:left;min-height:104px;vertical-align:top}
.ag-reg.larga .ag-rd .rn{font-size:21px}
.ag-reg.larga .ag-rd .ag-dots{justify-content:flex-start}
.ag-rmini{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.ag-rmini span{font-size:9.5px;line-height:1.3;color:var(--tn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.ag-rmini i{width:5px;height:5px;border-radius:50%;flex:none}
.ag-rmini i.a{background:var(--ag-a)}.ag-rmini i.p{background:var(--ag-p)}.ag-rmini i.l{background:var(--ag-l)}.ag-rmini i.f{background:var(--ag-f)}
/* o mês abre DENTRO do cartão da régua — nada embaixo troca de lugar */
.ag-mesx{border-top:1px solid var(--bl);padding:11px 13px 14px;background:var(--cr);display:none}
.ag-mesx.on{display:block}
.ag-mesx .ag-day{aspect-ratio:auto;height:46px;border-color:var(--bl)}
.ag-mesx .ag-day .ag-dots{margin-top:3px}
.ag-mesx .ag-day.sem{background:var(--cr3);border-color:var(--bd)}
.ag-mesx .ag-mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ag-mesx .ag-mtop .ag-mes{min-width:0}
/* as duas colunas — a proporção segue a carga */
.ag-duo{display:grid;gap:16px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr)}
.ag-duo.meio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ag-duo.solo{grid-template-columns:minmax(0,1fr)}
/* No estado cheio a coluna da agenda é estreita: se o selo ("atrasado · era 27/07") disputar a linha
com o título, o título quebra em 3 linhas. Garantindo 60% pro texto, o selo desce inteiro. */
.ag-pnl .ag-ev{flex-wrap:wrap}
.ag-pnl .ag-ev .agtx{min-width:60%}
/* BANCADA */
.ag-bh{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--bl);flex-wrap:wrap}
.ag-bh .bi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:rgba(61,122,82,.13);color:var(--ag-f)}
.ag-bh h2{font-family:'Playfair Display',serif;font-size:17px;margin:0}
.ag-bh small{font-size:11.5px;color:var(--tn);display:block;margin-top:1px}
.ag-bcount{margin-left:auto;font-size:11px;font-weight:800;color:var(--ag-f);background:rgba(61,122,82,.12);border-radius:20px;padding:4px 10px;white-space:nowrap}
body.dark .ag-bcount{color:#7FBF95;background:rgba(95,165,122,.15)}
.ag-chips{display:flex;gap:5px;flex-wrap:wrap;padding:9px 11px 3px}
.ag-chip{font-size:11px;font-weight:700;background:var(--cr);border:1px solid var(--bd);border-radius:7px;padding:4px 9px;white-space:nowrap}
.ag-chip b{font-family:'Playfair Display',serif;font-size:14px;color:var(--ag-f)}
body.dark .ag-chip b{color:#7FBF95}
.ag-chip.apc{opacity:.6;border-style:dashed}
.ag-blist{padding:7px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:5px;max-height:430px;overflow-y:auto}
.ag-blot{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;border:1px solid var(--bl);background:var(--cr2);position:relative;cursor:pointer;transition:.14s;min-width:0}
.ag-blot:hover{background:var(--cr3)}
.ag-blot::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3.5px;border-radius:4px;background:var(--ag-f)}
.ag-blot .bkw{padding:8px;margin:-8px 0 -8px -4px;display:grid;place-items:center;flex:none;cursor:pointer}
.ag-blot .bk{width:17px;height:17px;flex:none;border-radius:5px;border:1.5px solid var(--bd);display:grid;place-items:center;color:transparent}
.ag-blot .bkw:hover .bk{border-color:var(--gd2)}
.ag-blot .bk .ic{width:11px;height:11px}
.ag-blot.mk .bk{border-color:var(--gd2);background:var(--gd2);color:#fff}
.ag-blot .bn{flex:1;min-width:0}
.ag-blot .b1{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-blot .b2{font-size:10.5px;color:var(--tn);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-blot .b2 em{font-style:normal;opacity:.75}
.ag-blot .bq{font-size:10.5px;font-weight:800;color:var(--ag-f);background:rgba(61,122,82,.11);border:1px solid rgba(61,122,82,.26);border-radius:6px;padding:2px 7px;white-space:nowrap}
body.dark .ag-blot .bq{color:#7FBF95;background:rgba(95,165,122,.15);border-color:rgba(95,165,122,.3)}
.ag-bacts{display:flex;gap:7px;justify-content:flex-end;padding:9px 12px 12px;border-top:1px solid var(--bl)}
/* bancada limpa = faixa fina que MANTÉM o território reservado e visível */
.ag-bfaixa{display:none;align-items:center;gap:11px;padding:11px 15px;border-radius:12px;border:1px dashed var(--bd);font-size:12.5px;color:var(--tn);margin-bottom:16px;line-height:1.5}
.ag-bfaixa.on{display:flex}
.ag-bfaixa .bi{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:rgba(61,122,82,.1);color:var(--ag-f);flex:none;opacity:.8}
.ag-bfaixa b{color:var(--ft)}
.ag-bfaixa .ag-rbtn{margin-left:auto}
@media(max-width:600px){
.ag-duo,.ag-duo.meio{grid-template-columns:minmax(0,1fr)}
.ag-reg{grid-template-columns:repeat(7,minmax(0,1fr))}
.ag-rd{padding:7px 1px 8px}
.ag-rd .rn{font-size:14px}
.ag-rd .rs{font-size:8px}
.ag-reg.larga .ag-rd{min-height:0;padding:9px 3px 9px;text-align:center}
.ag-rmini{display:none}
.ag-blist{grid-template-columns:minmax(0,1fr);max-height:none}
.ag-rh{padding:11px 12px}
.ag-bfaixa{flex-wrap:wrap}
}
/* card "Hoje na agenda" no dashboard */
.ag-hoje-card .agh-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--bl);font-size:13px}
.ag-hoje-card .agh-row:first-child{border-top:0}
.ag-hoje-card .agh-row .agh-bd{width:9px;height:9px;border-radius:50%;flex:none}
.ag-hoje-card .agh-row .agh-h{margin-left:auto;font-weight:700;color:var(--tn);font-size:11.5px}
/* v4.7.15: a linha que aparece quando o dia tem mais de 6 pendências e leva pra Agenda */
.ag-hoje-card .agh-mais{margin-top:8px;padding-top:8px;border-top:1px dashed var(--bl);font-size:12px;color:var(--tn);cursor:pointer;text-align:center;letter-spacing:.04em}
.ag-hoje-card .agh-mais:hover{color:var(--gd)}
.ag-hoje-card .agh-row .aglanc{margin-left:6px}
/* v4.3.0: concluir a tarefa direto do card do Dashboard */
.ag-hoje-card .agh-row .agok{width:19px;height:19px;flex:none;padding:0;margin-left:6px;border-radius:50%;border:2px solid var(--bd);background:transparent;cursor:pointer;display:grid;place-items:center;color:transparent;transition:.14s}
.ag-hoje-card .agh-row .agok .ic{width:11px;height:11px}
.ag-hoje-card .agh-row .agok:hover{border-color:var(--gd2);color:var(--gd2)}
/* ═══ v4.3.1: lista de PRODUÇÃO (modal m-producao) ═══ */
.pl{background:var(--cr);border:1px solid var(--bl);border-radius:10px;overflow:hidden}
.pl-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--bl)}
.pl-row:last-of-type{border-bottom:0}
.pl-qt{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--gd2);min-width:34px;text-align:right}
.pl-ml{font-weight:700;font-size:14.5px;flex:1;min-width:0}
.pl-nomes{font-size:11px;color:var(--tn);margin-top:1px;font-weight:500}
.pl-tag{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:5px;padding:3px 7px;white-space:nowrap}
.pl-tag.apc{color:var(--pu);background:rgba(107,63,160,.12);border:1px solid rgba(107,63,160,.3)}
body.dark .pl-tag.apc{color:#b083c4;background:rgba(176,131,196,.15);border-color:rgba(176,131,196,.32)}
.pl-tag.sobra{color:var(--or);background:rgba(140,144,152,.12);border:1px solid rgba(140,144,152,.3)}
body.dark .pl-tag.sobra{color:#F2BC33;background:rgba(242,188,51,.14);border-color:rgba(242,188,51,.32)}
.pl-tot{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:var(--cr3);font-size:12.5px;font-weight:700;color:var(--tn)}
.pl-tot b{color:var(--ft);font-size:14px}
/* v4.3.2 — a APC não é trabalho: linha informativa, apagada, e nota quando SÓ há APC */
.pl-row.info{opacity:.62}
.pl-row.info .pl-qt{color:var(--tn)}
.pl-fica{font-size:10.5px;font-weight:700;color:var(--tn);text-transform:none}
.pl-nada{margin-top:9px;font-size:12px;color:var(--tn);line-height:1.6}
/* ══════ v4.12.0 — CELULAR / iOS SAFARI ══════════════════════════════════════
Fica no FIM do CSS DE PROPÓSITO: mesma especificidade, ordem posterior vence
(lição da v4.0.9). Nada aqui altera o desktop. */
/* 100vh no iOS é MAIOR que a área visível (a barra do Safari não é descontada) →
o rodapé da página fica atrás dela. 100dvh acompanha a barra abrindo e fechando. */
@supports(height:100dvh){body{min-height:100dvh}.main{min-height:100dvh}}
@media(max-width:600px){
/* O iOS dá ZOOM em qualquer campo com fonte <16px assim que ele recebe foco — e NÃO
desfaz o zoom depois, o que joga o layout inteiro pra fora da tela. 16px é o mínimo
que evita isso. Só no celular: no desktop os campos seguem em 13px.
O 2º seletor existe porque ~15 campos trazem font-size inline (12px) — e regra de
autor com !important vence style inline sem important. */
input,select,textarea{font-size:16px}
input[style*="font-size"],select[style*="font-size"],textarea[style*="font-size"]{font-size:16px!important}
/* A barra de ferramentas do Safari cobre tudo que é fixo no rodapé: o toast aparecia
espremido atrás dela e o rodapé de botões do modal em tela cheia (Salvar/Cancelar)
ficava inalcançável. env(safe-area-inset-bottom) é a altura real dessa faixa. */
.tw-wrap{bottom:calc(14px + env(safe-area-inset-bottom));left:14px;right:14px}
.toast{max-width:none}
.modal .mft{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
/* No toque o :hover fica PRESO depois do clique (o dedo não tem "sair de cima"), então o
botão continua pulado/sombreado até você tocar em outro lugar. Desliga só o movimento e
a sombra — o realce de fundo fica, que é discreto e serve de confirmação do toque. */
@media(hover:none){
.bg:hover,.abc:hover,.clc:hover,#cl-cont .clc:hover,.fr-opt:hover,.fr-card:hover,
.env-card:hover,.etq-t[onclick]:hover,.lg-btn:hover,.lg-theme:hover,.ag-ev:hover,
.pped tbody tr.r-ab:hover td:first-child,.pped tbody tr.r-av:hover td:first-child{
transform:none;box-shadow:none}
}
|