/* ========================================================================== Rosa UI — padrão visual para sistemas web do grupo Derivado da apresentação do PDCA de TI 2026 e dos manuais de marca da Viação Rosa e da Movili. Uso: (ou data-brand="movili") Tema: CLARO por padrão. data-theme="dark" liga o noturno; data-theme="auto" segue o sistema operacional. Para persistir a escolha e evitar piscada, use tema.js. ========================================================================== */ /* ------------------------------------------------------------------ fontes */ /* Univia Pro — tipografia principal das duas marcas (títulos e destaques). Lato — secundária, usada em texto corrido e tabelas: tem numerais tabulares melhores, o que importa numa tela cheia de valores. */ @font-face { font-family: "Univia Pro"; src: url("fonts/univiapro-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Univia Pro"; src: url("fonts/univiapro-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Univia Pro"; src: url("fonts/univiapro-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Univia Pro"; src: url("fonts/univiapro-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Univia Pro"; src: url("fonts/univiapro-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Univia Pro"; src: url("fonts/univiapro-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("fonts/lato-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("fonts/lato-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("fonts/lato-regularitalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Lato"; src: url("fonts/lato-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("fonts/lato-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* ------------------------------------------------------- tokens de marca -- Valores oficiais dos manuais. Não altere: são a identidade. Nenhum deles é usado direto nos componentes — sempre via token semântico. */ :root { /* Viação Rosa — 8308-viacao-rosa-logo-guideline.pdf */ --marca-rosa-turquesa: #00bbb4; /* PANTONE 3262 C — cor principal */ --marca-rosa-turquesa-escuro: #007078; /* teal do logotipo e da barra do PDCA */ --marca-rosa-azul: #3777bc; /* PANTONE P 106-15 C — apoio */ /* Movili — 01-21730-movili-brand-guideline.pdf */ --marca-movili-azul: #2e2f7b; --marca-movili-azul-secundario: #51569e; --marca-movili-azul-claro: #6464b4; --marca-movili-verde: #c8dc8c; --marca-movili-cinza: #ececec; --fonte-titulo: "Univia Pro", "Segoe UI", system-ui, sans-serif; --fonte-texto: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif; --fonte-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace; --raio-sm: 6px; --raio: 10px; --raio-lg: 14px; --raio-pill: 999px; --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --transicao: 140ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---------------------------------------------------- tokens semânticos -- Claro. Todo componente lê daqui — nunca de --marca-*. A primária é o teal escuro, não o turquesa: #00bbb4 sobre branco dá 2,2:1 de contraste e reprova em qualquer critério de legibilidade. O turquesa fica para logo, gráficos e realces sobre fundo escuro. */ :root, :root[data-brand="rosa"] { --cor-primaria: #007078; --cor-primaria-forte: #005a61; --cor-primaria-clara: #248a8b; --cor-primaria-suave: #d7e4e5; /* wash das pills e linhas ativas */ --cor-primaria-tenue: #eaf1f1; --cor-sobre-primaria: #ffffff; --cor-realce: #00bbb4; /* turquesa: séries de gráfico, foco */ --cor-serie-2: #3777bc; --fundo: #eaedf0; --superficie: #ffffff; --superficie-2: #f4f6f8; --superficie-3: #e7ebee; --tinta: #1a1e22; --tinta-2: #3a3d41; --tinta-3: #6e7d82; --tinta-4: #9aa1a7; --borda: rgba(26, 30, 34, 0.10); --borda-forte: rgba(26, 30, 34, 0.20); --sucesso: #1c7a45; --sucesso-suave: #d8ebe0; --alerta: #8a6100; --alerta-suave: #f5e9cf; --erro: #b4242b; --erro-suave: #f5dcdd; --info: #2b6ca8; --info-suave: #dbe7f2; --sombra: 0 1px 2px rgba(16, 20, 26, 0.04), 0 8px 24px -12px rgba(16, 20, 26, 0.14); --sombra-forte: 0 2px 6px rgba(16, 20, 26, 0.08), 0 18px 40px -18px rgba(16, 20, 26, 0.28); } :root[data-brand="movili"] { --cor-primaria: #2e2f7b; --cor-primaria-forte: #232459; --cor-primaria-clara: #51569e; --cor-primaria-suave: #dcdcea; --cor-primaria-tenue: #eeeef5; --cor-sobre-primaria: #ffffff; --cor-realce: #6464b4; --cor-serie-2: #7a9c3e; /* verde Movili escurecido para passar contraste */ } /* Escuro: só os tokens que mudam. Nenhuma cor tem definição única aqui — tudo já existe no bloco claro acima. O padrão é SEMPRE claro, independente da preferência do sistema — telas financeiras são lidas e impressas em fundo claro, e é o que o PDCA usa. O escuro é opt-in: `data-theme="dark"`, ou `data-theme="auto"` para quem quiser seguir o sistema operacional. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --cor-primaria: #2f9d9c; --cor-primaria-forte: #3fb3b1; --cor-primaria-clara: #57c3c0; --cor-primaria-suave: #16343a; --cor-primaria-tenue: #10262b; --cor-sobre-primaria: #07161a; --cor-realce: #00bbb4; --cor-serie-2: #5c9dd8; --fundo: #0e1114; --superficie: #171b1f; --superficie-2: #1d2227; --superficie-3: #242a30; --tinta: #eef1f4; --tinta-2: #c3cad1; --tinta-3: #8e99a2; --tinta-4: #626d76; --borda: rgba(255, 255, 255, 0.10); --borda-forte: rgba(255, 255, 255, 0.22); --sucesso: #4cbd7c; --sucesso-suave: #16301f; --alerta: #d6a53a; --alerta-suave: #322609; --erro: #ef6b71; --erro-suave: #351417; --info: #6aa9e0; --info-suave: #12232f; --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --sombra-forte: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.75); } :root[data-theme="auto"][data-brand="movili"] { --cor-primaria: #7b80d0; --cor-primaria-forte: #9296dc; --cor-primaria-clara: #a3a7e4; --cor-primaria-suave: #1e2043; --cor-primaria-tenue: #161832; --cor-sobre-primaria: #0d0e21; --cor-realce: #6464b4; --cor-serie-2: #c8dc8c; } } :root[data-theme="dark"] { --cor-primaria: #2f9d9c; --cor-primaria-forte: #3fb3b1; --cor-primaria-clara: #57c3c0; --cor-primaria-suave: #16343a; --cor-primaria-tenue: #10262b; --cor-sobre-primaria: #07161a; --cor-realce: #00bbb4; --cor-serie-2: #5c9dd8; --fundo: #0e1114; --superficie: #171b1f; --superficie-2: #1d2227; --superficie-3: #242a30; --tinta: #eef1f4; --tinta-2: #c3cad1; --tinta-3: #8e99a2; --tinta-4: #626d76; --borda: rgba(255, 255, 255, 0.10); --borda-forte: rgba(255, 255, 255, 0.22); --sucesso: #4cbd7c; --sucesso-suave: #16301f; --alerta: #d6a53a; --alerta-suave: #322609; --erro: #ef6b71; --erro-suave: #351417; --info: #6aa9e0; --info-suave: #12232f; --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --sombra-forte: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.75); } :root[data-theme="dark"][data-brand="movili"] { --cor-primaria: #7b80d0; --cor-primaria-forte: #9296dc; --cor-primaria-clara: #a3a7e4; --cor-primaria-suave: #1e2043; --cor-primaria-tenue: #161832; --cor-sobre-primaria: #0d0e21; --cor-realce: #6464b4; --cor-serie-2: #c8dc8c; } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } /* Claro por padrão. Só declara `dark` quando o escuro está de fato ativo, para os controles nativos e a barra de rolagem acompanharem. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="auto"] { color-scheme: light dark; } body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte-texto); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.01em; margin: 0; } a { color: var(--cor-primaria); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--cor-realce); outline-offset: 2px; border-radius: var(--raio-sm); } .rui-pagina { max-width: 1680px; margin: 0 auto; padding: var(--esp-5) var(--esp-5) var(--esp-10); } /* ------------------------------------------------------------------ topo -- A barra primária do PDCA: marca à esquerda, título ao centro, ações à direita. É a assinatura visual do padrão — todo sistema começa com ela. */ .rui-topo { display: flex; align-items: center; gap: var(--esp-4); background: var(--cor-primaria); color: var(--cor-sobre-primaria); padding: 0 var(--esp-5); min-height: 56px; } .rui-topo__marca { display: flex; align-items: center; gap: var(--esp-3); flex-shrink: 0; } .rui-topo__marca img, .rui-topo__marca svg { height: 26px; width: auto; display: block; color: var(--cor-sobre-primaria); } .rui-topo__titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; } .rui-topo__espaco { flex: 1; } .rui-topo__meta { font-family: var(--fonte-mono); font-size: 12px; opacity: 0.85; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ tema ------ Botão de claro/escuro. Vive na barra do topo, encostado à direita. Comportamento e persistência em tema.js. */ .rui-tema { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--raio-sm); border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: inherit; cursor: pointer; flex-shrink: 0; transition: background var(--transicao); } .rui-tema:hover { background: rgba(255, 255, 255, 0.14); } .rui-tema svg { width: 15px; height: 15px; display: block; } /* Mostra só o ícone do tema para o qual o clique vai levar. */ .rui-tema .rui-tema__lua { display: block; } .rui-tema .rui-tema__sol { display: none; } :root[data-theme="dark"] .rui-tema .rui-tema__lua { display: none; } :root[data-theme="dark"] .rui-tema .rui-tema__sol { display: block; } /* ------------------------------------------------------------- cabeçalho -- Eyebrow em primária + título grande, como no slide. */ .rui-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-5); flex-wrap: wrap; margin: var(--esp-6) 0 var(--esp-5); } .rui-eyebrow { font-family: var(--fonte-titulo); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cor-primaria); margin-bottom: var(--esp-2); } .rui-titulo { font-size: 25px; line-height: 1.15; } .rui-subtitulo { color: var(--tinta-3); font-size: 13px; margin-top: var(--esp-1); } /* --------------------------------------------------------------- passos -- O stepper P·D·C·A. Genérico: serve para qualquer sequência de etapas. */ .rui-passos { display: flex; gap: var(--esp-5); } .rui-passo { display: flex; flex-direction: column; align-items: center; gap: 5px; } .rui-passo__bolha { width: 26px; height: 26px; border-radius: var(--raio-pill); display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 700; font-size: 12px; background: var(--superficie); color: var(--tinta-4); border: 1px solid var(--borda); } .rui-passo__rot { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-4); font-weight: 700; } .rui-passo[aria-current="step"] .rui-passo__bolha { background: var(--cor-primaria); color: var(--cor-sobre-primaria); border-color: transparent; } .rui-passo[aria-current="step"] .rui-passo__rot { color: var(--cor-primaria); } /* ----------------------------------------------------------------- card -- */ .rui-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: var(--esp-4); overflow: hidden; } /* Casa também o h2 solto dentro do card: um título de card é sempre um título de card, com ou sem a classe explícita. */ .rui-card__titulo, .rui-card > h2 { font-family: var(--fonte-titulo); font-size: 14px; font-weight: 700; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--borda); display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; } .rui-card__nota { font-family: var(--fonte-texto); font-weight: 400; font-size: 12px; color: var(--tinta-3); } .rui-card__corpo { padding: var(--esp-4); } /* ------------------------------------------------------------------ kpi -- */ .rui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); } .rui-kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-3) var(--esp-4); box-shadow: var(--sombra); } .rui-kpi__rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-3); font-weight: 700; } .rui-kpi__val { font-family: var(--fonte-titulo); font-size: 21px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .rui-kpi__det { font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; } /* --------------------------------------------------------------- tabela -- Cabeçalho em versalete espaçado, réguas finas, sem zebra — a densidade do PDCA. `.rui-num` liga numerais tabulares para as colunas de valor. */ .rui-rolagem { overflow-x: auto; } .rui-tabela { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; } .rui-tabela th, .rui-tabela td { padding: 7px var(--esp-3); border-bottom: 1px solid var(--borda); text-align: left; } .rui-tabela thead th { position: sticky; top: 0; z-index: 3; background: var(--superficie-2); font-family: var(--fonte-titulo); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-3); white-space: nowrap; } .rui-tabela tbody tr:hover td { background: var(--cor-primaria-tenue); } .rui-tabela .rui-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rui-tabela .rui-data { font-family: var(--fonte-mono); font-size: 12px; color: var(--tinta-2); white-space: nowrap; } .rui-tabela__sec td { background: var(--superficie-3); font-weight: 700; } .rui-tabela__total td { background: var(--cor-primaria-tenue); font-weight: 700; border-top: 2px solid var(--borda-forte); } /* ----------------------------------------------------------------- pill -- Estado em uma palavra. Bolinha + rótulo, como nas situações do PDCA. */ .rui-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: var(--raio-pill); font-size: 11.5px; font-weight: 700; background: var(--superficie-3); color: var(--tinta-2); white-space: nowrap; } .rui-pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--raio-pill); background: currentColor; flex-shrink: 0; } .rui-pill--forte { background: var(--cor-primaria); color: var(--cor-sobre-primaria); } .rui-pill--ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); } .rui-pill--ok { background: var(--sucesso-suave); color: var(--sucesso); } .rui-pill--alerta { background: var(--alerta-suave); color: var(--alerta); } .rui-pill--erro { background: var(--erro-suave); color: var(--erro); } .rui-pill--info { background: var(--info-suave); color: var(--info); } /* ---------------------------------------------------------------- aviso -- */ .rui-aviso { border-radius: var(--raio-sm); padding: 10px var(--esp-3); font-size: 12.5px; line-height: 1.55; margin-bottom: var(--esp-3); border: 1px solid var(--borda-forte); background: var(--superficie-2); } .rui-aviso strong { font-weight: 700; } .rui-aviso--info { background: var(--info-suave); border-color: var(--info); } .rui-aviso--alerta { background: var(--alerta-suave); border-color: var(--alerta); } .rui-aviso--erro { background: var(--erro-suave); border-color: var(--erro); } .rui-aviso--info strong { color: var(--info); } .rui-aviso--alerta strong { color: var(--alerta); } .rui-aviso--erro strong { color: var(--erro); } /* --------------------------------------------------------------- botões -- */ .rui-botao { font-family: var(--fonte-texto); font-size: 13px; font-weight: 700; border: 1px solid transparent; border-radius: var(--raio-sm); padding: 7px 15px; cursor: pointer; background: var(--cor-primaria); color: var(--cor-sobre-primaria); transition: background var(--transicao), border-color var(--transicao); } .rui-botao:hover:not(:disabled) { background: var(--cor-primaria-forte); } .rui-botao:disabled { opacity: 0.45; cursor: default; } .rui-botao--secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borda-forte); } .rui-botao--secundario:hover:not(:disabled) { background: var(--superficie-3); } .rui-botao--sutil { background: transparent; color: var(--cor-primaria); } .rui-botao--sutil:hover:not(:disabled) { background: var(--cor-primaria-tenue); } /* --------------------------------------------------------------- filtros -- */ .rui-filtros { display: flex; gap: var(--esp-4); align-items: flex-end; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-3) var(--esp-4); box-shadow: var(--sombra); margin-bottom: var(--esp-4); } .rui-campo { display: flex; flex-direction: column; gap: 4px; } .rui-campo > label { font-size: 10.5px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } .rui-input, select.rui-input, input.rui-input { font-family: var(--fonte-texto); font-size: 13px; color: var(--tinta); background: var(--superficie-2); border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); padding: 6px 9px; min-width: 90px; } .rui-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); padding-bottom: 6px; } .rui-check input { accent-color: var(--cor-primaria); } /* ----------------------------------------------------------------- abas -- */ .rui-abas { display: flex; gap: 3px; flex-wrap: wrap; } .rui-abas button { font-family: var(--fonte-texto); font-size: 13px; font-weight: 700; border: 1px solid transparent; background: transparent; color: var(--tinta-3); padding: 7px 13px; border-radius: var(--raio-sm); cursor: pointer; transition: background var(--transicao); } .rui-abas button:hover { background: var(--superficie-3); color: var(--tinta); } .rui-abas button[aria-selected="true"] { background: var(--superficie); border-color: var(--borda); color: var(--cor-primaria); box-shadow: var(--sombra); } /* --------------------------------------------------------------- gaveta -- */ .rui-gaveta-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; display: none; } .rui-gaveta-fundo[data-aberta="1"] { display: block; } .rui-gaveta { position: fixed; inset: 0 0 0 auto; width: min(1080px, 94vw); background: var(--fundo); border-left: 1px solid var(--borda-forte); box-shadow: var(--sombra-forte); z-index: 41; overflow-y: auto; padding: var(--esp-4) var(--esp-5) var(--esp-10); transform: translateX(100%); transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1); } .rui-gaveta[data-aberta="1"] { transform: none; } .rui-gaveta__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-4); margin-bottom: var(--esp-3); } .rui-fechar { background: var(--superficie-3); border: 1px solid var(--borda-forte); color: var(--tinta); border-radius: var(--raio-sm); width: 30px; height: 30px; cursor: pointer; font-size: 15px; line-height: 1; } /* -------------------------------------------------------------- rodapé --- */ .rui-rodape { display: flex; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: var(--esp-3); margin-top: var(--esp-6); font-size: 11.5px; color: var(--tinta-3); } /* ------------------------------------------------------------ utilidades -- */ .rui-num { font-variant-numeric: tabular-nums; } .rui-pos { color: var(--sucesso); } .rui-neg { color: var(--erro); } .rui-nulo { color: var(--tinta-4); } .rui-legenda { display: flex; gap: var(--esp-4); flex-wrap: wrap; font-size: 12px; color: var(--tinta-2); margin-top: var(--esp-2); } .rui-legenda span { display: inline-flex; align-items: center; gap: 6px; } .rui-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .rui-estado { padding: var(--esp-8) var(--esp-4); text-align: center; color: var(--tinta-3); font-size: 13px; } .rui-estado--erro { color: var(--erro); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }