/* ========================================================= prototipo-telas.css: visual do protótipo aprovado (docs/prototipos/painel-da-producao.html) nas telas Clima e Mercado e Painel da Produção. Tudo escopado em :is(#sec-clima_mercado, #sec-mercado_hoje) e #sec-painel_producao (prefixo .pt-), carregado depois de visual-2026.css: não mexe no resto do app. Fonte: a Inter do sistema (fonte única, decisão de 2026); o protótipo usa Archivo, diferença pequena. --ink-3 escurecido de #7F8B83 para #66726A para o texto auxiliar ter 4,5:1. ========================================================= */ #conteudo:has(> #sec-clima_mercado:not(.hidden)), #conteudo:has(> #sec-mercado_hoje:not(.hidden)), #conteudo:has(> #sec-painel_producao:not(.hidden)) { background: #EDF1EB; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt { --bg:#EDF1EB; --surface:#FFFFFF; --surface-2:#F5F7F3; --line:#D6DDD2; --line-2:#E6EBE3; --ink:#1B2A20; --ink-2:#4E5D53; --ink-3:#66726A; --brand:#2D6A3E; --brand-ink:#FFFFFF; --brand-soft:#E1ECE2; --terra:#94402C; --rain:#2C6CA4; --rain-2:#7FAAD3; --rain-3:#B9CFE3; --rain-soft:#E1ECF6; --pos:#2E7A45; --neg:#B0392A; --warn:#A86A12; --warn-soft:#F7ECD8; --shadow:0 1px 2px rgba(27,42,32,.06); --r-l:14px; --r-m:10px; --r-s:7px; color: var(--ink); font-size: 15px; line-height: 1.45; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .num { font-variant-numeric: tabular-nums; } /* ---------- Cabeçalho ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-top { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-bottom:16px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-hello h1 { margin:0; font-size:24px; font-weight:750; letter-spacing:-.01em; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-hello p { margin:2px 0 0; color:var(--ink-2); font-size:14px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-ctrls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-left:auto; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-sel { display:flex; flex-direction:column; gap:2px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-sel span { font-size:12px; color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-sel select { background-color:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); padding:7px 30px 7px 10px; min-width:190px; min-height:40px; font-size:15px; color:var(--ink); appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-sel select:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-etq { display:inline-block; margin-left:6px; font-size:12px; font-weight:600; padding:1px 8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); } /* ---------- Abas ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-tab { border:0; background:none; padding:10px 14px; min-height:44px; font-weight:600; font-size:15px; color:var(--ink-3); border-bottom:2.5px solid transparent; cursor:pointer; white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--brand); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-tab:hover { color:var(--ink); } /* ---------- Cartões ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); padding:16px 18px; min-width:0; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-card h2, :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-card h3.pt-h { margin:0; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:0; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-card-h { display:flex; align-items:flex-start; gap:10px; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-card-h p { margin:2px 0 0; color:var(--ink-3); font-size:13px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-mb { margin-bottom:14px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-gmid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:14px; margin-bottom:14px; align-items:start; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-gmid > .pt-card, :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-g2 > .pt-card { height:100%; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-note { font-size:12.5px; color:var(--ink-3); margin:8px 0 0; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-nada { font-size:13px; color:var(--ink-3); margin:8px 0; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-faixa-aviso { font-size:13px; border-radius:var(--r-s); padding:8px 10px; margin:10px 0 0; background:var(--warn-soft); color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-attr { margin-top:16px; font-size:12px; color:var(--ink-3); line-height:1.55; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-attr p { margin:0 0 4px; } /* ---------- Botões, pílulas, segmentado ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--r-s); padding:8px 13px; min-height:40px; font-weight:650; font-size:13.5px; cursor:pointer; white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-btn:hover { background:var(--surface-2); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-btn.pri { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-btn[aria-pressed="true"] { background:var(--brand-soft); border-color:var(--brand); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-acts { display:flex; flex-wrap:wrap; gap:8px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-link { background:none; border:0; color:var(--brand); font-weight:650; font-size:13px; cursor:pointer; padding:0; min-height:32px; text-align:left; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:3px; gap:2px; flex-wrap:wrap; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-seg button { border:0; background:none; border-radius:99px; padding:5px 11px; min-height:34px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--line); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:2px 9px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-chip i { width:8px; height:8px; border-radius:50%; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .rainv { color:var(--rain); font-weight:650; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .up { color:var(--pos); font-weight:650; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .down { color:var(--neg); font-weight:650; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .flat { color:var(--ink-2); font-weight:650; } /* ---------- Legendas ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-legend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--ink-2); margin-top:8px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-legend span { display:inline-flex; align-items:center; gap:6px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; } /* ---------- KPIs (Painel) ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:14px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi { display:flex; flex-direction:column; gap:6px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .lbl { font-size:13px; color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:8px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .lbl i { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .lbl i svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .val { font-size:32px; font-weight:800; line-height:1; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .val small { font-size:15px; font-weight:600; color:var(--ink-2); margin-left:3px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .val.vazio { font-size:20px; font-weight:700; color:var(--ink-2); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .aux { font-size:13px; color:var(--ink-2); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-bar { height:7px; border-radius:9px; background:var(--line-2); overflow:hidden; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-bar > span { display:block; height:100%; background:var(--brand); border-radius:9px; } /* ---------- Números em linha (stats) ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin:0; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-stats.linha { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line-2); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-stat dt { font-size:12px; color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-stat dd { margin:3px 0 0; font-size:22px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-stat dd.txt { font-size:15px; font-weight:700; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-stat .aux { font-size:12px; color:var(--ink-2); font-weight:500; } /* ---------- Tabelas ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-scroll { overflow-x:auto; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb { width:100%; border-collapse:collapse; font-size:13.5px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb thead th { text-align:left; font-weight:600; color:var(--ink-3); font-size:12px; padding:7px 8px; border-bottom:1px solid var(--line); background:none; text-transform:none; letter-spacing:0; white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb td { padding:8px; border-bottom:1px solid var(--line-2); vertical-align:middle; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb .r { text-align:right; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb td.num { white-space:nowrap; font-variant-numeric:tabular-nums; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb tfoot td { font-weight:750; border-top:1px solid var(--line); border-bottom:0; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb tr.click { cursor:pointer; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb tr.click:hover td { background:var(--surface-2); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb tr.on td { background:var(--brand-soft); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb .sub { display:block; font-size:12px; color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb small { color:var(--ink-3); font-size:12px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) table.pt-tb select { min-height:36px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); padding:4px 8px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pv-tag { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-2); white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pv-tag i { width:8px; height:8px; border-radius:50%; background:var(--rain); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pv-tag.sat i { background:var(--rain-3); } /* ---------- Atividades recentes ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed li { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed li:last-child { border-bottom:0; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-ic svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed b { font-size:14px; display:block; font-weight:650; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed span { font-size:12.5px; color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed time { font-size:12px; color:var(--ink-3); text-align:right; white-space:nowrap; } /* ---------- Gráficos ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-graf { position:relative; height:300px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-graf.baixo { height:240px; } /* ---------- Clima e Mercado: grade ---------- */ :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-mc { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-mc-main, :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-mc-side { display:flex; flex-direction:column; gap:14px; min-width:0; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-bloco { margin-top:14px; } /* Matriz do tempo */ :is(#sec-clima_mercado, #sec-mercado_hoje) .mx-wrap { overflow-x:auto; margin:0 -4px; } :is(#sec-clima_mercado, #sec-mercado_hoje) table.mx { width:100%; border-collapse:separate; border-spacing:3px 4px; font-size:13px; min-width:620px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx th { font-size:12px; font-weight:600; color:var(--ink-3); text-align:center; padding:2px 4px; white-space:nowrap; background:none; border:0; text-transform:none; letter-spacing:0; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx th:first-child { text-align:left; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td { vertical-align:middle; border:0; padding:0; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc { min-width:135px; padding:6px 6px 6px 2px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc b { display:block; font-size:14px; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc span { font-size:12px; color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc button { background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; color:inherit; min-height:32px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx tr.prop:hover td.loc b { color:var(--brand); text-decoration:underline; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx tr.prop.atual td.loc { box-shadow:inset 3px 0 0 var(--brand); padding-left:9px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx tr.prop.atual td.loc b { color:var(--brand); } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx tr.zone td.loc { padding-left:18px; border-left:3px solid var(--line); } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day { border-radius:8px; background:var(--surface-2); padding:5px 2px; text-align:center; min-width:56px; white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day.rain { background:var(--rain-soft); box-shadow:inset 0 0 0 1.5px var(--rain-3); } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day svg { width:22px; height:22px; display:block; margin:0 auto; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day b { font-size:13px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day span { color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day.semdado { font-size:11.5px; color:var(--ink-3); white-space:normal; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .val { text-align:center; padding:4px; max-width:150px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .val b { display:block; font-size:15px; white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .val span { font-size:11.5px; color:var(--ink-3); display:block; line-height:1.25; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .split { font-size:12px; color:var(--ink-3); text-align:center; font-style:italic; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cl-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* O que pede atenção */ :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-alerts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-alerts li { display:grid; grid-template-columns:32px 1fr; gap:4px 12px; align-items:center; padding:10px 12px; border-radius:var(--r-m); background:var(--surface-2); } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-alerts .pt-ic { width:32px; height:32px; border-radius:8px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-alerts p { margin:0; font-size:14.5px; line-height:1.35; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-alerts .pt-btn { grid-column:2; justify-self:start; padding:6px 10px; font-size:13px; margin-top:6px; } /* Cotações (widget oficial do Cepea dentro do card) */ :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-cot iframe { display:block; width:100%; max-width:400px; margin:0 auto; border:0; min-height:120px; } /* Tabela de cotações (pronta e desligada até a autorização do Cepea). !important nos th porque visual-2026.css pinta todo .aghtml thead th. */ :is(#sec-clima_mercado, #sec-mercado_hoje) table.cot-tb { width:100%; border-collapse:collapse; table-layout:fixed; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb th:first-child { width:42%; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb th:nth-child(2) { width:27%; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb th { font-size:11.5px !important; font-weight:600 !important; color:var(--ink-3) !important; background:none !important; text-transform:none !important; letter-spacing:0 !important; text-align:left; padding:0 4px 6px !important; border-bottom:1px solid var(--line) !important; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb th.r, :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td.r { text-align:right; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td { padding:9px 4px; white-space:normal; border-bottom:1px solid var(--line-2); vertical-align:top; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb tr:last-child td { border-bottom:0; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td b { display:block; font-size:14px; white-space:nowrap; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td span { display:block; font-size:11.5px; color:var(--ink-3); line-height:1.3; white-space:normal; overflow-wrap:anywhere; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td.num b { font-size:15px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td.up b { color:var(--pos); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td.down b { color:var(--neg); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cot-tb td.flat b { color:var(--ink-3); } /* Chuva por talhão: mapa */ :is(#sec-clima_mercado, #sec-mercado_hoje) .cl-mapa { height:380px; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line-2); background:var(--surface-2); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cl-mapa .pt-nada { padding:16px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cl-mapa.cl-mapa-svg { height:auto; overflow:visible; border:0; background:none; border-radius:0; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-props { margin-bottom:12px; } /* Aderência */ :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-adh { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-adh > div { background:var(--surface-2); border-radius:var(--r-m); padding:12px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-adh dt { font-size:12px; color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-adh dd { margin:4px 0 0; font-size:22px; font-weight:800; color:var(--ink); overflow-wrap:anywhere; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-adh .aux { font-size:12px; color:var(--ink-2); font-weight:500; margin-top:3px; display:block; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-kpi { background:var(--surface-2); border:0; border-radius:var(--r-m); padding:12px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-kpi-rot { font-size:12px; color:var(--ink-3); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-kpi strong { font-size:22px; font-weight:800; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-kpi-nota { font-size:12px; color:var(--ink-2); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-bloco h4 { font-size:14px; font-weight:700; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-nota, :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-versoes { color:var(--ink-2); font-size:13px; } /* Importação dentro da tela: sem cartão próprio dobrado */ :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-imp .imp-cartao { box-shadow:none; border-color:var(--line-2); border-radius:var(--r-m); margin-bottom:12px; } /* Mercado hoje (notícias): faixa larga no padrão dos cartões */ :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-faixa { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); padding:16px 18px; margin-top:14px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-titulo { font-size:15px; font-weight:700; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-sub, :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-meta, :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-rodape, :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-vazio { color:var(--ink-3); font-size:13px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-btn { min-height:40px; border:1px solid var(--line); color:var(--ink); border-radius:var(--r-s); font-weight:650; font-size:13.5px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-card { border:0; background:var(--surface-2); border-radius:var(--r-m); } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-link { color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje) a.nt-link:hover { color:var(--brand); } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-card { padding:16px 18px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-fontes { border-top-color:var(--line); } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-item { border-left-color:var(--line); } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-fontes-titulo, :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-meta { color:var(--ink-3); } /* ---------- Painel: mapas ---------- */ #sec-painel_producao .pn-mapas { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; } #sec-painel_producao .mp-cartao-fazenda { display:flex; flex-direction:column; gap:2px; border:1px solid var(--line-2); background:var(--surface-2); border-radius:var(--r-m); padding:8px; } #sec-painel_producao .pn-quando { font-size:12px; color:var(--ink-3); } /* ---------- Responsivo ---------- */ @media (max-width:1100px) { :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-mc { grid-template-columns:1fr; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-g2, :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-gmid { grid-template-columns:1fr; } } @media (max-width:820px) { :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-ctrls { margin-left:0; width:100%; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-sel { flex:1 1 160px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-sel select { min-width:0; width:100%; min-height:44px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-kpi .val { font-size:28px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed li { grid-template-columns:34px 1fr; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-feed time { grid-column:2; text-align:left; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-btn, :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-seg button, :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-link { min-height:44px; } } @media (max-width:700px) { :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-adh, :is(#sec-clima_mercado, #sec-mercado_hoje) .cs-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc, :is(#sec-clima_mercado, #sec-mercado_hoje) .mx th:first-child { position:sticky; left:0; background:var(--surface); z-index:1; min-width:140px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .cl-mapa { height:300px; } } /* Ajustes de largura: a Inter é mais larga que a Archivo condensada do protótipo; o local quebra linha e a matriz cabe sem rolar a 1440 px. */ :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc { max-width:190px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc span { display:block; line-height:1.3; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day { min-width:50px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day b, :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .day span { font-size:12px; letter-spacing:-.02em; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .val { max-width:120px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx .val b { font-size:14px; } :is(#sec-clima_mercado, #sec-mercado_hoje) table.mx { min-width:0; } @media (max-width:1250px) { :is(#sec-clima_mercado, #sec-mercado_hoje) table.mx { min-width:620px; } } :is(#sec-clima_mercado, #sec-mercado_hoje) .cl-mapa:has(> .pt-nada) { height:auto; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva table.pt-tb { font-size:13px; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva table.pt-tb td, :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva table.pt-tb th { padding-left:6px; padding-right:6px; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva .pv-tag { white-space:normal; } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-resumo p { font-size:13.5px; line-height:1.5; color:var(--ink-2); } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-link { font-size:13px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-meta { font-size:12px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .nt-nome { font-size:14.5px; } :is(#sec-clima_mercado, #sec-mercado_hoje) #clima-aderencia-extra .cs-bloco { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2); } /* visual-2026.css pinta todo cabeçalho de tabela .aghtml com !important; aqui vale o cabeçalho limpo do protótipo. */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt table.pt-tb thead th, :is(#sec-clima_mercado, #sec-mercado_hoje) .pt table.mx thead th { background:none !important; color:var(--ink-3) !important; text-transform:none; letter-spacing:0; font-size:12px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt table.pt-tb thead th { border-bottom:1px solid var(--line) !important; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt table.mx thead th { border-bottom:0 !important; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt table.pt-tb tfoot td { background:none; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt table.mx tbody tr:hover { background:none; } /* Botões e cartões dos módulos montados dentro das telas (aba Talhões, mapa, evolução da safra, importação) no padrão do protótipo. */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .mp-btn { min-height:40px; border-radius:var(--r-s); font-weight:650; font-size:13.5px; background:var(--brand); border-color:var(--brand); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .mp-btn.mp-btn-sec { background:var(--surface); border-color:var(--line); color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .mp-btn.mp-btn-sec:hover { background:var(--surface-2); } #sec-painel_producao .pt .card { border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); } #sec-painel_producao .pt .card .head { border-bottom:0; font-size:15px; font-weight:700; padding:16px 18px 0; color:var(--ink); } #sec-painel_producao .pt .card .body { padding:12px 18px 16px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .imp-cartao { border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); padding:16px 18px; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .imp-titulo { font-size:15px; font-weight:700; color:var(--ink); } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .imp-escolher { min-height:40px; border-color:var(--line); border-radius:var(--r-s); font-weight:650; font-size:13.5px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-imp .imp-cartao { box-shadow:none; border-color:var(--line-2); border-radius:var(--r-m); } @media (max-width:820px) { :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .mp-btn, :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt .imp-escolher { min-height:44px; } } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc { width:175px; min-width:150px; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc button { white-space:normal; display:block; width:100%; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx th:last-child { white-space:normal; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc, :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc * { white-space:normal !important; } :is(#sec-clima_mercado, #sec-mercado_hoje) .mx td.loc { width:165px; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva [data-cl-trocar] { font-size:12px; font-weight:600; } /* aghtml.css põe nowrap em toda célula; nas telas do protótipo o texto quebra. */ :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt table.pt-tb td, :is(#sec-clima_mercado, #sec-mercado_hoje) .pt table.mx td { white-space:normal; } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt table.pt-tb td.num { white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva [data-cl-trocar] { min-height:28px; } @media (max-width:820px) { :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva [data-cl-trocar] { min-height:44px; } } :is(#sec-clima_mercado, #sec-mercado_hoje, #sec-painel_producao) .pt-tabs { scrollbar-width:none; } :is(#sec-clima_mercado, #sec-mercado_hoje) .pt-cot .pt-attr { border-top:1px solid var(--line); padding-top:10px; } /* Avisos na tabela de chuva por talhão (antes no cartão "O que pede atenção hoje"). */ :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva .sub.cl-av-rain { color:var(--rain); font-weight:600; white-space:nowrap; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva .sub.cl-av-warn { color:#8A560D; font-weight:600; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva .cl-av-ic { display:inline-flex; vertical-align:-3px; margin-right:3px; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva .cl-av-ic svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva .cl-maior { color:var(--rain); } :is(#sec-clima_mercado, #sec-mercado_hoje) #cl-chuva .cl-av-seco { color:var(--terra); } #sec-clima_mercado .pt-mc1 { display:flex; flex-direction:column; gap:14px; min-width:0; } /* Tela Mercado (layout de 06/10/2026, prévia docs/prototipos/mercado-v2.html). */ #sec-mercado_hoje .mh-cab { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:18px; } #sec-mercado_hoje .mh-fontes { display:flex; flex-wrap:wrap; gap:8px; } #sec-mercado_hoje .mh-fonte { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:4px 10px; } #sec-mercado_hoje .mh-fonte i { width:7px; height:7px; border-radius:50%; background:var(--brand); } #sec-mercado_hoje .mh-fonte i.atraso { background:#C9A227; } #sec-mercado_hoje .mh-termo-cab { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 10px; } #sec-mercado_hoje .mh-termo-cab h2 { margin:0; font-size:15px; font-weight:700; color:var(--ink); } #sec-mercado_hoje .mh-termo-cab span { font-size:13px; color:var(--ink-3); } #sec-mercado_hoje .mh-termo { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:14px; } #sec-mercado_hoje .mh-principal { min-width:0; } #sec-mercado_hoje .mh-pil { text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--line); border-radius:var(--r-m); padding:10px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:44px; box-shadow:var(--shadow); font:inherit; color:var(--ink); } #sec-mercado_hoje .mh-pil.s-ALTA { border-top-color:var(--pos); } #sec-mercado_hoje .mh-pil.s-BAIXA { border-top-color:var(--neg); } #sec-mercado_hoje .mh-pil.s-NEUTRO { border-top-color:#9AA197; } #sec-mercado_hoje .mh-pil:hover { background:var(--surface-2); } #sec-mercado_hoje .mh-pil:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } #sec-mercado_hoje .mh-pil[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; } #sec-mercado_hoje .mh-pil[aria-pressed="true"] .nt-selo { background:rgba(255,255,255,.16); color:#fff; } #sec-mercado_hoje .mh-pil-nome { font-size:13px; font-weight:650; line-height:1.25; } #sec-mercado_hoje .mh-pil-sem { font-size:11.5px; color:var(--ink-3); } #sec-mercado_hoje .mh-pil[aria-pressed="true"] .mh-pil-sem { color:#D5DDD6; } #sec-mercado_hoje .mh-grade { display:grid; grid-template-columns:440px minmax(0,1fr); gap:18px; align-items:start; } #sec-mercado_hoje .mh-lado { display:flex; flex-direction:column; gap:18px; min-width:0; } #sec-mercado_hoje .mh-card { padding:18px 20px; } #sec-mercado_hoje .mh-card h2 { margin:0; font-size:15px; font-weight:700; color:var(--ink); } #sec-mercado_hoje .mh-rot { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); } #sec-mercado_hoje .mh-meta { font-size:12.5px; color:var(--ink-3); margin:2px 0 12px; } #sec-mercado_hoje .mh-escolha { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; font-size:13px; color:var(--ink-2); flex-wrap:wrap; } #sec-mercado_hoje .mh-leitura { padding:24px 28px; min-width:0; } #sec-mercado_hoje .mh-leitura-cab { display:flex; align-items:center; gap:12px; margin-bottom:4px; } #sec-mercado_hoje .mh-leitura-cab h2 { margin:0; font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--ink); } #sec-mercado_hoje .mh-chave { font-size:16.5px; line-height:1.55; font-weight:600; color:var(--ink); margin:0 0 14px; max-width:68ch; padding-left:14px; border-left:3px solid var(--line); } #sec-mercado_hoje .mh-leitura.s-ALTA .mh-chave { border-left-color:var(--pos); } #sec-mercado_hoje .mh-leitura.s-BAIXA .mh-chave { border-left-color:var(--neg); } #sec-mercado_hoje .mh-corpo p { margin:0 0 12px; max-width:68ch; color:var(--ink-2); line-height:1.65; font-size:15px; } #sec-mercado_hoje .mh-fontes-lista { border-top:1px solid var(--line-2); margin-top:18px; padding-top:12px; } #sec-mercado_hoje .mh-fontes-lista summary { cursor:pointer; font-size:13px; font-weight:650; color:var(--brand); min-height:32px; display:flex; align-items:center; } #sec-mercado_hoje .mh-fontes-lista .nt-lista { margin-top:8px; } #sec-mercado_hoje .mh-vizinhas { display:flex; justify-content:space-between; gap:12px; margin-top:16px; } #sec-mercado_hoje .mh-vizinhas button { background:none; border:0; cursor:pointer; font:inherit; font-size:13px; font-weight:650; color:var(--brand); padding:8px 0; min-height:44px; } #sec-mercado_hoje .mh-leitura .nt-rodape { margin-top:8px; } @media (max-width:1100px) { #sec-mercado_hoje .mh-grade { grid-template-columns:1fr; } #sec-mercado_hoje .mh-principal { order:-1; } } @media (max-width:640px) { #sec-mercado_hoje .mh-termo { display:flex; overflow-x:auto; padding-bottom:4px; } #sec-mercado_hoje .mh-pil { min-width:132px; flex:none; } #sec-mercado_hoje .mh-leitura { padding:18px; } } /* Tabela do Cepea na tela Mercado: colunas fixas e números do mesmo tamanho, preço e variação alinhados à direita na mesma linha de base. */ #sec-mercado_hoje :is(#mh-cotacoes, #mh-bolsas) .cot-tb th:first-child { width:48%; } #sec-mercado_hoje :is(#mh-cotacoes, #mh-bolsas) .cot-tb th:nth-child(2) { width:24%; } #sec-mercado_hoje :is(#mh-cotacoes, #mh-bolsas) .cot-tb td { padding:10px 4px; vertical-align:top; } #sec-mercado_hoje :is(#mh-cotacoes, #mh-bolsas) .cot-tb td b { font-size:15px; font-weight:700; line-height:20px; } #sec-mercado_hoje :is(#mh-cotacoes, #mh-bolsas) .cot-tb td.num b { font-size:15px; font-variant-numeric:tabular-nums; } #sec-mercado_hoje :is(#mh-cotacoes, #mh-bolsas) .cot-tb td span { font-size:12px; line-height:17px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #sec-mercado_hoje :is(#mh-cotacoes, #mh-bolsas) .cot-tb td.num span { font-variant-numeric:tabular-nums; } #sec-mercado_hoje .mh-lado > .mh-termo-cab { margin-bottom:-8px; } /* Leitura da notícia: frase em destaque e texto com a MESMA largura máxima (em px, não em ch, que muda com o tamanho da letra) e quebra de linha equilibrada, para as bordas direitas não ficarem tortas em tela larga. */ #sec-mercado_hoje .mh-chave, #sec-mercado_hoje .mh-corpo p { max-width:820px; text-wrap:pretty; } #sec-mercado_hoje .mh-chave { font-size:16px; } /* Texto da leitura em duas colunas justificadas (06/10/2026, pedido do Rodrigo), para todas as leituras. Em largura pequena vira uma coluna. A frase em destaque ocupa a largura toda, por cima das colunas. */ #sec-mercado_hoje .mh-chave { max-width:none; } #sec-mercado_hoje .mh-corpo { columns:2 250px; column-gap:32px; } #sec-mercado_hoje .mh-corpo p { max-width:none; text-align:justify; hyphens:auto; -webkit-hyphens:auto; text-wrap:wrap; } /* Termômetro em coluna, um tema abaixo do outro, à esquerda da leitura (07/10/2026, pedido do Rodrigo, para caber mais temas). Fica preso no topo ao rolar a leitura. Em tela estreita volta a ser uma faixa que rola de lado, acima da leitura. */ #sec-mercado_hoje .mh-principal { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; } #sec-mercado_hoje #mh-termo { position:sticky; top:12px; min-width:0; } #sec-mercado_hoje .mh-termo { display:flex; flex-direction:column; gap:6px; margin:0; } #sec-mercado_hoje .mh-pil { flex-direction:row; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); border-left:3px solid var(--line); padding:8px 10px 8px 12px; } #sec-mercado_hoje .mh-pil.s-ALTA { border-top-color:var(--line); border-left-color:var(--pos); } #sec-mercado_hoje .mh-pil.s-BAIXA { border-top-color:var(--line); border-left-color:var(--neg); } #sec-mercado_hoje .mh-pil.s-NEUTRO { border-top-color:var(--line); border-left-color:#9AA197; } #sec-mercado_hoje .mh-pil[aria-pressed="true"] { border-color:var(--ink); } #sec-mercado_hoje .mh-pil .nt-selo { flex:none; } #sec-mercado_hoje #mh-termo .mh-termo-cab { flex-direction:column; align-items:flex-start; gap:2px; } @media (max-width:760px) { #sec-mercado_hoje .mh-principal { grid-template-columns:1fr; } #sec-mercado_hoje #mh-termo { position:static; } #sec-mercado_hoje .mh-termo { flex-direction:row; overflow-x:auto; padding-bottom:4px; } #sec-mercado_hoje .mh-pil { min-width:150px; flex:none; } } /* Título "Viés" sobre a coluna dos selos do termômetro (07/10/2026). */ #sec-mercado_hoje .mh-termo-col { display:flex; justify-content:flex-end; padding:0 10px 0 12px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); } @media (max-width:760px) { #sec-mercado_hoje .mh-termo-col { display:none; } } /* As três colunas da tela Mercado com o título na mesma linha e as janelas começando na mesma altura (07/10/2026): cada coluna tem um título de uma linha só, e a contagem do termômetro foi para baixo da lista. */ #sec-mercado_hoje .mh-leit-col { min-width:0; } #sec-mercado_hoje :is(.mh-lado, #mh-termo, .mh-leit-col) > .mh-termo-cab { margin:0 0 10px; min-height:22px; } #sec-mercado_hoje .mh-lado { gap:0; } #sec-mercado_hoje .mh-lado > * + * { margin-top:18px; } #sec-mercado_hoje .mh-lado > .mh-termo-cab + * { margin-top:0; } #sec-mercado_hoje .mh-termo-tot { margin:10px 0 0; font-size:12.5px; color:var(--ink-3); } /* Legenda de uma linha embaixo do título de cada coluna (Tema e Viés no termômetro), mesma altura nas três, para as janelas começarem juntas. */ #sec-mercado_hoje .mh-legenda { display:flex; justify-content:space-between; align-items:center; height:18px; margin:0 0 8px; padding:0 2px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; overflow:hidden; } #sec-mercado_hoje .mh-termo-col.mh-legenda { padding:0 10px 0 15px; } #sec-mercado_hoje .mh-lado > .mh-termo-cab + .mh-legenda + * { margin-top:0; } #sec-mercado_hoje .mh-lado > .mh-legenda { margin-top:0; } @media (max-width:760px) { #sec-mercado_hoje .mh-termo-col.mh-legenda { display:none; } } /* Ouvir o resumo da notícia (07/10/2026). */ #sec-mercado_hoje .mh-ouvir { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:2px 0 14px; } #sec-mercado_hoje .mh-ouvir-btn { min-height:40px; padding:0 14px; border-radius:99px; border:1px solid var(--brand); background:var(--surface); color:var(--brand); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer; } #sec-mercado_hoje .mh-ouvir-btn:hover { background:var(--surface-2); } #sec-mercado_hoje .mh-ouvir-btn:disabled { opacity:.6; cursor:default; } #sec-mercado_hoje .mh-ouvir-msg { font-size:12.5px; color:var(--ink-3); } #sec-mercado_hoje .mh-ouvir-player { width:100%; max-width:520px; height:40px; } /* O termômetro não acompanha mais a rolagem (07/10/2026, pedido do Rodrigo): ele descia junto e ficava solto ao lado da leitura. */ #sec-mercado_hoje #mh-termo { position:static; } /* ---------- Painel da Produção: aba Andamento (painel.andamento.js) ---------- */ #sec-painel_producao .pa-topo { margin:0 0 12px; font-size:13.5px; color:var(--ink-2); } #sec-painel_producao .pa-link { border:0; background:none; padding:0 2px; min-height:32px; color:var(--brand); font-weight:650; text-decoration:underline; cursor:pointer; font-size:inherit; } #sec-painel_producao .pa-gleba { margin:6px 0 8px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); } #sec-painel_producao .pa-grade { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr)); gap:12px; margin-bottom:12px; } #sec-painel_producao .pa-card { border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; } #sec-painel_producao .pa-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } #sec-painel_producao .pa-card h3 { margin:0; font-size:15px; font-weight:700; color:var(--ink); } #sec-painel_producao .pa-cab p { margin:1px 0 0; font-size:12.5px; color:var(--ink-3); } #sec-painel_producao .pa-selo { font-size:12px; font-weight:650; border:1px solid; border-radius:99px; padding:2px 9px; white-space:nowrap; background:var(--surface); } #sec-painel_producao .pa-fase { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; } #sec-painel_producao .pa-fase-n { font-size:19px; font-weight:750; color:var(--ink); line-height:1.2; } #sec-painel_producao .pa-tag { font-size:12px; font-weight:600; border-radius:99px; padding:2px 8px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-2); } #sec-painel_producao .pa-tag.est { background:var(--warn-soft); color:#7A4D0C; border-color:#EBD3A8; } #sec-painel_producao .pa-tag.ok { background:var(--brand-soft); color:var(--brand); border-color:#C6DBC8; } #sec-painel_producao .pa-bar { height:8px; border-radius:99px; background:var(--line-2); overflow:hidden; } #sec-painel_producao .pa-bar span { display:block; height:100%; border-radius:99px; } #sec-painel_producao .pa-sub { margin:0; font-size:12.5px; color:var(--ink-3); font-weight:400; } #sec-painel_producao .pa-txt { margin:0; font-size:13.5px; color:var(--ink-2); } #sec-painel_producao .pa-dl { margin:0; display:flex; flex-direction:column; gap:3px; } #sec-painel_producao .pa-dl:empty { display:none; } #sec-painel_producao .pa-l { display:flex; justify-content:space-between; gap:10px; font-size:13px; } #sec-painel_producao .pa-l dt { color:var(--ink-3); } #sec-painel_producao .pa-l dd { margin:0; color:var(--ink); font-weight:600; text-align:right; } #sec-painel_producao .pa-alerta { color:var(--neg); } #sec-painel_producao .pa-btn { align-self:flex-start; margin-top:2px; } #sec-painel_producao .pa-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 10px; } #sec-painel_producao .pa-kpis div { background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-m); padding:10px 12px; } #sec-painel_producao .pa-kpis dt { font-size:12.5px; color:var(--ink-3); } #sec-painel_producao .pa-kpis dd { margin:2px 0 0; font-size:19px; font-weight:750; color:var(--ink); } #sec-painel_producao .pa-lista { margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-2); } @media (max-width:820px) { #sec-painel_producao .pa-link { min-height:44px; } } #sec-painel_producao .pa-cab { align-items:center; } #sec-painel_producao .pa-cab-t { flex:1 1 auto; min-width:0; } #sec-painel_producao .pa-mini { flex:0 0 52px; width:52px; height:52px; border-radius:var(--r-s); background:var(--surface-2); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; } #sec-painel_producao .pa-mini.vazio { border-style:dashed; } #sec-painel_producao .pa-mini svg { display:block; } #sec-painel_producao .pa-acoes { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; } #sec-painel_producao .pa-acoes .pa-btn { margin-top:0; } #sec-painel_producao .pa-chuva { color:var(--rain); font-weight:650; } #sec-painel_producao .pa-clima { padding-top:6px; border-top:1px dashed var(--line-2); } #sec-painel_producao .pa-clima:empty { display:none; } /* Botões do cartão do talhão: grade de duas colunas, todos do mesmo tamanho, no pé do cartão. */ #sec-painel_producao .pa-acoes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:auto; padding-top:4px; } #sec-painel_producao .pa-acoes .pa-btn { width:100%; white-space:normal; } /* Visão geral da gleba (mesmo desenho do Andamento do ciclo da Operação). */ #sec-painel_producao .pa-resumo-gleba { border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); padding:12px 16px; margin:0 0 18px; } #sec-painel_producao .pa-resumo-gleba h4 { margin:0 0 4px; font-size:14px; font-weight:700; color:var(--ink); } #sec-painel_producao .and-linha { padding:10px 0; border-top:1px solid #EEF2EB; } #sec-painel_producao .and-linha:first-of-type { border-top:0; } #sec-painel_producao .and-topo { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } #sec-painel_producao .and-topo b { font-size:14px; } #sec-painel_producao .and-chip { font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:#EEF3EA; color:#2D6A3E; } #sec-painel_producao .and-dest { margin-left:auto; font-size:13px; font-weight:700; } #sec-painel_producao .and-barra { display:flex; gap:4px; margin-top:8px; } #sec-painel_producao .and-seg { position:relative; min-width:0; padding-bottom:16px; } #sec-painel_producao .and-seg::before { content:''; display:block; height:7px; border-radius:99px; background:#E6ECE2; } #sec-painel_producao .and-seg i { position:absolute; left:0; top:0; height:7px; border-radius:99px; opacity:.7; } #sec-painel_producao .and-seg.atual i { opacity:1; } #sec-painel_producao .and-seg em { position:absolute; left:0; right:0; bottom:0; font-style:normal; font-size:11px; color:#66726A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #sec-painel_producao .and-seg.atual em { color:#17221B; font-weight:700; } #sec-painel_producao .and-seg.feita em { color:#4A5A4F; } /* Sub-abas da atividade (Talhões, Atividades, Colheita...) e extras do cartão do talhão. */ #sec-painel_producao .pa-subabas { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; } #sec-painel_producao .pa-subabas button { border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:99px; padding:6px 14px; min-height:40px; font-size:13.5px; font-weight:600; cursor:pointer; } #sec-painel_producao .pa-subabas button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:#fff; } #sec-painel_producao .pa-aviso { display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--warn-soft); border:1px solid #EBD3A8; color:#7A4D0C; border-radius:var(--r-s); padding:6px 10px; font-size:13px; } #sec-painel_producao .pa-plan { border:1px solid var(--line-2); border-radius:var(--r-s); padding:6px 10px; background:var(--surface-2); } #sec-painel_producao .pa-plan-t { margin:0 0 2px; font-size:12px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; } #sec-painel_producao .pa-plan-l { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; color:var(--ink); } @media (max-width:820px) { #sec-painel_producao .pa-subabas button { min-height:44px; } } /* Abas do Painel da Produção no padrão do sistema (09/10/2026): pílula com borda verde, ativa preenchida, largura mínima igual e 44 px de alvo, as mesmas de Bancos e das demais seções. */ #sec-painel_producao .pt-tabs { gap:8px; flex-wrap:wrap; border-bottom:0; overflow:visible; margin-bottom:18px; } #sec-painel_producao .pt-tab { display:inline-flex; align-items:center; justify-content:center; min-width:150px; min-height:44px; padding:8px 16px; border:1px solid #2f6b34; border-radius:4px; background:#fff; color:#2f6b34; font-weight:600; font-size:14px; transition:background-color .15s,color .15s; } #sec-painel_producao .pt-tab:hover { background:#2f6b34; color:#fff; } #sec-painel_producao .pt-tab[aria-selected="true"], #sec-painel_producao .pt-tab[aria-selected="true"]:hover { background:linear-gradient(135deg,#0f1f14 0%,#1d4a22 100%); border-color:#0f1f14; color:#fff; } @media (max-width:640px) { #sec-painel_producao .pt-tab { min-width:0; flex:1 1 140px; } } /* Abas Notícias e Relatórios da tela Mercado e a aba Relatórios (14/10/2026, js/sections/mercado.relatorios.js). */ #sec-mercado_hoje .mh-col-dir { min-width:0; display:flex; flex-direction:column; gap:14px; } #sec-mercado_hoje .mh-abas { display:flex; gap:8px; flex-wrap:wrap; } #sec-mercado_hoje .mh-aba { font:inherit; font-size:14px; font-weight:650; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:8px 18px; min-height:44px; min-width:150px; cursor:pointer; } #sec-mercado_hoje .mh-aba.ativo { background:var(--brand); border-color:var(--brand); color:#fff; } #sec-mercado_hoje .mh-aba:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } #sec-mercado_hoje .mh-relatorios { display:flex; flex-direction:column; gap:18px; min-width:0; } #sec-mercado_hoje .mh-relatorios[hidden], #sec-mercado_hoje .mh-principal[hidden] { display:none; } #sec-mercado_hoje .rel-cal-lista { list-style:none; margin:0; padding:0; } #sec-mercado_hoje .rel-cal-item { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-2); } #sec-mercado_hoje .rel-cal-item:last-child { border-bottom:0; } #sec-mercado_hoje .rel-cal-item.hoje .rel-cal-data b { color:var(--brand); } #sec-mercado_hoje .rel-cal-data b { display:block; font-size:14px; color:var(--ink); } #sec-mercado_hoje .rel-cal-data span { font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; } #sec-mercado_hoje .rel-cal-nome { display:block; font-size:14px; font-weight:600; color:var(--ink); } #sec-mercado_hoje .rel-cal-prods { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } #sec-mercado_hoje .rel-prod { font-size:11.5px; color:var(--ink-2); background:var(--surface-2); border-radius:99px; padding:2px 8px; } #sec-mercado_hoje .rel-cal-sit { font-size:12px; font-weight:600; color:var(--ink-3); white-space:nowrap; } #sec-mercado_hoje .rel-cal-sit.s-publicado { color:var(--pos); } #sec-mercado_hoje .rel-cal-sit.s-falhou { color:var(--neg); } #sec-mercado_hoje .rel-pub-cab { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; } #sec-mercado_hoje .rel-pub-cab h2 { margin:0; } #sec-mercado_hoje .rel-filtros { display:flex; gap:8px; flex-wrap:wrap; min-width:0; max-width:100%; } #sec-mercado_hoje .rel-sel { font:inherit; font-size:16px; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); color:var(--ink); max-width:100%; min-width:0; flex:1 1 180px; } #sec-mercado_hoje .rel-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px,100%),1fr)); gap:10px; } #sec-mercado_hoje .rel-card { font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; padding:12px 14px; min-height:44px; color:var(--ink); } #sec-mercado_hoje .rel-card:hover { background:var(--surface-2); } #sec-mercado_hoje .rel-card.ativo { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); } #sec-mercado_hoje .rel-card:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } #sec-mercado_hoje .rel-card-topo { display:flex; justify-content:space-between; align-items:center; gap:8px; } #sec-mercado_hoje .rel-card-data { font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; } #sec-mercado_hoje .rel-novo { font-size:11px; font-weight:700; color:#fff; background:var(--brand); border-radius:99px; padding:2px 8px; } #sec-mercado_hoje .rel-card-nome { font-size:14px; font-weight:650; line-height:1.3; } #sec-mercado_hoje .rel-card-sem { font-size:12px; color:var(--ink-3); } #sec-mercado_hoje .rel-vieses { display:flex; flex-wrap:wrap; gap:4px; } #sec-mercado_hoje .rel-vies { font-size:12px; font-weight:600; border-radius:99px; padding:2px 8px; background:var(--surface-2); color:var(--ink-3); } #sec-mercado_hoje .rel-vies.up { color:var(--pos); } #sec-mercado_hoje .rel-vies.down { color:var(--neg); } #sec-mercado_hoje .rel-mais { font:inherit; font-size:13px; font-weight:650; color:var(--brand); background:none; border:0; cursor:pointer; min-height:44px; margin-top:6px; } #sec-mercado_hoje .rel-acoes { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:6px 0 14px; } #sec-mercado_hoje .rel-fonte { font-size:13px; font-weight:650; color:var(--brand); min-height:44px; display:inline-flex; align-items:center; } #sec-mercado_hoje .rel-avals { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px,100%),1fr)); gap:10px; margin:6px 0 4px; } #sec-mercado_hoje .rel-aval { border:1px solid var(--line); border-left:3px solid #9AA197; border-radius:var(--r-m); padding:10px 12px; } #sec-mercado_hoje .rel-aval.up { border-left-color:var(--pos); } #sec-mercado_hoje .rel-aval.down { border-left-color:var(--neg); } #sec-mercado_hoje .rel-aval b { display:block; font-size:14px; color:var(--ink); margin-bottom:4px; } #sec-mercado_hoje .rel-aval p { margin:0; font-size:14px; font-weight:400; line-height:1.55; color:var(--ink-2); } #sec-mercado_hoje .rel-h3 { font-size:15px; font-weight:700; color:var(--ink); margin:18px 0 8px; } #sec-mercado_hoje table.rel-tb th:first-child { width:30%; } #sec-mercado_hoje table.rel-tb th:nth-child(2) { width:12%; } #sec-mercado_hoje table.rel-tb th:nth-child(3) { width:11%; } #sec-mercado_hoje table.rel-tb td span { white-space:normal; } #sec-mercado_hoje .rel-todos { margin-top:12px; } #sec-mercado_hoje .rel-todos summary { cursor:pointer; font-size:13px; font-weight:650; color:var(--brand); min-height:44px; display:flex; align-items:center; } @media (max-width:1100px) { #sec-mercado_hoje .mh-col-dir { order:-1; } } @media (max-width:640px) { #sec-mercado_hoje .mh-aba { flex:1; min-width:0; } #sec-mercado_hoje .rel-cal-item { grid-template-columns:90px minmax(0,1fr); } #sec-mercado_hoje .rel-cal-sit { grid-column:2; } #sec-mercado_hoje table.rel-tb, #sec-mercado_hoje table.rel-tb tbody, #sec-mercado_hoje table.rel-tb tr, #sec-mercado_hoje table.rel-tb td { display:block; width:auto !important; } #sec-mercado_hoje table.rel-tb thead { display:none; } #sec-mercado_hoje table.rel-tb tr { border-bottom:1px solid var(--line-2); padding:8px 0; } #sec-mercado_hoje table.rel-tb td { border:0; padding:3px 0; text-align:left !important; } #sec-mercado_hoje table.rel-tb td::before { content:attr(data-rot); display:block; font-size:11px; color:var(--ink-3); } } /* Mapas do clima na aba Relatórios (14/10/2026, js/sections/mercado.mapas.js). */ #sec-mercado_hoje .rel-enso { display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--r-m); padding:10px 12px; margin-bottom:14px; } #sec-mercado_hoje .rel-enso b { font-size:14px; color:var(--ink); } #sec-mercado_hoje .rel-enso span { font-size:14px; line-height:1.5; color:var(--ink-2); } #sec-mercado_hoje .rel-map-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr)); gap:14px; } #sec-mercado_hoje .rel-map { margin:0; border:1px solid var(--line); border-radius:var(--r-m); padding:10px; display:flex; flex-direction:column; gap:8px; min-width:0; } #sec-mercado_hoje .rel-map-cab { display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap; } #sec-mercado_hoje .rel-map-cab b { font-size:14px; color:var(--ink); } #sec-mercado_hoje .rel-map-cab span { font-size:12px; color:var(--ink-3); } #sec-mercado_hoje .rel-map-img { min-height:120px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-radius:6px; } #sec-mercado_hoje .rel-map-btn { border:0; padding:0; background:none; cursor:zoom-in; width:100%; display:block; } #sec-mercado_hoje .rel-map-btn img { display:block; width:100%; height:auto; border-radius:6px; } #sec-mercado_hoje .rel-map-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } #sec-mercado_hoje .rel-map-num { margin:0; font-size:13.5px; font-weight:600; color:var(--ink); } .rel-map-dlg { max-width:min(1100px,96vw); width:auto; padding:12px; border:0; border-radius:12px; } .rel-map-dlg::backdrop { background:rgba(0,0,0,.6); } .rel-map-dlg img { display:block; max-width:100%; max-height:84vh; margin:8px auto 0; } .rel-map-fechar { font:inherit; font-size:14px; font-weight:650; min-height:44px; padding:6px 16px; border:1px solid #ccc; border-radius:99px; background:#fff; cursor:pointer; } /* Tela Mercado por produto (15/10/2026, js/sections/mercado_hoje.js, prévia docs/prototipos/mercado-v3.html). Uma fila de pílulas escolhe a Visão geral, um produto ou um tema. */ /* Texto da leitura continua em duas colunas justificadas (pedido do Rodrigo de 06/10/2026, confirmado em 15/10/2026). */ #sec-mercado_hoje .mh2 .mh-cab { margin-bottom:12px; } #sec-mercado_hoje .mh-fontes-txt { margin:0; font-size:12.5px; color:var(--ink-3); } #sec-mercado_hoje .mh-pilulas { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 20px; } #sec-mercado_hoje .mh-p { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:650; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:6px 14px; min-height:44px; cursor:pointer; } #sec-mercado_hoje .mh-p:hover { background:var(--surface-2); } #sec-mercado_hoje .mh-p.ativo { background:var(--brand); border-color:var(--brand); color:#fff; } #sec-mercado_hoje .mh-p:focus-visible, #sec-mercado_hoje .mh-escolher:focus-visible, #sec-mercado_hoje .mh-cot:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } #sec-mercado_hoje .mh-ponto { width:9px; height:9px; border-radius:50%; flex:none; background:#9AA197; } #sec-mercado_hoje .mh-ponto.alta { background:var(--pos); } #sec-mercado_hoje .mh-ponto.baixa { background:var(--neg); } #sec-mercado_hoje .mh-p.ativo .mh-ponto { box-shadow:0 0 0 2px #fff; } #sec-mercado_hoje .mh-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #sec-mercado_hoje .mh-sep { width:1px; height:28px; background:var(--line); margin:0 4px; } #sec-mercado_hoje .mh-escolher { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); cursor:pointer; padding:0; } #sec-mercado_hoje .mh-escolher:hover { color:var(--brand); background:var(--surface-2); } #sec-mercado_hoje .mh-h2 { margin:0 0 10px; font-size:15px; font-weight:700; color:var(--ink); } #sec-mercado_hoje .mh-geral { display:flex; flex-direction:column; gap:22px; } #sec-mercado_hoje .mh-cots { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(148px,100%),1fr)); gap:10px; } #sec-mercado_hoje .mh-cot { font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; color:var(--ink); min-height:44px; } #sec-mercado_hoje .mh-cot:hover { background:var(--surface-2); } #sec-mercado_hoje .mh-cot-n { font-size:12.5px; font-weight:650; color:var(--ink-3); } #sec-mercado_hoje .mh-cot-v { font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; } #sec-mercado_hoje .mh-cot-d { font-size:12.5px; font-weight:650; } #sec-mercado_hoje .mh-cot-s { font-size:12px; color:var(--ink-3); } #sec-mercado_hoje .mh-cot-selo { margin-top:6px; } #sec-mercado_hoje .up { color:var(--pos); } #sec-mercado_hoje .down { color:var(--neg); } #sec-mercado_hoje .flat { color:var(--ink-3); } #sec-mercado_hoje .mh-prod { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; align-items:start; } #sec-mercado_hoje .mh-prod.so-leitura { grid-template-columns:minmax(0,1fr); } #sec-mercado_hoje .mh-prod-lado, #sec-mercado_hoje .mh-prod-principal { display:flex; flex-direction:column; gap:18px; min-width:0; } #sec-mercado_hoje .mh-prod-lado { position:sticky; top:16px; } #sec-mercado_hoje .mh-preco h2, #sec-mercado_hoje .mh-fazenda h2, #sec-mercado_hoje .rel-produto h2 { margin:0 0 10px; } #sec-mercado_hoje .mh-preco-val b { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); } #sec-mercado_hoje .mh-preco-val span { font-size:13px; font-weight:650; } #sec-mercado_hoje .mh-preco-tb td span { display:block; font-size:11.5px; color:var(--ink-3); } #sec-mercado_hoje .mh-preco-tb { margin-bottom:10px; table-layout:fixed; width:100%; } #sec-mercado_hoje .mh-preco-tb td:first-child { width:52%; } #sec-mercado_hoje .mh-preco-tb td:nth-child(2) { width:24%; } #sec-mercado_hoje .mh-faz-item + .mh-faz-item { border-top:1px solid var(--line-2); margin-top:10px; padding-top:10px; } #sec-mercado_hoje .mh-faz-livre { font-size:14px; color:var(--ink-2); } #sec-mercado_hoje .mh-faz-livre b { font-size:20px; color:var(--ink); } #sec-mercado_hoje .mh-faz-vale { margin:0 0 8px; font-size:13.5px; color:var(--ink-2); } #sec-mercado_hoje .rel-dupla { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:18px; align-items:start; } #sec-mercado_hoje .rel-linhas { display:flex; flex-direction:column; gap:8px; } #sec-mercado_hoje .rel-lin { font:inherit; text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:10px 12px; min-height:44px; color:var(--ink); } #sec-mercado_hoje .rel-lin:hover { background:var(--surface-2); } #sec-mercado_hoje .rel-lin.ativo { border-color:var(--brand); box-shadow:inset 3px 0 0 var(--brand); } #sec-mercado_hoje .rel-lin:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } #sec-mercado_hoje .rel-lin-txt b { display:block; font-size:14px; } #sec-mercado_hoje .rel-lin-txt span { font-size:12px; color:var(--ink-3); } #sec-mercado_hoje .rel-leitura-dentro { border-top:1px solid var(--line-2); margin-top:14px; padding-top:14px; } #sec-mercado_hoje .rel-leitura-dentro .mh-leitura-cab h2 { font-size:17px; } #sec-mercado_hoje .rel-proximo { margin:12px 0 0; font-size:13px; color:var(--ink-3); display:flex; flex-wrap:wrap; align-items:center; gap:6px; } #sec-mercado_hoje .rel-proximo .rel-mais { margin:0; } @media (max-width:1000px) { #sec-mercado_hoje .mh-prod, #sec-mercado_hoje .rel-dupla { grid-template-columns:minmax(0,1fr); } #sec-mercado_hoje .mh-prod-lado { position:static; } } @media (max-width:640px) { #sec-mercado_hoje .mh-pilulas { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; } #sec-mercado_hoje .mh-p { flex:none; } #sec-mercado_hoje .mh-escolher { flex:none; } } /* Mapas do clima em duas janelas (15/10/2026): Brasil à esquerda, EUA à direita. */ #sec-mercado_hoje .rel-map-regioes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-items:start; } #sec-mercado_hoje .rel-map-regiao { min-width:0; border:1px solid var(--line); border-radius:var(--r-m); padding:12px 14px; background:var(--surface); } #sec-mercado_hoje .rel-map-regiao .rel-h3 { margin:0 0 10px; } #sec-mercado_hoje .rel-map-regiao .rel-map-grade { grid-template-columns:repeat(auto-fill, minmax(min(220px,100%),1fr)); gap:10px; } @media (max-width:1100px) { #sec-mercado_hoje .rel-map-regioes { grid-template-columns:minmax(0,1fr); } }