/* Relatório Automático — base visual compartilhada (visual novo, 27/10). Guia: static/GUIA-VISUAL.md. Vem do protótipo do pipeline (docs/prototipos/pipeline.*): Inter local, menu lateral escuro com ícones Lucide (sprite static/icones.svg), cartões limpos, etiquetas com ponto, números tabulares, paleta Ctrl+K, barra de status. Sem build, sem CDN, sem data: URI, sem style= inline (CSP default-src 'self'). Telas: regras próprias em app.css. Organização: 1 fonte · 2 tokens (claro/escuro) · 3 base · 4 casca (lateral, topo, cabeçalho, status) · 5 botões · 6 campos · 7 faixas · 8 etiquetas · 9 cartões e indicadores · 10 tabelas · 11 abas · 12 vazio · 13 paleta · 14 avisos (toasts) · 15 login · 16 movimento · 17 responsivo */ /* --- 1. Fonte (static/vendor/inter, OFL 1.1) -------------------------------------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/inter/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/inter/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/inter/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/inter/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/inter/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/inter/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/inter/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/inter/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- 2. Tokens -------------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* superfícies e texto */ --fundo: #f3f1ec; --papel: #fff; --papel-2: #f9f8f5; --papel-3: #f1efe9; --texto: #1c1a17; --texto-2: #46423b; --suave: #6b655b; --apagado: #8c857a; --linha: #e4e0d8; --linha-forte: #cdc7bc; /* lateral (sempre escura) */ --lateral: #201e1b; --lateral-texto: #b9b2a6; --lateral-titulo: #f3efe8; --lateral-ativo: #34312c; --lateral-linha: #2f2c28; --lateral-grupo: #7f786d; --lateral-foco: #cfd9e6; --lateral-campo: #2a2824; --lateral-borda: #45413b; /* acento, foco, principal */ --acento: #2b5a86; --acento-hover: #224a6f; --foco: #6f9dd0; --marca: #6fb0f2; --primario: #2a2723; --primario-hover: #141311; --primario-texto: #fff; /* estados — texto / fundo / borda / texto forte (faixas) */ --verde: #1a6b3c; --verde-fundo: #e4f2e9; --verde-borda: #b6dbc3; --verde-forte: #134d2b; --laranja: #b03a16; --laranja-fundo: #fbeae3; --laranja-borda: #f0c3b0; --laranja-forte: #6d2309; --amarelo: #875800; --amarelo-fundo: #fbf1d4; --amarelo-borda: #ecd79b; --amarelo-forte: #553700; --azul: #2356a4; --azul-fundo: #e5edf9; --azul-borda: #bccfee; --azul-forte: #173a6e; --cinza: #5c564d; --cinza-fundo: #eeebe5; --cinza-borda: #d8d2c7; --roxo: #3f3868; --roxo-fundo: #ecebf4; --roxo-borda: #cbc7de; --vermelho: #8f1d1d; --vermelho-fundo: #fbe7e7; --vermelho-borda: #efbcbc; --selecao: #d9e4f0; /* tipografia */ --fonte: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace; --t-xs: 11px; --t-p: 12.5px; --t-m: 13.5px; --t-g: 15px; --t-titulo: 20px; /* espaço, raio, sombra, movimento */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --raio: 6px; --raio-g: 8px; --raio-xg: 12px; --sombra-1: 0 1px 2px rgba(28, 26, 23, .06); --sombra-2: 0 4px 14px rgba(28, 26, 23, .08); --sombra-3: 0 30px 80px -20px rgba(0, 0, 0, .45); --dur: .14s; --suavidade: cubic-bezier(.2, 0, 0, 1); /* casca */ --w-lateral: 228px; --w-lateral-recolhida: 60px; --h-status: 26px; --colunas-projetos: minmax(0, 2.3fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, .6fr) minmax(0, .8fr); /* nomes antigos */ --fundo-suave: var(--papel-3); --texto-suave: var(--suave); } @media (prefers-color-scheme: dark) { :root { --fundo: #171614; --papel: #201e1b; --papel-2: #262421; --papel-3: #2c2a26; --texto: #ece7de; --texto-2: #cfc8bc; --suave: #a39c90; --apagado: #857e72; --linha: #35322d; --linha-forte: #4a463f; --lateral: #121110; --lateral-texto: #a39c90; --lateral-titulo: #ece7de; --lateral-ativo: #2a2824; --lateral-linha: #1f1d1b; --lateral-campo: #1f1d1b; --lateral-borda: #3a3732; --acento: #7fa9d8; --acento-hover: #9dbfe6; --foco: #7fa9d8; --primario: #ece7de; --primario-hover: #fff; --primario-texto: #1c1a17; --verde: #7fd0a0; --verde-fundo: #16301f; --verde-borda: #2c5a3c; --verde-forte: #a8e3bf; --laranja: #f0916c; --laranja-fundo: #3a1f14; --laranja-borda: #6b3a25; --laranja-forte: #f7b9a0; --amarelo: #e3b85a; --amarelo-fundo: #332a12; --amarelo-borda: #5e4c1e; --amarelo-forte: #f0d18c; --azul: #8fb3e6; --azul-fundo: #1b2b45; --azul-borda: #2f4a73; --azul-forte: #bcd2f2; --cinza: #b5ada0; --cinza-fundo: #2a2824; --cinza-borda: #45413a; --roxo: #b8b0e0; --roxo-fundo: #27243a; --roxo-borda: #433d63; --vermelho: #f29b9b; --vermelho-fundo: #3a1717; --vermelho-borda: #6b2b2b; --selecao: #2f4a73; --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 4px 14px rgba(0, 0, 0, .4); } } /* --- 3. Base ---------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* hidden sempre esconde (regras como "label { display: flex }" o anulavam; os JS das telas usam hidden) */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: var(--t-m)/1.5 var(--fonte); color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11" 1, "ss01" 1; } a { color: var(--acento); text-decoration: none; text-underline-offset: 2px; } a:hover { text-decoration: underline; color: var(--acento-hover); } h1 { font-size: var(--t-titulo); line-height: 1.25; font-weight: 650; letter-spacing: -.015em; margin: 0; } h2 { font-size: var(--t-g); line-height: 1.3; font-weight: 600; margin: 0; letter-spacing: -.005em; } h3 { font-size: var(--t-m); font-weight: 600; margin: 0; } p { margin: 0 0 var(--e2); } code, pre, kbd { font-family: var(--mono); font-size: .92em; } code { background: var(--papel-3); border-radius: 4px; padding: 1px 5px; } pre code { background: none; padding: 0; } kbd { font-family: var(--fonte); font-size: 10.5px; font-weight: 500; border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--papel); color: var(--texto-2); line-height: 1.5; } .num, .valor, td.num, dd.num, th.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } strong { font-weight: 600; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--selecao); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .suave { color: var(--suave); } .ajuda { font-size: 12px; color: var(--suave); line-height: 1.45; } /* ícones do sprite (macro icone() em templates/_icones.html) */ svg.ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; } svg.ic-p { width: 14px; height: 14px; } svg.ic-g { width: 20px; height: 20px; } /* ladrilho de ícone (cabeçalho, linhas de lista) */ .ladrilho { width: 32px; height: 32px; border-radius: var(--raio-g); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--papel-3); color: var(--texto-2); border: 1px solid var(--linha); } .ladrilho.p { width: 22px; height: 22px; border-radius: 6px; } .ladrilho.p svg.ic { width: 13px; height: 13px; } .ladrilho.azul { background: var(--azul-fundo); color: var(--azul); border-color: var(--azul-borda); } .ladrilho.laranja { background: var(--laranja-fundo); color: var(--laranja); border-color: var(--laranja-borda); } /* --- 4. Casca: lateral, topo, cabeçalho, barra de status -------------------------------------- */ .app { display: grid; grid-template-columns: var(--w-lateral) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .25s var(--suavidade); } .lateral { background: var(--lateral); color: var(--lateral-texto); padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100vh; overflow-x: hidden; overflow-y: auto; } .lateral-topo { display: flex; align-items: center; gap: 4px; } .marca { display: flex; align-items: center; gap: 10px; color: var(--lateral-titulo); font-weight: 600; font-size: 13.5px; letter-spacing: -.005em; padding: 4px 6px; white-space: nowrap; min-width: 0; flex: 1; border-radius: var(--raio); } .marca:hover { text-decoration: none; color: #fff; } .marca:focus-visible { outline-color: var(--lateral-foco); } .marca-simbolo { flex: none; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #3b6fa6, #24476d); color: #e8f1fb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); } .marca-simbolo svg.ic { width: 15px; height: 15px; } .recolher-lateral { flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--raio); background: none; color: var(--lateral-texto); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .recolher-lateral:hover { background: var(--lateral-linha); color: var(--lateral-titulo); } .recolher-lateral:focus-visible { outline-color: var(--lateral-foco); outline-offset: -2px; } .menu { display: flex; flex-direction: column; gap: 1px; } .menu-grupo { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lateral-grupo); padding: 12px 10px 4px; white-space: nowrap; } .menu-grupo:first-child { padding-top: 0; } .menu a { position: relative; display: flex; align-items: center; gap: 10px; color: var(--lateral-texto); padding: 7px 10px; border-radius: var(--raio); font-size: 13px; line-height: 1.3; white-space: nowrap; transition: background-color var(--dur), color var(--dur); } .menu a svg.ic { width: 16px; height: 16px; opacity: .85; } .menu a:hover { background: var(--lateral-linha); color: var(--lateral-titulo); text-decoration: none; } .menu a.ativo { background: var(--lateral-ativo); color: var(--lateral-titulo); font-weight: 600; } .menu a.ativo::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--marca); } .menu a.ativo svg.ic { opacity: 1; color: var(--marca); } .menu a:focus-visible { outline-color: var(--lateral-foco); outline-offset: -2px; } .seletor label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--lateral-grupo); padding: 0 10px; margin-bottom: 6px; } .seletor select { width: 100%; padding: 6px 8px; border-radius: var(--raio); border: 1px solid var(--lateral-borda); background: var(--lateral-campo); color: var(--lateral-titulo); font: inherit; font-size: 12.5px; } .seletor select:focus-visible { outline: 2px solid var(--lateral-foco); outline-offset: 0; } .rodape-lateral { margin-top: auto; font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--lateral-linha); } .agendador { display: flex; align-items: center; gap: 8px; color: var(--lateral-texto); white-space: nowrap; } .agendador::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8c8578; } .agendador.vivo::before { background: #4ec27d; box-shadow: 0 0 0 3px rgba(78, 194, 125, .18); } .agendador.parado { color: #f3b48f; } .agendador.parado::before { background: #e8763c; box-shadow: 0 0 0 3px rgba(232, 118, 60, .2); } .quem { color: var(--lateral-titulo); display: flex; align-items: center; gap: 8px; min-width: 0; } .quem > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--lateral-ativo); color: var(--lateral-titulo); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .perfil { display: inline-block; font-size: 10.5px; font-weight: 600; background: var(--lateral-ativo); color: var(--lateral-texto); padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: 1px; } .acoes-lateral { display: flex; flex-direction: column; gap: 2px; } .link-lateral, button.link { display: inline-flex; align-items: center; gap: 8px; color: var(--lateral-texto); font-size: 12.5px; background: none; border: 0; padding: 3px 0; cursor: pointer; font: inherit; text-decoration: none; white-space: nowrap; } .link-lateral:hover, button.link:hover { color: var(--lateral-titulo); text-decoration: none; } .link-lateral:focus-visible, button.link:focus-visible { outline-color: var(--lateral-foco); } .link-lateral svg.ic, button.link svg.ic { width: 14px; height: 14px; } /* lateral recolhida (html.lateral-recolhida, guardado em localStorage por casca.js) */ html.lateral-recolhida .app { grid-template-columns: var(--w-lateral-recolhida) minmax(0, 1fr); } html.lateral-recolhida .lateral { padding-left: 8px; padding-right: 8px; } html.lateral-recolhida .lateral .rotulo-menu, html.lateral-recolhida .marca > span:not(.marca-simbolo), html.lateral-recolhida .menu-grupo, html.lateral-recolhida .seletor, html.lateral-recolhida .quem, html.lateral-recolhida .agendador .rotulo-menu { display: none; } html.lateral-recolhida .lateral-topo { flex-direction: column; } html.lateral-recolhida .marca { justify-content: center; padding: 4px; flex: none; } html.lateral-recolhida .menu a { justify-content: center; padding: 9px 0; } html.lateral-recolhida .menu a.ativo::before { left: -8px; } html.lateral-recolhida .menu-grupo + a, html.lateral-recolhida .menu a + .menu-grupo { margin-top: 8px; } html.lateral-recolhida .rodape-lateral { align-items: center; padding-left: 0; padding-right: 0; } html.lateral-recolhida .agendador { width: 8px; overflow: hidden; } html.lateral-recolhida .recolher-lateral svg.ic { transform: scaleX(-1); } /* área principal */ .principal { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .barra-topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: 6px 32px; background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color var(--dur); } .barra-topo.rolou { border-bottom-color: var(--linha); } .barra-topo .trilha { margin: 0; flex: 1; min-width: 0; } .botao-busca { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; min-width: 220px; padding: 3px 6px 3px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--papel); color: var(--suave); font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: var(--sombra-1); } .botao-busca:hover { border-color: var(--suave); color: var(--texto-2); } .botao-busca kbd { margin-left: auto; } .conteudo { padding: 12px 32px 48px; max-width: 1360px; min-width: 0; width: 100%; flex: 1; } .trilha { color: var(--suave); font-size: 12.5px; margin-bottom: 8px; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trilha a { color: var(--suave); } .trilha a:hover { color: var(--texto); } .trilha .sep { margin: 0 6px; color: var(--linha-forte); } /* cabeçalho de página: título + subtítulo à esquerda, ações à direita */ .cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e5); flex-wrap: wrap; } .cabecalho-titulo { display: flex; gap: var(--e3); align-items: flex-start; min-width: 0; } .cabecalho-titulo > .ladrilho { width: 40px; height: 40px; border-radius: 10px; } .cabecalho-titulo > .ladrilho svg.ic { width: 20px; height: 20px; } .cabecalho h1 { display: inline-block; vertical-align: middle; margin-right: 8px; } .cabecalho .tag { vertical-align: middle; } .cabecalho .meta { color: var(--suave); font-size: 13px; margin-top: 3px; max-width: 76ch; } .cabecalho .meta .num { color: var(--texto-2); } .acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; } /* barra de status (rodapé) */ .barra-status { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: var(--e4); min-height: var(--h-status); padding: 3px 32px; font-size: 11.5px; color: var(--suave); border-top: 1px solid var(--linha); background: var(--papel); flex-wrap: wrap; } .barra-status .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .barra-status .item svg.ic { width: 12px; height: 12px; } .barra-status .direita { margin-left: auto; display: inline-flex; gap: var(--e4); } .barra-status kbd { font-size: 10px; padding: 0 3px; } .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); flex: none; } .ponto.ok { background: var(--verde); } .ponto.err { background: var(--laranja); } .ponto.and { background: var(--azul); } /* --- 5. Botões -------------------------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 12px; border-radius: var(--raio); border: 1px solid var(--linha-forte); background: var(--papel); color: var(--texto); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; text-decoration: none; box-shadow: var(--sombra-1); white-space: nowrap; transition: background-color var(--dur), border-color var(--dur), box-shadow var(--dur), transform var(--dur), color var(--dur); } .botao svg.ic { width: 15px; height: 15px; } .botao:hover { background: var(--papel-2); border-color: var(--suave); color: var(--texto); text-decoration: none; } .botao:active { background: var(--papel-3); transform: scale(.97); } .botao.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); } .botao.primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: var(--primario-texto); } .botao.perigo { color: var(--laranja); } .botao.perigo:hover { background: var(--laranja-fundo); border-color: var(--laranja-borda); color: var(--laranja); } .botao.perigo.primario { background: var(--laranja); border-color: var(--laranja); color: #fff; } .botao.discreto { border-color: transparent; background: none; box-shadow: none; color: var(--acento); } .botao.discreto:hover { background: var(--papel-3); } .botao.mini { min-height: 24px; padding: 1px 8px; font-size: 12px; box-shadow: none; } .botao.mini svg.ic { width: 13px; height: 13px; } .botao.icone { min-height: 30px; width: 30px; padding: 0; box-shadow: none; border-color: transparent; background: none; color: var(--suave); } .botao.icone:hover { border-color: var(--linha-forte); background: var(--papel-2); color: var(--texto); } .botao[disabled], .botao.desativado { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; } .botao kbd { margin-left: 2px; border-color: var(--linha); background: var(--papel-2); } button[disabled].primario, .htmx-request button[type=submit] { opacity: .6; cursor: progress; } /* --- 6. Campos -------------------------------------------------------------------------------- */ input, select, textarea { font: inherit; color: var(--texto); } input[type=text], input[type=search], input[type=number], input[type=password], input[type=email], input[type=url], input[type=date], input[type=time], input:not([type]), select, textarea, .campo { border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 5px 10px; background: var(--papel); color: var(--texto); min-height: 32px; font-size: 13.5px; max-width: 100%; transition: border-color var(--dur), box-shadow var(--dur); } input:hover:not([disabled]):not([type=checkbox]):not([type=radio]), select:hover:not([disabled]), textarea:hover:not([disabled]) { border-color: var(--suave); } input::placeholder, textarea::placeholder { color: var(--apagado); } input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--acento) !important; } input[disabled], select[disabled], textarea[disabled] { background: var(--papel-3); color: var(--suave); } input[type=checkbox], input[type=radio] { accent-color: var(--acento); width: 15px; height: 15px; margin: 0; } label.check { display: flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; } .campo-rotulo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--texto-2); } /* busca com ícone: {{ icone('search') }} */ .busca-box { position: relative; display: inline-flex; align-items: center; flex: 1; max-width: 360px; } .busca-box > svg.ic { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--suave); pointer-events: none; } .busca-box > input { width: 100%; padding-left: 32px; } .filtros { display: flex; gap: var(--e2); margin-bottom: var(--e3); align-items: end; flex-wrap: wrap; } .filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--suave); } .filtros input[type=search]::-webkit-search-cancel-button { cursor: pointer; } .erro-form { color: var(--laranja); margin: 0; font-size: 13.5px; } .ok-texto { color: var(--verde); margin: 0; font-size: 13.5px; } /* --- 7. Faixas (avisos de página) ------------------------------------------------------------- */ .faixa { display: block; padding: 10px 14px 10px 16px; border-radius: var(--raio-g); margin-bottom: var(--e3); border: 1px solid transparent; border-left-width: 3px; font-size: 13.5px; line-height: 1.45; } .faixa a { color: inherit; text-decoration: underline; font-weight: 500; } .faixa-falha { background: var(--laranja-fundo); border-color: var(--laranja-borda); border-left-color: var(--laranja); color: var(--laranja-forte); } .faixa-pausado, .faixa-parcial { background: var(--amarelo-fundo); border-color: var(--amarelo-borda); border-left-color: var(--amarelo); color: var(--amarelo-forte); } .faixa-andamento { background: var(--azul-fundo); border-color: var(--azul-borda); border-left-color: var(--azul); color: var(--azul-forte); } .faixa-ok { background: var(--verde-fundo); border-color: var(--verde-borda); border-left-color: var(--verde); color: var(--verde-forte); } .faixa-simulado { padding: 6px 12px 6px 14px; font-size: 12.5px; background: var(--roxo-fundo); border-color: var(--roxo-borda); border-left-color: var(--roxo); color: var(--roxo); } .faixa-seguranca { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); border-left-color: var(--vermelho); color: var(--vermelho); } .faixa-emergencia { background: var(--vermelho-fundo); border: 1px solid var(--vermelho-borda); color: var(--vermelho); padding: 6px 10px; border-radius: var(--raio); font-size: 13px; margin: 6px 0; } /* faixas fixas do topo (ambiente de teste, "ver como") */ .faixa-ambiente-teste { position: sticky; top: 0; z-index: 50; background: #1d5c3a; color: #fff; padding: 6px 12px; border-radius: var(--raio); margin: 0 0 var(--e2); font-size: 12.5px; } .faixa-ver-como { position: sticky; top: 0; z-index: 60; display: flex; gap: var(--e4); align-items: center; justify-content: space-between; background: #4a3a7a; color: #fff; padding: 6px 12px; border-radius: var(--raio); margin: 0 0 var(--e2); font-size: 12.5px; } .faixa-ver-como .botao { background: #fff; color: #4a3a7a; border-color: #fff; min-height: 26px; padding: 2px 10px; font-size: 12.5px; } .principal > .faixa-ver-como, .principal > .faixa-ambiente-teste { margin: 8px 32px 0; } /* --- 8. Etiquetas de estado (.tag tag-; macro tag() em _tag.html) --------------------- */ .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.4; padding: 1px 8px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; } .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .tag-sucesso { background: var(--verde-fundo); color: var(--verde); border-color: var(--verde-borda); } .tag-falha { background: var(--laranja-fundo); color: var(--laranja); border-color: var(--laranja-borda); } .tag-parcial, .tag-pausado, .tag-atencao { background: var(--amarelo-fundo); color: var(--amarelo); border-color: var(--amarelo-borda); } .tag-andamento { background: var(--azul-fundo); color: var(--azul); border-color: var(--azul-borda); } .tag-andamento::before { animation: pulso 1.4s ease-in-out infinite; } .tag-neutro { background: var(--cinza-fundo); color: var(--cinza); border-color: var(--cinza-borda); } .tag-roxo, .tag-tarefa { background: var(--roxo-fundo); color: var(--roxo); border-color: var(--roxo-borda); } .tag.sem-ponto::before { display: none; } @keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* --- 9. Cartões e indicadores ----------------------------------------------------------------- */ .cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 14px 16px; box-shadow: var(--sombra-1); } .cartao h2 { margin-bottom: 8px; } .cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-bottom: var(--e2); } .cartao .grande { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 6px; } .cartao .linha { display: flex; justify-content: space-between; gap: var(--e3); padding: 5px 0; font-size: 13px; border-top: 1px solid var(--papel-3); } .cartao .linha span:first-child { color: var(--suave); flex: none; } .cartao .linha span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; } .cartao .linha .botao { margin-top: 2px; } .indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e5); } .indicador { position: relative; padding: 14px 16px; min-width: 0; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra-1); } .indicador .rotulo { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 12px; font-weight: 500; } .indicador .rotulo svg.ic { width: 14px; height: 14px; } .indicador .valor { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; } .indicador .de { font-size: 13px; color: var(--suave); font-weight: 400; letter-spacing: 0; } .indicador .nota { color: var(--suave); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .indicador-atencao { border-color: var(--laranja-borda); box-shadow: inset 3px 0 0 var(--laranja), var(--sombra-1); } .indicador-atencao .valor, .indicador-atencao .rotulo { color: var(--laranja); } /* --- 10. Tabelas (cabeçalho fixo: envolva em .rolagem-tabela) --------------------------------- */ table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; font-size: 13.5px; box-shadow: var(--sombra-1); } .tabela th, .tabela td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; } .tabela th { background: var(--papel-2); color: var(--suave); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .tabela th .tipo { display: block; font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--apagado); font-family: var(--mono); } .tabela tbody tr { transition: background-color .08s; } .tabela tbody tr:hover > td { background: var(--papel-2); } .tabela tr:last-child td { border-bottom: 0; } .tabela tfoot td { font-weight: 600; background: var(--papel-2); border-top: 1px solid var(--linha); } .tabela td.num, .tabela th.num { text-align: right; } .tabela td.num { color: var(--texto-2); } .tabela .acoes-linha { white-space: nowrap; } .rolagem-tabela { max-height: 70vh; overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio-g); } .rolagem-tabela table.tabela { border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .rolagem-tabela .tabela thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--linha); } .secao { margin: var(--e5) 0 var(--e2); display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); } .secao h2 { font-size: var(--t-g); } .secao a { font-size: 13px; } .paginacao { display: flex; gap: var(--e4); margin-top: var(--e3); font-size: 13px; } .rolagem { overflow-x: auto; } /* --- 11. Abas (navegação de seções: