/* ════════════════════════════════════════════════════════════════ RISSO TRANSPORTES — performance.css v6.0 Design: Azul naval #141E6B + Vermelho #D41E2A Cards: fundo sólido + bordas quadradas Filtro: botão funil com popover Fonte: Barlow Condensed (títulos/números) + Inter (corpo) Deploy: /srv/apps/painel/painel/static/css/performance.css ════════════════════════════════════════════════════════════════ */ /* ─── IMPORTS ─── */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;1,700&family=Inter:wght@300;400;500&display=swap'); /* ════════════════════════════════════════════════════════════════ TOKENS — MODO ESCURO (padrão) ════════════════════════════════════════════════════════════════ */ :root { --bg: #252C3A; --bg1: #2E3648; --bg2: #363E54; --bg3: #3E4860; --b0: rgba(30,45,138,.10); --b1: rgba(30,45,138,.20); --b2: rgba(30,45,138,.38); --acc: #5B8FFF; --acc10: rgba(64,96,232,.14); --rsig: #D41E2A; --rsig10: rgba(212,30,42,.12); --green: #1A7A48; --g10: rgba(26,122,72,.14); --amber: #C87800; --a10: rgba(200,120,0,.14); --clay: #C05030; --c10: rgba(192,80,48,.14); --wine: #A03080; --w10: rgba(160,48,128,.14); --t1: #F0F4FF; --t2: #9AAAC8; --t3: #B8C4DC; --num: #FFFFFF; --sb-bg: #090C1A; /* cores sólidas dos stat cards */ --card-navy: #1E2D8A; --card-green: #1A7A48; --card-acc: #2A4AD0; --card-amber: #B06800; --card-red: #B01820; --card-clay: #C05030; --card-wine: #882068; --mono: 'Barlow Condensed', sans-serif; --body: 'Inter', sans-serif; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; } /* ════════════════════════════════════════════════════════════════ TOKENS — MODO CLARO ════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #F0F3FA; --bg1: #FFFFFF; --bg2: #E8EEFF; --bg3: #DBE3F8; --b0: rgba(30,45,138,.05); --b1: rgba(30,45,138,.11); --b2: rgba(30,45,138,.22); --acc: #1E2D8A; --acc10: rgba(30,45,138,.08); --rsig: #D41E2A; --rsig10: rgba(212,30,42,.08); --green: #155C38; --g10: rgba(21,92,56,.08); --amber: #8A5200; --a10: rgba(138,82,0,.08); --clay: #8A3818; --c10: rgba(138,56,24,.08); --wine: #6A1852; --w10: rgba(106,24,82,.08); --t1: #0D1330; --t2: #4A5890; --t3: #A8B4D0; --num: #0D1330; --sb-bg: #FFFFFF; --card-navy: #2438B0; --card-green: #1E8A54; --card-acc: #2E54E0; --card-amber: #C07800; --card-red: #C01C26; --card-clay: #A03818; --card-wine: #9A2878; } /* ─── ANTI-FLASH: inserir no antes do CSS ─── */ /* ════════════════════════════════════════════════════════════════ BASE ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 17px; } body { font-family: var(--body); background: var(--bg); color: var(--t1); transition: background .28s, color .28s; } /* ════════════════════════════════════════════════════════════════ TOPBAR — azul naval com borda vermelha ════════════════════════════════════════════════════════════════ */ .risso-topbar { height: 52px; background: #141E6B; border-bottom: 3px solid var(--rsig); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: relative; flex-shrink: 0; z-index: 100; } /* detalhe da linha vermelha diagonal (herda identidade do logo) */ .risso-topbar::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 90px; height: 3px; background: linear-gradient(90deg, var(--rsig) 60%, transparent); pointer-events: none; } /* ─── Logo da empresa ─── */ .risso-brand { display: flex; align-items: center; cursor: default; user-select: none; } .risso-brand-logo { height: 30px; display: flex; align-items: center; } .risso-brand-logo img { height: 28px; object-fit: contain; filter: brightness(0) invert(1); /* força branco sobre fundo azul */ } /* fallback textual se imagem falhar */ .risso-brand-text { font-family: var(--mono); font-size: 25px; font-weight: 700; font-style: italic; color: #FFF; letter-spacing: .05em; } /* ─── Lado direito da topbar ─── */ .risso-topbar-right { display: flex; align-items: center; gap: 12px; } /* indicador ao vivo */ .risso-live { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 300; color: rgba(255,255,255,.5); letter-spacing: .04em; } .risso-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #3DD68C; animation: risso-pulse 2.4s ease-in-out infinite; } @keyframes risso-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(61,214,140,.4); } 60% { opacity:.7; box-shadow:0 0 0 4px rgba(61,214,140,0); } } /* botão modo escuro/claro */ .risso-mode-btn { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); cursor: pointer; transition: all .18s; } .risso-mode-btn:hover { border-color: rgba(255,255,255,.35); } .risso-mode-ico { width: 12px; height: 12px; color: rgba(255,255,255,.65); } .risso-mode-lbl { font-size: 15px; font-weight: 300; color: rgba(255,255,255,.65); } .risso-moon { display: block; } .risso-sun { display: none; } [data-theme="light"] .risso-moon { display: none; } [data-theme="light"] .risso-sun { display: block; } /* relógio */ .risso-clk { font-family: var(--mono); font-size: 17px; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .04em; } /* ════════════════════════════════════════════════════════════════ LAYOUT — sidebar + main ════════════════════════════════════════════════════════════════ */ .risso-layout { display: flex; min-height: calc(100vh - 52px); } /* ════════════════════════════════════════════════════════════════ SIDEBAR — retrátil ════════════════════════════════════════════════════════════════ */ .risso-sidebar { width: 50px; background: var(--sb-bg); border-right: 1px solid var(--b1); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width .22s cubic-bezier(.4,0,.2,1), background .28s; position: relative; } .risso-sidebar.open { width: 210px; } /* stripe vermelha → azul no topo (identidade da marca) */ .risso-sb-stripe { height: 3px; background: linear-gradient(90deg, var(--rsig) 40%, var(--acc) 100%); flex-shrink: 0; } /* toggle */ .risso-sb-toggle { height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--t3); border-bottom: 1px solid var(--b1); transition: color .13s; flex-shrink: 0; user-select: none; } .risso-sidebar.open .risso-sb-toggle { justify-content: flex-end; padding-right: 14px; } .risso-sb-toggle:hover { color: var(--acc); } .risso-sb-toggle svg { width: 13px; height: 13px; transition: transform .22s; } .risso-sidebar.open .risso-sb-toggle svg { transform: rotate(180deg); } /* seções */ .risso-sb-section { padding: 6px 0; } .risso-sb-section-label { font-size: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--t3); padding: 0 13px; margin-bottom: 3px; opacity: 0; transition: opacity .18s; white-space: nowrap; } .risso-sidebar.open .risso-sb-section-label { opacity: 1; } .risso-sb-separator { height: 1px; background: var(--b1); margin: 5px 8px; } /* item */ .risso-sb-item { display: flex; align-items: center; gap: 10px; height: 39px; padding: 0 13px; cursor: pointer; color: var(--t3); white-space: nowrap; overflow: hidden; border-left: 2px solid transparent; text-decoration: none; transition: background .1s, color .12s, border-color .12s; position: relative; user-select: none; } .risso-sb-item:hover { background: var(--acc10); color: var(--t2); } .risso-sb-item.active, .risso-sb-item.risso-active { color: var(--acc); border-left-color: var(--rsig); background: var(--acc10); } .risso-sb-item svg { width: 14px; height: 14px; flex-shrink: 0; } .risso-sb-label { font-size: 16px; font-weight: 400; opacity: 0; transition: opacity .16s; } .risso-sidebar.open .risso-sb-label { opacity: 1; } .risso-sb-badge { margin-left: auto; font-size: 16px; font-weight: 500; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; opacity: 0; transition: opacity .16s; } .risso-sidebar.open .risso-sb-badge { opacity: 1; } .risso-sb-badge-n { background: var(--acc10); color: var(--acc); border: 1px solid rgba(64,96,232,.18); } .risso-sb-badge-r { background: var(--rsig10); color: var(--rsig); border: 1px solid rgba(212,30,42,.18); animation: risso-blink .9s step-end infinite; } .risso-sb-lock { width: 9px; height: 9px; color: var(--t3); flex-shrink: 0; opacity: 0; transition: opacity .16s; } .risso-sidebar.open .risso-sb-lock { opacity: .5; } /* tooltip collapsed */ .risso-sb-item::after { content: attr(data-tip); position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%); background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 4px 10px; font-size: 15px; color: var(--t1); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s; z-index: 300; box-shadow: 0 4px 16px rgba(0,0,0,.35); } .risso-sidebar:not(.open) .risso-sb-item:hover::after { opacity: 1; } /* ════════════════════════════════════════════════════════════════ MAIN ════════════════════════════════════════════════════════════════ */ .risso-main { flex: 1; padding: 20px 22px 48px; min-width: 0; } /* ─── Page header ─── */ .risso-ph { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--b1); } .risso-pg-tag { font-size: 16px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } .risso-pg-tag::before { content: ''; width: 16px; height: 2px; background: var(--rsig); border-radius: 1px; flex-shrink: 0; } .risso-pg-title { font-family: var(--mono); font-size: 32px; font-weight: 700; font-style: italic; color: var(--num); letter-spacing: .01em; line-height: 1.05; } .risso-pg-title em { font-style: italic; color: var(--acc); } .risso-pg-sub { font-size: 16px; font-weight: 300; color: var(--t3); margin-top: 3px; } /* ════════════════════════════════════════════════════════════════ STAT CARDS + FILTRO — fila horizontal ════════════════════════════════════════════════════════════════ */ .risso-stats-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 14px; } /* grid de cards (ocupa o flex:1) */ .risso-stats-grid { display: grid; gap: 8px; flex: 1; } .risso-sg6 { grid-template-columns: repeat(6, 1fr); } .risso-sg5 { grid-template-columns: repeat(5, 1fr); } .risso-sg4 { grid-template-columns: repeat(4, 1fr); } /* ─── Botão Funil ─── */ .risso-filter-wrap { position: relative; flex-shrink: 0; } .risso-filter-btn { width: 42px; height: 100%; min-height: 78px; border-radius: var(--r-sm); border: 1px solid var(--b1); background: var(--bg2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--t3); transition: all .15s; } .risso-filter-btn:hover { border-color: var(--b2); color: var(--t2); } .risso-filter-btn.active { border-color: var(--acc); color: var(--acc); background: var(--acc10); } .risso-filter-btn svg { width: 15px; height: 15px; } .risso-filter-btn-label { font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } /* ponto vermelho = filtro ativo */ .risso-filter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rsig); display: none; position: absolute; top: 7px; right: 7px; } .risso-filter-btn.active .risso-filter-dot { display: block; } /* popover do filtro */ .risso-filter-pop { position: fixed; top: auto; right: auto; background: var(--bg1); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 14px; width: 260px; z-index: 200; box-shadow: 0 8px 28px rgba(0,0,0,.3); display: none; transition: background .25s; } .risso-filter-pop.open { display: block; } .risso-fp-label { font-size: 16px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--t3); margin-bottom: 5px; } .risso-fp-select { width: 100%; background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r-sm); padding: 5px 8px; color: var(--t1); font-size: 15px; font-family: var(--body); outline: none; margin-bottom: 8px; transition: border-color .13s; } .risso-fp-select:focus { border-color: var(--acc); } .risso-fp-select option { background: var(--bg2); } .risso-fp-actions { display: flex; gap: 6px; margin-top: 4px; } .risso-fp-apply { flex: 1; font-size: 15px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 5px; border-radius: var(--r-sm); border: none; background: var(--acc); color: #FFF; cursor: pointer; transition: opacity .13s; } .risso-fp-apply:hover { opacity: .85; } .risso-fp-clear { font-size: 15px; font-weight: 500; padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--b1); background: transparent; color: var(--t3); cursor: pointer; transition: all .13s; } .risso-fp-clear:hover { color: var(--rsig); border-color: rgba(212,30,42,.25); } /* ════════════════════════════════════════════════════════════════ STAT CARD — fundo sólido + quadrado ════════════════════════════════════════════════════════════════ */ .risso-sc { border-radius: var(--r-sm); padding: 10px 12px 8px; border: 1px solid rgba(0,0,0,.15); position: relative; overflow: hidden; cursor: pointer; transition: filter .15s, transform .13s; } .risso-sc:hover { filter: brightness(1.1); transform: translateY(-1px); } /* brilho decorativo no canto superior direito */ .risso-sc::after { content: ''; position: absolute; top: -18px; right: -18px; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; } .risso-sc-val { font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: #FFF; margin-bottom: 3px; } .risso-sc-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); } /* ─── Variantes de cor — escuro ─── */ .risso-sc-navy { background: var(--card-navy); } .risso-sc-green { background: var(--card-green); } .risso-sc-acc { background: var(--card-acc); } .risso-sc-amber { background: var(--card-amber); } .risso-sc-red { background: var(--card-red); animation: risso-sc-red .9s ease-in-out infinite; } .risso-sc-clay { background: var(--card-clay); } .risso-sc-wine { background: var(--card-wine); animation: risso-sc-wine .75s ease-in-out infinite; } @keyframes risso-sc-red { 0%,100%{opacity:1;box-shadow:none} 50%{opacity:.7;box-shadow:0 0 12px rgba(176,24,32,.45)} } @keyframes risso-sc-wine { 0%,100%{opacity:1;box-shadow:none} 50%{opacity:.65;box-shadow:0 0 12px rgba(136,32,104,.45)} } /* ════════════════════════════════════════════════════════════════ CARDS TOTALIZADORES — Peso, Cubado, NF, Frete ════════════════════════════════════════════════════════════════ */ .risso-sum-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; } .risso-sum-card { border-radius: var(--r-sm); padding: 12px 14px; border: 1px solid var(--b1); background: var(--bg2); position: relative; overflow: hidden; transition: all .2s; } .risso-sum-card:hover { border-color: var(--b2); } /* linha azul no topo */ .risso-sum-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--acc); opacity: .5; } .risso-sum-label { font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 3px; } .risso-sum-value { font-family: var(--mono); font-size: 25px; font-weight: 700; color: var(--num); letter-spacing: -.01em; line-height: 1; } .risso-sum-unit { font-size: 16px; color: var(--t3); margin-top: 2px; } /* ════════════════════════════════════════════════════════════════ CARD GENÉRICO ════════════════════════════════════════════════════════════════ */ .risso-card { border-radius: var(--r-sm); border: 1px solid var(--b1); background: var(--bg2); overflow: hidden; margin-bottom: 12px; transition: all .25s; } .risso-card-hd { background: var(--bg1); border-bottom: 1px solid var(--b1); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; transition: background .25s; } .risso-card-title { font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); display: flex; align-items: center; gap: 7px; } .risso-card-title-dash { width: 14px; height: 2px; background: var(--rsig); border-radius: 1px; flex-shrink: 0; } .risso-card-hd-right { display: flex; align-items: center; gap: 8px; } .risso-card-meta { font-size: 15px; color: var(--t3); } .risso-card-meta b { color: var(--acc); font-weight: 500; } /* ════════════════════════════════════════════════════════════════ MAPA (Leaflet placeholder) ════════════════════════════════════════════════════════════════ */ .risso-map-body { height: 250px; position: relative; overflow: hidden; background: var(--bg); transition: background .25s; } /* id="map" — Leaflet monta aqui */ #map { height: 250px; background: var(--bg); transition: background .25s; } .risso-map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--b0) 1px, transparent 1px), linear-gradient(90deg, var(--b0) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; } .risso-map-glow { position: absolute; top: 50%; left: 48%; transform: translate(-50%,-50%); width: 320px; height: 200px; background: radial-gradient(ellipse, rgba(30,45,138,.08) 0%, transparent 65%); pointer-events: none; } .risso-map-legend { position: absolute; bottom: 10px; right: 12px; z-index: 10; background: var(--bg1); border: 1px solid var(--b1); border-radius: var(--r-sm); padding: 7px 11px; display: flex; flex-direction: column; gap: 4px; transition: background .25s; } .risso-map-legend-item { display: flex; align-items: center; gap: 7px; font-size: 16px; color: var(--t2); } .risso-map-legend-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .risso-map-fs-btn { font-size: 15px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--b1); background: transparent; color: var(--t3); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .13s; } .risso-map-fs-btn:hover { border-color: var(--acc); color: var(--acc); } .risso-map-fs-btn svg { width: 9px; height: 9px; } /* ════════════════════════════════════════════════════════════════ LISTAS COM BADGES ════════════════════════════════════════════════════════════════ */ .risso-lcard { border-radius: var(--r-sm); border: 1px solid var(--b1); background: var(--bg2); overflow: hidden; transition: all .22s; } .risso-lcard-hd { background: var(--bg1); border-bottom: 1px solid var(--b1); padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; transition: background .22s; } .risso-lcard-title { font-size: 15px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--t2); } .risso-lcard-search { background: var(--bg3); border: 1px solid var(--b1); border-radius: 3px; padding: 2px 7px; color: var(--t1); font-size: 16px; font-family: var(--body); outline: none; width: 80px; transition: border-color .13s; } .risso-lcard-search:focus { border-color: var(--acc); } .risso-li { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--b0); cursor: pointer; transition: background .1s; } .risso-li:hover { background: var(--bg3); } .risso-li:last-child { border-bottom: none; } .risso-li-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .risso-li-index { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--t3); min-width: 16px; flex-shrink: 0; } .risso-li-name { font-size: 16px; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .risso-li-right { display: flex; align-items: center; gap: 3px; flex-shrink: 0; } .risso-li-peso { font-size: 15px; color: var(--t3); margin-right: 3px; } /* ─── BADGES TOTALIZADORES ─── */ .risso-bx { display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; padding: 1px 5px; border-radius: 3px; border: 1px solid; letter-spacing: .03em; } .risso-bx-g { background:var(--g10); color:var(--green); border-color:rgba(26,122,72,.2); } .risso-bx-a { background:var(--a10); color:var(--amber); border-color:rgba(200,120,0,.2); } .risso-bx-c { background:var(--c10); color:var(--clay); border-color:rgba(192,80,48,.2); } .risso-bx-r { background:var(--rsig10);color:var(--rsig); border-color:rgba(212,30,42,.2); animation:risso-blink 1s step-end infinite; } .risso-bx-w { background:var(--w10); color:var(--wine); border-color:rgba(160,48,128,.2); animation:risso-blink .8s step-end infinite; } .risso-bx-t { background:var(--acc10); color:var(--acc); border:1px solid rgba(64,96,232,.2); font-weight:600; } @keyframes risso-blink { 0%,100%{opacity:1} 50%{opacity:.18} } /* ════════════════════════════════════════════════════════════════ GRÁFICO DE BARRAS ════════════════════════════════════════════════════════════════ */ .risso-bar-wrap { padding: 12px 14px; } .risso-bc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .risso-bc-label { font-size: 16px; color: var(--t2); width: 116px; flex-shrink: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .risso-bc-track { flex: 1; height: 5px; background: var(--b0); border-radius: 3px; overflow: hidden; } .risso-bc-fill { height: 100%; border-radius: 3px; transition: width .45s cubic-bezier(.4,0,.2,1); } .risso-bc-value { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--t2); width: 26px; text-align: right; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════════ TABELA ════════════════════════════════════════════════════════════════ */ .risso-tbl-wrap { border-radius: var(--r-sm); overflow: hidden; overflow-x: auto; border: 1px solid var(--b1); margin-bottom: 12px; } .risso-tbl-hd { background: var(--bg1); border-bottom: 1px solid var(--b1); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; transition: background .25s; } .risso-tbl-title { font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); } .risso-tbl-search { background: var(--bg3); border: 1px solid var(--b1); border-radius: 3px; padding: 3px 8px; color: var(--t1); font-size: 16px; font-family: var(--body); outline: none; width: 130px; transition: border-color .13s; } .risso-tbl-search:focus { border-color: var(--acc); } .risso-tbl-actions { display: flex; gap: 5px; } .risso-tbl-btn { font-size: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; border: 1px solid var(--b1); cursor: pointer; background: transparent; color: var(--t3); transition: all .13s; } .risso-tbl-btn:hover { border-color: var(--acc); color: var(--acc); } .risso-table { width: 100%; border-collapse: collapse; } .risso-table thead tr { background: var(--bg1); border-bottom: 1px solid var(--b1); } .risso-table th { font-size: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); padding: 8px 11px; text-align: left; white-space: nowrap; } .risso-table td { padding: 8px 11px; font-size: 15px; color: var(--t2); border-bottom: 1px solid var(--b0); white-space: nowrap; } .risso-table tbody tr { transition: background .1s; } .risso-table tbody tr:hover td { background: var(--bg3); } .risso-table tbody tr:last-child td { border-bottom: none; } /* ─── Row accents por severidade (acento esquerdo) ─── */ .risso-tr-g td:first-child { border-left: 2px solid var(--green); } .risso-tr-a td:first-child { border-left: 2px solid var(--amber); } .risso-tr-c td:first-child { border-left: 2px solid var(--clay); } .risso-tr-r td:first-child { border-left: 2px solid var(--rsig); } .risso-tr-w td:first-child { border-left: 2px solid var(--wine); } .risso-td-cte { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--acc); cursor: pointer; letter-spacing: .02em; } .risso-td-cte:hover { text-decoration: underline; text-underline-offset: 3px; } .risso-td-hl { color: var(--num); font-weight: 500; } /* ─── Chip de dias ─── */ .risso-dc { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 500; padding: 2px 6px; border-radius: 3px; border: 1px solid; letter-spacing: .03em; } .risso-dc-g { background:var(--g10); color:var(--green); border-color:rgba(26,122,72,.2); } .risso-dc-a { background:var(--a10); color:var(--amber); border-color:rgba(200,120,0,.2); } .risso-dc-c { background:var(--c10); color:var(--clay); border-color:rgba(192,80,48,.2); } .risso-dc-r { background:var(--rsig10);color:var(--rsig); border-color:rgba(212,30,42,.2); animation:risso-blink 1s step-end infinite; } .risso-dc-w { background:var(--w10); color:var(--wine); border-color:rgba(160,48,128,.2); animation:risso-blink .8s step-end infinite; } .risso-dc-dot { width:3px; height:3px; border-radius:50%; background:currentColor; } /* ════════════════════════════════════════════════════════════════ GRIDS DE LAYOUT ════════════════════════════════════════════════════════════════ */ .risso-grid-21 { display: grid; grid-template-columns: 1fr 266px; gap: 12px; margin-bottom: 12px; } .risso-gc { display: flex; flex-direction: column; gap: 8px; } .risso-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } /* ════════════════════════════════════════════════════════════════ SEM EMBARQUE — nota ════════════════════════════════════════════════════════════════ */ .risso-se-note { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--b1); border-radius: var(--r-sm); margin-bottom: 12px; background: var(--bg2); } .risso-se-bar { width: 3px; height: 32px; background: var(--acc); border-radius: 1.5px; flex-shrink: 0; } .risso-se-text { font-size: 15px; color: var(--t3); line-height: 1.5; } /* ════════════════════════════════════════════════════════════════ TRANSBORDO — cards DE→PARA ════════════════════════════════════════════════════════════════ */ .risso-tb-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; } .risso-tbc { border-radius: var(--r-sm); border: 1px solid var(--b1); background: var(--bg2); overflow: hidden; cursor: pointer; transition: all .18s; } .risso-tbc:hover { border-color: var(--b2); transform: translateY(-1px); } .risso-tbc-top { background: var(--bg1); border-bottom: 1px solid var(--b1); padding: 8px 11px; position: relative; } /* linha vermelha decorativa — identidade */ .risso-tbc-top::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30%; height: 2px; background: var(--rsig); } .risso-tbc-route { font-family: var(--mono); font-size: 16px; font-weight: 700; font-style: italic; color: var(--acc); } .risso-tbc-body { padding: 10px 11px; } .risso-tbc-num { font-family: var(--mono); font-size: 32px; font-weight: 700; color: var(--num); line-height: 1; margin-bottom: 2px; } .risso-tbc-sub { font-size: 15px; color: var(--t3); margin-bottom: 7px; } .risso-tbc-badges { display: flex; gap: 3px; flex-wrap: wrap; } /* ════════════════════════════════════════════════════════════════ MODAL MOVIMENTOS (Transbordo) ════════════════════════════════════════════════════════════════ */ .risso-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 500; align-items: center; justify-content: center; padding: 24px; } .risso-modal-overlay.open { display: flex; } .risso-modal-box { background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 22px; width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; position: relative; transition: background .25s; } /* stripe vermelha → azul no topo */ .risso-modal-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rsig) 20%, var(--acc) 80%); } .risso-modal-hd { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .risso-modal-title { font-family: var(--mono); font-size: 23px; font-weight: 700; font-style: italic; color: var(--num); } .risso-modal-title em { font-style: italic; color: var(--acc); } .risso-modal-rota { font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-top: 2px; } .risso-modal-close { font-size: 16px; cursor: pointer; color: var(--t3); padding: 4px 8px; border: 1px solid var(--b1); border-radius: 3px; transition: all .13s; font-family: var(--body); } .risso-modal-close:hover { color: var(--rsig); border-color: rgba(212,30,42,.3); } .risso-mov-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--b0); } .risso-mov-item:last-child { border-bottom: none; } .risso-mov-date { font-size: 16px; color: var(--t3); flex-shrink: 0; width: 80px; margin-top: 1px; } .risso-mov-code { font-family: var(--mono); font-size: 15px; font-weight: 700; padding: 2px 8px; border-radius: 3px; flex-shrink: 0; } .risso-mov-occ { background:var(--acc10); color:var(--acc); border:1px solid rgba(64,96,232,.18); } .risso-mov-ent { background:var(--g10); color:var(--green); border:1px solid rgba(26,122,72,.18); } .risso-mov-pen { background:var(--c10); color:var(--clay); border:1px solid rgba(192,80,48,.18); } .risso-mov-desc { font-size: 15px; color: var(--t2); } /* ════════════════════════════════════════════════════════════════ RESPONSIVO ════════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .risso-sg6 { grid-template-columns: repeat(3,1fr); } .risso-sg5 { grid-template-columns: repeat(3,1fr); } .risso-sum-grid { grid-template-columns: repeat(2,1fr); } .risso-tb-grid { grid-template-columns: repeat(2,1fr); } .risso-grid-21 { grid-template-columns: 1fr; } } @media (max-width: 700px) { .risso-sg6, .risso-sg5 { grid-template-columns: repeat(2,1fr); } .risso-sum-grid { grid-template-columns: 1fr 1fr; } .risso-tb-grid { grid-template-columns: 1fr 1fr; } .risso-grid-21, .risso-grid-2 { grid-template-columns: 1fr; } .risso-main { padding: 12px 10px 36px; } .risso-filter-btn { width: 38px; } } /* ════════════════════════════════════════════════════════════════ UTILITÁRIOS ════════════════════════════════════════════════════════════════ */ .risso-mb-8 { margin-bottom: 8px; } .risso-mb-14 { margin-bottom: 14px; } .risso-hidden { display: none !important; } .risso-invisible { visibility: hidden; } /* placeholder de mapa quando Leaflet ainda não carregou */ .risso-map-placeholder { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .risso-map-placeholder-ico { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--b1); background: var(--bg1); display: flex; align-items: center; justify-content: center; } .risso-map-placeholder-ico svg { width: 16px; height: 16px; color: var(--acc); } .risso-map-placeholder-lbl { font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); } .risso-map-placeholder-tag { font-size: 16px; color: var(--t2); padding: 4px 12px; border: 1px solid var(--b1); border-radius: 3px; background: var(--bg1); }