/* Tokens de tema light/dark — P-030: o marcador data-theme vive no . */ *, *::before, *::after { box-sizing: border-box } :root { --bg: #eef2f6; --panel: #fff; --soft: #f7f9fc; --text: #172033; --muted: #667085; --line: #d8e0ea; --blue: #2563eb; --blue-weak: rgba(37,99,235,.12); --danger: #c2413d; --green: #12805c; --amber: #b7791f; /* Texto do botão primário: contraste com --blue em CADA tema. No light, branco sobre azul escuro; no dark, --blue é azul CLARO (#8db7ff), então o texto tem que ser escuro — #fff fixo daria contraste ruim. */ --on-blue: #ffffff; --shadow: 0 16px 42px rgba(31, 41, 55, .10); } [data-theme="dark"] { --bg: #07111f; --panel: #0d1f38; --soft: #102747; --text: #f5f7ff; --muted: #8ea3c6; --line: #234778; --blue: #8db7ff; --blue-weak: rgba(141,183,255,.14); --danger: #ff6b7a; --green: #00ff88; --amber: #ffb020; --on-blue: #07111f; --shadow: 0 18px 44px rgba(0, 0, 0, .42); } /* Contrato seção 5: sem topbar próprio; body 100vh flex column. */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--text); background: var(--bg); } button, input, select, textarea { font: inherit; color: inherit } #app { width: 100%; max-width: 1000px; margin: 0 auto; padding: 18px 20px 40px; flex: 1 } .muted { color: var(--muted); font-size: 13px } .spacer { flex: 1 } /* Toolbar */ .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px } /* Botões */ .btn { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 7px; padding: 8px 14px; font-weight: 650; cursor: pointer; } .btn:hover { border-color: var(--blue); background: var(--soft) } .btn.primary { background: var(--blue); color: var(--on-blue); border-color: var(--blue) } .btn.primary:hover { filter: brightness(1.05) } .btn.danger { color: var(--danger); border-color: var(--danger) } .btn.small { padding: 4px 10px; font-size: 13px; margin-left: 8px } .btn:disabled { opacity: .55; cursor: default } /* Campos */ .field { border: 1px solid var(--line); background: var(--panel); border-radius: 7px; padding: 8px 11px; outline: none; min-width: 200px; } .field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-weak) } .field.wide { width: 100% } /* Lista de documentos */ .doc-list { display: grid; gap: 10px } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .12s; } .card:hover { border-color: var(--blue) } .card-title { font-size: 16px; font-weight: 750 } .card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px } .card-sub { color: var(--muted); font-size: 12.5px } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--soft); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; } .badge.vis-publico { color: var(--green) } .badge.vis-setor { color: var(--amber) } .badge.st-rascunho { color: var(--amber) } .badge.st-arquivado { color: var(--danger) } .badge.tag { font-weight: 550 } /* Documento (leitura) */ .doc-head { margin-bottom: 18px } .doc-title { font-size: 24px; margin: 6px 0 12px } .doc-head .card-meta { margin-top: 6px } /* Formulário do editor */ .form { display: grid; gap: 14px } .form-row { display: flex; gap: 14px; flex-wrap: wrap } .form-row .campo { flex: 1 1 220px } .campo { display: grid; gap: 5px } .campo-label { font-size: 13px; font-weight: 650; color: var(--muted) } .setores-wrap { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--soft); } .chk-title { font-size: 13px; font-weight: 650; color: var(--muted); margin-bottom: 8px } .chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px } .chk { display: flex; align-items: center; gap: 7px; cursor: pointer } .chk input { width: 16px; height: 16px } /* Histórico */ .hist-list { display: grid; gap: 8px } .hist-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .hist-item.atual { border-color: var(--blue) } /* Erro */ .erro-box { background: var(--panel); border: 1px solid var(--danger); border-radius: 8px; padding: 16px; color: var(--danger) } /* Notificações (P-041/P-050) — toast nunca vaza da tela */ #notif-container { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50 } .notif { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 14px; max-width: min(420px, calc(100vw - 32px)); overflow-wrap: break-word; display: flex; align-items: center; gap: 10px; } .notif.ok { border-color: var(--green) } .notif.erro { border-color: var(--danger) } .notif button { border: none; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700 } .notif .btn.small { border: 1px solid var(--line); color: var(--blue) } /* Markdown renderizado (leitura) */ .markdown-body { line-height: 1.6; font-size: 15.5px } .markdown-body h1, .markdown-body h2, .markdown-body h3 { line-height: 1.3; margin: 1.4em 0 .5em } .markdown-body h1 { font-size: 1.6em } .markdown-body h2 { font-size: 1.3em } .markdown-body h3 { font-size: 1.12em } .markdown-body p, .markdown-body ul, .markdown-body ol { margin: .6em 0 } .markdown-body code { background: var(--soft); padding: 2px 6px; border-radius: 5px; font-size: .9em } .markdown-body pre { background: var(--soft); padding: 12px 14px; border-radius: 8px; overflow-x: auto } .markdown-body pre code { background: none; padding: 0 } .markdown-body blockquote { border-left: 3px solid var(--line); margin: .8em 0; padding: .2em 1em; color: var(--muted) } .markdown-body a { color: var(--blue) } .markdown-body img { max-width: 100%; height: auto } .markdown-body table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto } .markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: 7px 10px; text-align: left } .markdown-body th { background: var(--soft) } /* EasyMDE no tema do hub (o CSS do editor é claro por padrão) */ .editor-ta { width: 100%; min-height: 320px } .EasyMDEContainer .CodeMirror { background: var(--panel); color: var(--text); border-color: var(--line); border-radius: 0 0 8px 8px; } .EasyMDEContainer .CodeMirror-cursor { border-color: var(--text) } .EasyMDEContainer .editor-toolbar { background: var(--soft); border-color: var(--line); border-radius: 8px 8px 0 0 } .EasyMDEContainer .editor-toolbar button { color: var(--text) !important } .EasyMDEContainer .editor-toolbar button:hover { background: var(--panel); border-color: var(--line) } .EasyMDEContainer .editor-toolbar button.active { background: var(--blue-weak) } .EasyMDEContainer .editor-toolbar i.separator { border-color: var(--line) } .EasyMDEContainer .editor-preview { background: var(--panel); color: var(--text) } .EasyMDEContainer .cm-s-easymde .cm-comment { background: var(--soft) } [data-theme="dark"] .EasyMDEContainer .editor-toolbar button i { filter: invert(.9) } /* Tabela (leitura) — rola na horizontal no mobile, nunca corta. As sombras nas bordas (técnica pura-CSS com background-attachment:local) só aparecem quando há conteúdo rolável além da borda — sinaliza "tem mais coluna". */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, var(--panel), transparent) 0 0 / 24px 100% no-repeat, linear-gradient(to left, var(--panel), transparent) 100% 0 / 24px 100% no-repeat, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) 0 0 / 12px 100% no-repeat, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) 100% 0 / 12px 100% no-repeat; background-attachment: local, local, scroll, scroll; } .data-table { border-collapse: collapse; width: 100%; min-width: max-content; font-size: 14px } .data-table th, .data-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top } .data-table th { background: var(--soft); font-weight: 700; white-space: nowrap } .data-table tr:nth-child(even) td { background: color-mix(in srgb, var(--soft) 45%, transparent) } /* Editor de tabela (jSpreadsheet) no tema do hub (o CSS da lib é claro). */ .grid-editor { overflow-x: auto } /* rodapé de atribuição do jSpreadsheet CE (link externo inerte); a opção about:false não o remove. MIT não exige atribuição na UI. */ .jexcel_about { display: none } [data-theme="dark"] .jexcel_content { background: var(--panel) } [data-theme="dark"] .jexcel > thead > tr > td, [data-theme="dark"] .jexcel > tbody > tr > td { background: var(--panel); color: var(--text); border-color: var(--line) } [data-theme="dark"] .jexcel > thead > tr > td { background: var(--soft) } [data-theme="dark"] .jexcel > tbody > tr > .jexcel_row { background: var(--soft); color: var(--muted) } [data-theme="dark"] .jexcel_corner { background: var(--soft) } /* célula readonly/selecionada e scrollbar no dark (senão ficam claras/ilegíveis) */ [data-theme="dark"] .jexcel > tbody > tr > td.readonly { color: var(--muted) } [data-theme="dark"] .jexcel > tbody > tr > td.highlight, [data-theme="dark"] .jexcel > thead > tr > td.selected { background: var(--blue-weak) } [data-theme="dark"] .jexcel_content { scrollbar-color: var(--muted) var(--soft) } /* P-031: alvos de toque e anti-zoom — só no toque, sem mexer no desktop. */ @media (hover: none) and (pointer: coarse) { .btn { min-height: 44px } .field, select.field, textarea { min-height: 44px; font-size: 16px } .chk input { width: 20px; height: 20px } /* célula da grade tocável (edição é secundária no mobile, mas não frustrante) */ .jexcel > tbody > tr > td { min-height: 40px } } /* Telas estreitas */ @media (max-width: 640px) { #app { padding: 14px 14px 40px } .field { min-width: 0; width: 100% } .toolbar .btn { flex: 1 1 auto } .doc-title { font-size: 20px } /* Editor no celular: textarea menor libera espaço pra navegação; a toolbar do EasyMDE (~14 botões) quebra de linha em vez de vazar. Edição é caso secundário no mobile (a leitura é o primário), mas não pode quebrar. */ .editor-ta { min-height: 220px } .EasyMDEContainer .editor-toolbar { flex-wrap: wrap; gap: 3px } }