com position:fixed/z-index negativo (que em alguns navegadores pode ficar atrás do background-color do próprio body/html e nunca aparecer). */ body { margin: 0; padding: 0; background-color: var(--db-verde-escuro); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; color: var(--db-texto); font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; overflow-x: hidden; } /* ---------- HEADER ---------- */ .db-header { background: linear-gradient(90deg, rgba(10, 31, 18, 0.55) 0%, rgba(22, 64, 31, 0.48) 55%, rgba(29, 82, 40, 0.48) 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-left: 6px solid var(--db-laranja); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); padding: 26px 24px; } .db-header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 16px; } .db-logo { height: 72px; width: 72px; flex-shrink: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); } .db-header-titles { display: flex; flex-direction: column; flex: 1; min-width: 0; } .db-header-eyebrow { font-size: 10.5px; letter-spacing: 1px; color: #a8d9b5; font-weight: 600; } .db-header-titles h1 { margin: 2px 0; font-size: 20px; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; text-transform: uppercase; } .db-header-subtitle { font-size: 11.5px; color: var(--db-texto-suave); } .db-header-meta { font-size: 11.5px; color: var(--db-texto-suave); white-space: nowrap; display: flex; align-items: center; gap: 6px; } .db-header-meta strong { color: #ffffff; } .db-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--db-verde-destaque); box-shadow: 0 0 6px var(--db-verde-destaque); display: inline-block; } /* ---------- LAYOUT ---------- */ .db-container { max-width: 1400px; margin: 20px auto; padding: 0 20px 40px; display: flex; flex-direction: column; gap: 18px; } .db-card { background: var(--db-card-bg); border: 1px solid var(--db-borda); border-radius: 10px; padding: 18px 20px; backdrop-filter: blur(4px); } .db-card-title { margin: 0 0 14px; font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; color: #cfe8d6; font-weight: 700; } .db-chart-hint { margin: -10px 0 14px; font-size: 10.5px; color: var(--db-texto-suave); } .db-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .db-card-title-row .db-card-title { margin-bottom: 0; } /* ---------- FILTROS ---------- */ .db-btn-clear { background: transparent; border: 1px solid var(--db-borda); color: var(--db-texto-suave); font-size: 11.5px; padding: 5px 12px; border-radius: 6px; cursor: pointer; } .db-btn-clear:hover { color: #fff; border-color: var(--db-verde-destaque); } .db-filters-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .db-filter-field { display: flex; flex-direction: column; gap: 4px; } .db-filter-field label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--db-texto-suave); } .db-filter-field select { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--db-borda); color: var(--db-texto); padding: 7px 8px; border-radius: 6px; font-size: 12.5px; } .db-filter-field select:focus { outline: 1px solid var(--db-verde-destaque); } /* o