/* ================= TEMA ================= Todas as cores saem daqui. O tema escuro é o padrão (:root); o claro é o mesmo conjunto de variáveis redefinido em [data-theme="light"] — nenhuma regra abaixo tem cor fixa, então trocar o atributo no repinta tudo. Os tokens --wNN (véus claros sobre o fundo) e --kNN (sombras) existem porque o dark usava rgba(255,255,255,.X) / rgba(0,0,0,.X) espalhados: no claro eles viram véus ESCUROS e sombras suaves. O app.js lê --c-* (eixos, tooltip, gauge) pra pintar os ECharts. */ /* Identidade MinhaSafra (manual-identidade.html + site institucional): paleta Energia — esmeralda #0E9469, seiva #51B441, lima #93D31E. Dark = os mesmos tokens do site (#0C100E / #141A16 / #E8EDE9). */ :root{ --bg-0:#0C100E; --bg-1:#121A14; --card:#141A16; --card-2:#1B231E; --border:var(--w06); --ink:#E8EDE9; --muted:#93A099; --faint:#66716A; --strong:#fff; --green:#5FC24E; --pink:#E8736E; --blue:#22B27E; --purple:#A5DC28; --amber:#E0A852; --track:var(--w08); --radius:14px; --shadow:0 6px 24px var(--k28); /* véus sobre o fundo (hover, bordas, trilhos) */ --w03:rgba(255,255,255,.03); --w04:rgba(255,255,255,.04); --w05:rgba(255,255,255,.05); --w06:rgba(255,255,255,.06); --w08:rgba(255,255,255,.08); --w10:rgba(255,255,255,.1); --w11:rgba(255,255,255,.11); --w12:rgba(255,255,255,.12); --w14:rgba(255,255,255,.14); --w15:rgba(255,255,255,.15); --w16:rgba(255,255,255,.16); --w18:rgba(255,255,255,.18); --w20:rgba(255,255,255,.2); /* sombras */ --k28:rgba(0,0,0,.28); --k40:rgba(0,0,0,.4); --k45:rgba(0,0,0,.45); --k50:rgba(0,0,0,.5); --k55:rgba(0,0,0,.55); --k70:rgba(0,0,0,.7); /* tokens dos gráficos (lidos pelo app.js) */ --c-axis:rgba(255,255,255,.12); --c-meta:rgba(255,255,255,.22); --c-tip-bg:#1B231E; --c-tip-bd:rgba(255,255,255,.1); --c-pointer:rgba(255,255,255,.25); --c-tick:rgba(255,255,255,.9); --c-glow:rgba(165,220,40,.32); --sb-w:264px; } :root[data-theme="light"]{ --bg-0:#EDF1EE; --bg-1:#E2E9E3; --card:#ffffff; --card-2:#F2F5F3; --border:var(--w10); --ink:#151C17; --muted:#5B6660; --faint:#8A948D; --strong:#0C1410; --green:#3E9A33; --pink:#D64550; --blue:#0E9469; --purple:#6DB10E; --amber:#B87A18; --track:var(--w10); --shadow:0 4px 16px var(--k28); --w03:rgba(18,32,24,.03); --w04:rgba(18,32,24,.04); --w05:rgba(18,32,24,.05); --w06:rgba(18,32,24,.07); --w08:rgba(18,32,24,.08); --w10:rgba(18,32,24,.11); --w11:rgba(18,32,24,.13); --w12:rgba(18,32,24,.13); --w14:rgba(18,32,24,.15); --w15:rgba(18,32,24,.16); --w16:rgba(18,32,24,.17); --w18:rgba(18,32,24,.19); --w20:rgba(14,148,105,.16); --k28:rgba(18,32,24,.10); --k40:rgba(18,32,24,.14); --k45:rgba(18,32,24,.15); --k50:rgba(18,32,24,.16); --k55:rgba(18,32,24,.18); --k70:rgba(0,0,0,.55); --c-axis:rgba(18,32,24,.16); --c-meta:rgba(18,32,24,.28); --c-tip-bg:#ffffff; --c-tip-bd:rgba(18,32,24,.14); --c-pointer:rgba(18,32,24,.3); --c-tick:rgba(18,32,24,.75); --c-glow:rgba(14,148,105,.35); } *{box-sizing:border-box} html,body{margin:0} body{ /* trama de quadrados por baixo dos cards, como no site institucional */ background: linear-gradient(var(--w03) 1px,transparent 1px), linear-gradient(90deg,var(--w03) 1px,transparent 1px), linear-gradient(160deg,var(--bg-0),var(--bg-1)); background-size:42px 42px,42px 42px,auto; background-attachment:fixed; color:var(--ink); font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; font-size:13px;-webkit-font-smoothing:antialiased; } h1,h2,h3{margin:0;font-family:"Sora","Inter","Segoe UI",sans-serif;letter-spacing:-.02em} .m{color:var(--muted);font-weight:600} button{font-family:inherit} .meta-highlight{font-size:15px;font-weight:800;color:var(--strong);letter-spacing:-.2px} /* ================= LAYOUT ================= */ #main{max-width:1320px;margin:0 auto;padding:0 20px 40px} /* ================= TOPBAR ================= Redesign FINAL 2 (aprovado pelo Luiz, 21/07/2026): barra única em gradiente da marca (navy → azul → verde) com círculos decorativos translúcidos, logo em texto branco à esquerda, título ao lado, e à direita o navegador de datas + ícones sem rótulo + Editar em branco + avatar circular. As cores são FIXAS (marca MinhaSafra) de propósito — a barra fica igual nos dois temas; só o conteúdo abaixo dela troca com o data-theme. Os círculos são camadas de radial-gradient no background (e NÃO pseudo- elementos + overflow:hidden): o .user-menu e o .date-pop abrem pra fora da barra e um overflow:hidden os cortaria. */ .topbar{display:flex;align-items:center;gap:14px;padding:14px 20px;position:relative; margin-top:16px;border-radius:16px;box-shadow:0 6px 24px var(--k28); background: radial-gradient(circle at calc(100% - 70px) -70px, rgba(255,255,255,.05) 150px, transparent 151px), radial-gradient(circle at calc(100% - 330px) 160px, rgba(81,180,65,.06) 130px, transparent 131px), /* verde escuro (tom do fundo do site) → preto: a logo branca+lima lê bem */ linear-gradient(115deg,#123524 0%,#0E2417 45%,#0C100E 100%)} .brand-chip{ background:transparent;border-radius:0;padding:0 16px 0 0;line-height:1;flex:0 0 auto; display:flex;flex-direction:column;align-items:flex-start; border-right:1px solid rgba(255,255,255,.25); } .bv-word{font-weight:800;font-size:26px;color:#fff;letter-spacing:-.6px;font-family:"Sora","Segoe UI",Verdana,sans-serif} .bv-logo{height:34px;display:block} /* CTAs do topbar da demonstração */ .tb-cta{ display:inline-flex;align-items:center;gap:7px;text-decoration:none; font-family:"Sora","Inter",sans-serif;font-weight:800;font-size:13px; padding:10px 18px;border-radius:10px;white-space:nowrap; transition:transform .15s,filter .15s; } .tb-cta:hover{transform:translateY(-1px)} .tb-cta:active{transform:translateY(1px)} .tb-cta.contato{ background:linear-gradient(92deg,#0E9469,#93D31E);color:#06120C; box-shadow:0 4px 18px -6px rgba(147,211,30,.55); } .tb-cta.contato:hover{filter:brightness(1.06)} .tb-cta.voltar{ color:#fff;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08); } .tb-cta.voltar:hover{background:rgba(255,255,255,.15)} .bv-sub{font-size:10px;color:#a5e695;font-weight:700;letter-spacing:2.8px;margin-top:3px;padding-left:1px} /* título ao lado da logo (subiu do .heading) */ /* o título é quem encolhe quando falta espaço — os botões da direita mantêm a largura natural (com max-width alto eles só quebram em tela bem estreita) */ .brand-txt{flex:0 1 auto;min-width:0} .brand-txt h1{font-size:17px;font-weight:700;letter-spacing:-.2px;color:#fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* a data de atualização não pode ser cortada: em vez de ellipsis, quebra em duas linhas se faltar espaço */ .brand-txt .sub{color:rgba(255,255,255,.72);font-size:11.5px;margin-top:3px;line-height:1.4} .topbar .icons{display:flex;align-items:center;gap:8px;margin-left:auto;position:relative; flex-wrap:wrap;justify-content:flex-end;max-width:66%} /* em tela larga os botões NÃO encolhem (senão o avatar quebrava pra 2ª linha por causa do título novo) — quem cede espaço é o título, que tem ellipsis */ @media(min-width:901px){.topbar .icons{flex:0 0 auto;max-width:none}} /* Botões do topbar: só ícone (rótulo escondido — o title já serve de tooltip), fantasma translúcido sobre o gradiente. Exceção: o Editar (destaque branco). */ .icon-btn{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px; border:0;border-radius:10px;color:rgba(255,255,255,.85);position:relative; background:transparent;cursor:pointer;transition:all .18s; font-family:inherit;font-size:12.5px;font-weight:600;white-space:nowrap} .icon-btn svg{flex:0 0 auto} .icon-btn:hover{color:#fff;background:rgba(255,255,255,.18);transform:translateY(-1px)} .icon-btn .ib-label{display:none} #btn-editar{background:#fff;color:#0E9469;padding:0 14px;font-weight:700} #btn-editar .ib-label{display:inline} #btn-editar:hover{background:#fff;color:#0E9469;filter:brightness(.93)} .ib-ico{position:relative;display:grid;place-items:center} .icon-btn .dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;background:var(--pink); border:2px solid rgba(255,255,255,.9);border-radius:50%} @media(max-width:640px){#btn-editar .ib-label{display:none} #btn-editar{padding:0 11px} .topbar .icons{max-width:none;gap:10px}} /* em tela estreita logo + título encolhem pra caber lado a lado */ @media(max-width:900px){ .topbar{padding:12px 14px} .bv-word{font-size:20px} .bv-sub{font-size:8.5px;letter-spacing:2.2px} .brand-txt h1{font-size:15px} .brand-txt .sub{font-size:10.5px} } .avatar{width:38px;height:38px;border-radius:50%;border:0;background:#fff; display:grid;place-items:center;color:#0E9469;font-weight:800;font-size:15px;cursor:pointer;transition:transform .18s} .avatar:hover{transform:translateY(-1px) scale(1.04)} /* ---- painel de acesso ---- */ .user-menu{ position:absolute;top:48px;right:0;width:260px;z-index:60; background:var(--card-2);border:1px solid var(--w10);border-radius:14px; box-shadow:0 18px 50px var(--k50);padding:16px; opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none; transition:all .22s cubic-bezier(.22,1,.36,1); } .user-menu.open{opacity:1;transform:none;pointer-events:auto} .um-title{font-size:14px;font-weight:700;color:var(--strong);margin-bottom:12px} .um-sec{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.8px;margin:14px 0 8px} .um-input{ width:100%;background:var(--w06);border:1px solid var(--border);border-radius:8px; color:var(--ink);padding:8px 11px;font-size:12.5px;outline:none;margin-bottom:8px; } .um-input:focus{border-color:var(--blue)} select.um-input{appearance:none} .um-row{display:flex;gap:8px} .btn{border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border);transition:all .18s;flex:1} .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn.primary:hover{filter:brightness(1.12)} .btn.ghost{background:var(--w05);color:var(--muted)} .btn.ghost:hover{color:var(--strong)} .btn.danger{background:rgba(251,90,126,.12);border-color:rgba(251,90,126,.4);color:var(--pink)} .um-hint{font-size:10.5px;color:var(--faint);margin-top:10px;line-height:1.4} .um-toggle{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin-bottom:9px;cursor:pointer} .um-toggle input{display:none} .um-toggle .tgl{width:32px;height:18px;border-radius:10px;background:var(--track);position:relative;transition:background .2s;flex:0 0 32px} .um-toggle .tgl:before{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .2s} .um-toggle input:checked+.tgl{background:var(--green)} .um-toggle input:checked+.tgl:before{left:16px} .um-field{font-size:11px;color:var(--faint);display:block} .um-field select{margin-top:5px} /* ================= HEADING ================= */ /* sobrou só o chip de frente (o navegador de datas subiu pro .topbar em 21/07/2026) — vazio e sem altura na maior parte do tempo */ .heading{display:flex;align-items:center;justify-content:flex-end;margin:2px 2px 14px 8px} /* navegador de datas — mora no .topbar, estilo "vidro" sobre o gradiente */ .date-nav{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:10px;padding:3px;position:relative} /* Range de horas — um por card que usa base de horas (botão no canto superior direito do card). O popup é único e vive no body com position:fixed, porque dentro do card o overflow do .grid-stack-item-content cortaria ele. */ .hrs-btn{position:absolute;top:9px;right:10px;z-index:6;display:flex;align-items:center;gap:4px; background:var(--w05);border:1px solid var(--border);color:var(--faint); border-radius:8px;padding:3px 7px;font-size:10.5px;line-height:1;cursor:pointer; opacity:.5;transition:opacity .15s, background .15s, color .15s} .card:hover .hrs-btn,.hrs-btn.on{opacity:1} .hrs-btn:hover{background:var(--w10);color:var(--strong)} .hrs-btn svg{color:var(--blue)} .hrs-btn b{color:var(--blue);font-weight:800;font-variant-numeric:tabular-nums} /* o botão não pode encavalar no título nem atrapalhar arrastar/print */ .card.has-hrs .sec-title,.card.has-hrs .mini-title{padding-right:62px} body.layout-edit .hrs-btn,body.capturing .hrs-btn{display:none} .hours-pop.hrs-pop{position:fixed;top:0;left:0;right:auto} .hours-pop{position:absolute;top:44px;right:0;z-index:60;width:236px; background:var(--card-2);border:1px solid var(--w12);border-radius:12px;box-shadow:0 18px 50px var(--k50); padding:16px 16px 14px;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none; transition:opacity .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1)} .hours-pop.open{opacity:1;transform:none;pointer-events:auto} .hp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .hp-top span{font-size:11.5px;color:var(--faint);font-weight:600} .hp-top b{font-size:19px;color:var(--strong);font-weight:800;font-variant-numeric:tabular-nums;transition:color .15s} .hp-slider-wrap{position:relative;padding-top:24px} .hp-bubble{position:absolute;top:-1px;left:0;transform:translate(-50%,0) scale(.85);background:var(--blue);color:#fff; font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;white-space:nowrap; box-shadow:0 4px 12px rgba(91,141,239,.45);opacity:0;pointer-events:none; transition:opacity .15s ease, transform .15s cubic-bezier(.22,1,.36,1);font-variant-numeric:tabular-nums} .hp-bubble:after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%); border:4px solid transparent;border-top-color:var(--blue)} .hp-slider-wrap:hover .hp-bubble,.hp-slider-wrap.active .hp-bubble{opacity:1;transform:translate(-50%,0) scale(1)} .hp-ticks{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;color:var(--faint);font-weight:600} .hp-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:10.5px;color:var(--faint);line-height:1.45} .hp-note b{color:var(--muted)} .hn-label{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap} .hn-val{font-size:13px;font-weight:700;color:var(--blue);min-width:34px;text-align:right;font-variant-numeric:tabular-nums} .hn-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;display:block; background:var(--w14);outline:none;cursor:pointer;transition:background .08s linear} .hn-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%; background:var(--blue);cursor:pointer;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 5px var(--k45); transition:transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s} .hn-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--blue);cursor:pointer; border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 5px var(--k45); transition:transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s} .hn-slider:hover::-webkit-slider-thumb{filter:brightness(1.1)} .hn-slider:active::-webkit-slider-thumb{transform:scale(1.3);box-shadow:0 0 0 8px rgba(91,141,239,.2),0 2px 8px var(--k50)} .hn-slider:active::-moz-range-thumb{transform:scale(1.3);box-shadow:0 0 0 8px rgba(91,141,239,.2),0 2px 8px var(--k50)} .dn-btn{width:30px;height:32px;border:0;background:transparent;color:rgba(255,255,255,.75);font-size:20px; border-radius:7px;cursor:pointer;line-height:1;transition:all .15s} .dn-btn:hover:not(:disabled){background:rgba(255,255,255,.15);color:#fff} .dn-btn:disabled{opacity:.28;cursor:default} .dn-label{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.22);border:0;color:#fff; font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer;min-width:120px;justify-content:center} .dn-label:hover{background:rgba(255,255,255,.3)} .dn-label svg{color:#fff} .date-pop{position:absolute;top:44px;right:0;z-index:60;min-width:180px;max-height:280px;overflow-y:auto; background:var(--card-2);border:1px solid var(--w12);border-radius:12px;box-shadow:0 18px 50px var(--k50); padding:6px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .2s cubic-bezier(.22,1,.36,1)} .date-pop.open{opacity:1;transform:none;pointer-events:auto} .date-pop button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--muted); font-size:12.5px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .15s} .date-pop button:hover{background:var(--w06);color:var(--strong)} .date-pop button.sel{background:var(--blue);color:#fff;font-weight:700} .filter-chip{ display:flex;align-items:center;gap:8px;background:rgba(91,141,239,.14);border:1px solid rgba(91,141,239,.5); border-radius:10px;padding:8px 12px;font-size:12px;font-weight:700;color:#cdd9ff; animation:chipIn .25s cubic-bezier(.22,1,.36,1); } @keyframes chipIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}} .filter-chip button{background:transparent;border:0;color:#cdd9ff;cursor:pointer;font-size:12px;padding:0} .filter-chip button:hover{color:var(--strong)} .fbadge{display:none;background:var(--blue);color:#fff;border-radius:6px;font-size:10px;font-weight:800; padding:2px 7px;vertical-align:2px;margin-left:6px} .fbadge.on{display:inline-block;animation:chipIn .25s} .tip-click{font-size:10px;font-weight:600;opacity:.7} /* ================= CARDS & GRID ================= */ .card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:16px 18px;box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s} .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--k40);border-color:var(--w11)} .grid{display:grid;gap:16px;margin-bottom:16px} .sec-title{font-size:15px;font-weight:700;color:var(--strong);margin-bottom:2px} .mini-title{font-size:12.5px;font-weight:700;color:var(--strong);margin-bottom:10px} .cap{font-size:12.5px;color:var(--muted)} .divider{height:1px;background:var(--border);margin:14px 0} /* entrada animada (IntersectionObserver adiciona .in) */ .anim .card,.anim .kpi{opacity:0;transform:translateY(18px)} .anim .card.in,.anim .kpi.in{opacity:1;transform:none; transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s} .anim .card.in:hover{transform:translateY(-3px)} body.no-anim *{animation:none !important;transition:none !important} /* ================= KPIs ================= */ .kpi-row{grid-template-columns:repeat(7,1fr)} .kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:14px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s} .kpi:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--k40);border-color:var(--w11)} .kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .kpi-title{font-size:11.5px;color:var(--muted);font-weight:600} .kpi-icon{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center} .kpi-val{font-size:23px;font-weight:800;color:var(--strong);letter-spacing:-.5px;margin-top:8px;line-height:1;font-variant-numeric:tabular-nums} .kpi-delta{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;margin-top:6px} .kpi-delta.bom{color:var(--green)} .kpi-delta.ruim{color:var(--pink)} .kpi-meta{font-size:11.5px;color:var(--muted);margin-top:3px} .kpi-meta b{color:var(--strong);font-weight:800} .kpi-bar{height:5px;border-radius:4px;background:var(--track);margin-top:11px;overflow:hidden} .kpi-bar>span{display:block;height:100%;border-radius:4px;transition:width .8s cubic-bezier(.22,1,.36,1), background .3s} /* ================= CHARTS ================= */ .chart{width:100%} .h-260{height:250px}.h-230{height:224px}.h-130{height:130px} .h-120{height:120px}.h-110{height:110px} .entrega-grid{grid-template-columns:1.35fr 1fr} .cargas-row{display:flex;align-items:center;gap:8px} .cargas-row .chart{flex:1} .cargas-tot{flex:0 0 92px;text-align:right} .cargas-tot .big{font-size:24px;font-weight:800;color:var(--strong);line-height:1;font-variant-numeric:tabular-nums} .cargas-tot .lbl{font-size:11px;color:var(--faint);margin:1px 0 12px} .qual-grid{grid-template-columns:1fr 1fr 1.2fr} /* Impurezas: título em linha própria + gauge/barras dividindo a altura que o card tiver — os dois blocos (mineral/vegetal) flexionam pra caber sem rolagem */ .imp-block{display:flex;flex-direction:column;flex:1;min-height:0} .imp-block+.imp-block{margin-top:8px;border-top:1px solid var(--border);padding-top:8px} .imp-row{flex:1;min-height:0;display:grid;grid-template-columns:140px 1fr;gap:8px} .imp-row .chart{height:100%;min-height:70px} /* ================= FRENTES ================= */ .frentes-grid{grid-template-columns:1.15fr 1fr 1fr} .frentes-grid>.card{display:flex;flex-direction:column} table.tbl{width:100%;border-collapse:collapse;font-size:12px} table.tbl th{color:var(--faint);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);font-size:11px} table.tbl td{padding:7px 8px;border-bottom:1px solid var(--w03);color:var(--ink)} table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums} table.tbl tbody tr{cursor:pointer;transition:background .18s, opacity .3s} table.tbl tbody tr:hover{background:var(--w04)} table.tbl tbody tr.sel{background:rgba(91,141,239,.14);box-shadow:inset 3px 0 0 var(--blue)} table.tbl tbody tr.dim{opacity:.32} .rmeta{color:var(--faint);font-size:11px} .varbar{position:relative;background:var(--track);border-radius:5px;height:22px;overflow:hidden} .varbar>span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:5px; transition:width .7s cubic-bezier(.22,1,.36,1)} .varbar>em{position:absolute;left:8px;top:0;bottom:0;display:flex;align-items:center;font-style:normal;font-size:11px;color:#fff;font-weight:600} .varrow{display:grid;grid-template-columns:120px 1fr 44px;gap:8px;align-items:center;margin-bottom:6px;animation:rowIn .4s cubic-bezier(.22,1,.36,1) both} .varrow:nth-child(2){animation-delay:.04s}.varrow:nth-child(3){animation-delay:.08s} .varrow:nth-child(4){animation-delay:.12s}.varrow:nth-child(5){animation-delay:.16s} .varrow:nth-child(6){animation-delay:.2s}.varrow:nth-child(7){animation-delay:.24s} .varrow:nth-child(8){animation-delay:.28s}.varrow:nth-child(9){animation-delay:.32s} @keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}} .varrow .ton{font-size:11px;color:var(--muted);text-align:right} .comp-cols{display:flex;gap:26px} .comp-col{flex:1;min-width:0} .comp-row{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;margin-bottom:8px;cursor:pointer;transition:opacity .3s} .comp-row.dim{opacity:.3} .comp-row.sel .stack{box-shadow:0 0 0 2px var(--blue)} .comp-row .fr{font-size:11px;color:var(--muted);font-weight:600} .stack-wrap{position:relative} .stack{display:flex;height:20px;border-radius:5px;overflow:hidden;background:var(--track);transition:box-shadow .2s} .comp-row:hover .stack{box-shadow:0 0 0 2px var(--w18)} .stack>span{display:block;height:100%;transition:width .6s cubic-bezier(.22,1,.36,1)} .stack-labels{position:absolute;inset:0;pointer-events:none} .stack-labels span{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px;color:#fff;font-weight:700; text-shadow:0 1px 2px var(--k70);white-space:nowrap} .seg-duque{background:var(--amber)} .seg-tri{background:var(--green)} .seg-tetra{background:var(--blue)} .legend{display:flex;gap:16px;margin-top:6px;font-size:11px;color:var(--muted)} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px} /* ================= DISPONIBILIDADE ================= */ .disp-card{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:center} .disp-head{text-align:center} .disp-head .tt{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px} .disp-gauge{height:120px} .disp-meta{font-size:12.5px;color:var(--muted)} .disp-meta b{color:var(--strong);font-weight:800} .disp-frentes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .dfr{background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer; transition:all .25s cubic-bezier(.22,1,.36,1)} .dfr:hover{transform:translateY(-2px);border-color:var(--w16)} .dfr.sel{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue), 0 8px 22px rgba(91,141,239,.25)} .dfr.dim{opacity:.32} .dfr .fname{font-size:11px;color:var(--muted);font-weight:700;display:flex;justify-content:space-between} .dfr .spark{height:40px;margin:4px 0} .dfr .val{font-size:16px;font-weight:800;color:var(--strong)} .dfr .sub{font-size:10px;color:var(--faint)} /* ================= DESEMPENHO DE EQUIPAMENTOS ================= */ .equip-grid{grid-template-columns:repeat(7,1fr)} .equip-col{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 12px 8px;box-shadow:var(--shadow); transition:opacity .3s} .equip-col.dim{opacity:.32} .equip-col.sel{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 8px 22px rgba(91,141,239,.22)} .equip-col h4{font-size:12px;font-weight:800;color:var(--strong);margin:0 0 3px;display:flex;justify-content:space-between;align-items:baseline} .equip-col h4 small{font-size:10px;color:var(--faint);font-weight:600} .equip-col .eq-tot{font-size:10px;color:var(--faint);margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:6px} .eq-row{display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:center;font-size:11px;padding:3px 0} .eq-row .eq-cat{font-size:9px;font-weight:800;color:#fff;background:var(--blue);border-radius:4px;padding:1px 0;text-align:center} .eq-row .eq-cat.tr{background:var(--purple);color:#12200f} .eq-row .eq-cat.cm{background:var(--amber);color:#1a1a1a} .eq-row .eq-frota{color:var(--ink);font-variant-numeric:tabular-nums} .eq-row .eq-tc{color:var(--muted);font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .eq-row.mnt{background:rgba(224,168,82,.16);border-radius:5px;margin:0 -4px;padding:3px 4px} .eq-row.mnt .eq-frota{color:#EFC98F} .eq-vazio{color:var(--faint);font-size:10.5px;padding:6px 2px} /* ================= TRANSPORTE ================= */ .transp-grid{grid-template-columns:repeat(3,1fr)} .transp-top{display:flex;align-items:center;gap:14px} .transp-gauge{width:120px;height:100px;flex:0 0 120px} .transp-info .lbl{font-size:12.5px;color:var(--muted);font-weight:700} .transp-info .lbl b{color:var(--strong);font-weight:800} .transp-info .big{font-size:22px;font-weight:800;color:var(--strong);margin-top:2px} .transp-info .sub{font-size:11px;color:var(--faint)} .locais{margin-top:10px} .loc-row{display:grid;grid-template-columns:120px 1fr 26px;gap:8px;align-items:center;margin-bottom:6px} .loc-row .lname{font-size:11px;color:var(--muted)} .loc-bar{height:8px;background:var(--track);border-radius:4px;overflow:hidden} .loc-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:4px; transition:width .8s cubic-bezier(.22,1,.36,1)} .loc-qtd{font-size:11px;color:var(--ink);text-align:right;font-weight:700} /* ================= PARADOS ================= */ .parados-cols{display:flex;gap:18px} .parados-col{flex:1;min-width:0} .par-cat{font-size:11px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.4px;margin:2px 0 8px} .par-item{display:flex;gap:10px;align-items:center;padding:8px 10px;margin-bottom:8px;background:var(--card-2); border:1px solid var(--border);border-left:3px solid var(--pink);border-radius:9px; transition:transform .2s, border-color .2s;animation:rowIn .35s both} .par-item:hover{transform:translateX(3px);border-color:var(--w14)} .par-item.prev{border-left-color:var(--blue)} .par-item.oport{border-left-color:var(--amber)} .par-frota{font-weight:800;color:var(--strong);font-size:13px;min-width:52px} .par-desc{flex:1;font-size:11.5px;color:var(--muted);line-height:1.3} .par-desc b{color:var(--ink);font-weight:600} .par-tempo{font-size:11px;font-weight:700;color:var(--pink);white-space:nowrap} .par-vazio{color:var(--faint);font-size:12px;padding:8px} /* ================= TOAST ================= */ .toast{ position:fixed;bottom:26px;left:50%;transform:translate(-50%,80px);z-index:90; background:var(--card-2);border:1px solid var(--w14);border-radius:12px; color:var(--ink);font-size:12.5px;font-weight:600;padding:11px 18px; box-shadow:0 14px 40px var(--k50);opacity:0;transition:all .3s cubic-bezier(.22,1,.36,1); pointer-events:none; } .toast.show{opacity:1;transform:translate(-50%,0)} .foot{color:var(--faint);font-size:11px;text-align:center;margin-top:18px} .foot code{background:var(--w06);padding:1px 6px;border-radius:4px} /* modo captura: sem hover/transform/transição/animação p/ o print sair sempre completo. Importante: html2canvas clona o DOM num iframe novo, o que REINICIA qualquer @keyframes automático (rowIn em .par-item/.varrow, chipIn) — sem desligar `animation` aqui, a captura pega o frame inicial (opacidade 0) em vez do estado final. */ body.capturing * { animation:none !important; } body.capturing .card, body.capturing .kpi, body.capturing .equip-col { opacity:1 !important; transform:none !important; transition:none !important; box-shadow:var(--shadow) !important; } @media (max-width:1100px){ .kpi-row{grid-template-columns:repeat(4,1fr)} .entrega-grid,.qual-grid,.frentes-grid,.transp-grid{grid-template-columns:1fr} .parados-cols,.comp-cols{flex-direction:column;gap:0} } /* ================= LAYOUT PERSONALIZÁVEL (GridStack) ================= */ .grid-stack{margin-bottom:16px} .grid-stack-item-content{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--w15) transparent} .grid-stack-item-content>.card,.grid-stack-item-content>.kpi{height:100%} /* card vira coluna flex pro gráfico principal (.fill) esticar junto com o resize */ .grid-stack-item-content>.card:not(.disp-card){display:flex;flex-direction:column;min-height:0} .card .chart.fill{height:auto;flex:1;min-height:100px} .card #variedade,.card .parados-list,.card .equip-grid{flex:1;min-height:0} /* hover com translateY faz o card "vazar" do item — desliga dentro do grid */ .grid-stack .card:hover,.grid-stack .kpi:hover{transform:none} .gs-hidden{display:none!important} /* ---- modo edição ---- */ body.layout-edit{padding-right:300px} body.layout-edit .grid-stack-item{cursor:grab} body.layout-edit .grid-stack-item-content{outline:1.5px dashed rgba(91,141,239,.45);outline-offset:-2px;border-radius:var(--radius)} body.layout-edit .grid-stack-item:hover .grid-stack-item-content{outline-color:var(--blue)} /* bloqueia clique-pra-filtrar e demais interações internas enquanto edita */ body.layout-edit .grid-stack-item-content *{pointer-events:none} .grid-stack-item.ui-draggable-dragging{cursor:grabbing} .grid-stack-item.ui-draggable-dragging .grid-stack-item-content{outline:2px solid var(--blue);box-shadow:0 18px 50px var(--k55)} .grid-stack>.grid-stack-placeholder>.placeholder-content{background:rgba(91,141,239,.1);border:1.5px dashed rgba(91,141,239,.5);border-radius:var(--radius)} #btn-layout.active{color:var(--strong);border-color:var(--blue);background:rgba(91,141,239,.2)} /* ---- painel lateral do modo edição ---- */ .layout-panel{ position:fixed;top:0;right:0;bottom:0;width:300px;z-index:85; background:var(--card-2);border-left:1px solid var(--w10); box-shadow:-18px 0 50px var(--k45);display:flex;flex-direction:column; transform:translateX(110%);transition:transform .3s cubic-bezier(.22,1,.36,1); } .layout-panel.open{transform:none} .lp-head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:16px 18px 10px;font-size:14px;font-weight:800;color:var(--strong)} .lp-head .btn{flex:0 0 auto} .lp-hint{font-size:11px;color:var(--faint);line-height:1.5;padding:0 18px 12px;border-bottom:1px solid var(--border)} .lp-list{flex:1;overflow-y:auto;padding:12px 18px;scrollbar-width:thin;scrollbar-color:var(--w15) transparent} .lp-item{padding:3px 0} .lp-item .lp-nome{flex:1;color:var(--ink)} .lp-foot{padding:12px 18px;border-top:1px solid var(--border)} .lp-foot .btn{width:100%} @media (max-width:900px){ body.layout-edit{padding-right:0} .layout-panel{width:min(300px,86vw)} } /* ================= TEMA CLARO — ajustes pontuais ================= Só o que os tokens não resolvem sozinhos: elementos que assumiam fundo escuro (texto claro sobre tinta azul/roxa) e a logo branca, que precisa de contorno quando o fundo da página também é claro. */ /* a marca no topbar tem cor fixa (gradiente) — no claro só o separador muda de véu */ :root[data-theme="light"] .brand-chip{border:0;border-right:1px solid rgba(255,255,255,.25)} :root[data-theme="light"] .filter-chip{color:#0B6B4C;background:rgba(14,148,105,.10);border-color:rgba(14,148,105,.35)} :root[data-theme="light"] .filter-chip button{color:#0B6B4C} :root[data-theme="light"] .eq-row.mnt{background:rgba(184,122,24,.12)} :root[data-theme="light"] .eq-row.mnt .eq-frota{color:#8F5E0F} :root[data-theme="light"] table.tbl tbody tr.sel{background:rgba(14,148,105,.10)} /* rótulo da barra de variedade: fica por cima da barra E do trilho — trilho um pouco mais denso + sombra dá contraste nos dois pedaços */ :root[data-theme="light"] .varbar{background:rgba(91,99,141,.2)} .varbar>em{text-shadow:0 1px 2px var(--k55)} /* ---- botão de tema (sol/lua) ---- */ /* os dois ícones ficam no HTML; o CSS mostra o do tema OPOSTO (o que você vai ativar ao clicar), que é o que o usuário espera de um botão de alternância */ #btn-tema .ico-sol{display:none} :root[data-theme="light"] #btn-tema .ico-sol{display:block} :root[data-theme="light"] #btn-tema .ico-lua{display:none} /* sem transição de cor na troca de tema de propósito: .card/.kpi já têm transition própria (reveal/hover) e sobrescrevê-la aqui quebrava a entrada animada dos cards — a troca é instantânea, que é o esperado num toggle */ /* CTAs do topbar em telas menores */ @media (max-width:900px){ .tb-cta{padding:8px 12px;font-size:12px} } @media (max-width:640px){ .tb-cta.voltar{display:none} } /* ================= MOBILE (≤700px) ================= Versão de celular (Luiz, 22/07/2026): o grid de 14 colunas vira uma PILHA — 1 card por linha, KPIs 2 por linha — e o header se reorganiza. As regras vivem TODAS dentro deste @media: acima de 700px nada muda (desktop intocado). Os !important são necessários porque o GridStack posiciona os itens com estilos inline (position:absolute + top/left/width/height). */ @media (max-width:700px){ html,body{overflow-x:hidden} #main{padding:0 10px 30px} /* --- header empilhado --- */ .topbar{flex-wrap:wrap;gap:10px;padding:12px 14px;margin-top:10px} .brand-chip{border-right:0;padding:0} .bv-logo{height:24px} .bv-sub{font-size:8px;letter-spacing:2px;margin-top:2px} .brand-txt{flex:1 1 100%;order:3} .brand-txt h1{font-size:15px;white-space:normal} .brand-txt .sub{font-size:10.5px} .topbar .icons{order:2;margin-left:auto;flex:0 0 auto;max-width:none;gap:6px;row-gap:8px} /* no celular ficam: navegador de datas, tema e os dois CTAs */ #btn-full,#btn-layout,.icon-btn[title="Notificações"]{display:none} .tb-cta{flex:1 1 45%;justify-content:center;order:9;padding:10px;font-size:12.5px} .tb-cta.voltar{display:inline-flex} /* --- grid vira pilha --- */ .grid-stack{display:flex !important;flex-wrap:wrap;gap:10px;height:auto !important;width:100% !important;min-height:0 !important} .grid-stack::before,.grid-stack::after{display:none} .grid-stack > .grid-stack-item{ position:static !important;transform:none !important; inset:auto !important;margin:0 !important; width:100% !important;height:auto !important; min-height:0 !important;min-width:0 !important;max-width:100%; flex:1 1 100%; } .grid-stack > .grid-stack-item > .grid-stack-item-content{ position:relative !important;inset:auto !important; width:100% !important;height:auto !important;min-width:0 !important; overflow:hidden;border-radius:var(--radius); } .grid-stack .card,.grid-stack .kpi{height:auto;min-height:0;min-width:0;max-width:100%} /* KPIs: 2 por linha (min-width:0 deixa o conteúdo encolher sem estourar) */ .grid-stack > .grid-stack-item[gs-id^="kpi-"]{ flex:0 0 calc(50% - 5px);max-width:calc(50% - 5px); } .grid-stack .kpi-val{font-size:22px} .grid-stack .kpi-title{white-space:normal} } /* ===== MOBILE, rodada 2 (Luiz, 22/07/2026) — correções dos 5 prints ===== */ @media (max-width:700px){ /* 1) HEADER em linhas completas: logo / (data + tema) / CTAs / título */ .topbar .icons{ order:2;flex:1 1 100%;margin-left:0;max-width:none; display:flex;flex-wrap:wrap;gap:8px; } .date-nav{flex:1 1 auto;display:flex} .date-nav .dn-label{flex:1;min-width:0} #btn-tema{flex:0 0 auto} .tb-cta{flex:1 1 44%;min-width:0;order:9;justify-content:center;padding:11px 6px;font-size:12.5px} .brand-txt{order:3} /* 2) Recebimento de Cana mais alto pra ler os números */ #chart-entrega{height:340px !important} /* 3) Impurezas: card mais alto, meia-luas maiores */ .imp-row{grid-template-columns:132px 1fr} .imp-row .chart{min-height:150px} .imp-block+.imp-block{margin-top:12px;padding-top:12px} /* 4) Desempenho da Frota: colunas viram carrossel horizontal (arrasta pro lado) */ .equip-grid{ display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px; -webkit-overflow-scrolling:touch;padding-bottom:8px; scroll-snap-type:x proximity; } .equip-col{flex:0 0 240px;scroll-snap-align:start} /* 5) Disponibilidade: frentes em grade 2 por linha (nada cortado) */ .disp-frentes{grid-template-columns:repeat(2,1fr)} .dfr .spark{height:44px} .disp-gauge{height:140px} .transp-gauge{width:110px;height:110px;flex:0 0 110px} } /* ===== MOBILE, rodada 3 (Luiz, 22/07/2026) — gráficos de linha maiores + card de disponibilidade reorganizado ===== */ @media (max-width:700px){ /* 1) Gráficos de linha bem mais altos: números e meta sem embolar. O .fill usa flex:1 (flex-basis 0) e IGNORA height em coluna flex — por isso o flex:0 0 auto aqui, senão o gráfico colapsa no min-height. */ .card .chart.fill{flex:0 0 auto !important} #chart-entrega{height:420px !important;min-height:420px !important} #chart-atr-hora{height:340px !important;min-height:340px !important} #chart-atr-frente{height:300px !important;min-height:300px !important} #chart-densidade-hora{height:220px !important;min-height:220px !important} #chart-densidade-frente{height:170px !important;min-height:170px !important} /* 2) Disponibilidade: meia-lua com o título ao lado direito, e as frentes embaixo em 2 por linha (largura total) */ .disp-card{display:block} .disp-head{ display:grid;grid-template-columns:150px 1fr;column-gap:14px; align-items:center;text-align:left;margin-bottom:14px; } .disp-gauge{grid-column:1;grid-row:1 / span 2;width:150px;height:130px} .disp-head .tt{grid-column:2;grid-row:1;align-self:end;font-size:13.5px;line-height:1.35} .disp-meta{grid-column:2;grid-row:2;align-self:start;margin-top:4px} }