/* ========================================================================= Portal da Transparência — folha de estilo pública As cores vêm de CSS custom properties injetadas pelo tema (admin). Toda decisão visual serve à clareza, credibilidade e acessibilidade. ========================================================================= */ :root { /* Fallbacks — sobrescritos pelo bloco de tema injetado no . */ --cor-primaria: #0B5FA5; --cor-secundaria: #0A7C5A; --cor-destaque: #C2410C; --cor-fundo: #F7F9FC; --cor-texto: #1A2433; --cor-link: #0B5FA5; --branco: #ffffff; --cinza-50: #f8fafc; --cinza-100: #f1f5f9; --cinza-200: #e2e8f0; --cinza-300: #cbd5e1; --cinza-500: #64748b; --cinza-600: #475569; --cinza-700: #334155; --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06); --sombra-md: 0 4px 12px rgba(15, 23, 42, .10); --raio: 10px; --raio-sm: 6px; --largura: 1180px; --fonte: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; --escala-fonte: 1; } * { box-sizing: border-box; } html { font-size: calc(100% * var(--escala-fonte)); scroll-behavior: smooth; } body { margin: 0; font-family: var(--fonte); color: var(--cor-texto); background: var(--cor-fundo); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--cor-link); } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.25; color: var(--cor-texto); } .container { max-width: var(--largura); margin: 0 auto; padding: 0 20px; } /* Largura do conteúdo — configurável no painel (boxed | total) */ body.largura-total .container { max-width: 100%; } @media (min-width: 1500px) { body.largura-total .container { padding-left: 40px; padding-right: 40px; } } /* --------------------------- Acessibilidade base ------------------------ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--cor-primaria); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--raio-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------- Topbar --------------------------------- */ .topbar { background: var(--cor-texto); color: #fff; font-size: .82rem; } .topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 12px; flex-wrap: wrap; } .topbar a { color: #fff; text-decoration: none; opacity: .9; } .topbar a:hover { opacity: 1; text-decoration: underline; } .topbar-links { display: flex; gap: 18px; align-items: center; } /* ------------------------------- Header --------------------------------- */ .site-header { background: var(--branco); border-bottom: 1px solid var(--cinza-200); box-shadow: var(--sombra); } .site-header .container { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cor-texto); } .brand-logo { width: 48px; height: 48px; border-radius: var(--raio-sm); flex: none; background: var(--cor-primaria); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; } .brand-logo--img { background: transparent; padding: 0; width: auto; max-width: 200px; height: 48px; object-fit: contain; border-radius: 4px; } .brand-nome { font-weight: 700; font-size: 1.05rem; line-height: 1.15; } .brand-sub { font-size: .78rem; color: var(--cinza-500); } .header-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* Busca no cabeçalho — grupo input + botão coeso */ .busca-header { display: flex; align-items: stretch; width: 320px; max-width: 42vw; } .busca-header input[type="search"] { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--cinza-300); border-right: none; border-radius: var(--raio-sm) 0 0 var(--raio-sm); font-size: .9rem; font-family: inherit; color: var(--cor-texto); background: #fff; } .busca-header input[type="search"]::placeholder { color: var(--cinza-500); } .busca-header input[type="search"]:focus { outline: none; border-color: var(--cor-primaria); z-index: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 22%, transparent); } .busca-header button { height: 40px; padding: 0 16px; border: none; cursor: pointer; border-radius: 0 var(--raio-sm) var(--raio-sm) 0; background: var(--cor-primaria); color: #fff; font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .busca-header button:hover { filter: brightness(1.08); } /* ------------------------- Seletor de unidade --------------------------- */ .unit-selector { position: relative; } .unit-selector__btn { display: flex; align-items: center; gap: 10px; cursor: pointer; background: var(--cor-primaria); color: #fff; border: none; padding: 10px 16px; border-radius: var(--raio-sm); font-size: .92rem; font-weight: 600; max-width: 340px; } .unit-selector__btn:hover { filter: brightness(1.08); } .unit-selector__btn .caret { margin-left: auto; } .unit-selector__panel { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: 90vw; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra-md); z-index: 60; padding: 12px; max-height: 70vh; overflow: auto; } .unit-selector__panel[hidden] { display: none; } .unit-selector__search { width: 100%; padding: 10px 12px; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); margin-bottom: 10px; font-size: .9rem; } .unit-group__title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-500); margin: 12px 6px 4px; font-weight: 700; } .unit-option { display: block; padding: 9px 12px; border-radius: var(--raio-sm); text-decoration: none; color: var(--cor-texto); font-size: .92rem; } .unit-option:hover, .unit-option:focus { background: var(--cinza-100); text-decoration: none; } .unit-option[aria-current="true"] { background: color-mix(in srgb, var(--cor-primaria) 12%, #fff); font-weight: 600; } /* --------------------------------- Nav ---------------------------------- */ .mainnav { background: var(--cor-primaria); } .mainnav .container { display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; } .mainnav a, .mainnav .navitem__btn { color: #fff; text-decoration: none; padding: 12px 14px; font-size: .9rem; font-weight: 500; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .mainnav a:hover, .mainnav .navitem__btn:hover, .mainnav a[aria-current="page"] { background: rgba(255,255,255,.15); text-decoration: none; } .navitem { position: relative; } .navitem__menu { position: absolute; left: 0; top: 100%; min-width: 260px; background: #fff; border: 1px solid var(--cinza-200); border-radius: 0 0 var(--raio-sm) var(--raio-sm); box-shadow: var(--sombra-md); z-index: 50; padding: 6px; } .navitem__menu[hidden] { display: none; } .navitem__menu a { color: var(--cor-texto); display: block; padding: 10px 12px; border-radius: var(--raio-sm); } .navitem__menu a:hover { background: var(--cinza-100); } .nav-toggle { display: none; } /* ------------------------- Layout com sidebar --------------------------- */ .layout-lateral { display: flex; gap: 26px; align-items: flex-start; padding-top: 28px; padding-bottom: 48px; } .layout-lateral__main { flex: 1; min-width: 0; } .layout-lateral .layout-lateral__main > .container { max-width: none; padding: 0; } .sidebar { width: 270px; flex: none; position: sticky; top: 16px; } .sidebar-toggle { display: none; width: 100%; margin-bottom: 10px; background: var(--cor-primaria); color: #fff; border: none; } .sidebar-menu { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .sidebar-link { display: block; padding: 10px 12px; border-radius: var(--raio-sm); text-decoration: none; color: var(--cor-texto); font-size: .92rem; font-weight: 500; } .sidebar-link:hover { background: var(--cinza-100); text-decoration: none; } .sidebar-link[aria-current="page"] { background: color-mix(in srgb, var(--cor-primaria) 12%, #fff); color: var(--cor-primaria); font-weight: 700; } .sidebar-group { margin: 4px 0; } .sidebar-group__title { display: block; padding: 10px 12px 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-500); font-weight: 700; text-decoration: none; } a.sidebar-group__title:hover { color: var(--cor-primaria); } .sidebar-group ul { list-style: none; margin: 0; padding: 0; } .sidebar-link--sub { padding-left: 22px; font-size: .88rem; font-weight: 400; border-left: 2px solid var(--cinza-200); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; margin-left: 8px; } .sidebar-link--sub[aria-current="page"] { border-left-color: var(--cor-primaria); } .sidebar-group:has(.sidebar-link[aria-current="page"]) .sidebar-group__title { color: var(--cor-primaria); } /* ----------------------------- Breadcrumb ------------------------------- */ .breadcrumb { background: var(--cinza-100); border-bottom: 1px solid var(--cinza-200); font-size: .85rem; } .breadcrumb .container { padding-top: 10px; padding-bottom: 10px; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; align-items: center; } .breadcrumb li::after { content: "›"; margin-left: 6px; color: var(--cinza-500); } .breadcrumb li:last-child::after { content: ""; } .breadcrumb a { text-decoration: none; color: var(--cor-link); } .breadcrumb [aria-current="page"] { color: var(--cinza-600); font-weight: 600; } /* ------------------------------ Conteúdo -------------------------------- */ main { min-height: 55vh; padding: 28px 0 48px; } .page-title { font-size: 1.7rem; margin: 0 0 6px; } .page-lead { color: var(--cinza-600); margin: 0 0 22px; max-width: 70ch; } .section-meta { font-size: .82rem; color: var(--cinza-500); margin-bottom: 18px; } .card { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px; } .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Atalhos / cards de seção */ .shortcut { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); transition: transform .12s ease, box-shadow .12s ease; } .shortcut:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); text-decoration: none; } .shortcut__icon { width: 44px; height: 44px; border-radius: var(--raio-sm); background: color-mix(in srgb, var(--cor-primaria) 12%, #fff); color: var(--cor-primaria); display: grid; place-items: center; flex: none; } .shortcut__title { font-weight: 700; margin: 0 0 2px; } .shortcut__desc { font-size: .84rem; color: var(--cinza-500); margin: 0; } /* Selo de camada (OSS / Unidade) */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .badge-oss { background: color-mix(in srgb, var(--cor-secundaria) 15%, #fff); color: var(--cor-secundaria); } .badge-unidade { background: color-mix(in srgb, var(--cor-primaria) 12%, #fff); color: var(--cor-primaria); } .badge-aberto { background: #dcfce7; color: #166534; } .badge-encerrado { background: #f1f5f9; color: #475569; } .badge-vigente { background: #dbeafe; color: #1e40af; } .badge-suspenso, .badge-em_analise, .badge-prorrogada { background: #fef3c7; color: #92400e; } /* --------------------------------- Tabelas ------------------------------ */ .tabela-wrap { overflow-x: auto; border: 1px solid var(--cinza-200); border-radius: var(--raio); background: #fff; } table.dados { width: 100%; border-collapse: collapse; font-size: .9rem; } table.dados caption { text-align: left; padding: 14px 16px; font-weight: 600; } table.dados th, table.dados td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--cinza-200); vertical-align: top; } table.dados thead th { background: var(--cinza-100); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cinza-600); white-space: nowrap; } table.dados thead th a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; } table.dados tbody tr:hover { background: var(--cinza-50); } .num { text-align: right; font-variant-numeric: tabular-nums; } /* Ações de documentos do contrato + modal de aditivos */ .doc-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .btn-aditivos { background: color-mix(in srgb, var(--cor-secundaria) 12%, #fff); color: var(--cor-secundaria); border-color: color-mix(in srgb, var(--cor-secundaria) 30%, #fff); } .btn-aditivos:hover { background: color-mix(in srgb, var(--cor-secundaria) 20%, #fff); text-decoration: none; } dialog.dialog { padding: 0; border: none; border-radius: var(--raio); width: 680px; max-width: 94vw; box-shadow: var(--sombra-md); color: var(--cor-texto); background: #fff; } dialog.dialog::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(1px); } .dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cinza-200); } .dialog__head h3 { margin: 0; font-size: 1.05rem; } .dialog__close { background: none; border: none; font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--cinza-500); padding: 4px 8px; border-radius: var(--raio-sm); } .dialog__close:hover { background: var(--cinza-100); color: var(--cor-texto); } .dialog__body { padding: 18px 20px; } .dialog__body table.dados { font-size: .86rem; } .dialog__foot { padding: 12px 20px; border-top: 1px solid var(--cinza-200); display: flex; justify-content: flex-end; } /* Filtros */ .filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; } .filtros label { display: flex; flex-direction: column; font-size: .78rem; color: var(--cinza-600); gap: 4px; font-weight: 600; } .filtros input, .filtros select { padding: 9px 11px; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); font-size: .9rem; min-width: 160px; } /* Botões */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--raio-sm); font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--cor-primaria); color: #fff; } .btn-primary:hover { filter: brightness(1.08); text-decoration: none; } .btn-ghost { background: #fff; color: var(--cor-primaria); border-color: var(--cinza-300); } .btn-ghost:hover { background: var(--cinza-100); text-decoration: none; } .btn-sm { padding: 6px 11px; font-size: .8rem; } .btn-export { background: var(--cor-secundaria); color: #fff; } .btn-export:hover { filter: brightness(1.08); text-decoration: none; } .acoes-tabela { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 8px; flex-wrap: wrap; } .export-group { display: flex; gap: 8px; } /* Ações em células de tabela — botões alinhados e de largura uniforme */ .cell-acoes { display: inline-flex; flex-direction: column; gap: 6px; align-items: stretch; } .cell-acoes .btn { justify-content: center; } /* Estado vazio */ .vazio { text-align: center; padding: 48px 24px; color: var(--cinza-500); background: #fff; border: 1px dashed var(--cinza-300); border-radius: var(--raio); } .vazio strong { display: block; color: var(--cor-texto); margin-bottom: 6px; font-size: 1.05rem; } /* Paginação */ .paginacao { display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } .paginacao a, .paginacao span { padding: 8px 13px; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); text-decoration: none; font-size: .85rem; background: #fff; } .paginacao .ativo { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); } .paginacao .desativado { color: var(--cinza-300); } /* Institucional */ .info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .info-list li { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--cinza-100); } .info-list dt, .info-list .rotulo { font-weight: 600; color: var(--cinza-600); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { background: var(--cinza-100); border-radius: 999px; padding: 4px 12px; font-size: .82rem; } /* Formulários (e-SIC) */ .form-grid { display: grid; gap: 16px; } .form-grid .campo { display: flex; flex-direction: column; gap: 6px; } .form-grid label { font-weight: 600; font-size: .9rem; } .form-grid input, .form-grid select, .form-grid textarea { padding: 11px 13px; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); font-size: .95rem; font-family: inherit; } .form-grid textarea { min-height: 130px; resize: vertical; } .ajuda { font-size: .8rem; color: var(--cinza-500); } .aviso-lgpd { background: color-mix(in srgb, var(--cor-secundaria) 8%, #fff); border: 1px solid color-mix(in srgb, var(--cor-secundaria) 30%, #fff); border-radius: var(--raio-sm); padding: 14px 16px; font-size: .86rem; } .erro { color: #b91c1c; font-size: .82rem; } .alerta-sucesso { background: #dcfce7; border: 1px solid #86efac; color: #166534; padding: 16px; border-radius: var(--raio); margin-bottom: 20px; } .protocolo-box { background: var(--cor-texto); color: #fff; padding: 20px; border-radius: var(--raio); text-align: center; } .protocolo-box strong { font-size: 1.6rem; letter-spacing: .08em; display: block; margin-top: 6px; } /* ------------------------------- Footer --------------------------------- */ .site-footer { background: var(--cor-texto); color: #cbd5e1; margin-top: 40px; padding: 36px 0 24px; font-size: .88rem; } .site-footer a { color: #fff; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; } .site-footer h3 { color: #fff; font-size: .95rem; margin: 0 0 12px; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 26px; padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: #94a3b8; } /* --------------------- Painel de acessibilidade ------------------------- */ .a11y-fab { position: fixed; right: 18px; bottom: 18px; z-index: 200; width: 54px; height: 54px; border-radius: 50%; background: var(--cor-primaria); color: #fff; border: 3px solid #fff; box-shadow: var(--sombra-md); cursor: pointer; font-size: 1.5rem; display: grid; place-items: center; } .a11y-panel { position: fixed; right: 18px; bottom: 84px; z-index: 200; width: 320px; max-width: 92vw; background: #fff; color: var(--cor-texto); border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra-md); padding: 18px; } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { font-size: 1rem; margin: 0 0 12px; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); background: #fff; cursor: pointer; font-size: .74rem; text-align: center; color: var(--cor-texto); } .a11y-btn:hover { background: var(--cinza-100); } .a11y-btn[aria-pressed="true"] { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); } .a11y-btn .ico { font-size: 1.2rem; } .a11y-reset { grid-column: 1 / -1; margin-top: 6px; } /* ============ Estados de acessibilidade (aplicados em ) =========== */ html.a11y-fonte-1 { --escala-fonte: 1.15; } html.a11y-fonte-2 { --escala-fonte: 1.3; } html.a11y-fonte-3 { --escala-fonte: 1.5; } html.a11y-contraste, html.a11y-contraste body { --cor-fundo: #000; --cor-texto: #fff; --cor-link: #ffff00; --cinza-100: #1a1a1a; --cinza-200: #333; --cinza-50: #111; --cinza-500: #ddd; --cinza-600: #eee; --branco: #000; background: #000 !important; color: #fff !important; } html.a11y-contraste .card, html.a11y-contraste .tabela-wrap, html.a11y-contraste table.dados thead th, html.a11y-contraste .shortcut { background: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-contraste a { color: #ffff00 !important; } html.a11y-dislexia, html.a11y-dislexia body { font-family: 'Comic Sans MS', 'Trebuchet MS', Verdana, sans-serif; letter-spacing: .04em; word-spacing: .12em; } html.a11y-links a { text-decoration: underline !important; outline: 1px dashed currentColor; outline-offset: 2px; } html.a11y-titulos h1, html.a11y-titulos h2, html.a11y-titulos h3 { background: color-mix(in srgb, var(--cor-destaque) 18%, transparent); padding: 2px 6px; border-left: 4px solid var(--cor-destaque); } html.a11y-anima *, html.a11y-anima *::before, html.a11y-anima *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-cursor, html.a11y-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ===================== Cards de opção (entrada da seção) ================ */ .opcao-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 8px 0 4px; } .opcao-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .opcao-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); text-decoration: none; border-color: var(--cor-primaria); } .opcao-card__icone { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.8rem; background: color-mix(in srgb, var(--cor-primaria) 12%, #fff); } .opcao-card__titulo { font-size: 1.2rem; font-weight: 800; } .opcao-card__desc { color: var(--cinza-600); font-size: .9rem; flex: 1; line-height: 1.5; } .opcao-card__acao { color: var(--cor-primaria); font-weight: 700; font-size: .92rem; } @media (max-width: 720px) { .opcao-cards { grid-template-columns: 1fr; } } /* ============================ Dashboard de emendas ====================== */ .dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .dash-card { background: #fff; border: 1px solid var(--cinza-200); border-left: 5px solid var(--cor-primaria); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px; } .dash-card__valor { font-size: 1.5rem; font-weight: 800; line-height: 1.1; } .dash-card__rotulo { font-size: .82rem; color: var(--cinza-500); margin-top: 4px; } .dash-card--previsto { border-left-color: var(--cor-primaria); } .dash-card--realizado { border-left-color: var(--cor-secundaria); } .dash-card--pago { border-left-color: var(--cor-destaque); } .dash-card--total { border-left-color: var(--cinza-500); } .graficos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 22px; } .grafico { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; } .grafico--full { grid-column: 1 / -1; } .grafico__titulo { font-size: .95rem; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; } /* Barras verticais (agrupadas) */ .barras { display: flex; align-items: flex-end; gap: 18px; height: 220px; padding-top: 10px; border-bottom: 2px solid var(--cinza-200); overflow-x: auto; } .barras__grupo { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 70px; height: 100%; justify-content: flex-end; } .barras__barras { display: flex; align-items: flex-end; gap: 5px; height: 100%; } .barra { width: 22px; border-radius: 4px 4px 0 0; min-height: 2px; position: relative; } .barra[data-valor]:hover::after { content: attr(data-valor); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--cor-texto); color: #fff; font-size: .7rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap; } .barras__rotulo { font-size: .78rem; color: var(--cinza-600); font-weight: 600; } /* Legenda compartilhada */ .legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: .82rem; } .legenda span { display: inline-flex; align-items: center; gap: 6px; } .legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } /* Rosca / pizza (conic-gradient) */ .rosca-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .rosca { width: 160px; height: 160px; border-radius: 50%; flex: none; position: relative; } .rosca::after { content: ""; position: absolute; inset: 28%; background: #fff; border-radius: 50%; } .rosca__legenda { display: grid; gap: 8px; font-size: .84rem; min-width: 160px; } .rosca__legenda span { display: flex; align-items: center; gap: 8px; } .rosca__legenda i { width: 12px; height: 12px; border-radius: 3px; flex: none; } .rosca__legenda b { margin-left: auto; } /* Barras horizontais (autores) */ .barras-h { display: grid; gap: 10px; } .barra-h { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 10px; font-size: .84rem; } .barra-h__nome { color: var(--cinza-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra-h__trilho { background: var(--cinza-100); border-radius: 999px; height: 16px; overflow: hidden; } .barra-h__preenchimento { height: 100%; background: var(--cor-destaque); border-radius: 999px; } .barra-h__valor { font-variant-numeric: tabular-nums; color: var(--cinza-600); } @media (max-width: 900px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } .graficos-grid { grid-template-columns: 1fr; } .barra-h { grid-template-columns: 120px 1fr auto; } } /* ============================= Mapa do site ============================= */ .mapa-geral { display: flex; flex-wrap: wrap; gap: 10px; } .mapa-geral a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border: 1px solid var(--cinza-200); border-radius: 999px; text-decoration: none; color: var(--cor-texto); font-weight: 600; font-size: .9rem; box-shadow: var(--sombra); } .mapa-geral a:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); text-decoration: none; } .mapa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .mapa-card { background: #fff; border: 1px solid var(--cinza-200); border-top: 4px solid var(--cor-primaria); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; } .mapa-card__titulo { font-size: 1.05rem; font-weight: 800; color: var(--cor-texto); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .mapa-card__titulo:hover { color: var(--cor-primaria); text-decoration: none; } .mapa-card__sub { font-size: .78rem; color: var(--cinza-500); margin: 2px 0 12px; } .mapa-lista, .mapa-lista ul { list-style: none; margin: 0; padding: 0; } .mapa-lista > li { padding: 4px 0; border-top: 1px solid var(--cinza-100); } .mapa-lista > li:first-child { border-top: none; } .mapa-lista a { text-decoration: none; color: var(--cor-link); font-size: .9rem; } .mapa-lista a:hover { text-decoration: underline; } .mapa-lista .mapa-grupo { font-weight: 700; font-size: .82rem; color: var(--cinza-600); } .mapa-lista ul { margin: 4px 0 4px 4px; padding-left: 14px; border-left: 2px solid var(--cinza-200); } .mapa-lista ul li { padding: 3px 0; } @media (max-width: 900px) { .mapa-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .mapa-grid { grid-template-columns: 1fr; } } /* ------------------------------ Skeleton -------------------------------- */ .skeleton { background: linear-gradient(90deg, var(--cinza-100) 25%, var(--cinza-200) 37%, var(--cinza-100) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: var(--raio-sm); } @keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ------------------------------ Responsivo ------------------------------ */ @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nav-toggle { display: inline-flex; } .mainnav .container { flex-direction: column; align-items: stretch; } .mainnav .navlinks { display: none; flex-direction: column; } .mainnav .navlinks.aberto { display: flex; } /* Sidebar colapsa no mobile */ .layout-lateral { flex-direction: column; } .sidebar { width: 100%; position: static; } .sidebar-toggle { display: inline-flex; } .sidebar-menu { display: none; } .sidebar-menu.aberto { display: flex; } .navitem__menu { position: static; box-shadow: none; border: none; padding-left: 18px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .info-list li { grid-template-columns: 1fr; gap: 2px; } .header-tools { width: 100%; } .busca-header { width: 100%; max-width: none; } /* Tabelas viram cards */ table.dados thead { position: absolute; left: -9999px; } table.dados, table.dados tbody, table.dados tr, table.dados td { display: block; width: 100%; } table.dados tr { border: 1px solid var(--cinza-200); border-radius: var(--raio-sm); margin-bottom: 12px; padding: 6px; } table.dados td { border: none; border-bottom: 1px solid var(--cinza-100); display: grid; grid-template-columns: 42% 1fr; gap: 10px; } table.dados td::before { content: attr(data-label); font-weight: 700; color: var(--cinza-600); font-size: .8rem; } table.dados td.num { text-align: left; } }