/* ============================================================================ Tema Institucional 2026 — Ambiental / SSLA Estética: institucional + moderno + sério (verde-folha + azul institucional) Aplicado quando . Convive com data-bs-theme="light|dark" e sobrescreve tokens do Bootstrap 5.3 + alguns componentes (.navbar, .card, .btn, .badge, .table, .form-control, etc.) sem precisar reescrever as views EJS existentes. ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap"); /* ------------------------------------------------------------------------- Tokens — modo claro ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] { /* superfícies (papel claro com tom levemente cool→mint) */ --ti-bg: #eef2f5; --ti-bg-grad-a: #e7eff5; --ti-bg-grad-b: #eaf2ec; --ti-surface: #ffffff; --ti-surface-2: #f6f8fa; --ti-surface-3: #eef1f4; --ti-border: #e2e6ec; --ti-border-strong: #c9d0d9; --ti-border-soft: #ecf0f3; --ti-text: #0d1620; --ti-text-2: #3a4654; --ti-muted: #6c7886; --ti-muted-2: #95a0ac; --ti-primary: #1d4ed8; --ti-primary-rgb: 29, 78, 216; --ti-primary-hover: #1740b8; --ti-primary-soft: #e2eafc; --ti-primary-text: #0f2e7a; --ti-brand: #1f9050; --ti-brand-rgb: 31, 144, 80; --ti-brand-soft: #ddf2e4; --ti-accent: #b16016; --ti-accent-soft: #fbeacf; --ti-accent-text: #6c3a08; --ti-success: #137a3a; --ti-success-soft: #d8efde; --ti-warning: #9c6b0c; --ti-warning-soft: #fbe9c4; --ti-warning-bg: #fdf6e3; --ti-warning-border: #ecc785; --ti-danger: #b42318; --ti-danger-soft: #fadcd9; --ti-info: #1352a3; --ti-info-soft: #d8e6f4; --ti-info-bg: #eaf2fa; --ti-info-border: #b3d0eb; --ti-shadow-sm: 0 1px 1px rgba(13, 22, 32, 0.04), 0 0 0 1px rgba(13, 22, 32, 0.02); --ti-shadow-md: 0 1px 2px rgba(13, 22, 32, 0.06), 0 4px 14px rgba(13, 22, 32, 0.06); --ti-shadow-lg: 0 4px 10px rgba(13, 22, 32, 0.05), 0 24px 48px rgba(13, 22, 32, 0.10); --ti-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ti-font-serif: "Newsreader", Georgia, serif; --ti-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Substitui tokens do Bootstrap para que componentes existentes peguem o look */ --bs-body-bg: var(--ti-bg); --bs-body-color: var(--ti-text); --bs-body-color-rgb: 13, 22, 32; --bs-body-bg-rgb: 238, 242, 245; --bs-emphasis-color: var(--ti-text); --bs-emphasis-color-rgb: 13, 22, 32; --bs-secondary-color: var(--ti-text-2); --bs-secondary-color-rgb: 58, 70, 84; --bs-tertiary-color: var(--ti-muted); --bs-secondary-bg: var(--ti-surface-2); --bs-tertiary-bg: var(--ti-surface-3); --bs-primary: var(--ti-primary); --bs-primary-rgb: var(--ti-primary-rgb); --bs-primary-text-emphasis: var(--ti-primary-text); --bs-primary-bg-subtle: var(--ti-primary-soft); --bs-primary-border-subtle: color-mix(in srgb, var(--ti-primary) 24%, transparent); --bs-success: var(--ti-success); --bs-success-rgb: 19, 122, 58; --bs-success-text-emphasis: var(--ti-success); --bs-success-bg-subtle: var(--ti-success-soft); --bs-success-border-subtle: color-mix(in srgb, var(--ti-success) 24%, transparent); --bs-warning: var(--ti-warning); --bs-warning-rgb: 156, 107, 12; --bs-warning-text-emphasis: var(--ti-warning); --bs-warning-bg-subtle: var(--ti-warning-bg); --bs-warning-border-subtle: var(--ti-warning-border); --bs-danger: var(--ti-danger); --bs-danger-rgb: 180, 35, 24; --bs-danger-text-emphasis: var(--ti-danger); --bs-danger-bg-subtle: var(--ti-danger-soft); --bs-danger-border-subtle: color-mix(in srgb, var(--ti-danger) 24%, transparent); --bs-info: var(--ti-info); --bs-info-rgb: 19, 82, 163; --bs-info-text-emphasis: var(--ti-info); --bs-info-bg-subtle: var(--ti-info-soft); --bs-info-border-subtle: var(--ti-info-border); --bs-border-color: var(--ti-border); --bs-border-color-translucent: rgba(13, 22, 32, 0.10); --bs-link-color: var(--ti-primary); --bs-link-color-rgb: var(--ti-primary-rgb); --bs-link-hover-color: var(--ti-primary-hover); --bs-heading-color: var(--ti-text); --bs-card-bg: var(--ti-surface); --bs-card-border-color: var(--ti-border); --bs-card-cap-bg: var(--ti-surface-2); --bs-dropdown-bg: var(--ti-surface); --bs-dropdown-border-color: var(--ti-border); --bs-dropdown-link-color: var(--ti-text); --bs-dropdown-link-hover-bg: var(--ti-surface-3); --bs-dropdown-link-hover-color: var(--ti-text); --bs-dropdown-link-active-bg: var(--ti-primary-soft); --bs-dropdown-link-active-color: var(--ti-primary-text); --bs-modal-bg: var(--ti-surface); --bs-modal-border-color: var(--ti-border); --bs-modal-header-border-color: var(--ti-border); --bs-table-bg: var(--ti-surface); --bs-table-color: var(--ti-text); --bs-table-border-color: var(--ti-border-soft); --bs-table-striped-bg: var(--ti-surface-2); --bs-table-hover-bg: var(--ti-surface-2); --bs-form-control-bg: var(--ti-surface); --bs-form-control-color: var(--ti-text); --bs-popover-bg: var(--ti-surface); --bs-popover-border-color: var(--ti-border); --bs-tooltip-bg: var(--ti-text); --bs-tooltip-color: var(--ti-surface); /* Substitui também os gradientes do main.css clássico para o efeito institucional */ --app-gradient-1: radial-gradient(ellipse 60% 60% at 0% 30%, rgba(var(--ti-primary-rgb), 0.09), transparent 70%); --app-gradient-2: radial-gradient(ellipse 60% 60% at 100% 80%, rgba(var(--ti-brand-rgb), 0.11), transparent 70%); --app-surface: var(--ti-surface); --app-surface-strong: var(--ti-surface); --app-border-soft: var(--ti-border); --app-shadow-soft: var(--ti-shadow-md); --app-shadow-hover: var(--ti-shadow-lg); --app-card-gradient: none; } /* ------------------------------------------------------------------------- Tokens — modo escuro ------------------------------------------------------------------------- */ [data-theme-pack='institucional'][data-bs-theme='dark'] { --ti-bg: #0a121b; --ti-bg-grad-a: #0a1424; --ti-bg-grad-b: #0a1a14; --ti-surface: #0f1822; --ti-surface-2: #131e29; --ti-surface-3: #182431; --ti-border: #1f2c3a; --ti-border-strong: #2c3b4d; --ti-border-soft: #182230; --ti-text: #e6ecf3; --ti-text-2: #b8c2cf; --ti-muted: #7c8a99; --ti-muted-2: #5d6a78; --ti-primary: #5b8def; --ti-primary-rgb: 91, 141, 239; --ti-primary-hover: #7aa1f3; --ti-primary-soft: #112147; --ti-primary-text: #b3c8f7; --ti-brand: #34c879; --ti-brand-rgb: 52, 200, 121; --ti-brand-soft: #0e2c1c; --ti-accent: #e0a25b; --ti-accent-soft: #2b1f0d; --ti-accent-text: #f3cc8f; --ti-success: #4ade80; --ti-success-soft: #0f2b1a; --ti-warning: #fbbf24; --ti-warning-soft: #2a200c; --ti-warning-bg: #1d1809; --ti-warning-border: #5a4413; --ti-danger: #f87171; --ti-danger-soft: #2a1414; --ti-info: #5ea0ec; --ti-info-soft: #0e2238; --ti-info-bg: #0d1c2e; --ti-info-border: #20416c; --ti-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ti-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4); --ti-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 30px 60px rgba(0, 0, 0, 0.6); --bs-body-bg-rgb: 10, 18, 27; --bs-body-color-rgb: 230, 236, 243; --bs-success-rgb: 74, 222, 128; --bs-warning-rgb: 251, 191, 36; --bs-danger-rgb: 248, 113, 113; --bs-info-rgb: 94, 160, 236; --bs-border-color-translucent: rgba(255, 255, 255, 0.10); } /* ------------------------------------------------------------------------- Body & fonts ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] body { font-family: var(--ti-font-sans); font-size: 14px; line-height: 1.5; background-color: var(--ti-bg); background-image: var(--app-gradient-1), var(--app-gradient-2); background-repeat: no-repeat; background-attachment: fixed; background-position: top left, top right; background-size: 120% 120%, 140% 140%; -webkit-font-smoothing: antialiased; font-feature-settings: "cv05", "cv11", "ss01", "ss03"; color: var(--ti-text); } /* ------------------------------------------------------------------------- Scrollbars — acompanham o tema (Firefox + WebKit) ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] { scrollbar-color: var(--ti-border-strong) var(--ti-surface-2); scrollbar-width: thin; } [data-theme-pack='institucional'] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme-pack='institucional'] ::-webkit-scrollbar-track { background: var(--ti-surface-2); } [data-theme-pack='institucional'] ::-webkit-scrollbar-thumb { background: var(--ti-border-strong); border-radius: 6px; border: 2px solid var(--ti-surface-2); } [data-theme-pack='institucional'] ::-webkit-scrollbar-thumb:hover { background: var(--ti-muted); } [data-theme-pack='institucional'] ::-webkit-scrollbar-corner { background: var(--ti-surface-2); } [data-theme-pack='institucional'] h1, [data-theme-pack='institucional'] h2, [data-theme-pack='institucional'] h3 { font-family: var(--ti-font-serif); font-weight: 500; letter-spacing: -0.015em; color: var(--ti-text); } [data-theme-pack='institucional'] h1 { font-size: 1.875rem; line-height: 1.15; } [data-theme-pack='institucional'] h2 { font-size: 1.5rem; line-height: 1.2; } [data-theme-pack='institucional'] h3 { font-size: 1.25rem; line-height: 1.25; } [data-theme-pack='institucional'] code, [data-theme-pack='institucional'] kbd, [data-theme-pack='institucional'] pre, [data-theme-pack='institucional'] samp, [data-theme-pack='institucional'] .font-monospace { font-family: var(--ti-font-mono); } [data-theme-pack='institucional'] .text-muted, [data-theme-pack='institucional'] .text-body-secondary { color: var(--ti-muted) !important; } /* ------------------------------------------------------------------------- Navbar — sticky claro com brand verde-folha ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .navbar { background: color-mix(in srgb, var(--ti-surface) 92%, transparent) !important; border-bottom: 1px solid var(--ti-border); box-shadow: 0 1px 0 rgba(13, 22, 32, 0.02); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); color: var(--ti-text); } [data-theme-pack='institucional'] .navbar[data-bs-theme='dark'], [data-theme-pack='institucional'][data-bs-theme='dark'] .navbar { background: color-mix(in srgb, var(--ti-surface) 92%, transparent) !important; border-bottom: 1px solid var(--ti-border); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); color: var(--ti-text); } [data-theme-pack='institucional'] .navbar .navbar-brand, [data-theme-pack='institucional'] .navbar .navbar-brand:hover { color: var(--ti-text); font-family: var(--ti-font-sans); font-weight: 700; letter-spacing: -0.012em; } [data-theme-pack='institucional'] .navbar .navbar-brand .text-success { color: var(--ti-brand) !important; } [data-theme-pack='institucional'] .navbar .nav-link { color: var(--ti-text-2); font-weight: 500; border-radius: 0.5rem; padding: 0.4rem 0.75rem; transition: background-color 0.12s, color 0.12s, transform 0.05s; } [data-theme-pack='institucional'] .navbar .nav-link:hover, [data-theme-pack='institucional'] .navbar .nav-link:focus-visible { background-color: var(--ti-surface-3); color: var(--ti-text); transform: none; } [data-theme-pack='institucional'] .navbar .nav-link.active, [data-theme-pack='institucional'] .navbar .nav-link.show { background-color: var(--ti-primary-soft); color: var(--ti-primary-text); } [data-theme-pack='institucional'][data-bs-theme='dark'] .navbar .nav-link.active, [data-theme-pack='institucional'][data-bs-theme='dark'] .navbar .nav-link.show { color: var(--ti-primary); } [data-theme-pack='institucional'] .navbar .navbar-toggler { border-color: var(--ti-border); color: var(--ti-text); } [data-theme-pack='institucional'] .navbar .navbar-toggler-icon { filter: invert(0.15); } [data-theme-pack='institucional'][data-bs-theme='dark'] .navbar .navbar-toggler-icon { filter: invert(0.85); } /* botões do canto direito (Fiscalização, Mobile, GIS, Tema) */ [data-theme-pack='institucional'] .navbar .btn-outline-light, [data-theme-pack='institucional'] .navbar .btn-outline-warning, [data-theme-pack='institucional'] .navbar .btn-outline-info, [data-theme-pack='institucional'] .navbar .btn-outline-success { border-color: var(--ti-border-strong); background-color: var(--ti-surface); color: var(--ti-text-2); } [data-theme-pack='institucional'] .navbar .btn-outline-light:hover, [data-theme-pack='institucional'] .navbar .btn-outline-warning:hover, [data-theme-pack='institucional'] .navbar .btn-outline-info:hover, [data-theme-pack='institucional'] .navbar .btn-outline-success:hover { background-color: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .navbar .btn-outline-warning:hover { color: var(--ti-warning); } [data-theme-pack='institucional'] .navbar .btn-outline-info:hover { color: var(--ti-info); } [data-theme-pack='institucional'] .navbar .btn-outline-success:hover { color: var(--ti-brand); } /* mega-menu */ [data-theme-pack='institucional'] .mega-title { color: var(--ti-primary); border-bottom-color: var(--ti-primary); } [data-theme-pack='institucional'][data-bs-theme='dark'] .mega-title { color: var(--ti-primary); border-bottom-color: color-mix(in srgb, var(--ti-primary) 40%, transparent); } [data-theme-pack='institucional'] .mega-link { color: var(--ti-text); } [data-theme-pack='institucional'] .mega-link:hover, [data-theme-pack='institucional'] .mega-link.active { background: var(--ti-primary-soft); color: var(--ti-primary-text); } [data-theme-pack='institucional'][data-bs-theme='dark'] .mega-link:hover, [data-theme-pack='institucional'][data-bs-theme='dark'] .mega-link.active { color: var(--ti-primary); } /* ------------------------------------------------------------------------- Cards ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .card { background-color: var(--ti-surface); background-image: none; border: 1px solid var(--ti-border); border-radius: 0.75rem; box-shadow: var(--ti-shadow-sm); } [data-theme-pack='institucional'] .card-header, [data-theme-pack='institucional'] .card-header.bg-white, [data-theme-pack='institucional'] .card-header.bg-light { background: var(--ti-surface-2) !important; background-image: none !important; border-bottom: 1px solid var(--ti-border); color: var(--ti-text); } [data-theme-pack='institucional'] .dashboard .card { background-image: none; box-shadow: var(--ti-shadow-sm); border-radius: 0.75rem; } [data-theme-pack='institucional'] .dashboard .card:hover { transform: none; box-shadow: var(--ti-shadow-md); border-color: var(--ti-border-strong); } /* card title: serif para destacar */ [data-theme-pack='institucional'] .card-title { font-family: var(--ti-font-serif); font-weight: 500; letter-spacing: -0.01em; } /* ------------------------------------------------------------------------- Botões ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .btn { border-radius: 0.5rem; font-weight: 500; letter-spacing: 0; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.05s, box-shadow 0.2s; } [data-theme-pack='institucional'] .btn:active { transform: translateY(1px); } [data-theme-pack='institucional'] .btn-primary { background-color: var(--ti-primary); border-color: var(--ti-primary); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } [data-theme-pack='institucional'] .btn-primary:hover, [data-theme-pack='institucional'] .btn-primary:focus-visible { background-color: var(--ti-primary-hover); border-color: var(--ti-primary-hover); color: #fff; transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(var(--ti-primary-rgb), 0.18); } [data-theme-pack='institucional'][data-bs-theme='dark'] .btn-primary { background-color: #2563eb; border-color: #2563eb; color: #ffffff; font-weight: 600; } [data-theme-pack='institucional'][data-bs-theme='dark'] .btn-primary:hover, [data-theme-pack='institucional'][data-bs-theme='dark'] .btn-primary:focus-visible { background-color: #1d4ed8; border-color: #1d4ed8; color: #ffffff; } [data-theme-pack='institucional'] .btn-outline-primary { border-color: var(--ti-primary); color: var(--ti-primary); background-color: transparent; box-shadow: none; } [data-theme-pack='institucional'] .btn-outline-primary:hover, [data-theme-pack='institucional'] .btn-outline-primary:focus-visible { background-color: var(--ti-primary); border-color: var(--ti-primary); color: #fff; transform: none; } [data-theme-pack='institucional'] .btn-success { background-color: var(--ti-brand); border-color: var(--ti-brand); color: #fff; } [data-theme-pack='institucional'] .btn-success:hover { background-color: color-mix(in srgb, var(--ti-brand) 88%, #000); border-color: color-mix(in srgb, var(--ti-brand) 88%, #000); } [data-theme-pack='institucional'] .btn-outline-success { border-color: var(--ti-brand); color: var(--ti-brand); } [data-theme-pack='institucional'] .btn-outline-success:hover { background-color: var(--ti-brand); border-color: var(--ti-brand); color: #fff; } [data-theme-pack='institucional'] .btn-secondary, [data-theme-pack='institucional'] .btn-light { background-color: var(--ti-surface); border-color: var(--ti-border-strong); color: var(--ti-text); } [data-theme-pack='institucional'] .btn-secondary:hover, [data-theme-pack='institucional'] .btn-light:hover { background-color: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .btn-danger { background-color: var(--ti-danger); border-color: var(--ti-danger); color: #fff; } [data-theme-pack='institucional'] .btn-warning { background-color: var(--ti-warning); border-color: var(--ti-warning); color: #fff; } [data-theme-pack='institucional'] .btn-info { background-color: var(--ti-info); border-color: var(--ti-info); color: #fff; } /* ------------------------------------------------------------------------- Badges ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .badge { font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; padding: 0.25em 0.65em; } [data-theme-pack='institucional'] .badge.text-bg-primary, [data-theme-pack='institucional'] .badge.bg-primary { background-color: var(--ti-primary-soft) !important; color: var(--ti-primary-text) !important; border: 1px solid color-mix(in srgb, var(--ti-primary) 24%, transparent); } [data-theme-pack='institucional'] .badge.text-bg-success, [data-theme-pack='institucional'] .badge.bg-success { background-color: var(--ti-success-soft) !important; color: var(--ti-success) !important; border: 1px solid color-mix(in srgb, var(--ti-success) 24%, transparent); } [data-theme-pack='institucional'] .badge.text-bg-warning, [data-theme-pack='institucional'] .badge.bg-warning { background-color: var(--ti-warning-soft) !important; color: var(--ti-warning) !important; border: 1px solid color-mix(in srgb, var(--ti-warning) 28%, transparent); } [data-theme-pack='institucional'] .badge.text-bg-danger, [data-theme-pack='institucional'] .badge.bg-danger { background-color: var(--ti-danger-soft) !important; color: var(--ti-danger) !important; border: 1px solid color-mix(in srgb, var(--ti-danger) 24%, transparent); } [data-theme-pack='institucional'] .badge.text-bg-info, [data-theme-pack='institucional'] .badge.bg-info { background-color: var(--ti-info-soft) !important; color: var(--ti-info) !important; border: 1px solid color-mix(in srgb, var(--ti-info) 22%, transparent); } [data-theme-pack='institucional'] .badge.text-bg-secondary, [data-theme-pack='institucional'] .badge.bg-secondary { background-color: var(--ti-surface-3) !important; color: var(--ti-text-2) !important; border: 1px solid var(--ti-border); } [data-theme-pack='institucional'] .badge.text-bg-light, [data-theme-pack='institucional'] .badge.bg-light { background-color: var(--ti-surface-2) !important; color: var(--ti-text-2) !important; border: 1px solid var(--ti-border); } [data-theme-pack='institucional'] .badge.text-bg-dark, [data-theme-pack='institucional'] .badge.bg-dark { background-color: var(--ti-text) !important; color: var(--ti-surface) !important; } /* ------------------------------------------------------------------------- Forms / inputs ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .form-control, [data-theme-pack='institucional'] .form-select { background-color: var(--ti-surface); border-color: var(--ti-border-strong); color: var(--ti-text); border-radius: 0.5rem; transition: border-color 0.12s, box-shadow 0.12s; } [data-theme-pack='institucional'] .form-control:focus, [data-theme-pack='institucional'] .form-select:focus { border-color: var(--ti-primary); box-shadow: 0 0 0 3px var(--ti-primary-soft); } [data-theme-pack='institucional'] .form-control::placeholder { color: var(--ti-muted-2); } [data-theme-pack='institucional'] .form-label { color: var(--ti-text-2); font-weight: 500; font-size: 0.85rem; } [data-theme-pack='institucional'] .input-group-text { background-color: var(--ti-surface-2); border-color: var(--ti-border-strong); color: var(--ti-muted); } /* ------------------------------------------------------------------------- Tabelas ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .table { --bs-table-bg: var(--ti-surface); --bs-table-color: var(--ti-text); --bs-table-border-color: var(--ti-border-soft); margin-bottom: 0; } [data-theme-pack='institucional'] .table > thead > tr > th, [data-theme-pack='institucional'] .table > thead > tr > td { background-color: var(--ti-surface-2); color: var(--ti-muted); font-family: var(--ti-font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--ti-border); padding: 0.75rem 1rem; white-space: nowrap; } [data-theme-pack='institucional'] .table > tbody > tr > td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--ti-border-soft); vertical-align: middle; color: var(--ti-text); } [data-theme-pack='institucional'] .table > tbody > tr:hover > td { background-color: var(--ti-surface-2); } [data-theme-pack='institucional'] .table-bordered, [data-theme-pack='institucional'] .table-bordered > :not(caption) > * { border-color: var(--ti-border); } /* ------------------------------------------------------------------------- Listas, abas, paginação ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .nav-pills .nav-link { color: var(--ti-text-2); border-radius: 0.5rem; } [data-theme-pack='institucional'] .nav-pills .nav-link:hover { color: var(--ti-text); background-color: var(--ti-surface-3); } [data-theme-pack='institucional'] .nav-pills .nav-link.active, [data-theme-pack='institucional'] .nav-pills .show > .nav-link { background-color: var(--ti-primary); color: #fff; } [data-theme-pack='institucional'][data-bs-theme='dark'] .nav-pills .nav-link.active { color: #0a121b; } [data-theme-pack='institucional'] .nav-tabs { border-bottom-color: var(--ti-border); } [data-theme-pack='institucional'] .nav-tabs .nav-link { color: var(--ti-muted); border-color: transparent; border-radius: 0.5rem 0.5rem 0 0; } [data-theme-pack='institucional'] .nav-tabs .nav-link:hover { color: var(--ti-text); border-color: var(--ti-border) var(--ti-border) var(--ti-border); } [data-theme-pack='institucional'] .nav-tabs .nav-link.active { color: var(--ti-primary-text); background-color: var(--ti-surface); border-color: var(--ti-border) var(--ti-border) var(--ti-surface); } [data-theme-pack='institucional'][data-bs-theme='dark'] .nav-tabs .nav-link.active { color: var(--ti-primary); } [data-theme-pack='institucional'] .pagination .page-link { color: var(--ti-text-2); background-color: var(--ti-surface); border-color: var(--ti-border); } [data-theme-pack='institucional'] .pagination .page-link:hover { background-color: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .pagination .page-item.active .page-link { background-color: var(--ti-primary); border-color: var(--ti-primary); color: #fff; } [data-theme-pack='institucional'] .list-group-item { background-color: var(--ti-surface); border-color: var(--ti-border); color: var(--ti-text); } [data-theme-pack='institucional'] .list-group-item.active { background-color: var(--ti-primary); border-color: var(--ti-primary); color: #fff; } /* ------------------------------------------------------------------------- Dropdowns / menus ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .dropdown-menu { background-color: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: 0.625rem; box-shadow: var(--ti-shadow-lg); padding: 0.375rem; } [data-theme-pack='institucional'] .dropdown-item { color: var(--ti-text-2); border-radius: 0.375rem; padding: 0.5rem 0.625rem; font-size: 0.85rem; } [data-theme-pack='institucional'] .dropdown-item:hover, [data-theme-pack='institucional'] .dropdown-item:focus-visible { background-color: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .dropdown-item.active, [data-theme-pack='institucional'] .dropdown-item:active { background-color: var(--ti-primary-soft); color: var(--ti-primary-text); } [data-theme-pack='institucional'] .dropdown-divider { border-top-color: var(--ti-border); } [data-theme-pack='institucional'] .dropdown-header { color: var(--ti-muted); font-family: var(--ti-font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ------------------------------------------------------------------------- Alertas / modais / toasts ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .alert { border-radius: 0.625rem; border-width: 1px; padding: 0.875rem 1.125rem; } [data-theme-pack='institucional'] .alert-primary { background-color: var(--ti-info-bg); border-color: var(--ti-info-border); color: var(--ti-info); } [data-theme-pack='institucional'] .alert-success { background-color: var(--ti-success-soft); border-color: color-mix(in srgb, var(--ti-success) 30%, transparent); color: var(--ti-success); } [data-theme-pack='institucional'] .alert-warning { background-color: var(--ti-warning-bg); border-color: var(--ti-warning-border); color: var(--ti-warning); } [data-theme-pack='institucional'] .alert-danger { background-color: var(--ti-danger-soft); border-color: color-mix(in srgb, var(--ti-danger) 30%, transparent); color: var(--ti-danger); } [data-theme-pack='institucional'] .alert-info { background-color: var(--ti-info-bg); border-color: var(--ti-info-border); color: var(--ti-info); } [data-theme-pack='institucional'] .modal-content { background-color: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: 0.875rem; box-shadow: var(--ti-shadow-lg); } [data-theme-pack='institucional'] .modal-header { border-bottom: 1px solid var(--ti-border); padding: 1rem 1.25rem; } [data-theme-pack='institucional'] .modal-footer { border-top: 1px solid var(--ti-border); padding: 0.875rem 1.25rem; } [data-theme-pack='institucional'] .modal-title { font-family: var(--ti-font-serif); font-weight: 500; letter-spacing: -0.01em; } [data-theme-pack='institucional'] .toast { background-color: var(--ti-surface); border: 1px solid var(--ti-border); box-shadow: var(--ti-shadow-md); } [data-theme-pack='institucional'] .toast-header { background-color: var(--ti-surface-2); border-bottom: 1px solid var(--ti-border); } /* ------------------------------------------------------------------------- Progress, breadcrumb, footer ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .progress { background-color: var(--ti-surface-3); border-radius: 999px; } [data-theme-pack='institucional'] .progress-bar { background-color: var(--ti-primary); } [data-theme-pack='institucional'] .breadcrumb { background-color: transparent; font-family: var(--ti-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ti-muted); } [data-theme-pack='institucional'] .breadcrumb-item + .breadcrumb-item::before { color: var(--ti-muted-2); } [data-theme-pack='institucional'] .ssla-footer { background: linear-gradient(180deg, var(--ti-surface), color-mix(in srgb, var(--ti-surface) 70%, transparent)); border-top: 1px solid var(--ti-border); box-shadow: none; } [data-theme-pack='institucional'] .ssla-footer .text-muted, [data-theme-pack='institucional'] .ssla-footer .text-body-secondary { color: var(--ti-text-2) !important; } [data-theme-pack='institucional'] .ssla-footer a { color: var(--ti-text-2); } [data-theme-pack='institucional'] .ssla-footer a:hover { color: var(--ti-primary) !important; } /* ------------------------------------------------------------------------- Painéis customizados existentes (guidance, mobile-table-wrapper, etc.) ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .guidance-panel { border: 1px solid var(--ti-border); border-left: 4px solid var(--ti-primary); background: var(--ti-surface); box-shadow: var(--ti-shadow-sm); } [data-theme-pack='institucional'] .guidance-note { background: var(--ti-surface); border: 1px solid var(--ti-border); box-shadow: var(--ti-shadow-sm); } [data-theme-pack='institucional'] .guidance-note--warning { background-color: var(--ti-warning-bg); border: 1px solid var(--ti-warning-border); border-left: 4px solid var(--ti-warning); color: var(--ti-text); } [data-theme-pack='institucional'] .guidance-note--warning .small, [data-theme-pack='institucional'] .guidance-note--warning .fw-semibold { color: var(--ti-text); } [data-theme-pack='institucional'] .guidance-note--info { background-color: var(--ti-info-bg); border: 1px solid var(--ti-info-border); border-left: 4px solid var(--ti-info); color: var(--ti-text); } [data-theme-pack='institucional'] .guidance-note--success { background-color: var(--ti-success-soft); border: 1px solid color-mix(in srgb, var(--ti-success) 30%, transparent); border-left: 4px solid var(--ti-success); color: var(--ti-text); } [data-theme-pack='institucional'] .guidance-list li { background: var(--ti-surface-2); border: 1px dashed color-mix(in srgb, var(--ti-primary) 22%, transparent); box-shadow: none; } [data-theme-pack='institucional'] .guidance-list li[data-guidance-tone='success'] { background: var(--ti-success-soft); border-color: color-mix(in srgb, var(--ti-success) 30%, transparent); } [data-theme-pack='institucional'] .guidance-list li[data-guidance-tone='neutral'] { background: var(--ti-surface-3); border-color: var(--ti-border); } [data-theme-pack='institucional'] .mobile-table-wrapper { border-color: var(--ti-border); background-color: var(--ti-surface); box-shadow: var(--ti-shadow-sm); border-radius: 0.75rem; } [data-theme-pack='institucional'] .table-mobile-stack tbody tr { background-color: var(--ti-surface); border-color: var(--ti-border); box-shadow: var(--ti-shadow-sm); } [data-theme-pack='institucional'] .table-mobile-stack tbody td::before { color: var(--ti-muted); font-family: var(--ti-font-mono); letter-spacing: 0.06em; } /* dashboard cards with custom gradient — neutraliza no institucional */ [data-theme-pack='institucional'] .dashboard .card { background-image: none; } /* ------------------------------------------------------------------------- Marca / brand badges no header (versão, geo) ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .navbar-brand .badge.rounded-pill.text-bg-secondary { background-color: var(--ti-surface-3) !important; color: var(--ti-muted) !important; border: 1px solid var(--ti-border); font-family: var(--ti-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; } [data-theme-pack='institucional'] .navbar-brand .badge.rounded-pill.text-bg-info { background-color: var(--ti-brand-soft) !important; color: var(--ti-brand) !important; border: 1px solid color-mix(in srgb, var(--ti-brand) 30%, transparent); font-weight: 600; } /* ------------------------------------------------------------------------- Seletor de tema (componente próprio adicionado em index.ejs) ------------------------------------------------------------------------- */ .theme-switcher-toggle { display: inline-flex; align-items: center; gap: 0.4rem; } [data-theme-pack='institucional'] .theme-switcher-menu .form-check-label { font-size: 0.78rem; color: var(--ti-text-2); } [data-theme-pack='institucional'] .theme-switcher-menu .dropdown-header { padding-top: 0.4rem; } /* ------------------------------------------------------------------------- Acompanhamento — preserva contraste da linha de atraso ------------------------------------------------------------------------- */ [data-theme-pack='institucional'] .acompanhamento-overview .table-overdue-dark { --bs-table-color: #f8f9fa; --bs-table-bg: #400602; --bs-table-border-color: #5a0a05; } /* ------------------------------------------------------------------------- Login institucional — shell full-bleed inspirado no design 2026 ------------------------------------------------------------------------- */ .ssla-login-shell-body { overflow-x: hidden; } .ssla-login-main { padding: 0; min-width: 0; } .ssla-login-shell { --login-bg: var(--ti-bg, #eef2f5); --login-surface: var(--ti-surface, #ffffff); --login-surface-2: var(--ti-surface-2, #f6f8fa); --login-surface-3: var(--ti-surface-3, #eef1f4); --login-border: var(--ti-border, #e2e6ec); --login-border-strong: var(--ti-border-strong, #c9d0d9); --login-text: var(--ti-text, #0d1620); --login-text-2: var(--ti-text-2, #3a4654); --login-muted: var(--ti-muted, #6c7886); --login-primary: var(--ti-primary, #1d4ed8); --login-primary-hover: var(--ti-primary-hover, #1740b8); --login-brand: var(--ti-brand, #1f9050); --login-brand-rgb: var(--ti-brand-rgb, 31, 144, 80); --login-brand-soft: var(--ti-brand-soft, #ddf2e4); --login-accent: var(--ti-accent, #b16016); --login-shadow-sm: var(--ti-shadow-sm, 0 1px 1px rgba(13, 22, 32, 0.04), 0 0 0 1px rgba(13, 22, 32, 0.02)); --login-shadow-lg: var(--ti-shadow-lg, 0 4px 10px rgba(13, 22, 32, 0.05), 0 24px 48px rgba(13, 22, 32, 0.10)); position: relative; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; color: var(--login-text); background: var(--login-bg); } [data-bs-theme='dark'] .ssla-login-shell { --login-bg: var(--ti-bg, #0a121b); --login-surface: var(--ti-surface, #0f1822); --login-surface-2: var(--ti-surface-2, #131e29); --login-surface-3: var(--ti-surface-3, #182431); --login-border: var(--ti-border, #1f2c3a); --login-border-strong: var(--ti-border-strong, #2c3b4d); --login-text: var(--ti-text, #e6ecf3); --login-text-2: var(--ti-text-2, #b8c2cf); --login-muted: var(--ti-muted, #7c8a99); --login-primary: var(--ti-primary, #5b8def); --login-primary-hover: var(--ti-primary-hover, #7aa1f3); --login-brand: var(--ti-brand, #34c879); --login-brand-rgb: var(--ti-brand-rgb, 52, 200, 121); --login-brand-soft: var(--ti-brand-soft, #0e2c1c); --login-accent: var(--ti-accent, #e0a25b); } .ssla-login-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 54% 48% at 13% 31%, rgba(29, 78, 216, 0.11), transparent 72%), radial-gradient(ellipse 52% 46% at 86% 82%, rgba(var(--login-brand-rgb), 0.15), transparent 72%); } [data-bs-theme='dark'] .ssla-login-shell::before { background: radial-gradient(ellipse 54% 48% at 13% 31%, rgba(91, 141, 239, 0.22), transparent 72%), radial-gradient(ellipse 52% 46% at 86% 82%, rgba(var(--login-brand-rgb), 0.20), transparent 72%); } .ssla-login-bar { position: relative; z-index: 1; min-height: 56px; display: flex; align-items: center; gap: 1rem; padding: 0 14px; border-bottom: 1px solid var(--login-border); background: color-mix(in srgb, var(--login-surface) 94%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); } .ssla-login-brand, .ssla-login-links { display: flex; align-items: center; } .ssla-login-brand { min-width: 0; gap: 0.55rem; color: var(--login-text); text-decoration: none; } .ssla-login-brand:hover { color: var(--login-text); } .ssla-login-brand-icon { color: var(--login-brand); font-size: 1.05rem; } .ssla-login-brand-word { font-size: 1rem; font-weight: 700; line-height: 1; } .ssla-login-pill { display: inline-flex; align-items: center; min-height: 20px; border-radius: 999px; padding: 0 0.55rem; border: 1px solid var(--login-border); font-family: var(--ti-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.65rem; line-height: 1; text-transform: uppercase; } .ssla-login-pill-muted { color: var(--login-muted); background: var(--login-surface-3); } .ssla-login-pill-location { gap: 0.35rem; min-height: 22px; color: var(--login-brand); background: var(--login-brand-soft); border-color: color-mix(in srgb, var(--login-brand) 30%, transparent); font-family: var(--ti-font-sans, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: 0.72rem; font-weight: 700; text-transform: none; } .ssla-login-pill-location span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ssla-login-links { margin-left: auto; gap: 1.35rem; } .ssla-login-links a { color: var(--login-text); font-family: var(--ti-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; text-decoration: none; } .ssla-login-links a:hover, .ssla-login-links a:focus-visible { color: var(--login-primary); } .ssla-login-theme-button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--login-border); border-radius: 8px; color: var(--login-text-2); background: transparent; } .ssla-login-theme-button:hover, .ssla-login-theme-button:focus-visible { color: var(--login-primary); border-color: color-mix(in srgb, var(--login-primary) 45%, var(--login-border)); background: var(--login-surface-2); } .ssla-login-body { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1240px; min-height: calc(100vh - 56px); margin: 0 auto; padding: clamp(5rem, 16vh, 10rem) 32px 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 64px; align-items: start; } .ssla-login-side { max-width: 540px; min-width: 0; } .ssla-login-eyebrow { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.8rem; color: var(--login-brand); font-family: var(--ti-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.7rem; text-transform: uppercase; } .ssla-login-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; } .ssla-login-side h1 { max-width: 540px; margin: 0 0 1.25rem; color: var(--login-text); font-family: var(--ti-font-serif, Georgia, serif); font-size: 3.5rem; font-weight: 500; line-height: 1.04; letter-spacing: 0; } .ssla-login-side h1 em { color: var(--login-brand); font-style: italic; } .ssla-login-lead { max-width: 490px; margin: 0; color: var(--login-text-2); font-size: 0.95rem; line-height: 1.6; } .ssla-login-tips { max-width: 540px; margin-top: 1.8rem; padding: 1rem 1.15rem; border: 1px solid var(--login-border); border-radius: 12px; background: var(--login-surface); } .ssla-login-tips h2 { margin: 0 0 0.7rem; color: var(--login-muted); font-family: var(--ti-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.66rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0; } .ssla-login-tips ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; } .ssla-login-tips li { position: relative; padding-left: 1rem; color: var(--login-text-2); font-size: 0.82rem; line-height: 1.5; } .ssla-login-tips li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 5px; height: 5px; border-radius: 50%; background: var(--login-brand); } .ssla-login-tips strong { color: var(--login-text); font-weight: 700; } .ssla-login-security-line { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; margin: 1.55rem 0 0; color: var(--login-muted); font-family: var(--ti-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.66rem; text-transform: uppercase; } .ssla-login-card { width: 100%; max-width: 460px; justify-self: start; overflow: hidden; border: 1px solid var(--login-border); border-radius: 16px; background: var(--login-surface); box-shadow: var(--login-shadow-lg); } .ssla-login-tabs { display: flex; gap: 0.15rem; padding: 6px; border-bottom: 1px solid var(--login-border); background: var(--login-surface-2); } .ssla-login-tab { flex: 1 1 0; min-width: 0; min-height: 36px; border: 0; border-radius: 8px; color: var(--login-muted); background: transparent; font-size: 0.82rem; font-weight: 500; } .ssla-login-tab:hover, .ssla-login-tab:focus-visible { color: var(--login-text); } .ssla-login-tab.active { color: var(--login-text); background: var(--login-surface); box-shadow: var(--login-shadow-sm); } .ssla-login-tab-content { padding: 2rem 2.25rem; } .ssla-login-tab-content .alert { margin-bottom: 1rem; font-size: 0.88rem; } .ssla-login-card-title { margin: 0 0 0.45rem; color: var(--login-text); font-family: var(--ti-font-serif, Georgia, serif); font-size: 1.65rem; font-weight: 500; line-height: 1.15; letter-spacing: 0; } .ssla-login-subtitle { margin: 0 0 1.45rem; color: var(--login-muted); font-size: 0.84rem; line-height: 1.55; } .ssla-login-credential-hint { display: grid; gap: 0.3rem; margin-bottom: 1.35rem; padding: 0.8rem 0.9rem; border: 1px dashed var(--login-border-strong); border-radius: 10px; color: var(--login-text-2); background: var(--login-surface-2); font-size: 0.78rem; } .ssla-login-credential-hint h3, .ssla-login-credential-hint p { margin: 0; } .ssla-login-credential-hint h3 { color: var(--login-muted); font-family: var(--ti-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.63rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0; } .ssla-login-credential-hint code { color: var(--login-accent); font-weight: 700; } .ssla-login-form { display: grid; gap: 0.9rem; } .ssla-login-field { display: grid; gap: 0.35rem; } .ssla-login-field label { margin: 0; color: var(--login-muted); font-family: var(--ti-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0; } .ssla-login-field .form-control { min-height: 36px; border-color: var(--login-border-strong); border-radius: 8px; color: var(--login-text); background-color: var(--login-surface); font-size: 0.82rem; } .ssla-login-field .form-control::placeholder { color: var(--login-muted); } .ssla-login-field .form-control:focus { border-color: var(--login-primary); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--login-primary) 18%, transparent); } .ssla-login-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; margin-top: 0.35rem; border-radius: 8px; font-weight: 700; } .ssla-login-submit .fa-arrow-right { font-size: 0.85rem; } .ssla-login-form-links { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.15rem; font-size: 0.78rem; } .ssla-login-form-links a, .ssla-login-portal-link a { text-decoration: none; } .ssla-login-form-links a:first-child { color: var(--login-primary); } .ssla-login-form-links a:last-child { color: var(--login-muted); } .ssla-login-form-links a:hover, .ssla-login-portal-link a:hover, .ssla-login-form-links a:focus-visible, .ssla-login-portal-link a:focus-visible { text-decoration: underline; } .ssla-login-portal-link { padding-top: 0.3rem; text-align: center; font-size: 0.82rem; font-weight: 600; } .ssla-login-portal-link a { color: var(--login-brand); } @media (max-width: 991.98px) { .ssla-login-body { min-height: auto; grid-template-columns: 1fr; gap: 2rem; align-items: start; padding: 2.25rem 1.25rem 3rem; } .ssla-login-card { justify-self: stretch; max-width: 640px; margin: 0 auto; } .ssla-login-side { max-width: 640px; margin: 0 auto; } .ssla-login-side h1 { font-size: 2.7rem; } } @media (max-width: 575.98px) { .ssla-login-bar { min-height: 56px; padding: 0 0.75rem; } .ssla-login-brand { gap: 0.45rem; } .ssla-login-brand-word { font-size: 0.96rem; } .ssla-login-pill-muted { display: none; } .ssla-login-pill-location { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssla-login-links { gap: 0.55rem; } .ssla-login-links a { display: none; } .ssla-login-body { padding: 2rem 0.9rem 2.4rem; } .ssla-login-side h1 { font-size: 2.15rem; line-height: 1.08; } .ssla-login-lead { font-size: 0.9rem; } .ssla-login-tips { padding: 0.95rem; } .ssla-login-security-line { font-size: 0.62rem; } .ssla-login-card { border-radius: 14px; } .ssla-login-tab-content { padding: 1.55rem 1.25rem 1.65rem; } .ssla-login-card-title { font-size: 1.45rem; } } /* ------------------------------------------------------------------------- Landing pública — apresentação, contato e solicitação de demo ------------------------------------------------------------------------- */ .landing-page { margin: -1.5rem -0.75rem 0; color: var(--ti-text); background: var(--ti-bg); overflow-x: clip; } .landing-container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; } .landing-hero { position: relative; min-height: clamp(560px, 72vh, 690px); overflow: hidden; display: grid; align-items: center; background: #0d1620; } .landing-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .landing-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; filter: saturate(105%) contrast(101%); opacity: 0; transition: opacity 520ms ease-out; } .landing-hero-image img.is-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .landing-hero-image img { transition: none; } } .landing-hero-image-dark { display: none; } [data-bs-theme='dark'] .landing-hero-image-light { display: none; } [data-bs-theme='dark'] .landing-hero-image-dark { display: block; } .landing-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 10, 16, 0.92) 0%, rgba(5, 10, 16, 0.78) 44%, rgba(5, 10, 16, 0.22) 100%), linear-gradient(180deg, rgba(5, 10, 16, 0.18) 0%, rgba(5, 10, 16, 0.56) 100%); } [data-bs-theme='dark'] .landing-hero-shade { background: linear-gradient(90deg, rgba(4, 10, 15, 0.95) 0%, rgba(4, 10, 15, 0.82) 46%, rgba(4, 10, 15, 0.32) 100%), linear-gradient(180deg, rgba(4, 10, 15, 0.22) 0%, rgba(4, 10, 15, 0.66) 100%); } .landing-hero-inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 5rem 0; } .landing-hero-copy { max-width: 700px; } .landing-kicker, .landing-section-label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 28px; border-radius: 999px; padding: 0 0.75rem; font-family: var(--ti-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .landing-kicker { color: #ffffff; background: rgba(13, 95, 62, 0.82); border: 1px solid rgba(255, 255, 255, 0.34); } .landing-hero h1 { margin: 1.2rem 0 1rem; color: #ffffff; font-family: var(--ti-font-serif); font-size: clamp(4rem, 9vw, 7.4rem); font-weight: 600; line-height: 0.92; letter-spacing: 0; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.42); } .landing-hero-lead { max-width: 610px; margin: 0; color: #f8fafc; font-size: clamp(1.02rem, 1.6vw, 1.28rem); line-height: 1.62; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42); } .landing-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; } .landing-hero-actions .btn, .landing-submit { border-radius: 8px; font-weight: 700; } .landing-hero-actions .btn-primary, .landing-submit.btn-primary { background-color: #1d4ed8; border-color: #1d4ed8; color: #ffffff; } .landing-hero-actions .btn-primary:hover, .landing-hero-actions .btn-primary:focus-visible, .landing-submit.btn-primary:hover, .landing-submit.btn-primary:focus-visible { background-color: #1740b8; border-color: #1740b8; color: #ffffff; } .landing-hero-actions .btn-outline-light { color: #ffffff; border-color: rgba(255, 255, 255, 0.74); background: rgba(5, 10, 16, 0.18); } .landing-hero-actions .btn-outline-light:hover, .landing-hero-actions .btn-outline-light:focus-visible { color: #0d1620; border-color: #ffffff; background: #ffffff; } .landing-hero-actions .btn-light { color: #0d1620; background: #ffffff; border-color: #ffffff; } .landing-hero-actions .btn-light:hover, .landing-hero-actions .btn-light:focus-visible { color: #0d1620; background: #f8fafc; border-color: #f8fafc; } .landing-service-band { padding: 0.9rem 0; border-top: 1px solid var(--ti-border); border-bottom: 1px solid var(--ti-border); background: var(--ti-surface); } [data-bs-theme='dark'] .landing-service-band { background: color-mix(in srgb, var(--ti-surface) 82%, #000000); } .landing-service-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-left: 1px solid var(--ti-border); } .landing-service-link { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 44px; border-right: 1px solid var(--ti-border); color: var(--ti-text); font-weight: 700; text-decoration: none; } .landing-service-link:hover, .landing-service-link:focus-visible { color: var(--ti-primary); background: var(--ti-surface-2); } .landing-split { position: relative; padding: 5.2rem 0; background: var(--ti-bg); isolation: isolate; overflow: hidden; --mx: -400px; --my: -400px; } .landing-split-river { border-top: 1px solid var(--ti-border); border-bottom: 1px solid var(--ti-border); background: var(--ti-surface); } .landing-split > * { position: relative; z-index: 1; } .landing-split::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background-image: url('/images/landing/forest-aerial.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(2px) saturate(80%) brightness(1.1) contrast(0.85); -webkit-mask-image: radial-gradient(circle 320px at var(--mx) var(--my), rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.2) 65%, transparent 92%); mask-image: radial-gradient(circle 320px at var(--mx) var(--my), rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.2) 65%, transparent 92%); mix-blend-mode: multiply; transition: opacity 360ms ease-out; will-change: mask-image; } [data-bs-theme='dark'] .landing-split::before { filter: blur(2px) saturate(70%) brightness(0.32) contrast(0.95) hue-rotate(-10deg); mix-blend-mode: screen; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .landing-split.is-fx-active::before { opacity: 0.55; } [data-bs-theme='dark'] .landing-split.is-fx-active::before { opacity: 0.75; } } @media (prefers-reduced-motion: reduce), (hover: none) { .landing-split::before { display: none; } } .landing-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; } .landing-split-grid-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .landing-media { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--ti-border); border-radius: 8px; background: var(--ti-surface-2); min-height: 420px; height: 100%; display: block; } .landing-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.18); } .landing-media picture { display: block; width: 100%; height: 100%; } .landing-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .landing-copy-block { min-width: 0; } .landing-copy-block > h2, .landing-cta h2 { margin: 0.9rem 0 0; font-family: var(--ti-font-serif); font-size: clamp(2.15rem, 4vw, 3.55rem); font-weight: 600; line-height: 1.05; letter-spacing: 0; } .landing-copy-block > h2 { color: var(--ti-text); } .landing-section-text { max-width: 700px; margin: 1rem 0 0; color: var(--ti-text-2); font-size: 1.02rem; line-height: 1.65; } .landing-section-label { color: var(--ti-primary-text); background: var(--ti-primary-soft); border: 1px solid color-mix(in srgb, var(--ti-primary) 25%, transparent); } [data-bs-theme='dark'] .landing-section-label { color: #d8e6ff; } .landing-feature-list { display: grid; gap: 0; margin-top: 1.8rem; border-top: 1px solid var(--ti-border); } .landing-feature { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0.85rem; padding: 1rem 0; border-bottom: 1px solid var(--ti-border); } .landing-feature-icon, .landing-modal-label { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--ti-brand); background: var(--ti-brand-soft); } .landing-feature h3, .landing-step h3 { margin: 0; color: var(--ti-text); font-size: 1rem; font-weight: 800; letter-spacing: 0; } .landing-feature p, .landing-step p { margin: 0.45rem 0 0; color: var(--ti-text-2); line-height: 1.58; } .landing-step-list { display: grid; gap: 0; margin-top: 1.8rem; border-top: 1px solid var(--ti-border); } .landing-step { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--ti-border); } .landing-step > span { width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--ti-accent-text); background: var(--ti-accent-soft); font-weight: 800; } .landing-cta { position: relative; overflow: hidden; padding: 5rem 0; color: #ffffff; background: #08131d; } .landing-cta-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 10, 16, 0.92), rgba(5, 10, 16, 0.72)), url('/images/landing/river-detail.jpg') center / cover no-repeat; } .landing-cta-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; } .landing-cta h2 { max-width: 760px; color: #ffffff; } .landing-cta p { max-width: 720px; margin: 1rem 0 0; color: #e6edf5; line-height: 1.6; } .landing-section-label-inverse { color: #ffffff; background: rgba(31, 144, 80, 0.72); border-color: rgba(255, 255, 255, 0.32); } .landing-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .landing-cta-actions .btn { white-space: nowrap; } .landing-cta .btn-primary, .landing-cta .btn-success { color: #ffffff; } .landing-alert { grid-column: 1 / -1; max-width: 860px; border-radius: 8px; margin: 0; } .landing-modal .modal-content { border-radius: 8px; overflow: hidden; } .landing-modal { height: 100vh; } .landing-modal.modal .modal-dialog { min-height: calc(100vh - var(--bs-modal-margin) * 2); } .landing-modal .modal-header { align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; } .landing-modal .modal-title { color: var(--ti-text); font-family: var(--ti-font-serif); font-size: 1.6rem; line-height: 1.1; } .landing-modal-label { width: auto; height: auto; margin-bottom: 0.35rem; padding: 0.2rem 0.55rem; font-family: var(--ti-font-mono); font-size: 0.68rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--ti-primary-text); background: var(--ti-primary-soft); border: 1px solid color-mix(in srgb, var(--ti-primary) 25%, transparent); } .landing-form { display: grid; gap: 0.9rem; } .landing-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .landing-field { display: grid; gap: 0.35rem; min-width: 0; } .landing-field label { color: var(--ti-text-2); font-size: 0.82rem; font-weight: 800; } .landing-field .form-control { min-height: 42px; border-color: var(--ti-border-strong); border-radius: 8px; color: var(--ti-text); background-color: var(--ti-surface); } .landing-field textarea.form-control { min-height: 132px; resize: vertical; } .landing-field .form-control:focus { border-color: var(--ti-primary); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ti-primary) 18%, transparent); } .landing-submit { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; min-height: 44px; color: #ffffff; } .landing-demo-remote { display: grid; gap: 1rem; } .landing-demo-remote p { max-width: 620px; margin: 0; color: var(--ti-text-2); line-height: 1.6; } .landing-form-thanks { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 1.5rem 0.5rem 0.5rem; } .landing-form-thanks-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #ffffff; background: var(--ti-brand); font-size: 2rem; } .landing-form-thanks h3 { margin: 0; color: var(--ti-text); font-family: var(--ti-font-serif); font-size: 1.6rem; font-weight: 600; } .landing-form-thanks p { max-width: 480px; margin: 0; color: var(--ti-text-2); font-size: 1rem; line-height: 1.55; } .landing-form-thanks .landing-submit { width: auto; min-width: 180px; margin-top: 0.5rem; } .landing-iso-band { padding: 1rem 0; border-bottom: 1px solid var(--ti-border); background: var(--ti-bg); } [data-bs-theme='dark'] .landing-iso-band { background: color-mix(in srgb, var(--ti-bg) 88%, #000000); } .landing-iso-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.4rem; justify-content: center; } .landing-iso-eyebrow { color: var(--ti-muted); font-family: var(--ti-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .landing-iso-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0; padding: 0; list-style: none; } .landing-iso-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.7rem; border: 1px solid color-mix(in srgb, var(--ti-brand) 30%, var(--ti-border)); border-radius: 999px; background: color-mix(in srgb, var(--ti-brand) 8%, var(--ti-surface)); color: var(--ti-text); font-size: 0.82rem; line-height: 1.1; } [data-bs-theme='dark'] .landing-iso-badge { background: color-mix(in srgb, var(--ti-brand) 16%, transparent); } .landing-iso-num { color: var(--ti-brand); font-weight: 800; letter-spacing: 0.01em; } .landing-iso-text { color: var(--ti-text-2); } .exponencial-mark { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.55rem; border: 1px solid var(--ti-border); border-radius: 999px; color: var(--ti-text-2); background: color-mix(in srgb, var(--ti-surface) 70%, transparent); font-size: 0.78rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease; } .exponencial-mark:hover, .exponencial-mark:focus-visible { color: var(--ti-text); border-color: color-mix(in srgb, var(--ti-brand) 45%, var(--ti-border)); background: color-mix(in srgb, var(--ti-brand) 8%, var(--ti-surface)); text-decoration: none; } .exponencial-mark img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15)); } .exponencial-mark-footer { padding: 0.15rem 0.5rem; font-size: 0.74rem; } .exponencial-mark-footer img { width: 16px; height: 16px; } @media (max-width: 991.98px) { .landing-hero { min-height: 620px; } .landing-hero-shade { background: linear-gradient(90deg, rgba(5, 10, 16, 0.94) 0%, rgba(5, 10, 16, 0.84) 100%); } .landing-service-row, .landing-split-grid, .landing-split-grid-reverse, .landing-cta-inner { grid-template-columns: 1fr; } .landing-service-row { border-top: 1px solid var(--ti-border); border-left: 0; } .landing-service-link { border-right: 0; border-bottom: 1px solid var(--ti-border); } .landing-media { order: -1; min-height: 0; aspect-ratio: 16 / 10; } .landing-media img { height: 100%; } .landing-cta-actions { justify-content: flex-start; } } @media (max-width: 575.98px) { .landing-page { margin-left: -0.75rem; margin-right: -0.75rem; } .landing-container, .landing-hero-inner { width: min(100% - 1.4rem, 1180px); } .landing-hero { min-height: 600px; } .landing-hero h1 { font-size: clamp(3.45rem, 18vw, 4.6rem); } .landing-hero-actions .btn { width: 100%; } .landing-split, .landing-cta { padding: 3rem 0; } .landing-field-row { grid-template-columns: 1fr; } .landing-copy-block > h2, .landing-cta h2 { font-size: clamp(2rem, 12vw, 2.75rem); } } /* ============================================================================ COMPONENTES DO PROTÓTIPO — PORT FIEL Classes nativas do protótipo (não dependem de Bootstrap): .subbar, .banner, .attn-list, .tabs, .filterbar, .kpi, .protocol, .req, .row-actions, .icon-btn, .steps, .timeline, .dl, .doc, .chip, .topnav, .topsearch, .user-pill, .status-pill, .callout, .map-* Tudo escopado em [data-theme-pack='institucional']. ============================================================================ */ [data-theme-pack='institucional'] { --ti-topbar-h: 60px; --ti-row-h: 56px; --ti-pad-card: 22px; --ti-r-sm: 6px; --ti-r-md: 8px; --ti-r-lg: 12px; --ti-r-xl: 16px; } [data-theme-pack='institucional'][data-density='compact'] { --ti-row-h: 46px; --ti-pad-card: 16px; } [data-theme-pack='institucional'][data-density='cozy'] { --ti-row-h: 64px; --ti-pad-card: 28px; } /* === Page gradient backdrop (assinatura visual) ====================== */ [data-theme-pack='institucional'] .page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 0% 30%, color-mix(in srgb, var(--ti-primary) 9%, transparent), transparent 70%), radial-gradient(ellipse 60% 60% at 100% 80%, color-mix(in srgb, var(--ti-brand) 11%, transparent), transparent 70%), var(--ti-bg); } [data-theme-pack='institucional'][data-bs-theme='dark'] .page-bg { background: radial-gradient(ellipse 60% 60% at 0% 30%, color-mix(in srgb, var(--ti-primary) 18%, transparent), transparent 70%), radial-gradient(ellipse 60% 60% at 100% 80%, color-mix(in srgb, var(--ti-brand) 14%, transparent), transparent 70%), var(--ti-bg); } /* === Subbar (cabeçalho de página) =================================== */ [data-theme-pack='institucional'] .ti-subbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-bottom: 22px; flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-subbar > div:first-child { min-width: 0; flex: 1 1 460px; } [data-theme-pack='institucional'] .ti-subbar-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-subbar h1 { font-family: var(--ti-font-serif); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; margin: 0; line-height: 1.1; color: var(--ti-text); } [data-theme-pack='institucional'] .ti-subbar h1 em { font-style: italic; color: var(--ti-brand); } [data-theme-pack='institucional'] .ti-subbar .ti-sub { margin-top: 6px; color: var(--ti-muted); font-size: 13.5px; max-width: 720px; } [data-theme-pack='institucional'] .ti-subbar .ti-sub b, [data-theme-pack='institucional'] .ti-subbar .ti-sub strong { color: var(--ti-text); font-weight: 600; } [data-theme-pack='institucional'] .ti-subbar .ti-sub .ti-num { font-family: var(--ti-font-mono); font-feature-settings: 'tnum'; color: var(--ti-warning); font-weight: 600; } [data-theme-pack='institucional'] .ti-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-gap-2 { gap: 8px; } /* === Badges (próprias do tema, além do .badge Bootstrap) =========== */ [data-theme-pack='institucional'] .ti-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 2px 8px; height: 22px; border-radius: 999px; background: var(--ti-surface-3); color: var(--ti-text-2); border: 1px solid var(--ti-border); white-space: nowrap; letter-spacing: 0.01em; } [data-theme-pack='institucional'] .ti-badge .ti-pip { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } [data-theme-pack='institucional'] .ti-badge.success { background: var(--ti-success-soft); color: var(--ti-success); border-color: color-mix(in srgb, var(--ti-success) 24%, transparent); } [data-theme-pack='institucional'] .ti-badge.warning { background: var(--ti-warning-soft); color: var(--ti-warning); border-color: color-mix(in srgb, var(--ti-warning) 28%, transparent); } [data-theme-pack='institucional'] .ti-badge.danger { background: var(--ti-danger-soft); color: var(--ti-danger); border-color: color-mix(in srgb, var(--ti-danger) 24%, transparent); } [data-theme-pack='institucional'] .ti-badge.info { background: var(--ti-info-soft); color: var(--ti-info); border-color: color-mix(in srgb, var(--ti-info) 22%, transparent); } [data-theme-pack='institucional'] .ti-badge.primary { background: var(--ti-primary-soft); color: var(--ti-primary-text); border-color: color-mix(in srgb, var(--ti-primary) 24%, transparent); } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-badge.primary { color: var(--ti-primary); } [data-theme-pack='institucional'] .ti-badge.brand { background: var(--ti-brand-soft); color: var(--ti-brand); border-color: color-mix(in srgb, var(--ti-brand) 30%, transparent); } [data-theme-pack='institucional'] .ti-badge.accent { background: var(--ti-accent-soft); color: var(--ti-accent-text); border-color: color-mix(in srgb, var(--ti-accent) 36%, transparent); } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-badge.accent { color: var(--ti-accent); } [data-theme-pack='institucional'] .ti-badge.lg { height: 28px; padding: 0 12px; font-size: 12px; } /* === Banner (chamada lateral à largura toda) ======================== */ [data-theme-pack='institucional'] .ti-banner { border: 1px solid var(--ti-info-border); background: var(--ti-info-bg); border-radius: var(--ti-r-lg); padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; } [data-theme-pack='institucional'] .ti-banner-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-banner-head .ti-icon-bubble { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ti-info) 18%, transparent); color: var(--ti-info); display: grid; place-items: center; flex-shrink: 0; } [data-theme-pack='institucional'] .ti-banner-eyebrow { font-family: var(--ti-font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ti-info); } [data-theme-pack='institucional'] .ti-banner-title { font-size: 13.5px; font-weight: 600; } [data-theme-pack='institucional'] .ti-banner-actions { margin-left: auto; display: flex; gap: 8px; } [data-theme-pack='institucional'] .ti-banner.warning { border-color: var(--ti-warning-border); background: var(--ti-warning-bg); } [data-theme-pack='institucional'] .ti-banner.warning .ti-icon-bubble { background: color-mix(in srgb, var(--ti-warning) 18%, transparent); color: var(--ti-warning); } [data-theme-pack='institucional'] .ti-banner.warning .ti-banner-eyebrow { color: var(--ti-warning); } /* lista numerada de atenção dentro de banner */ [data-theme-pack='institucional'] .ti-attn-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ti-text-2); } [data-theme-pack='institucional'] .ti-attn-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 10px 6px 12px; border-left: 2px solid color-mix(in srgb, var(--ti-warning) 50%, transparent); background: color-mix(in srgb, var(--ti-warning) 5%, transparent); border-radius: 2px; } [data-theme-pack='institucional'] .ti-attn-list li b, [data-theme-pack='institucional'] .ti-attn-list li .ti-num { color: var(--ti-warning); font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--ti-font-mono); flex-shrink: 0; min-width: 18px; } [data-theme-pack='institucional'] .ti-attn-list li .ti-attn-body { flex: 1; min-width: 0; line-height: 1.45; } [data-theme-pack='institucional'] .ti-attn-list li .ti-when { margin-left: auto; font-family: var(--ti-font-mono); font-size: 11px; color: var(--ti-muted); white-space: nowrap; flex-shrink: 0; padding-left: 12px; } /* === Tabs segmented (controle de período) ============================ */ [data-theme-pack='institucional'] .ti-tabs { display: inline-flex; align-items: center; border: 1px solid var(--ti-border); background: var(--ti-surface); border-radius: 10px; padding: 3px; gap: 2px; } [data-theme-pack='institucional'] .ti-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ti-muted); cursor: pointer; user-select: none; white-space: nowrap; background: transparent; border: 0; text-decoration: none; } [data-theme-pack='institucional'] .ti-tab:hover { color: var(--ti-text); } [data-theme-pack='institucional'] .ti-tab.active { background: var(--ti-primary); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-tab.active { color: #0a121b; font-weight: 600; } [data-theme-pack='institucional'] .ti-tab .ti-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--ti-surface-3); color: var(--ti-muted); border-radius: 999px; font-family: var(--ti-font-mono); font-size: 10.5px; font-weight: 500; } [data-theme-pack='institucional'] .ti-tab.active .ti-count { background: rgba(255,255,255,0.22); color: #fff; } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-tab.active .ti-count { background: rgba(0,0,0,0.18); color: #0a121b; } /* === Filterbar ====================================================== */ [data-theme-pack='institucional'] .ti-filterbar { background: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: var(--ti-r-lg); padding: 14px 16px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; } [data-theme-pack='institucional'] .ti-filterbar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-filterbar-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr 1.6fr 1fr auto; gap: 12px; align-items: end; } @media (max-width: 991.98px) { [data-theme-pack='institucional'] .ti-filterbar-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px) { [data-theme-pack='institucional'] .ti-filterbar-grid { grid-template-columns: 1fr; } } [data-theme-pack='institucional'] .ti-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } [data-theme-pack='institucional'] .ti-field label { font-size: 11px; font-weight: 500; color: var(--ti-muted); font-family: var(--ti-font-mono); text-transform: uppercase; letter-spacing: 0.04em; } [data-theme-pack='institucional'] .ti-input, [data-theme-pack='institucional'] .ti-select { height: 36px; padding: 0 12px; border: 1px solid var(--ti-border-strong); background: var(--ti-surface); color: var(--ti-text); border-radius: 8px; font-family: inherit; font-size: 13px; outline: none; width: 100%; transition: border-color 0.12s, box-shadow 0.12s; } [data-theme-pack='institucional'] .ti-input.mono { font-family: var(--ti-font-mono); } [data-theme-pack='institucional'] .ti-input:focus, [data-theme-pack='institucional'] .ti-select:focus { border-color: var(--ti-primary); box-shadow: 0 0 0 3px var(--ti-primary-soft); } [data-theme-pack='institucional'] .ti-input::placeholder { color: var(--ti-muted-2); } /* chips de filtro ativo */ [data-theme-pack='institucional'] .ti-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: 999px; font-size: 12px; color: var(--ti-text-2); font-family: var(--ti-font-mono); } [data-theme-pack='institucional'] .ti-chip.active { background: var(--ti-primary); color: #fff; border-color: var(--ti-primary); } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-chip.active { color: #0a121b; } [data-theme-pack='institucional'] .ti-chip-x { color: var(--ti-muted); margin-left: 2px; cursor: pointer; opacity: 0.7; } [data-theme-pack='institucional'] .ti-chip-x:hover { opacity: 1; } [data-theme-pack='institucional'] .ti-chip.active .ti-chip-x { color: rgba(255,255,255,0.85); } /* === KPI tiles ====================================================== */ [data-theme-pack='institucional'] .ti-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 1199.98px) { [data-theme-pack='institucional'] .ti-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { [data-theme-pack='institucional'] .ti-kpi-grid { grid-template-columns: 1fr; } } [data-theme-pack='institucional'] .ti-kpi { position: relative; background: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: var(--ti-r-lg); padding: 18px 20px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.12s; } [data-theme-pack='institucional'] .ti-kpi:hover { border-color: var(--ti-border-strong); } [data-theme-pack='institucional'] .ti-kpi-head { display: flex; align-items: center; gap: 8px; color: var(--ti-muted); } [data-theme-pack='institucional'] .ti-kpi-icon { width: 14px; height: 14px; color: var(--ti-muted-2); } [data-theme-pack='institucional'] .ti-kpi-label { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; } [data-theme-pack='institucional'] .ti-kpi-value { font-family: var(--ti-font-serif); font-size: 36px; line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; font-feature-settings: 'tnum'; color: var(--ti-text); word-break: break-word; } [data-theme-pack='institucional'] .ti-kpi-value .ti-unit { font-family: var(--ti-font-sans); font-size: 14px; font-weight: 500; color: var(--ti-muted); margin-left: 4px; letter-spacing: 0; } [data-theme-pack='institucional'] .ti-kpi-secondary { font-size: 12px; color: var(--ti-text-2); display: flex; gap: 12px; flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-kpi-secondary > span { white-space: nowrap; } [data-theme-pack='institucional'] .ti-kpi-secondary b { font-family: var(--ti-font-mono); font-weight: 500; font-feature-settings: 'tnum'; } [data-theme-pack='institucional'] .ti-kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11.5px; color: var(--ti-muted); padding-top: 12px; border-top: 1px dashed var(--ti-border); flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-kpi-foot > span, [data-theme-pack='institucional'] .ti-kpi-foot > a { white-space: nowrap; } [data-theme-pack='institucional'] .ti-kpi-foot > a { margin-left: auto; color: var(--ti-primary); font-weight: 500; display: inline-flex; align-items: center; gap: 3px; text-decoration: none; } [data-theme-pack='institucional'] .ti-kpi-foot > a:hover { text-decoration: underline; } [data-theme-pack='institucional'] .ti-kpi-spark { position: absolute; bottom: 0; right: 0; width: 110px; height: 36px; opacity: 0.5; pointer-events: none; } [data-theme-pack='institucional'] .ti-kpi.alert { border-color: color-mix(in srgb, var(--ti-warning) 40%, transparent); } [data-theme-pack='institucional'] .ti-kpi.alert .ti-kpi-secondary { color: var(--ti-warning); } [data-theme-pack='institucional'] .ti-kpi.danger { border-color: color-mix(in srgb, var(--ti-danger) 35%, transparent); } [data-theme-pack='institucional'] .ti-kpi.danger .ti-kpi-secondary { color: var(--ti-danger); } /* === Topbar (estilo do protótipo, sobre o .navbar Bootstrap) ======= */ [data-theme-pack='institucional'] .ti-topbar { height: var(--ti-topbar-h); display: flex; align-items: center; padding: 0 16px; gap: 12px; } [data-theme-pack='institucional'] .ti-brand { display: flex; align-items: center; gap: 10px; } [data-theme-pack='institucional'] .ti-brand-leaf { width: 22px; height: 22px; flex-shrink: 0; color: var(--ti-brand); } [data-theme-pack='institucional'] .ti-brand-word { font-family: var(--ti-font-sans); font-size: 16px; font-weight: 700; letter-spacing: -0.012em; color: var(--ti-text); } [data-theme-pack='institucional'] .ti-brand-env { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--ti-surface-3); border: 1px solid var(--ti-border); font-family: var(--ti-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ti-muted); } [data-theme-pack='institucional'] .ti-brand-loc { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--ti-brand-soft); color: var(--ti-brand); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; } [data-theme-pack='institucional'] .ti-brand-loc::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ti-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ti-brand) 25%, transparent); } [data-theme-pack='institucional'] .ti-divider-v { width: 1px; height: 22px; background: var(--ti-border); } [data-theme-pack='institucional'] .ti-topnav { display: flex; gap: 2px; flex-shrink: 0; min-width: 0; } [data-theme-pack='institucional'] .ti-topbar-spacer { flex: 1; min-width: 0; } [data-theme-pack='institucional'] .ti-topnav-item { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ti-text-2); cursor: pointer; user-select: none; border: 1px solid transparent; white-space: nowrap; text-decoration: none; background: transparent; } [data-theme-pack='institucional'] .ti-topnav-item:hover { background: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .ti-topnav-item.active { background: var(--ti-primary-soft); color: var(--ti-primary-text); border-color: color-mix(in srgb, var(--ti-primary) 18%, transparent); } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-topnav-item.active { color: var(--ti-primary); } [data-theme-pack='institucional'] .ti-topnav-item .ti-caret { width: 10px; height: 10px; opacity: 0.5; } [data-theme-pack='institucional'] .ti-topbar-right { display: flex; align-items: center; gap: 6px; } /* topsearch */ [data-theme-pack='institucional'] .ti-topsearch { position: relative; } [data-theme-pack='institucional'] .ti-topsearch .ti-input { height: 36px; padding-left: 34px; width: 220px; background: var(--ti-surface-2); border-color: var(--ti-border); } @media (max-width: 1199.98px) { [data-theme-pack='institucional'] .ti-topsearch .ti-input { width: 160px; } } [data-theme-pack='institucional'] .ti-topsearch .ti-input:focus { background: var(--ti-surface); } [data-theme-pack='institucional'] .ti-topsearch .ti-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ti-muted); pointer-events: none; } [data-theme-pack='institucional'] .ti-topsearch .ti-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--ti-font-mono); font-size: 10px; color: var(--ti-muted); background: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: 4px; padding: 1px 6px; } /* user pill / avatar */ [data-theme-pack='institucional'] .ti-user-pill { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--ti-surface-2); border: 1px solid var(--ti-border); cursor: pointer; color: var(--ti-text); text-decoration: none; } [data-theme-pack='institucional'] .ti-user-pill:hover { background: var(--ti-surface-3); } [data-theme-pack='institucional'] .ti-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ti-primary); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-avatar { color: #0a121b; } [data-theme-pack='institucional'] img.ti-avatar-img { object-fit: cover; background: var(--ti-surface-3); padding: 0; } [data-theme-pack='institucional'] .ti-user-pill .ti-who { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } [data-theme-pack='institucional'] .ti-user-pill .ti-who-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 160px; white-space: nowrap; } [data-theme-pack='institucional'] .ti-user-pill .ti-who-role { font-size: 10.5px; color: var(--ti-muted); font-family: var(--ti-font-mono); letter-spacing: 0.03em; } [data-theme-pack='institucional'] .ti-user-pill.compact { padding: 0 6px 0 4px; gap: 4px; } /* icon-btn (botão só com ícone) */ [data-theme-pack='institucional'] .ti-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ti-text-2); position: relative; cursor: pointer; text-decoration: none; } [data-theme-pack='institucional'] .ti-icon-btn:hover { background: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .ti-icon-btn.outline { border-color: var(--ti-border); background: var(--ti-surface); } [data-theme-pack='institucional'] .ti-icon-btn.outline:hover { background: var(--ti-surface-3); } [data-theme-pack='institucional'] .ti-icon-btn .ti-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ti-danger); border: 2px solid var(--ti-surface); } /* === Botões próprios .ti-btn (versão protótipo) ==================== */ [data-theme-pack='institucional'] .ti-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--ti-border-strong); background: var(--ti-surface); color: var(--ti-text); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s, transform 0.05s; text-decoration: none; } [data-theme-pack='institucional'] .ti-btn:hover { background: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .ti-btn:active { transform: translateY(1px); } [data-theme-pack='institucional'] .ti-btn.primary { background: var(--ti-primary); border-color: var(--ti-primary); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-btn.primary { color: #0a121b; font-weight: 600; } [data-theme-pack='institucional'] .ti-btn.primary:hover { background: var(--ti-primary-hover); border-color: var(--ti-primary-hover); color: #fff; } [data-theme-pack='institucional'] .ti-btn.ghost { background: transparent; border-color: transparent; color: var(--ti-text-2); } [data-theme-pack='institucional'] .ti-btn.ghost:hover { background: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .ti-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; } [data-theme-pack='institucional'] .ti-btn.lg { height: 44px; padding: 0 22px; font-size: 14px; } [data-theme-pack='institucional'] .ti-btn.danger { color: var(--ti-danger); } [data-theme-pack='institucional'] .ti-btn.danger:hover { background: var(--ti-danger-soft); border-color: var(--ti-danger); color: var(--ti-danger); } /* === Tabela densa .ti-tbl ========================================== */ [data-theme-pack='institucional'] .ti-card { background: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: var(--ti-r-lg); box-shadow: var(--ti-shadow-sm); } [data-theme-pack='institucional'] .ti-card-head { padding: 14px var(--ti-pad-card); border-bottom: 1px solid var(--ti-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } [data-theme-pack='institucional'] .ti-card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; } [data-theme-pack='institucional'] .ti-card-eyebrow { font-family: var(--ti-font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ti-muted); text-transform: uppercase; } [data-theme-pack='institucional'] .ti-card-body { padding: var(--ti-pad-card); } [data-theme-pack='institucional'] .ti-card-body.flush { padding: 0; } [data-theme-pack='institucional'] .ti-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } [data-theme-pack='institucional'] .ti-tbl thead th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ti-muted); padding: 12px 18px; border-bottom: 1px solid var(--ti-border); background: var(--ti-surface-2); white-space: nowrap; font-family: var(--ti-font-mono); } [data-theme-pack='institucional'] .ti-tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--ti-border-soft); vertical-align: middle; color: var(--ti-text); } [data-theme-pack='institucional'] .ti-tbl tbody tr { cursor: pointer; transition: background 0.08s; } [data-theme-pack='institucional'] .ti-tbl tbody tr:hover { background: var(--ti-surface-2); } [data-theme-pack='institucional'] .ti-tbl tbody tr:last-child td { border-bottom: 0; } [data-theme-pack='institucional'] .ti-tbl .ti-t-mono { font-family: var(--ti-font-mono); font-feature-settings: 'tnum'; } /* protocol+req cells */ [data-theme-pack='institucional'] .ti-protocol { display: flex; flex-direction: column; gap: 6px; } [data-theme-pack='institucional'] .ti-protocol-num { font-family: var(--ti-font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; } [data-theme-pack='institucional'] .ti-protocol-meta { display: flex; gap: 4px; flex-wrap: wrap; } [data-theme-pack='institucional'] .ti-req { display: flex; flex-direction: column; gap: 2px; min-width: 0; } [data-theme-pack='institucional'] .ti-req-name { font-weight: 600; font-size: 13.5px; } [data-theme-pack='institucional'] .ti-req-meta { font-size: 12px; color: var(--ti-muted); font-family: var(--ti-font-mono); } [data-theme-pack='institucional'] .ti-req-meta.sans { font-family: var(--ti-font-sans); } [data-theme-pack='institucional'] .ti-row-actions { display: flex; gap: 4px; justify-content: flex-end; } [data-theme-pack='institucional'] .ti-row-actions .ti-icon-btn { width: 30px; height: 30px; border-radius: 6px; } [data-theme-pack='institucional'] .ti-row-actions .ti-icon-btn i { font-size: 12px; } /* === Status pill (detalhe de processo) ============================= */ [data-theme-pack='institucional'] .ti-status-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--ti-info-soft); color: var(--ti-info); font-size: 12.5px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--ti-info) 25%, transparent); } [data-theme-pack='institucional'] .ti-status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent); } /* === Steps (etapas horizontais) ==================================== */ [data-theme-pack='institucional'] .ti-steps { display: flex; gap: 4px; padding: 4px; background: var(--ti-surface-3); border-radius: var(--ti-r-lg); border: 1px solid var(--ti-border); overflow-x: auto; } [data-theme-pack='institucional'] .ti-step { flex: 1; position: relative; padding: 12px 14px; background: var(--ti-surface); border-radius: 8px; border: 1px solid transparent; min-width: 130px; } [data-theme-pack='institucional'] .ti-step.done { background: color-mix(in srgb, var(--ti-success) 8%, var(--ti-surface)); border-color: color-mix(in srgb, var(--ti-success) 25%, transparent); } [data-theme-pack='institucional'] .ti-step.current { background: var(--ti-surface); border-color: var(--ti-primary); box-shadow: 0 0 0 3px var(--ti-primary-soft); } [data-theme-pack='institucional'] .ti-step.future { opacity: 0.5; } [data-theme-pack='institucional'] .ti-step-head { display: flex; align-items: center; gap: 6px; font-family: var(--ti-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ti-muted); } [data-theme-pack='institucional'] .ti-step-head .ti-num { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ti-surface-3); font-weight: 600; } [data-theme-pack='institucional'] .ti-step.done .ti-step-head .ti-num { background: var(--ti-success); color: #fff; } [data-theme-pack='institucional'] .ti-step.current .ti-step-head .ti-num { background: var(--ti-primary); color: #fff; } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-step.current .ti-step-head .ti-num { color: #0a121b; } [data-theme-pack='institucional'] .ti-step-name { font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--ti-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme-pack='institucional'] .ti-step-by { font-size: 11px; color: var(--ti-muted); margin-top: 2px; font-family: var(--ti-font-mono); } /* === Timeline ====================================================== */ [data-theme-pack='institucional'] .ti-timeline { position: relative; padding-left: 26px; } [data-theme-pack='institucional'] .ti-timeline::before { content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 1px; background: var(--ti-border-strong); } [data-theme-pack='institucional'] .ti-tl-item { position: relative; padding-bottom: 22px; } [data-theme-pack='institucional'] .ti-tl-dot { position: absolute; left: -22px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ti-surface); border: 2px solid var(--ti-border-strong); } [data-theme-pack='institucional'] .ti-tl-dot.primary { background: var(--ti-primary); border-color: var(--ti-primary); } [data-theme-pack='institucional'] .ti-tl-dot.success { background: var(--ti-success); border-color: var(--ti-success); } [data-theme-pack='institucional'] .ti-tl-dot.warning { background: var(--ti-warning); border-color: var(--ti-warning); } [data-theme-pack='institucional'] .ti-tl-meta { display: flex; align-items: center; gap: 8px; font-family: var(--ti-font-mono); font-size: 10.5px; color: var(--ti-muted); letter-spacing: 0.04em; text-transform: uppercase; } [data-theme-pack='institucional'] .ti-tl-title { font-size: 13.5px; font-weight: 600; margin-top: 4px; } [data-theme-pack='institucional'] .ti-tl-body { font-size: 13px; color: var(--ti-text-2); margin-top: 5px; line-height: 1.6; } [data-theme-pack='institucional'] .ti-tl-attach { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px 4px 8px; border: 1px solid var(--ti-border); background: var(--ti-surface-2); border-radius: 6px; font-size: 12px; font-family: var(--ti-font-mono); color: var(--ti-text-2); } /* === Definition list (dados do requerente) ========================= */ [data-theme-pack='institucional'] .ti-dl { display: grid; grid-template-columns: 150px 1fr; row-gap: 11px; column-gap: 18px; font-size: 13.5px; } [data-theme-pack='institucional'] .ti-dl dt { color: var(--ti-muted); font-family: var(--ti-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; align-self: center; } [data-theme-pack='institucional'] .ti-dl dd { margin: 0; color: var(--ti-text); word-break: break-word; } [data-theme-pack='institucional'] .ti-dl dd.mono { font-family: var(--ti-font-mono); font-size: 12.5px; } /* === Documento de licença (preview com QR) ========================= */ [data-theme-pack='institucional'] .ti-doc { background: #fcfbf6; border: 1px solid var(--ti-border); border-radius: var(--ti-r-lg); padding: 44px 52px; position: relative; color: #0e1820; box-shadow: var(--ti-shadow-sm); } [data-theme-pack='institucional'][data-bs-theme='dark'] .ti-doc { background: var(--ti-surface); color: var(--ti-text); } [data-theme-pack='institucional'] .ti-doc::before { content: ''; position: absolute; inset: 14px; border: 1px solid var(--ti-border); border-radius: 6px; pointer-events: none; } [data-theme-pack='institucional'] .ti-doc-eyebrow { font-family: var(--ti-font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ti-muted); text-align: center; } [data-theme-pack='institucional'] .ti-doc-title { font-family: var(--ti-font-serif); font-size: 28px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; margin: 8px 0 6px; } [data-theme-pack='institucional'] .ti-doc-num { text-align: center; font-family: var(--ti-font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ti-muted); } [data-theme-pack='institucional'] .ti-doc-body { margin-top: 28px; font-family: var(--ti-font-serif); font-size: 15px; line-height: 1.85; } [data-theme-pack='institucional'] .ti-doc-body p { margin: 0 0 12px; } [data-theme-pack='institucional'] .ti-doc-body em { color: var(--ti-primary); font-style: normal; font-weight: 600; } [data-theme-pack='institucional'] .ti-doc-foot { margin-top: 30px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: end; } [data-theme-pack='institucional'] .ti-sig-line { border-top: 1px solid var(--ti-border-strong); padding-top: 8px; font-family: var(--ti-font-serif); font-size: 13px; } [data-theme-pack='institucional'] .ti-sig-line small { display: block; font-family: var(--ti-font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ti-muted); margin-top: 4px; } [data-theme-pack='institucional'] .ti-qr { width: 96px; height: 96px; background: #fff; padding: 5px; border: 1px solid var(--ti-border); border-radius: 6px; } /* === Sparkline SVG inline =========================================== Importante: NÃO setar width/height aqui — quem dimensiona é .ti-kpi-spark (110x36 absoluto no canto inferior direito). Setar 100%/100% faria o SVG ocupar a card inteira por causa do position:absolute do pai. */ [data-theme-pack='institucional'] .ti-spark-svg { stroke: var(--ti-primary); fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; display: block; } [data-theme-pack='institucional'] .ti-spark-svg.brand { stroke: var(--ti-brand); } [data-theme-pack='institucional'] .ti-spark-svg.warning { stroke: var(--ti-warning); } [data-theme-pack='institucional'] .ti-spark-svg.accent { stroke: var(--ti-accent); } /* ============================================================================ OVERRIDE NAVBAR — converte .navbar Bootstrap no ti-topbar do protótipo ============================================================================ */ /* Elementos só visíveis no pack institucional (.ti-pack-only) */ [data-theme-pack='classico'] .ti-pack-only { display: none !important; } [data-theme-pack='institucional'] .navbar { height: var(--ti-topbar-h); min-height: var(--ti-topbar-h); padding-top: 0; padding-bottom: 0; background: color-mix(in srgb, var(--ti-surface) 92%, transparent) !important; background-image: none !important; border-bottom: 1px solid var(--ti-border); box-shadow: 0 1px 0 rgba(13, 22, 32, 0.02); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); } [data-theme-pack='institucional'] .navbar .container-fluid { padding-left: 16px; padding-right: 16px; gap: 12px; } [data-theme-pack='institucional'] .navbar-brand { margin-right: 0; padding-top: 0; padding-bottom: 0; gap: 10px !important; display: flex; align-items: center; } [data-theme-pack='institucional'] .navbar-brand .text-success { color: var(--ti-brand) !important; } [data-theme-pack='institucional'] .navbar-brand .badge.rounded-pill.text-bg-secondary { height: 20px; padding: 0 8px; display: inline-flex; align-items: center; background-color: var(--ti-surface-3) !important; color: var(--ti-muted) !important; border: 1px solid var(--ti-border); font-family: var(--ti-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } [data-theme-pack='institucional'] .navbar-brand .badge.rounded-pill.text-bg-info { height: 22px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; background-color: var(--ti-brand-soft) !important; color: var(--ti-brand) !important; border: 1px solid color-mix(in srgb, var(--ti-brand) 30%, transparent) !important; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; } [data-theme-pack='institucional'] .navbar-brand .badge.rounded-pill.text-bg-info::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ti-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ti-brand) 25%, transparent); } /* nav items como ti-topnav-item */ [data-theme-pack='institucional'] .navbar-nav { gap: 2px; } [data-theme-pack='institucional'] .navbar .nav-item { margin: 0; } [data-theme-pack='institucional'] .navbar .nav-link { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px !important; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ti-text-2); border: 1px solid transparent; white-space: nowrap; } [data-theme-pack='institucional'] .navbar .nav-link i { margin-right: 0 !important; opacity: 0.9; font-size: 14px; } [data-theme-pack='institucional'] .navbar .nav-link:hover { background-color: var(--ti-surface-3); color: var(--ti-text); } [data-theme-pack='institucional'] .navbar .nav-link.active, [data-theme-pack='institucional'] .navbar .nav-link.show { background-color: var(--ti-primary-soft); color: var(--ti-primary-text); border-color: color-mix(in srgb, var(--ti-primary) 18%, transparent); } [data-theme-pack='institucional'][data-bs-theme='dark'] .navbar .nav-link.active { color: var(--ti-primary); } [data-theme-pack='institucional'] .navbar .nav-link.dropdown-toggle::after { margin-left: 4px; opacity: 0.5; border-top-width: 4px; border-right-width: 4px; border-left-width: 4px; } /* botões right-side com aparência de ti-icon-btn */ [data-theme-pack='institucional'] .navbar-actions { gap: 6px !important; } [data-theme-pack='institucional'] .navbar .btn-outline-warning, [data-theme-pack='institucional'] .navbar .btn-outline-info, [data-theme-pack='institucional'] .navbar .btn-outline-success { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--ti-border); background: var(--ti-surface); color: var(--ti-text-2); } [data-theme-pack='institucional'] .navbar .btn-outline-warning:hover { background: var(--ti-warning-soft); color: var(--ti-warning); border-color: color-mix(in srgb, var(--ti-warning) 30%, transparent); } [data-theme-pack='institucional'] .navbar .btn-outline-info:hover { background: var(--ti-info-soft); color: var(--ti-info); border-color: color-mix(in srgb, var(--ti-info) 30%, transparent); } [data-theme-pack='institucional'] .navbar .btn-outline-success:hover { background: var(--ti-brand-soft); color: var(--ti-brand); border-color: color-mix(in srgb, var(--ti-brand) 30%, transparent); } [data-theme-pack='institucional'] .navbar .btn-outline-warning.active, [data-theme-pack='institucional'] .navbar .btn-outline-info.active, [data-theme-pack='institucional'] .navbar .btn-outline-success.active { background: var(--ti-primary-soft); color: var(--ti-primary-text); border-color: color-mix(in srgb, var(--ti-primary) 24%, transparent); } /* o theme-switcher pill no topbar */ [data-theme-pack='institucional'] .theme-switcher-toggle { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ti-border); background: var(--ti-surface); color: var(--ti-text-2); display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; } [data-theme-pack='institucional'] .theme-switcher-toggle:hover { background: var(--ti-surface-3); color: var(--ti-text); } /* navbar-toggler */ [data-theme-pack='institucional'] .navbar-toggler { border-color: var(--ti-border-strong); color: var(--ti-text); background: var(--ti-surface); } /* a topsearch dentro do navbar (ti-topsearch.ti-pack-only) */ [data-theme-pack='institucional'] .navbar .ti-topsearch { margin-right: 4px; } [data-theme-pack='institucional'] .navbar .ti-topsearch .ti-input { width: 260px; max-width: 30vw; } @media (max-width: 1199.98px) { [data-theme-pack='institucional'] .navbar .ti-topsearch .ti-input { width: 200px; } } /* assegura que avatar dentro de user pill mantém círculo cheio */ [data-theme-pack='institucional'] .navbar .ti-user-pill { padding: 0 6px 0 4px; } /* esconder o seletor de tema "auto-shown" do ts-classic na navbar inst quando label muito longo */ [data-theme-pack='institucional'] .theme-switcher-toggle [data-theme-switcher-label] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* mobile: empilha topnav verticalmente abaixo do brand (Bootstrap collapse já faz) */ @media (max-width: 991.98px) { [data-theme-pack='institucional'] .navbar { height: auto; min-height: var(--ti-topbar-h); } [data-theme-pack='institucional'] .navbar .navbar-collapse { background: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: 10px; margin-top: 8px; padding: 10px; } [data-theme-pack='institucional'] .navbar .ti-topsearch .ti-input { width: 100%; } [data-theme-pack='institucional'] .navbar .ti-topsearch { width: 100%; } }