/** * GeoAgro SRP — v105 Painel Custom CSS * ───────────────────────────────────── * Frontend: shortcode [agribusiness_painel_custom] * • Landing-page layout · scroll vertical natural · dark terminal aesthetic * • Desktop ≥901px → 3 colunas fluidas * • Mobile ≤900px → 1 coluna empilhada * * Admin: página de ordenação drag-and-drop (wp-admin → GeoAgro SRP → Painel Custom) * * Isolation strategy (v105 — refatorado pra resolver o conflito com [mapa_pinda]): * • TODOS os seletores começam com .srp-pc-* (zero overlap com .agbz-*) * • Uso de :where() pra manter especificidade baixa (não vence regras do tema * WP por agressão — mas também não é vencido por seletores genéricos) * • .srp-pc-root estabelece um STACKING/CONTAINING context isolado * (isolation: isolate + position: relative) — z-indexes internos não * vazam pro resto da página * • Tokens locais (--srp-pc-*) não colidem com --agbz-* da dashboard.css * * Design tokens: alinhados com painel-agribusiness-ciea.html (referência * fornecida em 25/jun/2026). Verde, ouro, creme, Fraunces, Inter, JetBrains * Mono — mesma identidade institucional do plugin. */ /* ════════════════════════════════════════════════════════════════════════ v108 — SCROLLBAR SEMPRE VISÍVEL EM PÁGINAS DO PAINEL CUSTOM ───────────────────────────────────────────────────────────────────── A class .srp-pc-page é injetada via JS (em maybe_enqueue_frontend_css) em e SEMPRE que [agribusiness_painel_custom] estiver na página. Isso garante que o usuário veja a barra de rolagem mesmo quando o conteúdo cabe na viewport — eliminando o "salto" lateral quando o conteúdo cresce dinamicamente (Leaflet renderiza, pins chegam, carrossel de patrocinadores expande). scrollbar-gutter:stable reserva o espaço sem causar reflow. ════════════════════════════════════════════════════════════════════════ */ /* v119 — FIX scrollbar dupla: Antes (v108) aplicávamos overflow-y: scroll em html E body, criando 2 viewports rolando independentemente em alguns navegadores (Safari especialmente). Agora SÓ no html.srp-pc-page; body fica como container natural sem overflow próprio. */ html.srp-pc-page { overflow-y: scroll !important; scrollbar-gutter: stable; } body.srp-pc-page { overflow-y: visible !important; /* sem scrollbar própria */ overflow-x: hidden; } /* v114 — Body com fundo dark institucional preenchendo a viewport INTEIRA (não só o .srp-pc-root). Antes o `min-height: 100vh` cobria o painel mas se o conteúdo ficava menor que viewport — ou se o tema do WordPress tinha bg branco — aparecia espaço VAZIO claro abaixo do painel. */ body.srp-pc-page { background: radial-gradient(1200px 600px at 80% -10%, rgba(63,163,77,0.06), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(212,173,90,0.05), transparent 60%), #060C0A !important; } /* Garante que o ::-webkit-scrollbar do tema não fique gigante (fallback pra quando dashboard.css não tem a regra .agbz-page--sb-custom). */ html.srp-pc-page::-webkit-scrollbar { width: 12px; } /* ═══════════════════════════════════════════════════════════════════════ FRONTEND — Container raiz: tokens, fundo, scroll fluido, isolation ═══════════════════════════════════════════════════════════════════════ */ .srp-pc-root { /* ── Tokens (escopo local — não vazam pro tema/dashboard.css) ── */ --srp-pc-bg-deep: #060C0A; --srp-pc-bg: #0B1612; --srp-pc-bg-soft: #0F1F19; --srp-pc-card: #142822; --srp-pc-card-alt: #18302A; --srp-pc-line: rgba(201, 161, 74, 0.10); --srp-pc-line-st: rgba(201, 161, 74, 0.20); --srp-pc-ink: #F2EDE0; --srp-pc-ink-soft: #C4D2C8; --srp-pc-ink-mute: #7E8E84; --srp-pc-ink-dim: #4D5E55; --srp-pc-gold: #D4AD5A; --srp-pc-gold-br: #E8C26E; --srp-pc-brand: #3FA34D; --srp-pc-up: #43E97B; --srp-pc-down: #FF5C5C; --srp-pc-display: 'Fraunces', Georgia, serif; --srp-pc-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --srp-pc-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --srp-pc-radius: 12px; --srp-pc-radius-sm: 8px; --srp-pc-radius-lg: 16px; --srp-pc-gap: 20px; /* v108 — era 16, mais respiração */ --srp-pc-pad-y: 32px; /* v108 — era 24 */ --srp-pc-pad-x: 32px; /* v108 — era 28 */ --srp-pc-max: 1480px; --srp-pc-shadow: 0 10px 28px -12px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.03) inset; --srp-pc-shadow-lg: 0 24px 60px -20px rgba(0,0,0,.50), 0 1px 0 rgba(255,255,255,.04) inset; /* ── Container & isolation ── */ display: flex; /* v107 — flex coluna pra fluxo landing-page */ flex-direction: column; width: 100%; min-height: 100vh; box-sizing: border-box; /* Reset suave de herança do tema (não usamos `all: initial` pra não quebrar os cards renderizados via do_shortcode com classes .agbz-*) */ font-family: var(--srp-pc-sans); font-size: 14px; line-height: 1.55; color: var(--srp-pc-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; /* Background landing-page com gradients radiais (mesmo padrão do .agbz-root do reference HTML — verde + ouro + bg-deep) */ background: radial-gradient(1200px 600px at 80% -10%, rgba(63,163,77,0.06), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(212,173,90,0.05), transparent 60%), var(--srp-pc-bg-deep); /* v107 — Scroll fluido: smooth quando o usuário usa links âncora ou tecla End/Home; padding-top reserva espaço pro caso de futuro header fixo. */ scroll-behavior: smooth; /* Stacking/containing context isolado — z-indexes internos não escapam */ position: relative; isolation: isolate; } /* Box-sizing pros filhos — protege o layout de heranças quebradas do tema */ .srp-pc-root *, .srp-pc-root *::before, .srp-pc-root *::after { box-sizing: border-box; } /* ════════════════════════════════════════════════════════════════════════ v107 — ESTRUTURA DE 5 ZONAS (landing-page com header/footer full-width) ───────────────────────────────────────────────────────────────────── Fluxo vertical (flex column no .srp-pc-root): [ ZONA TOPO — full-width — ticker/header ] [ GRID 3 COLS — fluidas — content cards ] [ ZONA RODAPÉ — full-width — patrocinadores/footer] Cada zona herda `max-width: var(--srp-pc-max)` e ganha padding horizontal próprio pra mantar respiração consistente. ════════════════════════════════════════════════════════════════════════ */ /* Wrapper comum: full-width contido em max-width central */ .srp-pc-root :where(.srp-pc-zona, .srp-pc-grid) { width: 100%; max-width: var(--srp-pc-max); margin-left: auto; margin-right: auto; padding: var(--srp-pc-pad-y) var(--srp-pc-pad-x); box-sizing: border-box; } /* Zonas full-width: cards empilhados verticalmente */ .srp-pc-zona { display: flex; flex-direction: column; gap: var(--srp-pc-gap); } .srp-pc-zona-topo { padding-bottom: calc(var(--srp-pc-pad-y) / 2); } .srp-pc-zona-rodape { padding-top: calc(var(--srp-pc-pad-y) / 2); } /* v124 — Grid central · 3 colunas fixas espelhando .agbz-shell do painel-agribusiness-ciea.html: 300px (controles) / 1fr (mapa) / 320px (terminal). Antes (v108): 1:1.6:1 fluido — funcionava mas não fazia justiça ao mapa, que ganhou só ~38% da viewport. Breakpoints (espelhando o HTML de referência): ≥ 1281px → 300px / 1fr / 320px (default) 901–1280px → 260px / 1fr (terminal cai full-width em 2 colunas) ≤ 900px → 1 coluna (mobile stack) */ .srp-pc-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: var(--srp-pc-gap); align-items: stretch; /* col2 (mapa) estica até col1/col3 */ padding-top: calc(var(--srp-pc-pad-y) / 2); padding-bottom: calc(var(--srp-pc-pad-y) / 2); } @media (max-width: 1280px) and (min-width: 901px) { /* Tablet/laptop estreito: terminal cai pra zona inferior em 2 colunas (260px controles + mapa fluido) — mesma estratégia do HTML ref */ .srp-pc-grid { grid-template-columns: 260px minmax(0, 1fr); } .srp-pc-col-3 { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 12px; } .srp-pc-col-3 > .srp-pc-slot { flex: 1 1 280px; min-width: 0; } } .srp-pc-col { display: flex; flex-direction: column; gap: var(--srp-pc-gap); min-width: 0; /* permite encolher abaixo do conteúdo */ } .srp-pc-slot { width: 100%; min-width: 0; } /* ── Mobile (≤900px): stack vertical, todas as zonas em 1 coluna ── */ @media (max-width: 900px) { .srp-pc-root { --srp-pc-gap: 12px; --srp-pc-pad-y: 14px; --srp-pc-pad-x: 14px; } .srp-pc-grid { grid-template-columns: 1fr; } } /* ── Scrollbar custom (dark + gold) — só dentro do .srp-pc-root ── */ .srp-pc-root ::-webkit-scrollbar { width: 10px; height: 10px; } .srp-pc-root ::-webkit-scrollbar-track { background: transparent; } .srp-pc-root ::-webkit-scrollbar-thumb { background: rgba(212, 173, 90, 0.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .srp-pc-root ::-webkit-scrollbar-thumb:hover { background: rgba(212, 173, 90, 0.40); background-clip: padding-box; } /* Firefox */ .srp-pc-root { scrollbar-width: thin; scrollbar-color: rgba(212,173,90,0.30) transparent; } /* ═══════════════════════════════════════════════════════════════════════ CARD DE PREVIEW DO MAPA — isolado, sem [mapa_pinda] embed ═══════════════════════════════════════════════════════════════════════ */ .srp-pc-card-mapa { background: var(--srp-pc-card); border: 1px solid var(--srp-pc-line); border-radius: var(--srp-pc-radius); box-shadow: var(--srp-pc-shadow); overflow: hidden; } .srp-pc-card-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--srp-pc-line); background: linear-gradient(180deg, rgba(212,173,90,0.05), transparent); } .srp-pc-card-num { font-family: var(--srp-pc-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--srp-pc-gold); background: rgba(212,173,90,0.10); padding: 3px 8px; border-radius: 4px; } .srp-pc-card-title { margin: 0; font-family: var(--srp-pc-display); font-size: 19px; font-weight: 500; color: var(--srp-pc-ink); letter-spacing: -0.01em; } .srp-pc-card-title em { font-style: italic; color: var(--srp-pc-gold-br); font-weight: 400; } .srp-pc-card-body { padding: 16px; } /* v108 → v131 — Card do mapa: agora 100% interativo (zoom/pan/markers). v108-v130: o wrapper era com Leaflet em modo "dead" (sem dragging/zoom). v131: removida a navegação por wrapper, mini-mapa recebe TODAS as interações do Leaflet, e o CTA "Tela cheia" virou um botão de canto que NÃO consome a área de interação do mapa. */ .srp-pc-mapa-preview { display: flex; flex-direction: column; gap: 14px; } .srp-pc-mapa-wrap { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; /* Mais espaço vertical pro mapa que 16/9 */ border-radius: var(--srp-pc-radius-sm); overflow: hidden; background: #1a3328; /* tom verde-escuro enquanto Leaflet carrega */ box-shadow: 0 6px 18px -8px rgba(0,0,0,0.35); transition: box-shadow 0.18s ease; } .srp-pc-mapa-wrap:hover { box-shadow: 0 12px 28px -10px rgba(0,0,0,0.55); } /* Container do Leaflet — preenche o wrap inteiro */ .srp-pc-mapa-leaflet { position: absolute; inset: 0; width: 100%; height: 100%; background: #1a3328; } /* v131 — Quando interativo, ganha cursor grab/grabbing — affordance visual */ .srp-pc-mapa-leaflet--interativo { cursor: grab; } .srp-pc-mapa-leaflet--interativo:active, .srp-pc-mapa-leaflet--interativo .leaflet-dragging { cursor: grabbing; } /* Attribution OSM compacta */ .srp-pc-mapa-leaflet .leaflet-control-attribution { background: rgba(15, 38, 32, 0.75) !important; color: var(--srp-pc-ink-soft) !important; font-size: 9.5px !important; padding: 1px 6px !important; border-radius: 3px 0 0 0 !important; } .srp-pc-mapa-leaflet .leaflet-control-attribution a { color: var(--srp-pc-gold-br) !important; } /* v131 — Controles de zoom do Leaflet com tema dark do painel */ .srp-pc-mapa-leaflet .leaflet-control-zoom { border: 1px solid rgba(212, 173, 90, 0.32) !important; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.45) !important; } .srp-pc-mapa-leaflet .leaflet-control-zoom a { background: rgba(15, 38, 32, 0.92) !important; color: var(--srp-pc-ink) !important; border-color: rgba(212, 173, 90, 0.20) !important; font-weight: 600 !important; transition: background 0.15s ease, color 0.15s ease; } .srp-pc-mapa-leaflet .leaflet-control-zoom a:hover { background: rgba(212, 173, 90, 0.18) !important; color: var(--srp-pc-gold-br) !important; } /* v131 — Botão "Tela cheia" no canto superior-direito (não bloqueia o mapa). Substitui o overlay full-cover que existia até v130. Pequeno, mas visível, com hover dourado. Posicionamento absoluto sobre o mapa. v137 — TAREFA 2: Texto "Tela cheia" REMOVIDO; agora é puramente ícone (SVG de 4 setas apontando pra fora — padrão universal de expand/fullscreen). Botão é quadrado (32×32px) e tem comportamento IMUTÁVEL em qualquer tela (não há mais media query mobile-only — a regra é a mesma do XS ao XL). O `.srp-pc-mapa-fs-lbl` foi removido do markup, mas o seletor CSS permanece como `display:none` por segurança caso algum template legado ainda gere o span. */ .srp-pc-mapa-fs-btn { position: absolute; top: 10px; right: 10px; z-index: 401; /* acima dos panes do Leaflet (z-index 400) */ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: rgba(15, 38, 32, 0.92); color: var(--srp-pc-gold-br); text-decoration: none; border-radius: 6px; border: 1px solid rgba(212, 173, 90, 0.35); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55); transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.1s ease; pointer-events: auto; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .srp-pc-mapa-fs-btn:hover { background: var(--srp-pc-gold); border-color: var(--srp-pc-gold); color: var(--srp-pc-bg-deep); transform: translateY(-1px); } .srp-pc-mapa-fs-btn:active { transform: scale(0.94); } .srp-pc-mapa-fs-btn:focus-visible { outline: 2px solid var(--srp-pc-gold-br); outline-offset: 2px; } .srp-pc-mapa-fs-icon { width: 16px; height: 16px; display: block; flex-shrink: 0; } /* v137 — Esconde label legado se ainda existir em algum template antigo */ .srp-pc-mapa-fs-lbl { display: none !important; } .srp-pc-mapa-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--srp-pc-ink-soft); } /* ═══════════════════════════════════════════════════════════════════════ ADMIN — Página de ordenação drag-and-drop (light theme do wp-admin) ═══════════════════════════════════════════════════════════════════════ */ .srp-pc-admin { --srp-pc-a-verde: #1e5c30; --srp-pc-a-verde-claro: #2e7d32; --srp-pc-a-ouro: #c8a84b; --srp-pc-a-ouro-soft: #D4AD5A; --srp-pc-a-creme: #f5efe3; --srp-pc-a-creme-2: #faf7ef; --srp-pc-a-text: #2a3a30; --srp-pc-a-text-mute: #6b7a70; --srp-pc-a-border: #d8dcd0; } .srp-pc-admin h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: var(--srp-pc-a-verde); display: flex; align-items: baseline; gap: 12px; font-size: 28px; letter-spacing: -0.01em; } .srp-pc-admin-version { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--srp-pc-a-text-mute); background: var(--srp-pc-a-creme); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em; } .srp-pc-admin-intro { font-size: 14px; color: var(--srp-pc-a-text); margin: 8px 0 18px; max-width: 720px; line-height: 1.55; } .srp-pc-admin-intro code { background: var(--srp-pc-a-creme); color: var(--srp-pc-a-verde); padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12.5px; font-weight: 600; } .srp-pc-feedback { margin: 0 0 12px; min-height: 24px; font-size: 13px; font-weight: 600; transition: color 0.15s; } .srp-pc-feedback.is-saving { color: #8a6a1a; } .srp-pc-feedback.is-ok { color: var(--srp-pc-a-verde-claro); } .srp-pc-feedback.is-error { color: #b32424; } .srp-pc-admin-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 16px; } .srp-pc-admin-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 900px) { .srp-pc-admin-cols { grid-template-columns: 1fr; } } .srp-pc-admin-zone { background: #fff; border: 1px solid var(--srp-pc-a-border); border-radius: 8px; padding: 16px; } .srp-pc-admin-disponiveis { background: var(--srp-pc-a-creme-2); border-style: dashed; border-color: var(--srp-pc-a-ouro-soft); } /* v107 — Zonas full-width no admin (topo / rodape): destacam visualmente que renderizam em largura total no frontend, diferenciando das colunas. */ .srp-pc-admin-zona-full { background: linear-gradient(180deg, #fff 0%, var(--srp-pc-a-creme-2) 100%); border-color: var(--srp-pc-a-ouro-soft); } .srp-pc-admin-zona-full .srp-pc-cardlist-coluna { min-height: 80px; } .srp-pc-zone-title { margin: 0 0 4px; font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 500; color: var(--srp-pc-a-verde); display: flex; align-items: baseline; gap: 10px; } .srp-pc-zone-tag { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--srp-pc-a-text-mute); text-transform: uppercase; font-weight: 400; } .srp-pc-zone-sub { margin: 0 0 10px; font-size: 12px; color: var(--srp-pc-a-text-mute); } .srp-pc-cardlist { list-style: none; margin: 0; padding: 6px; min-height: 56px; border-radius: 6px; background: rgba(30, 92, 48, 0.025); display: flex; flex-direction: column; gap: 6px; } .srp-pc-cardlist-coluna { min-height: 120px; } .srp-pc-cardlist:empty::before { content: 'Solte cards aqui'; display: block; font-size: 12px; font-style: italic; color: var(--srp-pc-a-text-mute); text-align: center; padding: 16px 8px; opacity: 0.7; } .srp-pc-chip { display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--srp-pc-a-border); border-left: 3px solid var(--srp-pc-a-ouro-soft); border-radius: 6px; cursor: grab; user-select: none; -webkit-user-select: none; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .srp-pc-chip:hover { box-shadow: 0 2px 10px rgba(30, 92, 48, 0.10); border-color: var(--srp-pc-a-verde-claro); border-left-color: var(--srp-pc-a-verde-claro); } .srp-pc-chip:active, .srp-pc-chip.ui-sortable-helper { cursor: grabbing; transform: rotate(-0.5deg); box-shadow: 0 10px 28px rgba(30, 92, 48, 0.28); border-color: var(--srp-pc-a-verde); border-left-color: var(--srp-pc-a-ouro); z-index: 50; } .srp-pc-chip:focus-visible { outline: 2px solid var(--srp-pc-a-verde-claro); outline-offset: 2px; } .srp-pc-chip-emoji { font-size: 20px; line-height: 1; text-align: center; } .srp-pc-chip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .srp-pc-chip-nome { font-size: 13px; color: var(--srp-pc-a-text); font-weight: 700; line-height: 1.25; } .srp-pc-chip-desc { font-size: 11.5px; color: var(--srp-pc-a-text-mute); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srp-pc-chip-grab { color: var(--srp-pc-a-text-mute); font-size: 14px; text-align: center; line-height: 1; font-weight: 700; } .srp-pc-placeholder { background: rgba(212, 173, 90, 0.15); border: 2px dashed var(--srp-pc-a-ouro-soft); border-radius: 6px; height: 56px; list-style: none; margin: 0; } .srp-pc-admin-actions { display: flex; gap: 8px; margin: 18px 0 8px; } .srp-pc-admin-help { background: #fff; border: 1px solid var(--srp-pc-a-border); border-radius: 6px; padding: 12px 16px; margin-top: 24px; max-width: 900px; } .srp-pc-admin-help summary { cursor: pointer; font-weight: 600; color: var(--srp-pc-a-verde); font-size: 13px; user-select: none; } .srp-pc-admin-help[open] summary { margin-bottom: 10px; } .srp-pc-admin-help ol { margin: 0 0 0 24px; font-size: 13px; color: var(--srp-pc-a-text); line-height: 1.65; } .srp-pc-admin-help code { background: var(--srp-pc-a-creme); color: var(--srp-pc-a-verde); padding: 1px 6px; border-radius: 3px; font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 11.5px; } /* ════════════════════════════════════════════════════════════════════════ v109 — FIXES de compat com cards do dashboard original ───────────────────────────────────────────────────────────────────── 3 ajustes pra que cards do [agribusiness_*] coexistam bem dentro do .srp-pc-col estreito (~23% da viewport) que o painel custom oferece: ════════════════════════════════════════════════════════════════════════ */ /* ─── FIX 1: CTA Aliança em coluna estreita ────────────────────── O template renderiza com a classe `--wide` que força: display: grid !important; grid-template-columns: minmax(0,1.2fr) minmax(0,2fr) auto !important; Em col estreita (~280px) as 3 sub-colunas viram tirinhas: o título serif quebra em 3 linhas verticais, o body em 8, e visualmente eles ficam SOBREPOSTOS pelo align-items:center. Solução: dentro do painel custom, reverter pra layout vertical (stack natural). */ .srp-pc-col .agbz-cta-alianca--wide { display: flex !important; flex-direction: column !important; align-items: stretch !important; grid-template-columns: none !important; gap: 12px !important; padding: 18px 20px !important; } .srp-pc-col .agbz-cta-alianca--wide .agbz-cta-alianca__title { font-size: clamp(20px, 2.2vw, 26px) !important; line-height: 1.15 !important; margin: 0 !important; } .srp-pc-col .agbz-cta-alianca--wide .agbz-cta-alianca__body { font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; color: var(--srp-pc-ink-soft, #C4D2C8) !important; } .srp-pc-col .agbz-cta-alianca--wide .agbz-cta-alianca__btn { align-self: flex-start !important; margin-top: 8px !important; white-space: nowrap; } /* ─── FIX 2: .agbz-root no .srp-pc-root — neutralizar regras destrutivas ── v109 adiciona `class="srp-pc-root agbz-root"` ao wrapper raiz pra que os 52 seletores `.agbz-root .agbz-spons*` do sponsors.css casem (sem isso, o carrossel de patrocinadores fica totalmente sem estilo). Isso ATIVA também regras como `.agbz-root { display: flex !important; min-height: 100vh; overflow: visible !important }` do dashboard.css — compatíveis com o que já tínhamos, mas reforçamos abaixo. */ .srp-pc-root.agbz-root { /* Já temos display:flex + flex-direction:column + min-height:100vh, */ /* mas as variáveis CSS --agbz-* do dashboard.css agora cascateiam */ /* livremente — útil pro sponsors.css. */ background: radial-gradient(1200px 600px at 80% -10%, rgba(63,163,77,0.06), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(212,173,90,0.05), transparent 60%), var(--srp-pc-bg-deep) !important; } /* ─── FIX 3: Sponsors em zona_rodape (full-width) ─────────────────── Garante que o carrossel ocupe a largura inteira da zona quando ele está numa zona full-width (topo ou rodape). */ .srp-pc-zona .agbz-spons, .srp-pc-zona .agbz-spons__viewport { max-width: 100%; } /* ════════════════════════════════════════════════════════════════════════ v110 — FIXES adicionais reportados pelo Michel ════════════════════════════════════════════════════════════════════════ */ /* ─── v112 FIX FINAL (definitivo): COMMODITIES horizontal ──────── Causa REAL (descoberta após a v111 falhar): dashboard.css linha 1554, DENTRO de @media (max-width: 900px), aplica: .agbz-terminal-title { position: sticky; writing-mode: vertical-rl; ← AQUI transform: rotate(180deg); ← E AQUI ... } Isso é INTENCIONAL no painel monolítico (em mobile, a .agbz-col-right vira carrossel horizontal e o título é rótulo lateral vertical). Mas no painel custom temos colunas verticais — esse comportamento quebra. Fix v111 (`display: block !important`) sobrescrevia DISPLAY mas deixava writing-mode/transform/position intactos → texto continuava rotacionado. v112 reseta TODOS os 4 properties pra valor default. */ .srp-pc-col .agbz-terminal-title, .srp-pc-zona .agbz-terminal-title { display: block !important; writing-mode: horizontal-tb !important; transform: none !important; position: static !important; align-self: auto !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 0 10px !important; } .srp-pc-col .agbz-terminal-title small, .srp-pc-zona .agbz-terminal-title small { margin-left: 8px; display: inline; } /* ─── FIX 1B: Cards de cotações stack vertical em mobile ────────── Tablet/mobile (≤768px): força grid central a 1 coluna E grid de quotes a 1 coluna pra evitar cards apertados lado-a-lado. */ /* v113 — Range expandido de 768 → 900 pra alinhar com o @media original do dashboard.css que aplica `.agbz-quote { width: 180px }` (pensado pro carrossel horizontal monolítico, inadequado no painel custom). */ @media (max-width: 900px) { /* Painel custom: 5 zonas em stack vertical, cards full-width */ .srp-pc-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .srp-pc-root { --srp-pc-gap: 12px; --srp-pc-pad-y: 16px; --srp-pc-pad-x: 14px; } /* Quotes-grid em 1 coluna (override do auto-fit 160px) */ .srp-pc-col .agbz-quotes-grid, .srp-pc-zona .agbz-quotes-grid { grid-template-columns: 1fr !important; } /* v113 BUGFIX CRÍTICO — Sobrescreve `width: 180px !important` do dashboard.css linha 1565. Esse 180px era pro carrossel horizontal do painel monolítico (.agbz-col-right vira row + overflow-x:auto). No painel custom os cards são stack vertical, devem ser full-width. */ .srp-pc-col .agbz-quote, .srp-pc-zona .agbz-quote, .srp-pc-root .agbz-quote { width: 100% !important; max-width: 100% !important; flex-shrink: 1 !important; flex-grow: 1 !important; box-sizing: border-box !important; } /* .agbz-col-right NÃO deve virar carrossel horizontal no painel custom */ .srp-pc-root .agbz-col-right { flex-direction: column !important; overflow-x: visible !important; } } /* ════════════════════════════════════════════════════════════════════════ v111 — FIXES adicionais reportados pelo Michel via screenshots ════════════════════════════════════════════════════════════════════════ */ /* ─── FIX 2: Cards full-width em mobile ───────────────────────── Em ≤768px, garantir que TUDO ocupe a largura inteira da viewport, sem max-width herdado. */ @media (max-width: 768px) { .srp-pc-root, .srp-pc-root :where(.srp-pc-zona, .srp-pc-grid) { max-width: none !important; padding-left: 12px !important; padding-right: 12px !important; } .srp-pc-col, .srp-pc-col > .srp-pc-slot, .srp-pc-zona > .srp-pc-slot { width: 100% !important; max-width: 100% !important; } .srp-pc-col > .srp-pc-slot > *, .srp-pc-zona > .srp-pc-slot > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ─── FIX 3: Larguras IGUAIS pros cards de uma mesma coluna ───── Cards do dashboard original (.agbz-card, .agbz-cta-alianca, .agbz-clima etc.) tem margens/padding próprios que podem variar entre eles. Quando colocados na col1 do painel custom, a percepção visual fica "cada card tem largura diferente". Forçamos width:100% e box-sizing pra que TODOS herdem a mesma largura visual da slot pai. */ .srp-pc-col > .srp-pc-slot > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } .srp-pc-col > .srp-pc-slot > .agbz-card, .srp-pc-col > .srp-pc-slot > .agbz-clima, .srp-pc-col > .srp-pc-slot > .agbz-cta-alianca, .srp-pc-col > .srp-pc-slot > .agbz-commodities-row, .srp-pc-col > .srp-pc-slot > .agbz-cta-row, .srp-pc-col > .srp-pc-slot > .agbz-macro { width: 100% !important; margin: 0 !important; } /* ─── v114 FIX REAL: Contraste dos formulários ───────────────────── Bug v111: usei seletores ERRADOS (.mp-reserva-modal não existe). Classes REAIS auditadas no código: • Modal Aliança: .mp-alianca-field + .mp-alianca-modal__card • Modal Reservar: .agbz-reserva-field + .agbz-reserva-card (são namespaces DIFERENTES — um usa mp-, outro agbz-). */ /* Modal ALIANÇA (.mp-alianca-*) */ .mp-alianca-modal :where(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], select, textarea), .mp-alianca-field :where(input, select, textarea) { background: rgba(15, 38, 32, 0.95) !important; color: #FFFFFF !important; border: 1.5px solid rgba(212, 173, 90, 0.55) !important; font-size: 14px !important; padding: 12px 14px !important; -webkit-text-fill-color: #FFFFFF; /* Safari override pra autofill */ } .mp-alianca-modal :where(input, select, textarea):focus, .mp-alianca-field :where(input, select, textarea):focus { border-color: #E8C26E !important; box-shadow: 0 0 0 3px rgba(212, 173, 90, 0.30) !important; background: #0F2620 !important; outline: none !important; } .mp-alianca-modal :where(input, textarea)::placeholder, .mp-alianca-field :where(input, textarea)::placeholder { color: rgba(255, 255, 255, 0.50) !important; opacity: 1 !important; } .mp-alianca-modal :where(label, .mp-alianca-label), .mp-alianca-field label { color: #F2D785 !important; font-weight: 600 !important; letter-spacing: 0.05em !important; } /* Modal RESERVAR (.agbz-reserva-*) — classes REAIS confirmadas no template patrocinadores.php linhas 251-310 e dashboard-template.php linha 756 */ .agbz-reserva-overlay :where(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], select, textarea), .agbz-reserva-field :where(input, select, textarea) { background: rgba(15, 38, 32, 0.95) !important; color: #FFFFFF !important; border: 1.5px solid rgba(212, 173, 90, 0.55) !important; font-size: 14px !important; padding: 12px 14px !important; -webkit-text-fill-color: #FFFFFF; } .agbz-reserva-overlay :where(input, select, textarea):focus, .agbz-reserva-field :where(input, select, textarea):focus { border-color: #E8C26E !important; box-shadow: 0 0 0 3px rgba(212, 173, 90, 0.30) !important; background: #0F2620 !important; outline: none !important; } .agbz-reserva-overlay :where(input, textarea)::placeholder, .agbz-reserva-field :where(input, textarea)::placeholder { color: rgba(255, 255, 255, 0.50) !important; opacity: 1 !important; } .agbz-reserva-overlay :where(label, .agbz-reserva-label), .agbz-reserva-field .agbz-reserva-label { color: #F2D785 !important; font-weight: 600 !important; letter-spacing: 0.05em !important; } /* Headers dos modais — texto principal contrastado */ .agbz-reserva-card .agbz-reserva-sub, .mp-alianca-modal__card p { color: rgba(255, 255, 255, 0.80) !important; } /* ─── v113 — Toggles dos filtros: feedback visual de off-state ── O dashboard.js (montarBridgeMapa) faz `classList.toggle('agbz-on')` puro: presença = ligado, ausência = desligado. NÃO usa .agbz-off. Por isso usamos `:not(.agbz-on)` em vez de .agbz-off. */ .srp-pc-root .agbz-toggle[data-cat] { cursor: pointer; transition: opacity 0.18s ease; } .srp-pc-root .agbz-toggle[data-cat]:not(.agbz-on) { opacity: 0.42; } /* ════════════════════════════════════════════════════════════════════════ v112 — Filtros do painel custom: ocultação de toggles desativados no admin (não removidos do DOM porque o template é hardcoded; usamos display:none aplicado via JS após DOM ready) ════════════════════════════════════════════════════════════════════════ */ .srp-pc-root .agbz-toggle[data-srp-pc-hidden="1"] { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ v112 — Admin: tabela de Filtros (wp-admin → 🎨 Painel Custom) ════════════════════════════════════════════════════════════════════════ */ .srp-pc-admin-section-title { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--srp-pc-a-ouro-soft); font-family: var(--srp-pc-a-display); font-size: 22px; color: var(--srp-pc-a-verde); } .srp-pc-admin-section-title small { font-family: var(--srp-pc-a-sans); font-size: 13px; font-weight: normal; color: var(--srp-pc-a-cinza); } .srp-pc-admin-section-sub { color: var(--srp-pc-a-cinza); margin: 0 0 18px 0; font-size: 13.5px; line-height: 1.55; } .srp-pc-admin-filtros { width: 100%; background: #fff; border: 1px solid var(--srp-pc-a-ouro-soft); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .srp-pc-admin-filtros thead th { background: var(--srp-pc-a-verde); color: #fff; padding: 12px 14px; font-family: var(--srp-pc-a-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; } .srp-pc-admin-filtros tbody td { padding: 10px 14px; border-bottom: 1px solid #eee; vertical-align: middle; } .srp-pc-admin-filtros tbody tr:last-child td { border-bottom: none; } .srp-pc-admin-filtros tbody tr:hover { background: rgba(212, 173, 90, 0.04); } .srp-pc-admin-filtros .srp-pc-filtro-vis { width: 20px; height: 20px; cursor: pointer; accent-color: var(--srp-pc-a-verde); } .srp-pc-admin-filtros .srp-pc-filtro-cor { vertical-align: middle; width: 36px; height: 28px; padding: 0; border: 1px solid var(--srp-pc-a-ouro-soft); border-radius: 4px; cursor: pointer; } .srp-pc-admin-filtros .srp-pc-filtro-cor-txt { vertical-align: middle; margin-left: 6px; padding: 4px 6px; font-size: 12px; } .srp-pc-admin-filtros-actions { display: flex; align-items: center; gap: 14px; margin: 14px 0 24px; } #srp-pc-filtros-salvar.button-primary { padding: 6px 18px; } .srp-pc-filtros-feedback { font-size: 13px; font-weight: 600; } .srp-pc-filtros-feedback[data-state="ok"] { color: var(--srp-pc-a-verde); } .srp-pc-filtros-feedback[data-state="error"] { color: #C62828; } .srp-pc-filtros-feedback[data-state="saving"]{ color: var(--srp-pc-a-cinza); } /* ════════════════════════════════════════════════════════════════════════ v116 — Status visual do card de clima (loading/ok/retry/error) ════════════════════════════════════════════════════════════════════════ */ .srp-pc-root .agbz-clima-status { display: inline-block; margin-left: 8px; font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; opacity: 0.85; transition: color 0.2s ease; } .srp-pc-root .agbz-clima-status[data-srp-pc-status="loading"] { color: #C4D2C8; } .srp-pc-root .agbz-clima-status[data-srp-pc-status="ok"] { color: #43E97B; } .srp-pc-root .agbz-clima-status[data-srp-pc-status="retry"] { color: #F9A825; } .srp-pc-root .agbz-clima-status[data-srp-pc-status="error"] { color: #FF5C5C; font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════ v117 — TOPO DO PAINEL — logo 3× + textos proporcionais + responsivo ──────────────────────────────────────────────────────────────────────── Pedido do Michel: triplicar logo do header + aumentar textos proporcionais + manter responsivo em mobile. Tamanhos default antigos (dashboard.css): logo: 32px brand: 18px (Fraunces) tagline: 11px sub: 9px clock: 9.5px v117 — DESKTOP (1281+): 3× → logo 96, brand 54, tagline 33, sub 27, clock 28 v117 — TABLET (901-1280): 2.2× → logo 70, brand 40, tagline 24, sub 20 v117 — MOBILE (901↓): 1.6× → logo 52, brand 30, tagline 18, sub 15, clock 16 v117 — MOBILE pequeno (≤480): 1.4× → logo 44, brand 26, tagline 15, sub 13, clock 14 Aplicado SÓ dentro de .srp-pc-root pra não afetar o painel monolítico. */ .srp-pc-root .agbz-header { /* Mais respiro vertical pra acomodar logo maior */ padding: 20px 24px !important; min-height: 110px; align-items: center; gap: 18px !important; } .srp-pc-root .agbz-header-emblem-link { display: inline-block; line-height: 0; flex-shrink: 0; border-radius: 50%; transition: transform 0.25s ease, box-shadow 0.25s ease; } .srp-pc-root .agbz-header-emblem-link:hover, .srp-pc-root .agbz-header-emblem-link:focus-visible { transform: scale(1.04); box-shadow: 0 0 16px rgba(212, 173, 90, 0.40); outline: none; } .srp-pc-root .agbz-header-emblem { width: 96px !important; height: 96px !important; border-radius: 50%; border: 2px solid var(--srp-pc-a-ouro-soft, rgba(212, 173, 90, 0.40)); } .srp-pc-root .agbz-header-brand { font-size: 54px !important; line-height: 1.0 !important; } .srp-pc-root .agbz-header-tagline { font-size: 33px !important; line-height: 1.15 !important; margin-top: 2px !important; } .srp-pc-root .agbz-header-sub { font-size: 27px !important; margin-top: 4px !important; } .srp-pc-root .agbz-header-clock { font-size: 28px !important; gap: 4px; } .srp-pc-root .agbz-header-clock strong { font-size: 30px !important; } .srp-pc-root .agbz-header-live { font-size: 18px !important; padding: 4px 12px !important; } .srp-pc-root .agbz-header-live .agbz-dot { width: 9px !important; height: 9px !important; } /* ─── TABLET (901-1280px) ─── */ @media (max-width: 1280px) and (min-width: 901px) { .srp-pc-root .agbz-header { padding: 16px 20px !important; min-height: 90px; gap: 14px !important; } .srp-pc-root .agbz-header-emblem { width: 70px !important; height: 70px !important; } .srp-pc-root .agbz-header-brand { font-size: 40px !important; } .srp-pc-root .agbz-header-tagline { font-size: 24px !important; } .srp-pc-root .agbz-header-sub { font-size: 20px !important; } .srp-pc-root .agbz-header-clock, .srp-pc-root .agbz-header-clock strong { font-size: 22px !important; } .srp-pc-root .agbz-header-live { font-size: 14px !important; padding: 3px 9px !important; } } /* ─── MOBILE (≤900px) ─── */ @media (max-width: 900px) { .srp-pc-root .agbz-header { padding: 14px 14px !important; min-height: 0; flex-wrap: wrap; gap: 12px !important; } .srp-pc-root .agbz-header-emblem { width: 52px !important; height: 52px !important; border-width: 1.5px; } .srp-pc-root .agbz-header-brand { font-size: 30px !important; line-height: 1.05 !important; } .srp-pc-root .agbz-header-tagline { font-size: 18px !important; line-height: 1.2 !important; } .srp-pc-root .agbz-header-sub { font-size: 15px !important; margin-top: 3px !important; } .srp-pc-root .agbz-header-clock, .srp-pc-root .agbz-header-clock strong { font-size: 16px !important; } .srp-pc-root .agbz-header-live { font-size: 11px !important; padding: 2px 7px !important; } .srp-pc-root .agbz-header-live .agbz-dot { width: 6px !important; height: 6px !important; } .srp-pc-root .agbz-header-txt { flex: 1 1 100%; min-width: 0; } .srp-pc-root .agbz-header-meta { flex: 1 1 100%; align-items: flex-end; } } /* ─── MOBILE pequeno (≤480px) ─── */ @media (max-width: 480px) { .srp-pc-root .agbz-header-emblem { width: 44px !important; height: 44px !important; } .srp-pc-root .agbz-header-brand { font-size: 26px !important; } .srp-pc-root .agbz-header-tagline { font-size: 15px !important; } .srp-pc-root .agbz-header-sub { font-size: 13px !important; } .srp-pc-root .agbz-header-clock, .srp-pc-root .agbz-header-clock strong { font-size: 14px !important; } } /* ════════════════════════════════════════════════════════════════════════ v117 — Card Selos Institucionais ════════════════════════════════════════════════════════════════════════ */ .srp-selos-card .srp-selos-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 10px; padding: 6px 2px 4px; margin: 0; list-style: none; } .srp-selos-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .srp-selo-circle { width: 56px; height: 56px; border-radius: 50%; background: rgba(212, 173, 90, 0.06); border: 1.5px solid rgba(212, 173, 90, 0.30); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; flex-shrink: 0; } .srp-selo-circle:hover { transform: scale(1.06); border-color: rgba(212, 173, 90, 0.70); box-shadow: 0 0 12px rgba(212, 173, 90, 0.30); } .srp-selo-circle img { width: 80%; height: 80%; object-fit: contain; display: block; } .srp-selo-iniciais { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; color: #c8a84b; letter-spacing: 0.04em; } .srp-selo-nome { font-size: 10px; color: var(--srp-pc-a-cinza, #C4D2C8); text-align: center; letter-spacing: 0.04em; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .srp-selos-card .srp-selos-list { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px; } .srp-selo-circle { width: 48px; height: 48px; } } /* ════════════════════════════════════════════════════════════════════════ v117 — Card Pluviometria Regional (gráfico SVG + KPIs) ════════════════════════════════════════════════════════════════════════ */ .srp-pluvio-card .srp-pluvio-kpis { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr; gap: 8px; margin-bottom: 12px; } .srp-pluvio-kpi { background: rgba(212, 173, 90, 0.05); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; } .srp-pluvio-kpi-hero { background: linear-gradient(135deg, rgba(33,150,243,0.10), rgba(33,150,243,0.02)); border-left: 3px solid #2196F3; } .srp-pluvio-kpi-lbl { font-size: 9px; color: #D4AD5A; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .srp-pluvio-kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--srp-pc-a-ink, #F2EDE0); margin-top: 2px; line-height: 1.1; } .srp-pluvio-kpi-hero .srp-pluvio-kpi-val { font-size: 22px; } .srp-pluvio-kpi-val small { font-size: 11px; color: var(--srp-pc-a-cinza, #C4D2C8); margin-left: 2px; font-weight: 400; } .srp-pluvio-chart-wrap { width: 100%; border-radius: 6px; background: rgba(255, 255, 255, 0.015); padding: 4px; } .srp-pluvio-chart { width: 100%; height: auto; display: block; } .srp-pluvio-bar-group rect { transition: opacity 0.18s ease; } .srp-pluvio-bar-group:hover rect { opacity: 0.85; } .srp-pluvio-legenda { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(212, 173, 90, 0.10); } .srp-pluvio-fonte { font-size: 10px; color: var(--srp-pc-a-cinza, #7E8E84); font-style: italic; letter-spacing: 0.02em; } .srp-pluvio-fonte strong { color: var(--srp-pc-a-ouro, #D4AD5A); font-style: normal; } @media (max-width: 900px) { .srp-pluvio-card .srp-pluvio-kpis { grid-template-columns: 1fr 1fr; gap: 6px; } .srp-pluvio-card .srp-pluvio-kpi-hero { grid-column: 1 / -1; } .srp-pluvio-kpi-hero .srp-pluvio-kpi-val { font-size: 26px; } } /* ════════════════════════════════════════════════════════════════════════ v140 — CARD PLUVIOMETRIA REGIONAL (gráfico estatístico rico Chart.js) ────────────────────────────────────────────────────────────────────── Substitui o gráfico SVG inline da v117 por um Chart.js composto com envelope min-max + normal climatológica INMET 1991-2020 + projeção 3m. Layout em coluna: KPIs no topo, legenda HTML compacta, canvas de altura fixa, fonte/disclosure embaixo. ════════════════════════════════════════════════════════════════════════ */ .srp-pluvio-card-v140 .srp-pluvio-kpis-v140 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; } .srp-pluvio-card-v140 .srp-pluvio-kpis-v140 .srp-pluvio-kpi { background: rgba(255, 255, 255, 0.02); border: 0.5px solid rgba(212, 173, 90, 0.12); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .srp-pluvio-card-v140 .srp-pluvio-kpis-v140 .srp-pluvio-kpi-hero { background: rgba(63, 163, 77, 0.06); border-color: rgba(63, 163, 77, 0.22); border-left: 2px solid #3FA34D; } .srp-pluvio-card-v140 .srp-pluvio-kpi-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; font-weight: 500; color: rgba(244, 237, 224, 0.95); line-height: 1.1; font-variant-numeric: tabular-nums; } .srp-pluvio-card-v140 .srp-pluvio-kpi-val-sm { font-size: 15px; font-family: 'Inter', sans-serif; } .srp-pluvio-card-v140 .srp-pluvio-kpi-val small { font-size: 11px; color: rgba(244, 237, 224, 0.55); margin-left: 2px; font-weight: 400; } .srp-pluvio-card-v140 .srp-pluvio-kpi-sub { font-size: 11px; color: rgba(244, 237, 224, 0.55); line-height: 1.3; } .srp-pluvio-anom-neg { color: #f4a880 !important; } .srp-pluvio-anom-pos { color: #97c459 !important; } .srp-pluvio-legend-v140 { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; font-size: 11px; color: rgba(244, 237, 224, 0.65); align-items: center; } .srp-pluvio-legend-item { display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .srp-pluvio-sw { display: inline-block; width: 12px; height: 11px; border-radius: 2px; flex-shrink: 0; } .srp-pluvio-sw-area { width: 16px; height: 9px; border-radius: 2px; border: 0.5px solid; flex-shrink: 0; } .srp-pluvio-sw-dash, .srp-pluvio-sw-dot { width: 18px; height: 0; border-top-width: 2px; flex-shrink: 0; } .srp-pluvio-sw-dash { border-top-style: dashed; } .srp-pluvio-sw-dot { border-top-style: dotted; } .srp-pluvio-chart-wrap-v140 { position: relative; width: 100%; height: 280px; margin-bottom: 12px; } .srp-pluvio-chart-wrap-v140 canvas { max-width: 100%; } .srp-pluvio-no-chart canvas { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(244, 237, 224, 0.55); padding: 12px; background: rgba(255, 255, 255, 0.02); border-radius: 8px; white-space: pre-wrap; } .srp-pluvio-fonte-v140 { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: rgba(244, 237, 224, 0.50); border-top: 0.5px solid rgba(212, 173, 90, 0.10); padding-top: 10px; line-height: 1.5; } .srp-pluvio-fonte-v140 strong { color: rgba(212, 173, 90, 0.85); font-weight: 500; } .srp-pluvio-anom { font-weight: 500; } .srp-pluvio-anom-neg.srp-pluvio-anom { color: #f4a880; } .srp-pluvio-anom-pos.srp-pluvio-anom { color: #97c459; } @media (max-width: 720px) { .srp-pluvio-card-v140 .srp-pluvio-kpis-v140 { grid-template-columns: repeat(2, 1fr); } .srp-pluvio-card-v140 .srp-pluvio-kpi-hero { grid-column: 1 / -1; } .srp-pluvio-chart-wrap-v140 { height: 240px; } .srp-pluvio-legend-v140 { gap: 6px 10px; font-size: 10px; } } /* ════════════════════════════════════════════════════════════════════════ v118 — Placeholders informativos quando cards novos estão sem dados ════════════════════════════════════════════════════════════════════════ */ .srp-selos-empty, .srp-pluvio-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 18px; text-align: center; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(212, 173, 90, 0.20); border-radius: 8px; } .srp-selos-empty-icon, .srp-pluvio-empty-icon { font-size: 38px; opacity: 0.55; line-height: 1; } .srp-selos-empty-txt, .srp-pluvio-empty-txt { color: var(--srp-pc-a-cinza, #C4D2C8); font-size: 12.5px; line-height: 1.55; } .srp-selos-empty-txt strong, .srp-pluvio-empty-txt strong { color: var(--srp-pc-a-ink, #F2EDE0); font-weight: 600; } .srp-selos-empty-txt small, .srp-pluvio-empty-txt small { color: var(--srp-pc-a-cinza, #7E8E84); font-size: 11px; font-style: italic; } .srp-selos-empty-txt a, .srp-pluvio-empty-txt a { color: var(--srp-pc-a-ouro, #D4AD5A); text-decoration: none; font-weight: 600; font-style: normal; } .srp-selos-empty-txt a:hover, .srp-pluvio-empty-txt a:hover { text-decoration: underline; } /* ════════════════════════════════════════════════════════════════════════ v120 — Selos COLADOS + MAIORES (atendimento Tarefa 2 do Michel) ──────────────────────────────────────────────────────────────────────── Antes (v119): grid com gap 14px, selos 64px isolados. Agora: grid uniforme COM gap zero, selos preenchendo 100% do container distribuídos com largura igual e altura responsiva. Mantém aspect-ratio 1×1 + border-radius 0. ════════════════════════════════════════════════════════════════════════ */ .srp-selos-card--v119 .srp-selos-list--quadrado { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* divide igualmente */ gap: 0; /* COLADOS */ padding: 0; margin: 0; width: 100%; list-style: none; } .srp-selos-card--v119 .srp-selos-item { display: flex; flex-direction: column; align-items: center; min-width: 0; } .srp-selos-card--v119 .srp-selo-quadrado { width: 100%; /* preenche o slot */ aspect-ratio: 1 / 1; max-width: none; background: rgba(212, 173, 90, 0.06); border: 1.5px solid rgba(212, 173, 90, 0.30); border-radius: 0; padding: 14px; box-sizing: border-box; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, z-index 0s 0.18s; } .srp-selos-card--v119 .srp-selo-quadrado--clicavel:hover, .srp-selos-card--v119 .srp-selo-quadrado--clicavel:focus-visible { transform: scale(1.06); z-index: 2; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, z-index 0s; } .srp-selos-card--v119 .srp-selos-list--quadrado .srp-selo-nome { margin-top: 8px; padding: 0 6px 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 540px) { .srp-selos-card--v119 .srp-selos-list--quadrado { grid-template-columns: repeat(3, 1fr); /* 3 colunas em mobile */ } } @media (max-width: 360px) { .srp-selos-card--v119 .srp-selos-list--quadrado { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════════════════════ v119 — Patrocinadores: cards mais estreitos (centralizado) ──────────────────────────────────────────────────────────────────────── Antes: ocupavam 100% da zona_rodape — visualmente excessivo conforme apontou o Michel (screenshot 2). Limitado a 920px com margem auto. ════════════════════════════════════════════════════════════════════════ */ .srp-pc-zone--rodape .agbz-spons, .srp-pc-zone--rodape .agbz-spons__viewport { max-width: 920px; margin-left: auto; margin-right: auto; } .srp-pc-zone--rodape .agbz-spons__slide { max-height: 360px; } @media (max-width: 960px) { .srp-pc-zone--rodape .agbz-spons, .srp-pc-zone--rodape .agbz-spons__viewport { max-width: 100%; } } /* ════════════════════════════════════════════════════════════════════════ v119 — MAPA full-width (item 5 do Michel — modelo HTML como referência) ──────────────────────────────────────────────────────────────────────── O HTML modelo (painel-agribusiness-ciea.html) usa grid de 3 colunas com mapa numa coluna fluida, mas o Michel pediu que o mapa OCUPE a LARGURA INTEIRA, "assim como o cabeçalho". Solução: quando o slug 'mapa' estiver em zona_topo (full-width), ele renderiza fluido — sem se preocupar com col1/col2/col3. A migração automática que aplico abaixo move 'mapa' pra zona_topo. ════════════════════════════════════════════════════════════════════════ */ .srp-pc-zone--topo .agbz-card[data-slug="mapa"], .srp-pc-zone--topo > .srp-pc-card-mapa { width: 100%; max-width: none; } .srp-pc-zone--topo #mp-mapa, .srp-pc-zone--topo .leaflet-container { height: 480px !important; max-height: 65vh; border-radius: 12px; width: 100%; } @media (max-width: 900px) { .srp-pc-zone--topo #mp-mapa, .srp-pc-zone--topo .leaflet-container { height: 340px !important; } } /* v120 — Regras base preservadas dos selos (img, clicáveis, estáticos) */ .srp-selo-quadrado { display: flex; align-items: center; justify-content: center; overflow: hidden; } .srp-selo-quadrado img { width: 100%; height: 100%; object-fit: contain; display: block; } .srp-selo-quadrado--clicavel { cursor: pointer; text-decoration: none; } .srp-selo-quadrado--clicavel:hover, .srp-selo-quadrado--clicavel:focus-visible { border-color: rgba(212, 173, 90, 0.85); background: rgba(212, 173, 90, 0.12); box-shadow: 0 0 14px rgba(212, 173, 90, 0.32); outline: none; } .srp-selo-quadrado--estatico { cursor: default; } .srp-selos-card--v119 .srp-selo-nome { display: block; text-align: center; color: var(--srp-pc-a-cinza, #C4D2C8); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════ v120 — Admin Painel Custom: select de PROPORÇÃO dentro de cada chip ──────────────────────────────────────────────────────────────────────── Tarefa 4 do Michel — controles 1×1 / 50% / 100% por card. O select fica discreto à direita, antes do "⋮⋮" do grab handle. Visual integrado à paleta verde institucional. ════════════════════════════════════════════════════════════════════════ */ .srp-pc-chip-width { margin-left: auto; margin-right: 6px; padding: 4px 8px; background: #fff; border: 1px solid rgba(46, 125, 50, 0.25); border-radius: 4px; font-size: 11.5px; font-family: inherit; color: #1e5c30; max-width: 130px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .srp-pc-chip-width:hover { border-color: #2e7d32; } .srp-pc-chip-width:focus { outline: none; border-color: #2e7d32; box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18); } /* Quando proporção != auto, sinalizar visualmente que o chip foi customizado */ .srp-pc-chip[data-width="quad"] .srp-pc-chip-width, .srp-pc-chip[data-width="half"] .srp-pc-chip-width, .srp-pc-chip[data-width="full"] .srp-pc-chip-width { background: #fdf7e3; border-color: #d4ad5a; color: #8a6d20; font-weight: 600; } .srp-pc-chip[data-width="quad"]::before, .srp-pc-chip[data-width="half"]::before, .srp-pc-chip[data-width="full"]::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: #d4ad5a; border-radius: 4px 0 0 4px; } .srp-pc-chip { position: relative; } @media (max-width: 760px) { .srp-pc-chip-width { max-width: 110px; font-size: 10.5px; padding: 3px 6px; } } /* ════════════════════════════════════════════════════════════════════════ v120 — Tarefa 1: REFINO VISUAL do admin "Painel Custom" ──────────────────────────────────────────────────────────────────────── Polimento da diagramação: sombras suaves, hierarquia tipográfica, bordas arredondadas consistentes, espaçamentos mais respiráveis. Mantém a paleta verde institucional já estabelecida. ════════════════════════════════════════════════════════════════════════ */ .srp-pc-admin { background: linear-gradient(180deg, #fafdf9 0%, #fff 280px); margin: 0 -20px 0 -22px; padding: 24px 24px 32px; } .srp-pc-admin h1 { margin: 0 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--srp-pc-a-border); font-size: 32px; } .srp-pc-admin-version { transform: translateY(-4px); background: rgba(212, 173, 90, 0.12); border: 1px solid rgba(212, 173, 90, 0.30); color: #8a6d20; } .srp-pc-admin-intro { background: #fff; border: 1px solid var(--srp-pc-a-border); border-left: 3px solid var(--srp-pc-a-verde-claro); border-radius: 4px; padding: 12px 16px; margin-top: 14px; } .srp-pc-admin-zone { box-shadow: 0 1px 3px rgba(46, 125, 50, 0.04), 0 1px 2px rgba(46, 125, 50, 0.06); transition: box-shadow 0.18s ease, transform 0.18s ease; } .srp-pc-admin-zone:hover { box-shadow: 0 4px 12px rgba(46, 125, 50, 0.08), 0 1px 3px rgba(46, 125, 50, 0.06); } .srp-pc-admin-zone:focus-within { box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18); } .srp-pc-admin-disponiveis { background: repeating-linear-gradient( 135deg, var(--srp-pc-a-creme-2), var(--srp-pc-a-creme-2) 12px, rgba(212, 173, 90, 0.03) 12px, rgba(212, 173, 90, 0.03) 24px ); } .srp-pc-admin-zona-full { border: 1.5px solid var(--srp-pc-a-ouro-soft); } .srp-pc-zone-title { font-size: 18px; border-bottom: 1px dashed rgba(46, 125, 50, 0.18); padding-bottom: 10px; margin-bottom: 14px; } .srp-pc-chip { background: #fff; border: 1px solid var(--srp-pc-a-border); border-radius: 6px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); transition: all 0.15s ease; } .srp-pc-chip:hover { border-color: var(--srp-pc-a-verde-claro); box-shadow: 0 2px 6px rgba(46, 125, 50, 0.12); transform: translateY(-1px); } /* ════════════════════════════════════════════════════════════════════════ v120 — Tarefa 1: REFINO VISUAL do admin "Selos Institucionais" ──────────────────────────────────────────────────────────────────────── Repaginação dos cards de cada selo: hierarquia mais clara, hover state, melhor uso do espaço, paleta institucional. ════════════════════════════════════════════════════════════════════════ */ .mapa-pinda-admin .srp-selos-grid { gap: 18px; } .mapa-pinda-admin .srp-selo-card { border: 1px solid var(--srp-pc-a-border, #d8dcd0); border-radius: 10px; padding: 20px 18px; box-shadow: 0 1px 3px rgba(46, 125, 50, 0.04); transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .mapa-pinda-admin .srp-selo-card:hover { border-color: var(--srp-pc-a-ouro-soft, #d4ad5a); box-shadow: 0 4px 14px rgba(212, 173, 90, 0.12); transform: translateY(-1px); } .mapa-pinda-admin .srp-selo-cat { color: #1e5c30; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; } .mapa-pinda-admin .srp-selo-desc { color: #6b7a70; font-size: 12px; } .mapa-pinda-admin .srp-selo-link-field { background: #f9f7f1; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(212, 173, 90, 0.20); margin-top: 6px; } .mapa-pinda-admin .srp-selo-link-field label { color: #8a6d20 !important; } .mapa-pinda-admin .srp-selo-acoes { display: flex; gap: 8px; margin-top: 6px; } .mapa-pinda-admin .srp-selo-acoes .button { flex: 1; } /* ════════════════════════════════════════════════════════════════════════ v120 — Header padronizado dos admins (Selos + futuros) ════════════════════════════════════════════════════════════════════════ */ .srp-adm-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 0 14px; border-bottom: 1px solid #e0e6e1; margin-bottom: 8px; } .srp-adm-page-h1 { margin: 0 0 4px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: #1e5c30; font-size: 28px; display: flex; align-items: baseline; gap: 10px; letter-spacing: -0.01em; } .srp-adm-page-version { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 600; background: rgba(212, 173, 90, 0.12); border: 1px solid rgba(212, 173, 90, 0.30); color: #8a6d20; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em; transform: translateY(-4px); } .srp-adm-page-sub { margin: 0; color: #6b7a70; font-size: 14px; line-height: 1.45; max-width: 720px; } .srp-adm-page-count { background: #f5efe3; border: 1px solid rgba(212, 173, 90, 0.40); color: #8a6d20; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; letter-spacing: 0.02em; } .srp-adm-intro-card { background: #fff; border-left: 3px solid #2e7d32 !important; padding: 14px 18px !important; margin: 6px 0 22px !important; } .srp-adm-intro-card p { margin: 0 0 8px; color: #2a3a30; line-height: 1.55; } .srp-adm-intro-card p:last-child { margin-bottom: 0; color: #555; font-size: 13px; } .srp-adm-intro-card code { background: #f5efe3; color: #1e5c30; padding: 2px 7px; border-radius: 3px; font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12.5px; font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════ v121 — PÁGINA INDIVIDUAL DO PIN (/agripainel/pin/{slug}/) ──────────────────────────────────────────────────────────────────────── Layout standalone reusando os tokens institucionais do painel custom. Conteúdo: hero + galeria + grid 2-col (sobre + info+ações). ════════════════════════════════════════════════════════════════════════ */ .srp-pin-single { min-height: 100vh; padding: 32px 24px 64px; background: radial-gradient(1200px 600px at 80% -10%, rgba(63,163,77,0.06), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(212,173,90,0.05), transparent 60%), #060C0A; color: #F2EDE0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .srp-pin-single .srp-pc-root { max-width: 1100px; margin: 0 auto; } /* ── Header (back link + share) ───────────────────────────────────── */ .srp-pin-single-header { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: linear-gradient(180deg, rgba(20, 40, 34, 0.85), rgba(15, 31, 25, 0.70)); border: 1px solid rgba(212, 173, 90, 0.15); border-radius: 14px; margin-bottom: 28px; backdrop-filter: blur(6px); } .srp-pin-back-logo { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(212, 173, 90, 0.30); background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; } .srp-pin-back-logo img { width: 100%; height: 100%; object-fit: cover; } .srp-pin-back-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .srp-pin-back-link { color: #D4AD5A; font-size: 14px; font-weight: 600; text-decoration: none; letter-spacing: 0.02em; } .srp-pin-back-link:hover { color: #fff; } .srp-pin-back-sub { font-size: 11px; color: rgba(196, 210, 200, 0.55); letter-spacing: 0.08em; text-transform: uppercase; } .srp-pin-share-btn { flex-shrink: 0; background: rgba(212, 173, 90, 0.12); border: 1.5px solid rgba(212, 173, 90, 0.40); color: #D4AD5A; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: all 0.18s ease; font-family: inherit; } .srp-pin-share-btn:hover { background: rgba(212, 173, 90, 0.22); border-color: #D4AD5A; color: #fff; box-shadow: 0 0 14px rgba(212, 173, 90, 0.30); } /* ── Hero (eyebrow + título + responsável) ────────────────────────── */ .srp-pin-hero { padding: 24px 0 32px; border-bottom: 1px dashed rgba(212, 173, 90, 0.20); margin-bottom: 28px; } .srp-pin-eyebrow { display: inline-block; background: rgba(212, 173, 90, 0.14); color: var(--pin-cor, #D4AD5A); padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .srp-pin-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px; line-height: 1.1; color: #F2EDE0; margin: 0 0 8px; letter-spacing: -0.01em; } .srp-pin-owner { font-size: 15px; color: rgba(196, 210, 200, 0.75); margin: 0; } .srp-pin-owner strong { color: #D4AD5A; font-weight: 600; } /* ── Galeria de imagens ───────────────────────────────────────────── */ .srp-pin-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 32px; } .srp-pin-galeria-item { margin: 0; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.04); aspect-ratio: 4 / 3; } .srp-pin-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .srp-pin-galeria-item:hover img { transform: scale(1.04); } /* ── Grid principal (sobre + info) ────────────────────────────────── */ .srp-pin-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; margin-bottom: 32px; } @media (max-width: 800px) { .srp-pin-grid { grid-template-columns: 1fr; } } .srp-pin-box { background: rgba(20, 40, 34, 0.55); border: 1px solid rgba(212, 173, 90, 0.18); border-radius: 12px; padding: 20px 22px; } .srp-pin-box-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; color: #D4AD5A; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px dashed rgba(212, 173, 90, 0.20); } .srp-pin-box-content { color: rgba(196, 210, 200, 0.92); line-height: 1.65; font-size: 14px; } .srp-pin-box-content p { margin: 0 0 12px; } .srp-pin-box-content p:last-child { margin-bottom: 0; } /* Info table */ .srp-pin-dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: 13px; } .srp-pin-dl dt { color: rgba(212, 173, 90, 0.70); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 4px; } .srp-pin-dl dd { margin: 0; color: #F2EDE0; font-weight: 500; } .srp-pin-dl dd a { color: #D4AD5A; text-decoration: none; } .srp-pin-dl dd a:hover { color: #fff; } /* Ações (WhatsApp, site, gmaps) */ .srp-pin-actions { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(212, 173, 90, 0.15); display: flex; flex-direction: column; gap: 8px; } .srp-pin-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: rgba(212, 173, 90, 0.10); border: 1.5px solid rgba(212, 173, 90, 0.30); color: #F2EDE0; font-weight: 600; font-size: 13px; border-radius: 8px; text-decoration: none; transition: all 0.18s ease; } .srp-pin-action-btn:hover { background: rgba(212, 173, 90, 0.22); border-color: #D4AD5A; transform: translateY(-1px); } .srp-pin-action-wpp { background: rgba(67, 233, 123, 0.10); border-color: rgba(67, 233, 123, 0.40); color: #43E97B; } .srp-pin-action-wpp:hover { background: rgba(67, 233, 123, 0.20); border-color: #43E97B; color: #fff; } /* Footer */ .srp-pin-single-foot { background: rgba(20, 40, 34, 0.40); border: 1px solid rgba(212, 173, 90, 0.12); border-radius: 10px; padding: 18px 22px; font-size: 13px; color: rgba(196, 210, 200, 0.70); line-height: 1.55; } .srp-pin-single-foot p { margin: 0 0 8px; } .srp-pin-single-foot p:last-child { margin-bottom: 0; } .srp-pin-single-foot a { color: #D4AD5A; text-decoration: none; font-weight: 600; } .srp-pin-single-foot a:hover { color: #fff; } .srp-pin-share-foot code { background: rgba(0, 0, 0, 0.30); color: #D4AD5A; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; word-break: break-all; } @media (max-width: 600px) { .srp-pin-single { padding: 18px 14px 48px; } .srp-pin-title { font-size: 32px; } .srp-pin-single-header { flex-wrap: wrap; padding: 14px; gap: 12px; } .srp-pin-share-btn { width: 100%; } } /* ════════════════════════════════════════════════════════════════════════ v121 — Tarefa 3: Refinos de FIDELIDADE ao HTML modelo ──────────────────────────────────────────────────────────────────────── Aplicação dos tokens-chave do modelo painel-agribusiness-ciea.html: • Gradientes radial nos body bgs (deep + soft) • Border-radius mais consistente (12-14px em cards principais) • Sombras mais suaves nas cards (institucional, não corporativo) ════════════════════════════════════════════════════════════════════════ */ body.srp-pc-page { background: radial-gradient(1200px 600px at 80% -10%, rgba(63,163,77,0.07), transparent 62%), radial-gradient(900px 500px at -10% 110%, rgba(212,173,90,0.06), transparent 60%), #060C0A !important; } .srp-pc-root .agbz-card, .srp-pc-root .agbz-spons__slide { border-radius: 14px !important; } .srp-pc-root .agbz-card { background: rgba(20, 40, 34, 0.55); border: 1px solid rgba(212, 173, 90, 0.15); } /* ════════════════════════════════════════════════════════════════════════ v123 — REFATORAÇÃO VISUAL UX/UI completa ──────────────────────────────────────────────────────────────────────── Briefing Michel (Tarefa 2): • Full width responsivo (100% da tela em qualquer breakpoint) • Border-radius zero nos cards principais • Remover bordas douradas dos selos institucionais • Layout masonry: cards preenchem espaços vazios dinamicamente • Cabeçalho menor (defaults reduzidos no PHP) ════════════════════════════════════════════════════════════════════════ */ /* ── 2.1: Full width — o painel quebra qualquer container do tema ────── */ .srp-pc-root.agbz-root, .srp-pc-page .srp-pc-root { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: clamp(12px, 2.5vw, 32px); padding-right: clamp(12px, 2.5vw, 32px); box-sizing: border-box; } /* ── 2.2: Border-radius ZERO nos cards principais (visual retilíneo) ── */ .srp-pc-root .agbz-card, .srp-pc-root .agbz-spons__slide, .srp-pc-root .srp-selos-card--v119, .srp-pc-root .agbz-header, .srp-pc-root .agbz-ticker { border-radius: 0 !important; } /* ── 2.3: Selos sem borda dourada (Michel: "remover completamente") ──── */ .srp-pc-root .srp-selos-card--v119 { border: 1px solid rgba(212, 173, 90, 0.15) !important; /* só o card externo, sutil */ } .srp-pc-root .srp-selos-card--v119 .srp-selos-list--quadrado { border: none !important; gap: 0 !important; } .srp-pc-root .srp-selos-card--v119 .srp-selo-quadrado, .srp-pc-root .srp-selos-card--v119 .srp-selo-quadrado--clicavel, .srp-pc-root .srp-selos-card--v119 .srp-selo-quadrado--estatico { border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .srp-pc-root .srp-selos-card--v119 .srp-selo-quadrado--clicavel:hover, .srp-pc-root .srp-selos-card--v119 .srp-selo-quadrado--clicavel:focus-visible { background: rgba(212, 173, 90, 0.06) !important; box-shadow: none !important; transform: scale(1.04); } /* Divisor vertical entre selos (linha sutil verticalmente, igual ao modelo HTML do Michel — `painel-agribusiness-ciea.html`) */ .srp-pc-root .srp-selos-card--v119 .srp-selos-item + .srp-selos-item .srp-selo-quadrado { border-left: 1px solid rgba(212, 173, 90, 0.10) !important; } /* ── 2.4: Layout masonry — preenche buracos via stretch do último card ─ Estrutura existente: .srp-pc-grid → 3 .srp-pc-col → N .srp-pc-slot Sem reorganizar HTML, fazemos cada coluna esticar pra altura da MAIOR e o último card de cada coluna se estica pra preencher o vazio. Bonus: zonas topo/rodape continuam full-width sem ajuste. */ .srp-pc-root .srp-pc-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); align-items: stretch; /* ← faz colunas terem altura igual */ width: 100%; } .srp-pc-root .srp-pc-col { display: flex !important; flex-direction: column; gap: clamp(8px, 1vw, 16px); min-width: 0; } /* Último card de cada coluna ESTICA pra preencher buraco vertical */ .srp-pc-root .srp-pc-col > .srp-pc-slot:last-child { flex: 1 1 auto; display: flex; flex-direction: column; } .srp-pc-root .srp-pc-col > .srp-pc-slot:last-child > .agbz-card, .srp-pc-root .srp-pc-col > .srp-pc-slot:last-child > section, .srp-pc-root .srp-pc-col > .srp-pc-slot:last-child > article { flex: 1 1 auto; } /* Larguras customizadas pelo admin (Painel Custom → proporção) ainda funcionam: span muda quantas colunas ocupa */ .srp-pc-root .srp-pc-slot[data-card-width="half"] { grid-column: span 2 / auto; } .srp-pc-root .srp-pc-slot[data-card-width="full"] { grid-column: 1 / -1; } .srp-pc-root .srp-pc-slot[data-card-width="quad"] { aspect-ratio: 1 / 1; max-width: 320px; margin-left: auto; margin-right: auto; } /* Zonas full-width sempre */ .srp-pc-root .srp-pc-zona-topo, .srp-pc-root .srp-pc-zona-rodape { width: 100%; display: block; } /* Mobile: empilha em coluna única (≤ 760px) */ @media (max-width: 760px) { .srp-pc-root .srp-pc-grid { grid-template-columns: 1fr !important; } .srp-pc-root .srp-pc-col > .srp-pc-slot:last-child { flex: 0 0 auto; } } /* Tablet: 2 colunas (761-1100px) — col3 vai pra linha 2 */ @media (min-width: 761px) and (max-width: 1100px) { .srp-pc-root .srp-pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srp-pc-root .srp-pc-col-3 { grid-column: 1 / -1; } } /* ── 2.5: Cabeçalho mais compacto (defaults PHP já reduzidos) ────────── */ .srp-pc-root .agbz-header { padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 22px) !important; } .srp-pc-root .agbz-header-tagline { max-width: 720px; line-height: 1.35; } /* ── 2.6: Pins customizados no mini-mapa (Tarefa 3 do briefing) ──────── */ .srp-pc-root .srp-pc-mini-marker { background: transparent !important; border: none !important; } .srp-pc-root .srp-pc-pin-icon { width: 28px; height: 36px; display: block; transition: transform 0.18s ease, filter 0.18s ease; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.40)); } .srp-pc-root .srp-pc-pin-icon:hover { transform: translateY(-2px) scale(1.10); filter: drop-shadow(0 4px 6px rgba(212, 173, 90, 0.55)); } .srp-pc-pin-tip { background: rgba(20, 40, 34, 0.94) !important; color: #F2EDE0 !important; border: 1px solid rgba(212, 173, 90, 0.40) !important; border-radius: 4px !important; padding: 6px 10px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40) !important; } .srp-pc-pin-tip::before { border-top-color: rgba(212, 173, 90, 0.40) !important; } /* ════════════════════════════════════════════════════════════════════════ * v142.2 — MODO LIVRE NO FRONTEND * ──────────────────────────────────────────────────────────────────────── * Renderiza o painel respeitando o layout x/y/w/h salvo pelo editor admin * v142. CSS Grid 12 colunas + altura proporcional (cada "linha" do grid * vira altura mínima de 1 célula × N — N é definido pelo conteúdo do card). * * O navegador resolve buracos e sobreposições automaticamente. Cards * aparecem na posição visual que o admin desenhou no editor. * * Cada card individual continua usando seu CSS próprio (.agbz-* dos cards) * via .srp-pc-slot — não tocamos no styling interno dos cards, só na grade. * ════════════════════════════════════════════════════════════════════════ */ .srp-pc-root-livre { width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 16px; } .srp-pc-grid-livre { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(70px, auto); gap: 14px; min-height: 200px; } .srp-pc-grid-livre .srp-pc-slot-livre { min-width: 0; /* permite shrink dentro do grid track */ min-height: 0; display: flex; flex-direction: column; } /* Cards filhos devem preencher o slot inteiro (override de width:100% e altura natural do conteúdo). O .agbz-* mantém seu visual interno. */ .srp-pc-grid-livre .srp-pc-slot-livre > * { width: 100%; height: 100%; flex: 1 1 auto; min-width: 0; min-height: 0; } /* ── Responsividade ───────────────────────────────────────────────────── Em telas <= 1024px o grid colapsa de 12 para 6 colunas e cada card que tinha w<=6 passa a ocupar metade da tela, w>=7 passa a ocupar full. Isso evita cards de 1-2 colunas ficarem ilegíveis em tablet. ──────────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .srp-pc-grid-livre { grid-template-columns: repeat(6, 1fr); gap: 12px; } .srp-pc-grid-livre .srp-pc-slot-livre[data-w="1"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="2"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="3"] { grid-column: span 3 !important; } .srp-pc-grid-livre .srp-pc-slot-livre[data-w="4"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="5"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="6"] { grid-column: span 6 !important; } .srp-pc-grid-livre .srp-pc-slot-livre[data-w="7"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="8"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="9"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="10"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="11"], .srp-pc-grid-livre .srp-pc-slot-livre[data-w="12"] { grid-column: span 6 !important; } /* Em tablet, ignoramos `grid-row` específico — auto-flow reorganiza */ .srp-pc-grid-livre .srp-pc-slot-livre { grid-row: auto !important; } } @media (max-width: 720px) { .srp-pc-grid-livre { grid-template-columns: 1fr; gap: 10px; } .srp-pc-grid-livre .srp-pc-slot-livre { grid-column: 1 / -1 !important; grid-row: auto !important; } } /* ════════════════════════════════════════════════════════════════════════ * v154 — MODO EMPACOTADOR (ÚNICO modo de render) · FIX v153→v154 * ════════════════════════════════════════════════════════════════════════ * * Bugs corrigidos vs v153 (reportados pelo Michel em 29/jun/2026): * * BUG 1 — Cards colapsados no mobile. * A v153 deixava `height: 100% !important` no `.agbz-ctx` e no * `.agbz-cta-alianca--wide`. Em mobile, com slots `grid-row: auto` * (sem altura explícita), a referência percentual entrava em * dependência circular e cards colapsavam mostrando só o header, * enquanto o `overflow: hidden` do `.agbz-ctx--card` cortava o * resto do conteúdo. Fix: substituir `height: 100%` pela cascata * `flex: 1 1 auto` em toda a cadeia (slot → ctx → card), e mover * o `overflow: hidden` para responsabilidade do card individual * se ele precisar. * * BUG 2 — Ticker com altura muito maior que conteúdo no desktop. * v153 deixava o ticker no grid com h=2 e `grid-auto-rows: * minmax(80px, auto)` → slot de ~174px pra ~40px de conteúdo. * Fix: ticker e footer agora são renderizados FORA do grid (no * PHP `render_modo_empacotador`), como faixas full-width com * altura content-driven. As entradas em CARDS_LAYOUT permanecem * por retrocompat (com h=1) mas o render() pula-as do empacotamento. * * BUG 3 — Busca por nome retornava "Nenhuma propriedade" mesmo com * matches no array __srpAgribizPins. * Causa: dashboard.js fazia busca local + posicionava postMessage * `srp:filter-busca-nome`. mapa.js (enfileirado pelo Leaflet do * mini-mapa) respondia com array VAZIO via `srp:busca-resultados` * (porque seu cache `todosOsPins` só popula em [mapa_pinda] * standalone, NÃO no painel custom). O listener do dashboard.js * sobrescrevia o renderDropdown local com o vazio do mapa.js. * Fix em dashboard.js (não neste arquivo): no caminho de busca * LOCAL bem-sucedida, não disparar postMessage E ignorar respostas * `srp:busca-resultados` tardias (via flag de busca local ativa). * * BUG 4 — Texto "TERMINAL DE COMMODITIES" rotacionado vertical no mobile. * `dashboard.css` linha 1792 aplica `writing-mode: vertical-rl; * transform: rotate(180deg)` em `.agbz-terminal-title` no @media * ≤900px (legado do painel monolítico com scroll horizontal de * commodities). No empacotador o card é stack vertical, o título * deve ficar horizontal. Fix: override do writing-mode + transform * dentro do `.srp-pc-slot-empacotador`. * * Comportamento garantido em qualquer viewport: * • Ultra-wide (≥1900px) → 12 col, max-width 1800px * • Desktop (1281-1899px) → 12 col, max-width cresce até 1800px * • Tablet (901-1280px) → 12 col mas cards reagrupados pra 6 * • Tablet estreito (721-900px) → 4 col * • Mobile (≤720px) → 1 col stack vertical (via flex column) * ════════════════════════════════════════════════════════════════════════ */ .srp-pc-root-empacotador { width: 100%; max-width: clamp(320px, 95vw, 1800px); margin: 0 auto; padding: 24px clamp(12px, 2vw, 32px); box-sizing: border-box; } .srp-pc-grid-empacotador { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; /* v154 — grid-auto-rows: auto. v153 usava `minmax(80px, auto)` mas isso forçava CADA row a no mínimo 80px, inflando cards de conteúdo curto. Agora cada row é puramente content-driven; cards com conteúdo robusto (clima, mapa, commodities) ainda dão suas dimensões naturais que dominam as rows compartilhadas. */ grid-auto-rows: auto; gap: 14px; align-items: stretch; } .srp-pc-slot-empacotador { min-width: 0; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; } /* Filho direto do slot (tipicamente `.agbz-ctx`) cresce pra ocupar 100% da altura do slot via flex (sem `height: 100%`). */ .srp-pc-slot-empacotador > * { width: 100%; max-width: 100%; flex: 1 1 auto; min-width: 0; min-height: 0; box-sizing: border-box; } /* v154 — Cascata flex SEM `height: 100%`. ────────────────────────────────────── v153 tinha `height: 100% !important` aqui. Em mobile com slot `grid-row: auto` (altura = conteúdo), referência circular fazia o ctx colapsar a ~0px e `overflow: hidden` cortava o card inteiro. v154 usa SÓ flex pra propagar altura: no desktop o slot tem altura explícita (do grid) e flex estica o ctx; no mobile o slot é content-sized e o ctx fica com altura natural do card filho. */ .srp-pc-slot-empacotador > .agbz-ctx { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } .srp-pc-slot-empacotador > .agbz-ctx > * { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; } /* Boundary visual: fundo sólido + borda hairline ouro consistente em todos os cards do empacotador. v154 removeu `overflow: hidden` daqui (era a causa do clipping no mobile na v153) — o border-radius funciona sem ele, e cards INTERNOS que precisarem clipar declaram localmente. */ .srp-pc-slot-empacotador .agbz-ctx--card { background: var(--srp-pc-card) !important; border: 0.5px solid var(--srp-pc-line-st) !important; border-radius: var(--srp-pc-radius) !important; } /* v154 — Faixas full-width FORA do grid: header (existia), ticker e footer (novos). Não participam do empacotamento — altura é puramente content-driven, sem minmax(80px) infligindo extras. */ .srp-pc-root-empacotador > .srp-pc-header-auto, .srp-pc-root-empacotador > .srp-pc-ticker-auto, .srp-pc-root-empacotador > .srp-pc-footer-auto { width: 100%; box-sizing: border-box; margin-bottom: 14px; } .srp-pc-root-empacotador > .srp-pc-footer-auto { margin-bottom: 0; margin-top: 14px; } /* Dentro dessas faixas, o `.agbz-ctx` é transparente (sem boundary visual de "card" — é faixa decorativa). */ .srp-pc-root-empacotador > .srp-pc-ticker-auto .agbz-ctx, .srp-pc-root-empacotador > .srp-pc-footer-auto .agbz-ctx, .srp-pc-root-empacotador > .srp-pc-ticker-auto .agbz-ctx--card, .srp-pc-root-empacotador > .srp-pc-footer-auto .agbz-ctx--card { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } /* v153 BUG 1+2 (mantido em v154) — Reset agressivo de margens/widths herdadas do painel monolítico via selector descendente (atravessa o `.agbz-ctx`). v155 — Adicionado `.agbz-spons` à lista. Sponsors.css linha 31 tem `margin: 0 32px` herdado do painel monolítico, e SEM essa override o card de patrocinadores estourava 32px à direita do slot no mobile (relatado pelo Michel em 29/jun/2026). Reforço também na viewport e no slide pra não permitir overflow horizontal em nenhum nível. */ .srp-pc-slot-empacotador .agbz-card, .srp-pc-slot-empacotador .agbz-clima, .srp-pc-slot-empacotador .agbz-cta-alianca, .srp-pc-slot-empacotador .agbz-commodities-row, .srp-pc-slot-empacotador .agbz-cta-row, .srp-pc-slot-empacotador .agbz-macro, .srp-pc-slot-empacotador .agbz-mapwrap, .srp-pc-slot-empacotador .agbz-info-row, .srp-pc-slot-empacotador .agbz-spons, .srp-pc-slot-empacotador .agbz-spons__viewport, .srp-pc-slot-empacotador .agbz-spons__slide { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; } /* v155 — Garantia adicional: o trilho (.agbz-spons__rail) é um flex row com translateX animado entre slides; precisa de overflow contido no viewport pai. Reforça `overflow-x: hidden` no viewport e impede que o slide individual cresça além dos 100% do container. */ .srp-pc-slot-empacotador .agbz-spons__viewport { overflow-x: hidden !important; overflow-y: hidden !important; } .srp-pc-slot-empacotador .agbz-spons__slide { min-width: 0 !important; flex: 0 0 100% !important; } .srp-pc-slot-empacotador .agbz-cta-row { padding: 0 !important; } .srp-pc-slot-empacotador .agbz-mapwrap { height: 100% !important; min-height: 320px !important; max-height: none !important; } .srp-pc-slot-empacotador .agbz-macro { padding: 14px 16px !important; } /* v154 BUG 4 FIX — Terminal de Commodities texto horizontal SEMPRE. ────────────────────────────────────────────────────────────────── `dashboard.css` linha 1792 (@media ≤900px) aplica: writing-mode: vertical-rl; transform: rotate(180deg); Era legado do painel monolítico com scroll horizontal de commodities no mobile. No empacotador o card é stack vertical normal e o título deve ficar horizontal. */ .srp-pc-slot-empacotador .agbz-terminal-title { writing-mode: horizontal-tb !important; transform: none !important; position: static !important; align-self: auto !important; padding: 0 !important; flex-shrink: 1 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } /* Container de commodities: stack vertical normal (override do `flex-direction: row + overflow-x: auto` que vinha do mobile do painel monolítico). */ .srp-pc-slot-empacotador .agbz-col-right { flex-direction: column !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; -webkit-overflow-scrolling: auto; } /* Cada quote: largura natural do slot (não 180px fixo de scroll horizontal). */ .srp-pc-slot-empacotador .agbz-quote { width: 100% !important; flex-shrink: 1 !important; flex-basis: auto !important; } /* CTA Aliança: flex column estendido com botão no fundo. v154 removeu `height: 100% !important` (substituído pela cascata `flex: 1 1 auto` do bloco genérico acima). */ .srp-pc-slot-empacotador .agbz-cta-alianca--wide { display: flex !important; flex-direction: column !important; align-items: stretch !important; grid-template-columns: none !important; gap: 12px !important; padding: 20px 22px !important; min-height: 0 !important; box-sizing: border-box; } .srp-pc-slot-empacotador .agbz-cta-alianca--wide .agbz-cta-alianca__title { font-size: clamp(20px, 2.2vw, 26px) !important; line-height: 1.15 !important; margin: 0 !important; } .srp-pc-slot-empacotador .agbz-cta-alianca--wide .agbz-cta-alianca__body { font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; } .srp-pc-slot-empacotador .agbz-cta-alianca--wide .agbz-cta-alianca__btn { align-self: flex-start !important; margin-top: auto !important; white-space: nowrap; } /* ── ULTRA-WIDE (≥1900px) ─────────────────────────────────────────── */ @media (min-width: 1900px) { .srp-pc-root-empacotador { max-width: 1800px; padding: 32px 40px; } .srp-pc-grid-empacotador { gap: 18px; } } /* ── TABLET (901-1280px) — 6 cols ─────────────────────────────────── */ @media (max-width: 1280px) and (min-width: 901px) { .srp-pc-grid-empacotador { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .srp-pc-slot-empacotador[data-w="1"], .srp-pc-slot-empacotador[data-w="2"], .srp-pc-slot-empacotador[data-w="3"] { grid-column: span 3 !important; } .srp-pc-slot-empacotador[data-w="4"], .srp-pc-slot-empacotador[data-w="5"], .srp-pc-slot-empacotador[data-w="6"], .srp-pc-slot-empacotador[data-w="7"], .srp-pc-slot-empacotador[data-w="8"], .srp-pc-slot-empacotador[data-w="9"], .srp-pc-slot-empacotador[data-w="10"], .srp-pc-slot-empacotador[data-w="11"], .srp-pc-slot-empacotador[data-w="12"] { grid-column: span 6 !important; } } /* ── TABLET ESTREITO (721-900px) — 4 cols ─────────────────────────── */ @media (max-width: 900px) and (min-width: 721px) { .srp-pc-grid-empacotador { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .srp-pc-slot-empacotador[data-w="1"], .srp-pc-slot-empacotador[data-w="2"] { grid-column: span 2 !important; } .srp-pc-slot-empacotador[data-w="3"], .srp-pc-slot-empacotador[data-w="4"], .srp-pc-slot-empacotador[data-w="5"], .srp-pc-slot-empacotador[data-w="6"], .srp-pc-slot-empacotador[data-w="7"], .srp-pc-slot-empacotador[data-w="8"], .srp-pc-slot-empacotador[data-w="9"], .srp-pc-slot-empacotador[data-w="10"], .srp-pc-slot-empacotador[data-w="11"], .srp-pc-slot-empacotador[data-w="12"] { grid-column: span 4 !important; } .srp-pc-root-empacotador { padding: 18px 14px; } } /* ── MOBILE (≤720px) — FLEX COLUMN (não grid) ───────────────────────── v154 — Mudança chave: a grade desaparece em mobile e vira flex column pura. Isso elimina TODA a complexidade de grid-rows/spans/auto-sizing que causava o colapso na v153. Cada slot é um flex-item com altura content-driven, sem dependências de cálculo de grid. */ @media (max-width: 720px) { .srp-pc-root-empacotador { padding: 12px 10px; max-width: 100%; } .srp-pc-grid-empacotador { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; grid-auto-flow: unset !important; grid-auto-rows: auto !important; gap: 12px; } .srp-pc-slot-empacotador { width: 100% !important; max-width: 100% !important; grid-column: auto !important; grid-row: auto !important; height: auto !important; min-height: 0 !important; } .srp-pc-slot-empacotador .agbz-ctx, .srp-pc-slot-empacotador .agbz-ctx--card { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; height: auto !important; } /* Mini-mapa no mobile: altura fixa razoável. */ .srp-pc-slot-empacotador .agbz-mapwrap, .srp-pc-slot-empacotador .srp-pc-mapa-wrap, .srp-pc-slot-empacotador .srp-pc-mapa-leaflet { height: 300px !important; min-height: 300px !important; max-height: 300px !important; } } /* ── MOBILE PEQUENO (≤380px) ──────────────────────────────────────── */ @media (max-width: 380px) { .srp-pc-root-empacotador { padding: 8px 6px; } .srp-pc-grid-empacotador { gap: 10px; } } /* ════════════════════════════════════════════════════════════════════════ v158 — CARD PLUVIOMETRIA REGIONAL multi-ano ────────────────────────────────────────────────────────────────────── Adições sobre v140: tabs de período (12/24/36/Tudo), KPI "Por ano" com mini-tabela de totais anuais + anomalia, layout 5-colunas. Briefing Michel 29/jun/2026: ver histórico completo em vez de só os últimos 12 meses. Não altera estilos v140 — coexistem. ════════════════════════════════════════════════════════════════════════ */ .srp-pluvio-card-v158 .srp-pluvio-title-v158 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .srp-pluvio-card-v158 .srp-pluvio-title-txt { flex: 0 0 auto; } .srp-pluvio-card-v158 .srp-pluvio-title-meta-v158 { flex: 1 1 auto; } .srp-pluvio-tabs-v158 { display: inline-flex; gap: 2px; background: rgba(212, 173, 90, 0.06); padding: 3px; border-radius: 6px; border: 0.5px solid rgba(212, 173, 90, 0.14); margin-left: auto; } .srp-pluvio-tab-v158 { font: 500 11px/1 'Inter', ui-sans-serif, system-ui, sans-serif; padding: 5px 12px; border-radius: 4px; color: rgba(244, 237, 224, 0.55); background: transparent; border: 0; cursor: pointer; font-variant-numeric: tabular-nums; transition: color .14s ease, background-color .14s ease; } .srp-pluvio-tab-v158:hover { color: rgba(244, 237, 224, 0.85); } .srp-pluvio-tab-v158.is-active { background: rgba(212, 173, 90, 0.18); color: #D4AD5A; } .srp-pluvio-tab-v158:focus-visible { outline: 1px solid rgba(212, 173, 90, 0.55); outline-offset: 1px; } .srp-pluvio-card-v158 .srp-pluvio-kpis-v158 { grid-template-columns: 1.3fr 1fr 1.25fr 1fr 1fr; } .srp-pluvio-card-v158 .srp-pluvio-kpi-yr-v158 { gap: 4px; } .srp-pluvio-yr-mini-v158 { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; } .srp-pluvio-yr-row-v158 { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; padding: 2px 0; line-height: 1.2; } .srp-pluvio-yr-ano { color: rgba(244, 237, 224, 0.55); } .srp-pluvio-yr-parc { color: rgba(244, 237, 224, 0.35); font-size: 10px; } .srp-pluvio-yr-val { color: rgba(244, 237, 224, 0.92); font-family: 'JetBrains Mono', ui-monospace, monospace; } .srp-pluvio-yr-val .srp-pluvio-anom-neg, .srp-pluvio-yr-val .srp-pluvio-anom-pos { margin-left: 5px; font-size: 10.5px; } .srp-pluvio-chart-wrap-v158 { height: 320px; margin-top: 4px; } .srp-pluvio-chart-wrap-v158 canvas { height: 100% !important; } .srp-pluvio-fonte-v158 { margin-top: 12px; padding-top: 10px; border-top: 0.5px solid rgba(244, 237, 224, 0.06); } @media (max-width: 1100px) { .srp-pluvio-card-v158 .srp-pluvio-kpis-v158 { grid-template-columns: 1fr 1fr 1fr; } .srp-pluvio-card-v158 .srp-pluvio-kpi-yr-v158 { grid-column: 1 / -1; } .srp-pluvio-yr-mini-v158 { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; } .srp-pluvio-yr-row-v158 { min-width: 110px; padding: 0; } } @media (max-width: 700px) { .srp-pluvio-card-v158 .srp-pluvio-kpis-v158 { grid-template-columns: 1fr 1fr; } .srp-pluvio-tabs-v158 { margin-left: 0; margin-top: 6px; flex-basis: 100%; justify-content: center; } .srp-pluvio-chart-wrap-v158 { height: 280px; } } /* ════════════════════════════════════════════════════════════════════════ v164 — MOBILE BUGFIXES PARA O CARD DE PLUVIOMETRIA (revisão final) ──────────────────────────────────────────────────────────────────────── Estrutura HTML revista pra resolver o gráfico-com-altura-zero em mobile: .srp-pluvio-chart-wrap-v158 ← height: 320px (definida na v158) └─ .srp-pluvio-scroll-v162 ← height: 100%, overflow-x: auto └─ .srp-pluvio-canvas-inner-v164 ← width: 100%, height: 100%, min-width: dinâmico └─