@font-face { font-family: 'Inter'; src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================================ * Design system · paleta "Basalto" (extraída de * .claude/risk360-agrointelligence.html) + tema claro/escuro. * * Claro é o padrão (:root) - mantém a leitura atual do painel. Escuro * entra via a classe `.dark` na (Tailwind `darkMode:'selector'`, * ver templates/index.html), alternada pelo botão de tema e detectada * por padrão via `prefers-color-scheme` - sem persistência entre sessões * (mesmo comportamento documentado em .claude/integracao-dev.md). * * Os componentes customizados abaixo (pill, light-dot, op-*, day-card, * gauge-ring, ssp-chip, fut-cell, tab-nav) já consomem essas variáveis, e * por isso já respondem ao toggle de tema. O restante do template ainda * usa classes utilitárias Tailwind puras (bg-white, text-slate-900 etc.) * e será migrado progressivamente nas próximas fases, seção por seção - * não faz sentido reescrever agora um HTML que ainda vai ser reestruturado. * ============================================================ */ :root { --bg: #F4F0EA; --panel: #FFFFFF; --panel-2: #EDE8E0; --raise: #E4DDD3; --line: #CFC6B9; --line-soft: #E1DACF; --bone: #221C17; --bone-2: #4A4139; --muted: #7A6E62; --faint: #A3968A; --brand: #2F7E72; --brand-dim: #BFDCD7; /* semáforo operacional */ --ok: #54862F; --attn: #A87410; --restr: #B5551B; --crit: #AC2E1E; --ok-bg: rgba(84, 134, 47, .13); --attn-bg: rgba(168, 116, 16, .14); --restr-bg: rgba(181, 85, 27, .13); --crit-bg: rgba(172, 46, 30, .12); /* destaque de dia chuvoso na previsão de 10 dias */ --wet: #DFE7EA; --shadow: 0 8px 28px rgba(60, 50, 40, .18); --r: 4px; --cel-txt: rgba(0, 0, 0, .38); --hd-bg: rgba(244, 240, 234, .9); color-scheme: light; } :root.dark { /* Basalto — solo derivado de basalto do Sul de Minas */ --bg: #141110; --panel: #1C1817; --panel-2: #242020; --raise: #2E2827; --line: #3A3231; --line-soft: #292322; --bone: #EFE8DE; --bone-2: #C6BBAE; --muted: #8E8177; --faint: #655B54; /* verdigris — instrumento meteorológico oxidado */ --brand: #4E9E92; --brand-dim: #2F5F59; --ok: #6FA84A; --attn: #E0A32E; --restr: #D9722F; --crit: #C43D2E; --ok-bg: rgba(111, 168, 74, .16); --attn-bg: rgba(224, 163, 46, .16); --restr-bg: rgba(217, 114, 47, .17); --crit-bg: rgba(196, 61, 46, .18); --wet: #1E2427; --shadow: 0 8px 28px rgba(0, 0, 0, .5); --cel-txt: rgba(255, 255, 255, .42); --hd-bg: rgba(20, 17, 16, .88); color-scheme: dark; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } #map { height: 360px; border-radius: 0.75rem; z-index: 0; } .crop-pill { transition: all .15s ease-in-out; } .crop-pill.active { background: #166534; color: #fff; border-color: #166534; transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(22, 101, 52, .35); } .light-dot { width: 14px; height: 14px; border-radius: 9999px; box-shadow: 0 0 0 3px var(--panel) inset; } .light-green { background: var(--ok); } .light-yellow { background: var(--attn); } .light-orange { background: var(--restr); } .light-red { background: var(--crit); } .light-gray { background: var(--faint); } .bar-track { background: var(--raise); height: 6px; border-radius: 9999px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 9999px; transition: width .3s ease; } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; } .pill-green { background: var(--ok-bg); color: var(--ok); } .pill-yellow { background: var(--attn-bg); color: var(--attn); } .pill-orange { background: var(--restr-bg); color: var(--restr); } .pill-red { background: var(--crit-bg); color: var(--crit); } .pill-slate { background: var(--raise); color: var(--bone-2); } .pill-blue { background: var(--brand-dim); color: var(--brand); } .pill-purple { background: var(--raise); color: var(--brand); } /* Operações — semáforo */ .op-cell { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .op-sep { position: relative; } .op-sep::before { content: ""; position: absolute; left: -2px; top: 1px; bottom: 1px; width: 1px; background: var(--line); } .op-green { background: var(--ok); color: #fff; } .op-yellow { background: var(--attn); color: #fff; } .op-orange { background: var(--restr); color: #fff; } .op-red { background: var(--crit); color: #fff; } .op-none { background: var(--raise); color: var(--faint); border: 1px dashed var(--line); } .op-grid { display: grid; grid-template-columns: 80px repeat(15, minmax(46px, 1fr)); gap: 3px; align-items: center; min-width: 880px; } .op-label { font-size: 12px; color: var(--bone); font-weight: 600; padding-right: 6px; text-align: right; } .op-group { grid-column: span 3; font-size: 11px; font-weight: 700; color: var(--bone-2); text-align: center; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; border-bottom: 1px solid var(--line-soft); } .op-head { font-size: 10px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; } /* ENSO panel */ .signal-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 14px; transition: transform .15s ease; } .signal-card:hover { transform: translateY(-2px); } /* Day forecast cards */ .day-card { padding: 10px 8px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-soft); text-align: center; } .day-card.today { background: var(--ok-bg); border-color: var(--ok); } /* Score weight rows */ .w-row { display: grid; grid-template-columns: 1fr 60px 70px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12px; } .w-row:last-child { border-bottom: none; } /* Scale dividers — Curto / Médio / Longo prazo */ .scale-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; color: #fff; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .25); } .scale-curto { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); } .scale-medio { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); } .scale-longo { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); } .scale-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .scale-meta { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .08em; } .scale-title { font-size: 17px; font-weight: 800; line-height: 1.2; } .scale-sub { font-size: 12px; opacity: .9; line-height: 1.3; } /* IRCC / IFAF gauges */ .gauge-ring { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .gauge-ring::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--panel); } .gauge-val { position: relative; z-index: 1; font-size: 22px; font-weight: 800; } /* SSP scenario chips */ .ssp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 700; } .ssp-126 { background: var(--ok-bg); color: var(--ok); } .ssp-245 { background: var(--attn-bg); color: var(--attn); } .ssp-585 { background: var(--crit-bg); color: var(--crit); } /* Future risk grid cells */ .fut-cell { padding: 10px; border-radius: 10px; font-size: 12px; line-height: 1.35; } .fut-low { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok); } .fut-mod { background: var(--attn-bg); border: 1px solid var(--attn); color: var(--attn); } .fut-high { background: var(--restr-bg); border: 1px solid var(--restr); color: var(--restr); } .fut-crit { background: var(--crit-bg); border: 1px solid var(--crit); color: var(--crit); } /* Top-level tabs · Climate Edge / Risco 360 */ .tab-nav { display: flex; gap: 4px; padding: 4px; background: var(--raise); border-radius: 12px; border: 1px solid var(--line-soft); } .tab-btn { flex: 1; padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all .18s ease; background: transparent; border: none; } .tab-btn:hover { color: var(--bone); background: var(--panel-2); } .tab-btn.active { background: var(--panel); color: var(--bone); box-shadow: var(--shadow); } .tab-btn.active.tab-edge { color: var(--brand); } .tab-btn.active.tab-risk360 { color: var(--restr); } .tab-btn .tab-ico { font-size: 16px; } .tab-btn .tab-meta { font-size: 10px; font-weight: 500; opacity: .7; text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; } .tab-pane { display: none; } .tab-pane.active { display: block; } /* Farmbar chips */ .chip-farm { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11px; border: 1px solid var(--line); border-radius: 100px; padding: 3px 11px; color: var(--bone-2); background: var(--panel-2); } .chip-farm b { color: var(--bone); font-weight: 600; } /* Hero · leitura do dia (verdict) + stat row */ .verdict { border-left: 3px solid var(--ok); padding: 2px 0 2px 20px; max-width: 46rem; transition: border-color .2s ease; } .verdict .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .verdict .lead { font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--bone); } .verdict p { margin-top: 12px; color: var(--bone-2); font-size: 14px; line-height: 1.55; max-width: 42rem; } .statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 10px; margin-top: 28px; overflow: hidden; } .stat { background: var(--panel); padding: 14px 16px; } .stat .k { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .stat .v { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-top: 5px; color: var(--bone); } .stat .d { font-size: 11px; color: var(--faint); margin-top: 4px; } .stat.is-ok .v { color: var(--ok); } .stat.is-attn .v { color: var(--attn); } .stat.is-restr .v { color: var(--restr); } .stat.is-crit .v { color: var(--crit); } .stat.is-brand .v { color: var(--brand); } /* Janelas operativas · matriz (grupo × dia × período) + painel de detalhe */ .mx-scroll { overflow-x: auto; } .mx { min-width: 820px; border-collapse: collapse; width: 100%; } .mx th, .mx td { border: 1px solid var(--line-soft); } .mx thead th { background: var(--panel-2); padding: 8px 4px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mx tbody th { background: var(--panel-2); text-align: left; padding: 0 12px; width: 150px; font-size: 12px; font-weight: 700; color: var(--bone); } .mx tbody th span { display: block; font-size: 10px; font-weight: 400; color: var(--faint); letter-spacing: 0; text-transform: none; } .mx td { padding: 0; background: var(--panel); } .cellgrp { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line-soft); } .cel { height: 36px; border: 0; cursor: pointer; position: relative; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 9px; color: var(--cel-txt); display: grid; place-items: center; transition: filter .12s; background: var(--panel); width: 100%; } .cel:hover { filter: brightness(1.3); } .cel.sel { box-shadow: inset 0 0 0 2px var(--bone); } .cel[data-c="bom"] { background: var(--ok-bg); border-top: 2px solid var(--ok); } .cel[data-c="atencao"] { background: var(--attn-bg); border-top: 2px solid var(--attn); } .cel[data-c="restrito"] { background: var(--restr-bg); border-top: 2px solid var(--restr); } .cel[data-c="nao_recomendado"] { background: var(--crit-bg); border-top: 2px solid var(--crit); } .detail { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 16px 18px; } .detail .dh { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .detail .dt { font-size: 14px; font-weight: 700; color: var(--bone); } .detail .ds { font-size: 12px; color: var(--muted); font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; } .detail ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .detail li { font-size: 13px; color: var(--bone-2); padding-left: 16px; position: relative; line-height: 1.45; } .detail li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); } .detail .tiny { font-size: 12px; color: var(--muted); } .detail .vars { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); } .detail .vars div { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11.5px; color: var(--muted); } .detail .vars b { color: var(--bone); font-weight: 500; } .pill[data-c="bom"] { background: var(--ok-bg); color: var(--ok); } .pill[data-c="atencao"] { background: var(--attn-bg); color: var(--attn); } .pill[data-c="restrito"] { background: var(--restr-bg); color: var(--restr); } .pill[data-c="nao_recomendado"] { background: var(--crit-bg); color: var(--crit); } /* Previsão · 10 dias (ver .claude/risk360-agrointelligence.html:229-245) */ .fc-scroll { overflow-x: auto; } .fc { display: grid; grid-template-columns: repeat(10, minmax(92px, 1fr)); gap: 1px; background: var(--line-soft); min-width: 860px; } .fc-day { background: var(--panel-2); padding: 12px 8px; text-align: center; } .fc-day.wet { background: var(--wet); } .fc-dow { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .fc-date { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px; color: var(--bone-2); margin-top: 2px; } .fc-bar { height: 52px; display: flex; align-items: flex-end; justify-content: center; margin: 10px 0 6px; } .fc-bar i { display: block; width: 20px; background: var(--brand); border-radius: 1px; min-height: 2px; opacity: .85; } .fc-mm { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11.5px; color: var(--brand); } .fc-mm.zero { color: var(--faint); } .fc-t { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; margin-top: 8px; } .fc-t .mx { color: var(--restr); } .fc-t .mn { color: var(--brand); } .fc-l { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10px; color: var(--muted); margin-top: 4px; } .fc-storm { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10px; margin-top: 5px; color: var(--faint); } .fc-storm.on { color: var(--attn); } /* Longo prazo · cenários por horizonte (hz) e matriz favorabilidade × risco (quad) */ .hz { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; } .hz-c { background: var(--panel); padding: 16px; } .hz-c .h { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .quad { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; } @media (max-width: 640px) { .quad { grid-template-columns: 1fr; } } .q { background: var(--panel); padding: 16px; } .q .qh { font-size: 13px; font-weight: 800; } .q .qc { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .q .qr { font-size: 12.5px; color: var(--bone-2); margin-top: 10px; line-height: 1.45; } /* ============================================================ * Wildfire · estrutura fixa/placeholder (ver .claude/integracao-dev.md) * + componentes genéricos de "card" reaproveitados dela em diante. * ============================================================ */ .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .tiny { font-size: 11.5px; color: var(--muted); } .card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; } .card-hd { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .card-bd { padding: 16px; } .blk-title { font-size: 13px; font-weight: 700; letter-spacing: -.005em; color: var(--bone); } /* Relatório executivo da fazenda · cabeçalho de seção (ver .claude/risk360-agrointelligence.html:113,219,151) */ .card-hd.card-hd-lg { align-items: flex-start; padding: 20px 20px 18px; } h2.sec-title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--bone); margin-top: 6px; } .card-hd .txt { flex: 1; min-width: 240px; } .card-hd .txt p { color: var(--bone-2); margin-top: 10px; max-width: 620px; font-size: 14px; line-height: 1.5; } /* Tendência sazonal · tabela de anomalias (ver .claude/risk360-agrointelligence.html:385) */ .tb { width: 100%; border-collapse: collapse; font-size: 13px; } .tb th, .tb td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: center; } .tb th { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); } .tb td:first-child, .tb th:first-child { text-align: left; } .tb td:first-child { font-weight: 600; font-size: 12.5px; color: var(--bone); } .tb td.n { font-variant-numeric: tabular-nums; font-weight: 700; } .pos { color: var(--brand); } .neg { color: var(--restr); } .hot { color: var(--crit); } .cf { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .cf.a { color: var(--ok); } .cf.m { color: var(--attn); } .cf.b { color: var(--restr); } /* Síntese da IA (Tendência sazonal) · caixa de destaque âmbar (ver .claude/risk360-agrointelligence.html:395) */ .synth { border: 1px solid var(--attn); border-left-width: 3px; border-radius: var(--r); background: var(--attn-bg); padding: 20px 22px; margin-top: 20px; } .synth h4 { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--attn); margin-bottom: 12px; } .synth p { font-size: 14px; color: var(--bone-2); margin-bottom: 11px; line-height: 1.62; } .synth p:last-child { margin-bottom: 0; } .synth b { color: var(--bone); font-weight: 600; } .synth .tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--attn); margin-right: 7px; } .hd-btn { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--brand); border: 1px solid var(--brand-dim); padding: 8px 14px; border-radius: var(--r); cursor: pointer; flex-shrink: 0; } .hd-btn:hover { background: var(--brand-dim); color: var(--bone); } /* ---------- header (Risk 360 · AgroIntelligence) ---------- */ header { position: sticky; top: 0; z-index: 60; background: var(--hd-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .hd { display: flex; align-items: center; gap: 18px; height: 64px; } .mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; } .mark .nm { font-weight: 800; font-size: 15px; letter-spacing: -.02em; line-height: 1.1; color: var(--bone); } .mark .nm em { font-style: normal; color: var(--brand); } .mark .tg { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .hd-nav { display: flex; gap: 2px; margin-left: auto; } .hd-nav a { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 7px 11px; border-radius: var(--r); } .hd-nav a:hover { color: var(--bone); background: var(--panel-2); } .theme-toggle { margin-left: 10px; flex-shrink: 0; } @media (max-width: 860px) { .theme-toggle { margin-left: auto; } } /* Relatório executivo da fazenda · 3 cards (Agora / Safra / Prioridades) */ .rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; border: 1px solid var(--line-soft); background: var(--line-soft); border-radius: var(--r); } .rep-c { background: var(--panel); padding: 19px; } .rep-c .rh { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } .rep-c p { font-size: 13.5px; color: var(--bone-2); margin-top: 9px; line-height: 1.55; } /* filtros GIS */ .gis-filters { display: flex; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; margin-bottom: 16px; flex-wrap: wrap; } .gisf { background: var(--panel); padding: 10px 14px; flex: 1; min-width: 148px; } .gisf .fk { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .gisf .fv { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px; color: var(--bone); margin-top: 3px; } /* layout de 3 colunas (esquerda / mapa / direita) */ .gis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.3fr); gap: 14px; align-items: start; } @media (max-width: 1080px) { .gis { grid-template-columns: 1fr; } } .gis-col { display: flex; flex-direction: column; gap: 14px; } /* KPIs grandes */ .kpi { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel); padding: 14px 16px; } .kpi .kl { font-size: 12.5px; font-weight: 700; } .kpi .kv { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 42px; font-weight: 600; letter-spacing: -.04em; line-height: .95; margin-top: 4px; } .kpi .kd { font-size: 11px; color: var(--faint); margin-top: 6px; line-height: 1.4; } .kpi.k-alert .kl, .kpi.k-alert .kv { color: var(--attn); } .kpi.k-foco .kl, .kpi.k-foco .kv { color: var(--restr); } /* barras horizontais (alertas por tipo, focos por classe) */ .bars { display: flex; flex-direction: column; gap: 11px; } .brow .bl { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--bone-2); margin-bottom: 5px; } .brow .bl b { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-weight: 500; color: var(--bone); } .brow .bt { height: 12px; background: var(--line-soft); border-radius: 1px; overflow: hidden; } .brow .bt i { display: block; height: 100%; border-radius: 1px; } /* estado vazio */ .empty { display: flex; gap: 9px; align-items: flex-start; color: var(--faint); font-size: 12.5px; line-height: 1.45; } .empty .ic { color: var(--brand); flex-shrink: 0; } /* toggle região / fazenda no mapa */ .tabs { display: flex; gap: 2px; } .tab { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: transparent; border: 1px solid var(--line-soft); color: var(--muted); padding: 6px 11px; border-radius: 6px; cursor: pointer; } .tab:hover { color: var(--bone); } .tab.on { color: var(--bone); border-color: var(--brand-dim); background: var(--panel-2); } /* lista de alertas em ativos */ .alist { list-style: none; max-height: 352px; overflow-y: auto; margin: -4px 0; } .alist li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .alist li:last-child { border-bottom: 0; } .alist li:hover { background: var(--panel-2); } .alist li.sel { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--bone); } .alist .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .alist .an { font-size: 12.5px; color: var(--bone-2); line-height: 1.35; } .alist .ad { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10.5px; color: var(--faint); margin-top: 3px; } /* grid de campos do detalhe do foco */ .dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 4px; } .dgrid div .dk { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .dgrid div .dv { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px; color: var(--bone); margin-top: 2px; } /* lista de ativos na trajetória */ .assets { list-style: none; margin-top: 4px; } .assets li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--bone-2); } .assets li:last-child { border-bottom: 0; } .assets .eta { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; color: var(--restr); } .assets .eta.safe { color: var(--faint); } /* índice NFI · cor da gravidade (--nfi-cor/--nfi-cor-bg) setada via JS na faixa real do dia (ver NFI_TIER_COR no template) - var(--crit) é só o fallback antes do JS rodar. */ .nfi .big { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: .95; color: var(--nfi-cor, var(--crit)); } .nfi .unit { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10.5px; color: var(--faint); margin-top: 5px; } .nfi .cls { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nfi-cor, var(--crit)); margin-top: 8px; } .nfi-scale { display: flex; gap: 2px; margin-top: 14px; } .nfi-scale div { flex: 1; text-align: center; padding: 6px 2px; font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); background: var(--panel-2); border-bottom: 2px solid var(--line); } .nfi-scale div b { display: block; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 8.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); margin-top: 2px; } .nfi-scale div.on { color: var(--bone); background: var(--nfi-cor-bg, var(--crit-bg)); border-bottom-color: var(--nfi-cor, var(--crit)); } .nfi-scale div.on b { color: var(--bone-2); } .nfi-track { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-top: 16px; } .nfi-track i { height: 32px; background: var(--line-soft); position: relative; display: block; border-radius: 1px; } .nfi-track i b { position: absolute; bottom: 0; left: 0; right: 0; display: block; border-radius: 1px; } .nfi-track span { display: block; text-align: center; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 9px; color: var(--faint); margin-top: 4px; } /* ============================================================ * Extras de mapa · aplicados a todos os mapas do app (principal + wildfire) * ============================================================ */ .mapwrap { position: sticky; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); } #firemap { width: 100%; height: 480px; background: var(--panel-2); } .mapbar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .maplegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); } .maplegend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 1px; } .mapstack { display: flex; flex-direction: column; gap: 6px; } .mapbtn { width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--bone); font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 14px; line-height: 1; backdrop-filter: blur(6px); } .mapbtn:hover { background: var(--raise); border-color: var(--brand-dim); color: var(--brand); } .mapbtn.busy { color: var(--brand); border-color: var(--brand-dim); } .mapbtn[disabled] { opacity: .4; cursor: not-allowed; } .mapbtn small { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; } .basesel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px; display: flex; flex-direction: column; gap: 2px; backdrop-filter: blur(6px); } .basesel .bl { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 3px 7px 4px; } .basesel button { background: none; border: 0; cursor: pointer; text-align: left; padding: 6px 9px; border-radius: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--bone-2); white-space: nowrap; } .basesel button:hover { background: var(--raise); color: var(--bone); } .basesel button.on { background: var(--brand-dim); color: var(--bone); } .laysel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 5px; } .laysel label { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--bone-2); cursor: pointer; } .laysel input { accent-color: var(--brand); width: 13px; height: 13px; cursor: pointer; } .coordbox { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 8px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10px; color: var(--muted); } .maptoast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1200; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 6px; padding: 9px 14px; font-size: 12.5px; color: var(--bone-2); max-width: 88%; display: none; box-shadow: var(--shadow); } .maptoast.on { display: block; } .maptoast.err { border-left-color: var(--crit); } .maptoast b { color: var(--bone); font-weight: 600; } .mlab { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap; } .mlab.iso { color: #D9722F; } .badge { width: 34px; height: 34px; border: 1.5px solid var(--brand); border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--brand); letter-spacing: .02em; } /* Weathertrends */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px } section{ padding:64px 0; border-top:1px solid var(--line-soft) } .sec-head{ display:flex; gap:26px; align-items:flex-start; margin-bottom:34px; flex-wrap:wrap } .sec-head .no{ font-family:var(--mono);font-size:11px;color:var(--brand); border:1px solid var(--brand-dim);border-radius:100px;padding:4px 11px;flex-shrink:0;margin-top:6px; } .sec-head .txt{ flex:1; min-width:280px; } .sec-head .txt p{ color:var(--bone-2); margin-top:10px; max-width:620px; font-size:14px } .sec-head .meta{ font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right; border-top:1px solid var(--line-soft);padding-top:9px;min-width:190px; }