/*
 * A identidade vem da empresa, não daqui.
 *
 * Este bloco é uma PONTE: os nomes à esquerda são os que o desenho usa; os da
 * direita, os que o servidor emite a partir de  (ver
 * src/marca.js). Trocar de cliente troca as cores e a fonte sem tocar numa
 * linha de estilo — e uma folha servida a todo cliente não pode ter a cor de
 * nenhum escrito dentro.
 *
 * Os valores de reserva à direita são o tema neutro, para a folha continuar
 * legível se o bloco da marca não chegar.
 */
:root{
  --brand:var(--marca,#1f3a5f); --brand-soft:var(--marca-suave,#eaeff5);
  --ink:var(--tinta,#1c1f24); --muted:var(--apagado,#6b7480);
  --paper:var(--papel,#f6f7f9); --surface:var(--superficie,#fff);
  --line:var(--linha,#e2e5ea); --gold:var(--ouro,#8a7f6d);
  --amber:var(--atencao,#8a6520); --amber-bg:var(--atencao-fundo,#f6f0e4);
  --red:var(--erro,#8b1a12); --red-bg:var(--erro-fundo,#fbf1ef);
  --green:var(--bom,#1e5b28); --green-bg:var(--bom-fundo,#edf4ef);
  --radius:12px;
  --display:var(--sans,system-ui,sans-serif)
}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,tr:focus-visible{outline:2px solid var(--brand);outline-offset:4px}button:disabled{cursor:default;opacity:.45}svg.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sidebar{position:fixed;inset:0 auto 0 0;width:236px;padding:35px 20px 22px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand{display:flex;flex-direction:column;align-items:flex-start;padding:7px 20px 37px;gap:10px}.brand-logo{width:155px;object-fit:contain;max-height:55px}.brand>span{font-size:12px;letter-spacing:5px;color:var(--muted)}.nav-caption{font-size:12px;letter-spacing:1.4px;color:var(--muted);padding:15px 20px}.side-nav{display:flex;flex-direction:column;gap:7px}.nav-item{display:flex;align-items:center;gap:13px;min-height:49px;padding:12px 18px;border-radius:8px;font-size:14px;color:#717772;transition:background .16s,color .16s}.nav-item:hover{background:var(--paper)}.nav-item.active{background:var(--brand);color:white;font-weight:600}.nav-item .count{margin-left:auto;font-size:12px;opacity:.7}.sidebar-bottom{margin-top:auto;padding:18px 17px 0}.mini-label{font-size:12px;letter-spacing:.8px;color:var(--muted)}.sidebar-bottom>p{font-family:var(--display);font-size:19px;line-height:1.4;color:#747b73;margin:14px 0 31px}.profile{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:22px}.avatar{border:1px solid #d9dfd8;background:#eff2f7;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:12px;letter-spacing:.8px}.profile strong{font-size:14px;font-weight:500}.profile small{display:block;color:var(--muted);font-size:12px}.workspace{margin-left:236px}.topbar{height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:var(--surface)}.breadcrumb{font-size:14px;color:var(--muted)}.breadcrumb span{padding:0 12px;color:#bbb}.breadcrumb b{font-weight:500;color:var(--ink)}.topbar-right{display:flex;gap:20px;align-items:center;font-size:12px}.reference-date{color:var(--muted)}.preview-label{color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:4px 8px}.small{width:32px;height:32px}.mobile-brand{display:none}main{max-width:1580px;margin:auto;padding:34px 42px 20px;min-height:calc(100vh - 150px)}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:15px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin:0 0 6px}h1,h2,h3,p{margin-top:0}h1{font-family:var(--display);font-size:38px;font-weight:400;line-height:1.15;letter-spacing:-1px;margin-bottom:0}.heading-sub{font-size:14px;color:var(--muted);margin:9px 0 0}.heading-actions{display:flex;align-items:center;gap:10px}.period{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 13px;border-radius:7px;font-size:14px;white-space:nowrap;background:var(--surface)}.period .icon{width:16px}.btn{min-height:43px;border-radius:7px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;white-space:nowrap}.btn.primary{background:var(--brand);color:white}.btn.primary:hover{filter:brightness(1.12)}.btn.secondary{background:var(--surface);border:1px solid var(--line)}.btn.text{padding:0;min-height:32px;color:var(--brand)}.btn .icon{width:17px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.kpi-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-bottom:20px}.kpi.revenue{grid-column:span 2}.kpi{padding:17px 18px;min-height:136px}.kpi-top{font-size:14px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);gap:8px}.kpi-top .icon{width:18px;color:#94a1b2}.kpi-value{font-size:clamp(19px,1.55vw,26px);line-height:1.15;letter-spacing:-.8px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:12px;white-space:nowrap}.currency{font-size:.54em;vertical-align:middle;letter-spacing:0;font-weight:400;margin-right:6px}.kpi-note{font-size:12px;color:var(--muted);margin-top:9px}.kpi.revenue{background:var(--brand);border-color:var(--brand);color:white;position:relative}.revenue .kpi-top,.revenue .kpi-top .icon,.revenue .kpi-note{color:#bccbdc}.revenue .kpi-value{font-size:clamp(22px,2vw,31px)}.kpi .good{color:var(--green)}.kpi .warn{color:var(--amber)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);gap:22px}.dashboard-grid>*{min-width:0}.panel{padding:24px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}.panel h2,.section-title h2{font-size:17px;letter-spacing:-.3px;font-weight:500;margin:0}.panel-sub{font-size:12px;color:var(--muted);margin:4px 0 0}.progress-summary{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}.progress-summary strong{font-size:32px;font-weight:400;letter-spacing:-1px}.progress-summary span{font-size:12px;color:var(--muted)}.legend{display:flex;gap:19px;font-size:12px;color:var(--muted);margin-bottom:6px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:18px;height:2px;background:var(--brand)}.legend i.dashed{height:0;background:none;border-top:2px dashed #b6c1d0}.chart{display:block;width:100%;height:auto;max-height:235px;margin:10px 0 0}.chart text{font:12px var(--sans);fill:#8993a1}.chart .plot-label{fill:var(--brand);font-weight:600}.chart-note{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:15px;margin:7px 0 0;font-size:12px;color:var(--green)}.chart-note .icon{width:16px;height:16px}.chart-note b{font-weight:600}.channels{display:flex;flex-direction:column;gap:23px;padding:11px 0 3px}.channel-row>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:9px;gap:8px}.channel-row strong{font-weight:500;font-variant-numeric:tabular-nums}.channel-label{display:flex;align-items:center;gap:9px}.channel-label .icon{width:16px;color:var(--muted)}.channel-track{height:4px;background:#eef1f5;position:relative;border-radius:4px}.channel-track>i{display:block;height:100%;background:var(--brand);border-radius:4px}.channel-row:nth-child(2) .channel-track>i{background:#527397}.channel-row:nth-child(3) .channel-track>i{background:#92a6bf}.channel-row:nth-child(4) .channel-track>i{background:#c4cfdf}.channel-share{font-size:12px;color:var(--muted);text-align:right;margin-top:5px}
/* Ranking por faturamento. A barra mede UMA grandeza, entao tem UMA cor: a
   identidade da linha esta no rotulo, nao no tom. */
.ranking{display:flex;flex-direction:column;gap:15px}
.rank-row{min-width:0}
.rank-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.rank-nome{font-size:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-topo strong{flex:0 0 auto;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.ranking .channel-track>i{background:var(--brand)}
.rank-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--muted)}
.rank-pe .badge{font-size:11px;padding:2px 6px}
.rank-row.sem-categoria .rank-nome{color:var(--muted);font-style:italic}
.rank-row.sem-categoria .channel-track>i{background:#c3cbd6}.section-title{display:flex;align-items:center;justify-content:space-between;margin:28px 0 14px;gap:10px}.attention-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.attention-card{text-align:left;display:block;padding:17px;transition:transform .15s,border-color .15s}.attention-card:hover{transform:translateY(-2px);border-color:#afbed2}.attention-card h3,.attention-card .titulo-cartao{font-size:15px;font-weight:500;margin:14px 0 3px}.attention-card p{font-size:12px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attention-card .attention-foot{margin-top:17px;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;border-radius:4px;padding:4px 7px;line-height:1.35;white-space:nowrap}.badge.warn{background:var(--amber-bg);color:var(--amber)}.badge.good{background:var(--green-bg);color:var(--green)}.badge.danger{background:var(--red-bg);color:var(--red)}.badge.neutral{background:#eff2f7;color:#6a7169}.page-footer{max-width:1580px;margin:0 auto;display:flex;justify-content:space-between;font-size:12px;color:#929ba8;gap:16px;padding:16px 42px 26px}.page-footer>span:first-child{letter-spacing:1.8px;font-size:12px}.footer-divider{margin:0 8px}.bottom-nav{display:none}.overview-strip{display:flex;gap:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:19px 0;margin-bottom:22px}.strip-item{padding:0 28px;border-right:1px solid var(--line);flex:1}.strip-item:last-child{border:0}.strip-label{font-size:12px;color:var(--muted);display:block}.strip-value{font-size:24px;font-weight:400;letter-spacing:-.6px;line-height:1.5;font-variant-numeric:tabular-nums}.strip-value .currency{font-size:.65em}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.tabs{display:flex;align-items:center;gap:4px;overflow:auto;scrollbar-width:none}.tab{font-size:14px;min-height:39px;white-space:nowrap;padding:8px 12px;border-radius:6px;color:var(--muted)}.tab.active{background:var(--brand-soft);color:var(--brand);font-weight:500}.tab .tab-count{font-size:12px;margin-left:6px;opacity:.65}.search{position:relative;display:flex;align-items:center;width:260px;flex-shrink:0}.search .icon{position:absolute;left:13px;width:17px;color:var(--muted)}.search input{width:100%;min-height:41px;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:9px 12px 9px 39px;font-size:14px;color:var(--ink)}input::placeholder{color:#919cad}.table-card{overflow:hidden}.orders-table,.clients-table{width:100%;border-collapse:collapse;text-align:left}.orders-table th,.clients-table th{font-size:12px;font-weight:400;color:var(--muted);background:#fafbfd;padding:13px 20px;border-bottom:1px solid var(--line)}.orders-table td,.clients-table td{padding:18px 20px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}.orders-table tr:last-child td,.clients-table tr:last-child td{border-bottom:0}.orders-table tbody tr,.clients-table tbody tr{cursor:pointer}.orders-table tbody tr:hover,.clients-table tbody tr:hover{background:#fafbfd}.cell-main{display:block;font-size:14px;font-weight:500;margin-bottom:4px}.cell-sub{font-size:12px;color:var(--muted);display:block;max-width:265px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.amount{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.cell-status{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.row-arrow{width:13px!important;color:#a2aabb}.table-bottom{padding:13px 20px;background:#fafbfd;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between}.mobile-cards{display:none}.status-summary{display:flex;gap:13px;margin-bottom:23px}.summary-note{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);border-radius:7px;font-size:14px}.summary-note .icon{width:17px}.summary-note.positive{color:var(--green)}.summary-note.warning{color:var(--amber)}.production-tabs{display:none}.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:18px;align-items:start;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:14px;scrollbar-width:thin;scroll-snap-type:x proximity}.kanban-lane{border:1px solid var(--line);border-radius:12px;background:#eef1f6;padding:10px;display:flex;flex-direction:column;min-width:0;max-height:calc(100dvh - 356px);min-height:240px;scroll-snap-align:start}.lane-cards{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;margin:-5px;padding:5px}.lane-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:14px;font-weight:500;flex:0 0 auto}.lane-name{display:flex;align-items:center;gap:8px}.lane-name .icon{width:16px;color:var(--muted)}.lane-count{width:25px;height:25px;display:grid;place-items:center;border-radius:5px;background:#e0e7f0;color:#667b98;font-size:12px}.production-card{display:block;width:100%;padding:9px 11px 10px;text-align:left;margin-bottom:7px;transition:border-color .15s}.production-card:last-child{margin:0}.production-card:hover{border-color:#a3b6cd}.prod-client{display:block;font-size:14px;font-weight:500;line-height:1.35;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prod-product{font-size:12px;color:var(--muted);margin:1px 0 6px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prod-foot{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);line-height:1.5;min-width:0}.prod-foot+.prod-foot{margin-top:2px}.prod-foot>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.prod-selos{display:inline-flex;gap:3px;flex-shrink:0;overflow:visible}.prod-selos .badge{font-size:11px;padding:1px 5px}.prod-quem{flex:1 1 auto;text-align:right}
/* Cartão de trabalho: foto do modelo à esquerda, o resto ao lado. */
.cartao-trabalho{display:flex;gap:11px;align-items:flex-start}
.prod-corpo{flex:1 1 auto;min-width:0}
.prod-foto{width:58px;height:58px;flex-shrink:0;border-radius:8px;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
.prod-foto.vazia{display:grid;place-items:center;color:#b3bcc8}
.prod-foto.vazia .icon{width:22px}
.cartao-trabalho .prod-foot{margin-top:3px}
.cartao-trabalho .prod-foot{flex-wrap:wrap;row-gap:3px}
/* Etiqueta de objetivo: e categoria, nao estado de prazo — por isso nao usa
   as cores de aviso, que ja querem dizer outra coisa no mesmo cartao. */
.badge.etiqueta{background:var(--brand-soft);color:var(--brand);border:1px solid #d3dfec}
.cartao-trabalho .prod-foot .badge{flex-shrink:0}
.cartao-trabalho .prod-quem{text-align:right}
/* Campo de foto no formulário, e a foto na ficha de leitura. */
.campo-foto>span{font-size:14px;margin-bottom:7px;display:block}
.foto-alvo{display:block;cursor:pointer;border:1px dashed #cdd6e2;border-radius:9px;background:var(--paper);overflow:hidden;min-height:104px;display:grid;place-items:center}
.foto-alvo:hover{border-color:var(--brand)}
.foto-previa{display:block;width:100%;max-height:230px;object-fit:contain;background:#fff}
.foto-vazio{display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:13px;padding:26px}
.foto-vazio .icon{width:22px}
.foto-acoes{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;min-height:22px}
.foto-recado{font-size:12px;color:var(--muted)}
.foto-recado.erro{color:var(--red)}
.foto-ficha{display:block;width:100%;max-height:300px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:var(--paper);margin-bottom:16px}.prod-sep{font-style:normal;color:#b8c0cc;flex-shrink:0}.prod-foot strong{margin-left:auto;padding-left:6px;font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;flex-shrink:0}.context-note{font-size:12px;color:var(--muted);margin:17px 0 0}.empty-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:420px;padding:40px 24px}.empty-symbol{width:76px;height:76px;border:1px solid #d9e2ef;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--paper);margin-bottom:24px;color:var(--brand)}.empty-symbol .icon{width:29px;height:29px;stroke-width:1.2}.empty-panel h2{font-family:var(--display);font-size:28px;font-weight:400;letter-spacing:-.6px;margin:0 0 10px}.empty-panel p{font-size:14px;color:var(--muted);max-width:340px;margin:0 0 25px}.client-name{display:flex;align-items:center;gap:14px}.client-avatar{width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#f4f7fb;color:#7489a5;font-family:var(--display);font-size:17px;flex-shrink:0}.rank{font-size:12px;color:#95a2b5;width:18px;display:inline-block;margin-right:4px}.client-volume{width:150px;height:3px;background:#edf1f7;border-radius:3px}.client-volume i{height:3px;background:#6887af;display:block;border-radius:3px}.dialog-close{width:35px;height:35px;border-radius:50%;background:var(--paper);display:grid;place-items:center}.dialog-close .icon{width:17px}.detail-dialog{padding:0;border:1px solid var(--line);border-radius:16px;width:min(540px,calc(100% - 32px));max-height:88dvh;color:var(--ink);background:var(--surface);box-shadow:0 24px 100px #17241925}.detail-dialog::backdrop{background:#13211566;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;padding:25px 27px 18px;border-bottom:1px solid var(--line);gap:10px}.dialog-head h2{font-family:var(--display);font-size:28px;font-weight:400;line-height:1.2;margin:4px 0 0}.dialog-body{padding:23px 27px 27px}.detail-amount{font-size:36px;letter-spacing:-1px;font-weight:400;margin-bottom:20px}.detail-line{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}.detail-line>span:first-child{color:var(--muted);flex-shrink:0}.detail-line>span:last-child{text-align:right}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;font-size:14px}.field.full{grid-column:1/-1}.field input,.field select{min-height:43px;border:1px solid #dce3ed;border-radius:6px;padding:10px 11px;background:white;min-width:0;font-size:16px}.form-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);padding-top:20px;margin-top:25px}.form-note{font-size:12px;color:var(--muted);margin:18px 0 0}.toast{position:fixed;bottom:28px;left:calc(50% + 118px);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--brand);color:white;padding:13px 20px;border-radius:9px;font-size:14px;box-shadow:0 8px 25px #16271125;z-index:100;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);width:max-content}.toast.show{opacity:1;transform:translate(-50%,0)}.no-results{text-align:center;padding:40px;font-size:14px;color:var(--muted)}.filter-caption{font-size:12px;color:var(--muted);white-space:nowrap}.amount-small{font-size:14px}.expenses-list .orders-table td{padding:22px 20px}.metric-tip{color:var(--muted);font-size:12px;margin:10px 0 0}
@media(min-width:1550px){.kpi{padding:25px}.kpi-grid{gap:22px}.chart{max-height:260px}}
@media(max-width:1200px){.sidebar{width:206px;padding-left:13px;padding-right:13px}.brand{padding-left:16px}.workspace{margin-left:206px}.topbar{padding:0 28px}main{padding:28px}.page-footer{padding-left:28px;padding-right:28px}.kpi-grid{gap:9px}.kpi{padding:15px 13px}.dashboard-grid{grid-template-columns:minmax(0,1.5fr) minmax(255px,1fr);gap:16px}.panel{padding:20px}.attention-grid{grid-template-columns:repeat(2,1fr)}.orders-table th,.orders-table td,.clients-table th,.clients-table td{padding-left:14px;padding-right:14px}.orders-table .hide-mid,.clients-table .hide-mid{display:none}.toast{left:calc(50% + 103px)}}
@media(max-width:1000px){.kpi-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.kpi.revenue{grid-column:1/-1}.dashboard-grid{grid-template-columns:1fr}.kpi{min-height:137px}.kpi-value{margin-top:10px}.sidebar{width:185px;padding-left:10px;padding-right:10px}.brand-logo{width:134px}.brand{padding-left:14px}.nav-caption{padding-left:14px;font-size:12px;letter-spacing:.6px}.nav-item{padding:12px}.sidebar-bottom{padding-left:12px;padding-right:12px}.workspace{margin-left:185px}.period{font-size:12px;padding:9px}.heading-actions{gap:7px}.channels{display:grid;grid-template-columns:1fr 1fr;gap:24px}.toolbar{flex-wrap:wrap}.search{width:220px}.kanban{gap:13px;grid-auto-columns:minmax(268px,1fr)}.kanban-lane{padding:12px;max-height:calc(100dvh - 368px)}.production-card{padding:14px}.strip-item{padding:0 18px}.strip-value{font-size:22px}.reference-date{display:none}}
@media(max-width:760px){.sidebar{display:none}.workspace{margin-left:0}.topbar{height:76px;padding:0 21px;background:var(--surface)}.breadcrumb{display:none}.mobile-brand{display:flex;align-items:center}.brand-logo{width:137px;max-height:43px}.topbar-right{gap:12px}.topbar-right .small{display:none}.preview-label{font-size:12px;padding:3px 7px}.bottom-nav{position:fixed;inset:auto 0 0;display:grid;grid-template-columns:repeat(5,1fr);padding:9px 7px calc(9px + env(safe-area-inset-bottom));background:#fffffff5;;border-top:1px solid var(--line);z-index:30}.bottom-nav a{display:flex;align-items:center;flex-direction:column;gap:4px;color:#8592a5;font-size:12px;padding:6px 2px;position:relative;border-radius:7px}.bottom-nav a .icon{width:20px;height:20px}.bottom-nav a.active{color:var(--brand);font-weight:600;background:var(--brand-soft)}main{padding:24px 19px 25px;min-height:calc(100svh - 183px)}.page-heading{margin-bottom:21px;align-items:flex-end;gap:8px;flex-wrap:wrap}.heading-actions [data-acao="novo-cartao"] span{display:none}.eyebrow{font-size:12px;letter-spacing:1.6px;margin-bottom:6px}h1{font-size:33px;letter-spacing:-.8px}.heading-sub{font-size:12px;margin-top:7px}.period{font-size:12px;padding:8px 9px;gap:5px;min-height:35px}.period .icon{width:14px}.heading-actions .btn{font-size:12px;padding:9px 11px;min-height:36px}.heading-actions .btn .icon{width:15px}.heading-actions{align-items:flex-end}.heading-actions .desktop-period{display:none}.kpi-grid{gap:10px;margin-bottom:17px}.kpi{min-height:132px;padding:16px 15px}.kpi-top{font-size:12px}.kpi-top .icon{width:16px}.kpi-value,.revenue .kpi-value{font-size:25px;margin-top:12px;letter-spacing:-.8px}.kpi-note{font-size:12px;line-height:1.4;margin-top:10px}.kpi.revenue{grid-column:1/-1;min-height:141px;padding:20px}.revenue .kpi-top{font-size:14px}.revenue .kpi-value{font-size:37px;margin-top:13px}.revenue .kpi-note{position:absolute;right:20px;bottom:23px;width:115px;text-align:right;line-height:1.55}.kpi-grid .kpi.orders{grid-column:1/-1;min-height:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:15px 17px;order:4}.kpi.orders .kpi-top{font-size:14px;gap:10px;justify-content:flex-start}.kpi.orders .kpi-value{font-size:26px;margin:0}.kpi.orders .kpi-note{display:none}.dashboard-grid{gap:17px}.panel{padding:19px 18px}.panel h2,.section-title h2{font-size:16px}.panel-head{margin-bottom:15px}.panel-head .btn.text{font-size:12px}.progress-summary strong{font-size:29px}.progress-summary{margin-bottom:9px}.progress-summary span{font-size:12px}.legend{font-size:12px;gap:15px}.chart{margin-top:13px;margin-bottom:7px}.chart-note{font-size:12px;align-items:flex-start;line-height:1.6}.chart-note .icon{margin-top:2px;flex-shrink:0}.channels{display:flex;gap:20px;padding-top:3px}.channel-row>div:first-child{font-size:14px}.channel-share{margin-top:5px}.section-title{margin-top:24px}.section-title .btn{font-size:12px}.attention-grid{gap:10px}.attention-card{padding:14px 12px}.attention-card .badge{font-size:12px;padding:3px 5px}.attention-card h3,.attention-card .titulo-cartao{font-size:15px}.attention-card .attention-foot{gap:3px}.attention-foot .icon{width:14px}.page-footer{display:flex;flex-direction:column;padding:4px 19px 112px;gap:7px;font-size:12px}.page-footer>span:first-child{font-size:12px}.overview-strip{padding:15px 0;margin-bottom:18px;flex-wrap:wrap}.strip-item{padding:0 14px}.strip-value{font-size:23px}.strip-label{font-size:12px}.overview-strip .strip-item:nth-child(3){display:none}.toolbar{gap:12px;margin-bottom:15px}.search{order:-1;width:100%}.search input{min-height:44px;font-size:14px}.tabs{width:100%;gap:4px}.tab{font-size:14px;min-height:37px;padding:8px 10px}.table-card{display:none}.mobile-cards{display:flex;flex-direction:column;gap:10px}.order-card{display:block;width:100%;padding:17px;text-align:left}.order-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:13px;margin-bottom:9px}.order-card-top h3,.order-card-top .titulo-cartao{font-size:16px;font-weight:500;line-height:1.35;margin:0;overflow-wrap:anywhere}.order-card-top .amount{font-size:16px;flex-shrink:0;letter-spacing:-.25px}.order-card-product{font-size:14px;color:var(--muted);margin-bottom:14px;line-height:1.45}.order-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.order-card-meta{font-size:12px;color:var(--muted);white-space:nowrap}.order-card .cell-status{gap:5px}.order-card .badge{font-size:12px;padding:4px 6px}.mobile-record-count{font-size:12px;color:var(--muted);text-align:center;margin:8px 0}.status-summary{gap:9px;margin-bottom:17px}.summary-note{font-size:12px;padding:9px 10px;gap:6px;flex:1;white-space:nowrap}.summary-note .icon{width:15px}.production-tabs{display:flex;margin-bottom:17px;background:#e8eef6;padding:4px;border-radius:8px;gap:4px;overflow-x:auto;scrollbar-width:none}.production-tabs button{flex:1 0 auto;min-width:0;white-space:nowrap;min-height:41px;padding:8px 10px;font-size:14px;color:var(--muted);line-height:1.3}.production-tabs button.active{background:white;border-radius:6px;color:var(--ink);box-shadow:0 1px 3px #2236190c}.production-tabs button span{font-size:12px;margin-left:5px;color:var(--muted)}.kanban{display:block;overflow:visible;padding-bottom:0}.kanban-lane{padding:0;border:0;background:transparent;display:none;max-height:none}.kanban-lane.selected{display:block}.lane-cards{overflow:visible;margin:0;padding:0}.lane-head{display:none}.production-card{padding:12px 14px;margin-bottom:9px}.prod-foto{width:66px;height:66px}.prod-client{font-size:16px}.prod-product{font-size:14px;margin-bottom:8px}.prod-foot{font-size:13px}.prod-foot strong{font-size:14px}.context-note{font-size:12px}.empty-panel{min-height:365px;padding:35px 25px}.empty-panel h2{font-size:27px}.empty-panel p{font-size:14px}.empty-panel .btn{font-size:14px}.client-card{display:block;width:100%;text-align:left;padding:17px}.client-card .client-name{gap:12px}.client-card .client-avatar{width:39px;height:39px;font-size:18px}.client-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.client-card h3,.client-card .titulo-cartao{font-size:15px;font-weight:500;margin:0 0 4px;line-height:1.4}.client-card .amount{font-size:15px}.client-card .cell-sub{font-size:12px;white-space:normal}.client-card .client-volume{width:calc(100% - 51px);margin:14px 0 0 51px;height:3px}.client-card .client-volume i{height:3px}.filter-caption{font-size:12px}.detail-dialog{width:calc(100% - 24px);max-height:90dvh;border-radius:13px}.dialog-head{padding:23px 21px 18px}.dialog-head h2{font-size:28px}.dialog-body{padding:20px 21px}.form-grid{gap:13px}.detail-line{font-size:14px}.toast{left:50%;bottom:calc(91px + env(safe-area-inset-bottom));text-align:center;white-space:normal}.expenses-list .mobile-cards{margin-top:16px}}
@media(max-width:360px){main{padding-left:14px;padding-right:14px}.revenue .kpi-value{font-size:33px}.revenue .kpi-note{width:100px;font-size:12px}.order-card-top{flex-wrap:wrap;gap:5px}.client-card-top{flex-wrap:wrap}.form-grid{grid-template-columns:1fr}.summary-note{white-space:normal}.attention-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* As cores vêm da empresa; a folha não conhece nenhuma. */
.sidebar{background:var(--brand);border-right:0;color:#fff}.sidebar .brand>span{color:#b8c7dc}.sidebar .nav-caption{color:#91a7c2}.sidebar .nav-item{color:#becbdd}.sidebar .nav-item:hover{background:#ffffff0c}.sidebar .nav-item.active{color:#fff;background:#ffffff14;box-shadow:inset 2px 0 #aabed6}.sidebar .mini-label{color:#7f98b6}.sidebar .sidebar-bottom>p{color:#a6bad2;font-size:21px}.sidebar .profile{border-color:#ffffff1a}.sidebar .profile small{color:#9aafca}.sidebar .avatar{background:#ffffff0c;border-color:#ffffff22;color:#dbe5f3}.brand{padding-bottom:37px}.brand-logo{max-height:none}.mobile-brand .brand-logo{width:185px;height:59px;object-fit:contain;margin-left:-13px}h1{font-weight:400;letter-spacing:-.65px}.empty-panel h2{font-weight:400}.client-avatar{font-family:var(--sans)}.sidebar .brand-logo{height:auto}.attention-card .badge{font-size:12px}.kpi-value{font-variant-numeric:tabular-nums}
@media(max-width:760px){.order-card-foot{flex-wrap:wrap;align-items:center}.client-card .client-name{min-width:0}.client-card .amount{flex-shrink:0}.heading-sub{max-width:230px}.form-actions .btn{white-space:normal}}

/* ===========================================================================
   Adições ao protótipo, para ele virar sistema.
   O que vem acima desta linha é o desenho entregue, preservado. O que vem
   abaixo é o que o protótipo não tinha por não estar ligado a nada: entrada,
   estados de carregamento, e o que cada papel pode ver.
   =========================================================================== */

/* --------------------------------------------------------------- entrada */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--paper)}
.entrada-cartao{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px 30px}
.entrada-marca{display:block;width:170px;margin:0 auto 6px}
.entrada-cartao h1{font-size:21px;margin:22px 0 4px;text-align:center}
.entrada-cartao .panel-sub{text-align:center;margin:0 0 24px}
.entrada-cartao .field{margin-bottom:16px}
.entrada-cartao .btn{width:100%;justify-content:center}
.entrada-nota{font-size:12.5px;color:var(--muted);text-align:center;margin:20px 0 0;line-height:1.55}

/* ------------------------------------------------------- estados de rede */
/*
 * Esqueleto em vez de rodinha: a tela ja nasce com a forma do conteudo, entao
 * quando o dado chega nada salta de lugar. No 4G da loja isso e a diferenca
 * entre "abriu" e "piscou".
 */
.esqueleto{background:linear-gradient(90deg,var(--line) 25%,#eef1f5 50%,var(--line) 75%);background-size:400% 100%;animation:brilho 1.4s ease infinite;border-radius:8px;color:transparent!important;user-select:none}
@keyframes brilho{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.esqueleto{animation:none}}
.esqueleto-linha{height:14px;margin:8px 0}
.carregando-tela{padding:40px 0;text-align:center;color:var(--muted);font-size:14px}

.erro-de-rede{background:var(--red-bg);border:1px solid #e8cec8;border-left:3px solid var(--red);color:var(--red);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;font-size:14px;line-height:1.55}
.erro-de-rede button{margin-top:10px;font-size:13px;font-weight:700;color:var(--red);text-decoration:underline}

/* ------------------------------------------------------- papel e permissão */
.sem-permissao{text-align:center;padding:56px 24px;color:var(--muted)}
.sem-permissao .empty-symbol{margin:0 auto 18px}
.sem-permissao h2{font-size:19px;color:var(--ink);margin-bottom:8px}
.sem-permissao p{max-width:42ch;margin:0 auto;font-size:14.5px;line-height:1.6}

/* O rotulo do papel na barra lateral, no lugar de "AMBIENTE DE DEMONSTRAÇÃO". */
.profile{cursor:default}
.sair{margin-top:14px;font-size:13px;color:var(--muted);text-decoration:underline}
.sair:hover{color:var(--ink)}

/* --------------------------------------------------------------- detalhes */
.detail-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.detail-acoes .btn{flex:1;min-width:140px;justify-content:center}
.custo-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.custo-aviso{background:var(--amber-bg);border-left:3px solid var(--amber);color:var(--amber);padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.55;margin:14px 0}
.natureza-ajuda{font-size:12.5px;color:var(--muted);line-height:1.5;margin:6px 0 0}

/* Itens repetíveis do formulário de pedido. */
.itens-lista{margin:4px 0 12px}
.item-bloco{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px;background:var(--paper)}
.item-bloco.e-brinde{background:var(--brand-soft);border-color:#cfdcea}
.item-cabeca{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.item-cabeca span{font-size:11px;letter-spacing:1.2px;color:var(--muted);font-weight:700}
.item-cabeca button{font-size:13px;color:var(--red);font-weight:700}
.btn-adicionar-item{width:100%;justify-content:center;margin-bottom:14px}
/* Lista de acessos da empresa, na Conta. */
.acesso-cabeca{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.acesso-cabeca .cell-main{margin-bottom:2px}.acesso-cabeca .cell-sub{max-width:none}.acesso-cabeca .btn.text{color:var(--red);font-size:13px;flex-shrink:0}
.espelho-total{border-radius:8px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin-bottom:16px}
.espelho-total.acima{background:var(--green-bg);color:var(--green);border-left:3px solid var(--green)}
.espelho-total.abaixo{background:var(--paper);color:var(--muted);border-left:3px solid var(--line)}

/* -------------------------------------------------- alvo de toque no celular */
/*
 * Requisito literal do cliente: performático no celular, todos os botões
 * funcionando. Botão que não se acerta com o polegar não funciona.
 */
@media(max-width:760px){
  .btn,.tab,.nav-item,.production-tabs button,.dialog-close{min-height:46px}
  .detail-acoes .btn{min-width:100%}
  .custo-grade{grid-template-columns:1fr 1fr}
  /* O teclado do iOS amplia a página quando o campo tem menos de 16px. */
  input,select,textarea{font-size:16px}
}

/* ---------------------------------------------------- rolagem no celular */
/*
 * O navegador pula o desenho do cartao que esta fora da tela. Com uma lista de
 * cem pedidos, o redesenho cai de 53 ms para 21 ms — e a rolagem deixa de
 * engasgar no aparelho fraco, que e onde a venda e registrada.
 *
 * `contain-intrinsic-size` e obrigatorio junto: sem ele o cartao nao ocupa
 * espaco antes de ser desenhado e a barra de rolagem salta.
 */
.order-card,.client-card,.production-card,.attention-card{
  content-visibility:auto;contain-intrinsic-size:auto 148px}
.orders-table tbody tr,.clients-table tbody tr{
  content-visibility:auto;contain-intrinsic-size:auto 62px}

/* A linha de tabela e um botao: o anel de foco precisa aparecer por dentro. */
tr:focus-visible{outline-offset:-2px}
.titulo-cartao{display:block}

/* O período agora é um botão: troca o mês. */
button.period{cursor:pointer}
button.period:hover{border-color:var(--brand);color:var(--brand)}
button.period .icon:last-child{width:15px;opacity:.6}

/* --------------------------------------- barra inferior e rodapé no celular */
@media(max-width:760px){
  /*
   * A barra tem uma coluna por seção que o papel de fato vê. Fixa em cinco, o
   * Luiz — que só tem duas — ficava com dois ícones encolhidos num canto e três
   * colunas vazias, e a tela parecia quebrada em vez de reduzida.
   */
  .bottom-nav{grid-template-columns:repeat(var(--abas,5),1fr)}

  /*
   * O <main> não tem altura mínima no celular.
   *
   * Com `min-height:calc(100svh - 183px)` uma tela curta produzia um documento
   * 52px mais alto que a janela: a última linha do rodapé nascia debaixo da
   * barra fixa e só aparecia rolando. Sem a altura mínima, documento curto é
   * curto — a barra flutua sobre espaço vazio, que é o certo — e documento
   * longo rola até o fim, onde os 112px de respiro do rodapé limpam a barra.
   *
   * A primeira tentativa foi pôr o workspace em `display:flex` com o main
   * crescendo. Não serve, e o motivo vale registrar: item de flex nasce com
   * largura mínima de conteúdo, e as seis abas de etapa empurraram o <main>
   * para 683px numa tela de 390 — a página inteira passou a rolar para o lado.
   */
  main{min-height:0}

  /*
   * As seis etapas não cabem em 390px. A faixa rola sozinha, na horizontal, em
   * vez de espremer os rótulos em duas linhas cortadas. O protótipo tinha duas
   * etapas visíveis nos prints; o sistema usa as seis da planilha do Luiz.
   */
  .production-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .production-tabs::-webkit-scrollbar{display:none}
  .production-tabs button{flex:0 0 auto;white-space:nowrap;padding:8px 12px}
}

/* ------------------------------------------------- botão flutuante de criar */
/*
 * Grande, preso na tela e sempre no mesmo lugar. Só aparece onde há o que
 * criar — botão que abre nada é pior que botão que não existe.
 */
.acao-fixa:empty{display:none}
.acao-fixa{position:fixed;right:22px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:40}
.acao-fixa button{display:flex;align-items:center;gap:9px;min-height:52px;padding:0 22px;
  font-size:15px;font-weight:600;background:var(--brand);color:#fff;border-radius:26px;
  box-shadow:0 6px 20px rgba(0,0,0,.18)}
.acao-fixa .icon{width:20px}
@media(min-width:761px){.acao-fixa{bottom:28px}}
@media(max-width:420px){.acao-fixa button span{display:none}.acao-fixa button{padding:0 16px}}

/* --------------------------------------------------------- entrada e estados */
/*
 * `hidden` precisa vencer.
 *
 * O atributo só vale como `display:none` da folha do navegador, e QUALQUER
 * `display` declarado aqui ganha dele. A entrada é `display:grid`, então
 * `#entrada.hidden = true` não escondia nada e as duas telas apareciam juntas.
 */
[hidden]{display:none!important}
.entrada{min-height:100svh;display:grid;place-items:center;padding:24px;background:var(--paper)}
.entrada-cartao{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 30px 30px}
.entrada-marca{display:block;width:170px;margin:0 auto 8px}
.entrada-cartao h1{font-size:22px;margin:20px 0 4px;text-align:center}
.entrada-cartao .panel-sub{text-align:center;margin:0 0 22px}
.entrada-cartao .btn{width:100%;justify-content:center;margin-top:6px}

.esqueleto{background:linear-gradient(90deg,var(--line) 25%,#eef1f5 50%,var(--line) 75%);
  background-size:400% 100%;animation:brilho 1.4s ease infinite;border-radius:8px;color:transparent!important}
@keyframes brilho{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.esqueleto{animation:none}}
.esqueleto-linha{height:14px;margin:9px 0}

.erro-de-rede{background:var(--red-bg);border:1px solid #e8cec8;border-left:3px solid var(--red);
  color:var(--red);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;font-size:14px;line-height:1.55}
.erro-de-rede button{margin-top:9px;font-size:13px;font-weight:700;color:var(--red);text-decoration:underline}

.custo-aviso{background:var(--amber-bg);border-left:3px solid var(--amber);color:var(--amber);
  padding:12px 15px;border-radius:8px;font-size:13.5px;line-height:1.55;margin:0 0 16px}
.natureza-ajuda{font-size:12.5px;color:var(--muted);line-height:1.5;margin:8px 0 14px}
.custo-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.detail-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.detail-acoes .btn{flex:1;min-width:150px;justify-content:center}
.titulo-cartao{display:block}
.positivo{color:var(--green)}
.negativo{color:var(--red)}
#folha form+form{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.toast.erro{background:var(--red)}
.sidebar-bottom .profile{border:0;border-top:1px solid var(--line);cursor:pointer}

/* ===========================================================================
   As folhas no celular
   ===========================================================================
   Medido em 390x844, em 06/09/2026, e os tres achados:

   1. A ficha tinha 1.653px de conteudo numa folha de 760px, e o corpo NAO
      rolava por dentro. Custo, brindes, historico e os botoes de cancelar e
      excluir eram inalcancaveis — a metade de baixo da tela simplesmente nao
      existia para quem esta no celular.
   2. `form-grid` ficava em duas colunas de 180px dentro de um corpo de 310px:
      os campos estouravam a largura da folha.
   3. A folha nascia centralizada, com o conteudo comecando a 42px do topo e o
      botao de salvar longe do polegar.

   Vira folha de baixo: presa no rodape, largura inteira, cantos superiores
   arredondados, e o corpo rolando por dentro. */

@media(max-width:760px){
  .detail-dialog{
    width:100%;max-width:100%;margin:0 0 0 auto;
    /* `auto` no topo empurra a folha para baixo: `<dialog>` e centralizado por
       margens automaticas, e zerar so a de baixo ancora no rodape. */
    margin-top:auto;margin-bottom:0;
    max-height:92svh;
    border-radius:16px 16px 0 0;border-bottom:0;
    /* Coluna: o cabecalho fica, o corpo rola. */
    display:flex;flex-direction:column
  }
  .detail-dialog:not([open]){display:none}
  .dialog-head{flex:0 0 auto;padding:18px 20px 14px}
  .dialog-head h2{font-size:23px}
  .dialog-body{
    /* `min-height:0` e obrigatorio. Item de flex nasce com `min-height:auto` e
       se recusa a encolher abaixo do conteudo: a folha ficava com 776px de
       altura e um corpo de 2.153px transbordando por baixo, sem rolar. */
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    /* Respiro para a barra de gestos: sem ele o ultimo botao fica embaixo do
       risquinho e o toque cai no sistema. */
    padding:18px 20px calc(24px + env(safe-area-inset-bottom))
  }
  /* Uma coluna. Duas em 310px davam campo de 149px, que nao cabe um valor em
     reais nem um seletor de fornecedor. */
  .form-grid,.custo-grade{grid-template-columns:1fr}
  /* So a folha de um formulario so gruda a barra. Ver `acoesGrudadas`. */
  [data-acoes="grudadas"] .form-actions{
    position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom));
    background:var(--surface);margin:24px -20px 0;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line)
  }
  .form-actions .btn,.detail-acoes .btn{flex:1;justify-content:center}
}

/* Vale nas duas larguras: `1fr` tem piso de conteudo, e um campo largo empurra
   a grade para fora do contorno. `minmax(0,1fr)` deixa encolher. */
.form-grid,.custo-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.form-grid,.custo-grade{grid-template-columns:minmax(0,1fr)}}
.field{min-width:0}
.field input,.field select,.field textarea{max-width:100%}

/* No desktop a folha tambem passou a rolar por dentro, em vez de crescer. */
@media(min-width:761px){
  .detail-dialog{display:flex;flex-direction:column;max-height:88svh}
  .detail-dialog:not([open]){display:none}
  .dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .dialog-head{flex:0 0 auto}
}

/*
 * O elo que faltava.
 *
 * A tela troca o conteudo da folha inteira de uma vez, entao existe um `<div>`
 * envolvente entre o `<dialog>` e o corpo. Ele quebrava a cadeia do flex: o
 * `<dialog>` era coluna, mas o item dele era o envelope — o corpo, dois niveis
 * abaixo, nunca recebia a altura para rolar dentro.
 *
 * `display:contents` faria o envelope sumir da caixa, mas leitores de tela
 * ainda tropecam nisso em navegador antigo. Repetir a coluna e mais chato de
 * ler e nao tem esse risco.
 */
#folhaConteudo{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:hidden}
.detail-dialog{overflow:hidden}


/* --------------------------------------------------------- troca de mês */
/*
 * O botão do período precisa PARECER um botão. Como rótulo com uma seta
 * discreta, ele não foi achado: quem pediu o histórico de agosto abriu o
 * sistema, viu setembro e concluiu que agosto não tinha subido.
 */
button.period{cursor:pointer;background:var(--surface);border-color:var(--line);
  color:var(--ink);font-weight:500;transition:border-color .15s,color .15s}
button.period:hover{border-color:var(--brand);color:var(--brand)}
button.period .icon:last-child{width:14px;opacity:.55}
button.period:hover .icon:last-child{opacity:1}
.mes-opcao{display:block;width:100%;text-align:left;padding:15px 17px;margin-bottom:9px}
.mes-opcao.atual{border-color:var(--brand)}
.mes-opcao .cell-sub{white-space:normal}

/*
 * Os selos do cartão de produção quebram linha em vez de cortar.
 *
 * Com o selo do rastreio, um pedido não triado carrega três ("não triado",
 * "perto do prazo", "SEM SEDEX") e na coluna estreita do computador o terceiro
 * saía cortado em "SEM SEI". Cada grupo de selos é uma unidade: o que não cabe
 * desce inteiro para a linha de baixo.
 */
.production-card .prod-foot:has(.prod-selos){flex-wrap:wrap;row-gap:3px}

/* O aviso de aniversariantes: cada nome é um botão que abre a ficha do cliente. */
.aviso-aniversario{padding:14px 18px;margin-bottom:18px}
.aviso-aniversario p{margin:3px 0;font-size:14px;line-height:1.9}
.nome-aniversario{display:inline-flex;align-items:baseline;gap:5px;margin:0 6px 0 0;padding:2px 9px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--brand);
  font:inherit;font-size:13px;cursor:pointer}
.nome-aniversario span{font-size:12px;color:var(--muted)}
.nome-aniversario:hover{border-color:var(--brand)}

/* O histórico da ficha do cliente é uma lista de pedidos clicáveis. */
.linha-do-historico{width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);
  color:inherit;font:inherit;font-size:14px;cursor:pointer}
.linha-do-historico:hover{background:var(--paper)}
.clients-table tbody tr,.client-card[data-cliente]{cursor:pointer}

/*
 * Linha de alteração com texto longo quebra em vez de alargar a folha.
 * Um endereço inteiro no "de → para" empurrava a ficha para o lado no celular.
 */
.linha-de-alteracao{flex-wrap:wrap;row-gap:2px}
.linha-de-alteracao>span:first-child{flex:1 1 100%;min-width:0;overflow-wrap:anywhere;white-space:normal}
.linha-de-alteracao b{white-space:normal}

/* Caixa de texto herda a letra do app; o padrão do navegador é monoespaçada. */
.field textarea{font:inherit}

/* ------------------------------------------------------------------ o olho
 * Esconder valores é desenho, e nunca permissão. O botão mora ao lado do
 * seletor de mês: é o canto onde se escolhe o que se está olhando.
 */
.period.olho{padding-left:11px;padding-right:11px;gap:0}
.period.olho[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand)}
/* Proporção também é o número de alguém: com o olho fechado as barras esmaecem. */
body.valores-ocultos .channel-track i,body.valores-ocultos .client-volume i,body.valores-ocultos .rank-barra i{opacity:.35}

/* --------------------------------------------------------------- cashback
 * 10% da última compra, vivo por 30 dias. Vencido diz "Venceu": zero diria que
 * nunca houve, e é quem teve e perdeu que alguém quer ligar.
 */
.celula-cashback{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cashback-valor{font-weight:600;font-variant-numeric:tabular-nums}
.linha-cashback{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.linha-cashback>span:last-child{display:flex;align-items:center;gap:8px}