/* ferramentas.css — Fórmula de Wilder v4 - Tema claro/escuro (usa [data-bs-theme="light"|"dark"] no ) - Tabela com cabeçalhos INTEIROS (sem quebra de palavras) - Inputs numéricos com largura mínima visível - Alto contraste e acessibilidade */ /* ============================= Variáveis de tema (LIGHT) ============================= */ :root { --bg:#ffffff; /* fundo */ --text:#111111; /* texto principal */ --muted:#444444; /* texto secundário */ --link:#0d6efd; /* links/acentos */ --border:#d9dee7; /* linhas/bordas suaves */ --thead:#0b1020; /* cabeçalho da tabela */ --thead-text:#ffffff; --code:#0f172a; /* código */ --code-bg:#f3f6fb; --card-bg:#ffffff; --card-head-bg:#f8fafc; --input-bg:#ffffff; --input-text:#111111; --input-placeholder:#6b7280; --focus-ring: rgba(13,110,253,.15); /* Larguras mínimas para inputs */ --min-col-text: 18rem; /* 1ª coluna (nome da unidade) */ --min-col-num: 8.5rem; /* demais campos numéricos */ } /***** TEMA ESCURO *****/ [data-bs-theme="dark"] { --bg:#0b1020; --text:#e6e9ef; --muted:#aab6d6; --link:#8ab4ff; --border:#1f2742; --thead:#111936; --thead-text:#dfe7ff; --code:#e6e9ef; --code-bg:#0f1426; --card-bg:#151b2e; --card-head-bg:#0f1426; --input-bg:#0f1426; --input-text:#e6e9ef; --input-placeholder:#7d89a8; --focus-ring: rgba(138,180,255,.2); } /* ============================= Elementos gerais ============================= */ html, body { background: var(--bg); color: var(--text); } .navbar { background: var(--thead); } .navbar .navbar-brand, .navbar .btn { color:#fff !important; } .card { background: var(--card-bg); border:1px solid var(--border); } .card-header { background: var(--card-head-bg); border-bottom:1px solid var(--border); } .small-muted{ color: var(--muted); } pre.code{ color:var(--code); background:var(--code-bg); border:1px solid var(--border); padding:1rem; border-radius:.5rem; overflow:auto; } .btn-outline-dark{ border-color:#333; color:#111; } .btn-outline-dark:hover{ background:#111; color:#fff; } [data-bs-theme="dark"] .btn-outline-dark{ border-color:#3a4a7a; color:#e6e9ef; } [data-bs-theme="dark"] .btn-outline-dark:hover{ background:#223058; color:#e6e9ef; } /* Tema toggle (opcional) */ .theme-toggle .form-select{ min-width: 9rem; } /* ============================= Tabela de entrada (#tblInput) ============================= */ .scroll-x{ overflow-x: auto; } /* Cabeçalhos SEM quebra de palavras e com fixação ao topo */ #tblInput thead th{ background: var(--thead); color: var(--thead-text); border-color: var(--thead); position: sticky; top: 0; z-index: 2; white-space: nowrap; /* não quebrar expressões/títulos */ word-break: keep-all; /* não separar palavras ao meio */ hyphens: none; /* sem hifenização automática */ } /* Bordas do corpo da tabela */ #tblInput tbody td{ border-color: var(--border); } /* Primeira coluna (Unidade): campo de texto mais largo */ #tblInput tbody tr > td:first-child .form-control{ min-width: var(--min-col-text); } /* Demais inputs numéricos: largura mínima visível e alinhamento à direita */ #tblInput input[type="number"].form-control, #tblInput input.form-control[type="number"], #tblInput .form-control[type="number"]{ min-width: var(--min-col-num); text-align: right; font-variant-numeric: tabular-nums; /* dígitos monoespaçados para leitura */ } /* Aparência consistente dos inputs */ .form-control, .form-select{ background: var(--input-bg); color: var(--input-text); border:1px solid var(--border); } .form-control::placeholder{ color: var(--input-placeholder); } .form-control:focus, .form-select:focus{ border-color: var(--link); box-shadow: 0 0 0 .2rem var(--focus-ring); } /* Remover spinners de number para reduzir confusão visual (opcional) */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } input[type=number]{ -moz-appearance:textfield; } /* Linhas mais "respiráveis" sem aumentar muito a altura */ .table.table-sm > :not(caption) > * > *{ padding: .45rem .5rem; } /* ============================= Tabela de resultados (#tblResultados) ============================= */ #tblResultados thead th{ background: var(--thead); color:var(--thead-text); border-color: var(--thead); position: sticky; top: 0; z-index: 1; white-space: nowrap; word-break: keep-all; hyphens:none; } #tblResultados tbody td{ border-color: var(--border); white-space: nowrap; } /* Destaques de colunas principais */ #tblResultados td.text-danger{ font-weight: 700; } #tblResultados td.text-primary{ font-weight: 600; } /* ============================= Escalas/Classes visuais (badges) ============================= */ .badge-class{ font-weight:600; padding:.35rem .55rem; border-radius:.5rem; border:1px solid transparent; } /* Muito bom (0.00–0.15) */ .class-muito-bom{ background:#e7f5e9; color:#0b8a2a; border-color:#b8e6c2; } /* Bom (0.15–0.30) */ .class-bom{ background:#e8f3ff; color:#0d5bd1; border-color:#c6ddff; } /* Regular (0.30–0.45) */ .class-regular{ background:#fff4e6; color:#b35c00; border-color:#ffd3a6; } /* Preocupante (0.45–0.60) */ .class-preocupante{ background:#ffe9e6; color:#b13b2e; border-color:#ffc2b8; } /* Alto risco (0.60–0.80) */ .class-alto-risco{ background:#fde3ff; color:#7a1ea1; border-color:#f0b8ff; } /* Crítico (>=0.80) */ .class-critico{ background:#ffebf0; color:#bb002f; border-color:#ffcad7; } /* Dark mode ajustes de badge */ [data-bs-theme="dark"] .class-muito-bom{ background:#153820; color:#9ee6a9; border-color:#235b34; } [data-bs-theme="dark"] .class-bom{ background:#11273f; color:#a3c9ff; border-color:#1e4470; } [data-bs-theme="dark"] .class-regular{ background:#3c2a10; color:#ffd8a6; border-color:#6b491b; } [data-bs-theme="dark"] .class-preocupante{ background:#3d1a15; color:#ffc8bf; border-color:#6e3128; } [data-bs-theme="dark"] .class-alto-risco{ background:#32143a; color:#e0b8ff; border-color:#55215f; } [data-bs-theme="dark"] .class-critico{ background:#40121f; color:#ffb8c8; border-color:#6c2033; } /* ============================= Gráficos (Chart.js wrappers) ============================= */ #chartBar, #chartRadar{ width:100%; max-width:100%; } /* Alturas recomendadas para consistência visual */ #chartBar{ height: 360px; } #chartRadar{ height: 360px; } /* Evitar que o canvas estoure no dark com borda invisível */ canvas{ background: transparent; } /* ============================= Relatório ============================= */ #relatorio p{ margin-bottom:.5rem; } #relatorio ul{ margin-bottom:.5rem; } /* ============================= Responsividade ============================= */ @media (max-width: 1200px){ :root{ --min-col-text: 16rem; --min-col-num: 7.5rem; } } @media (max-width: 992px){ :root{ --min-col-text: 14rem; --min-col-num: 7rem; } } @media (max-width: 768px){ :root{ --min-col-text: 12rem; --min-col-num: 6.5rem; } } /* ============================= Utilitários ============================= */ .nowrap{ white-space: nowrap; } .wider{ min-width: 10rem !important; } .numbers{ text-align: right; font-variant-numeric: tabular-nums; } /* ===== Intro Espiritual — lapidações estéticas ===== */ .moldura{ background:var(--bg-card); border:1px solid var(--bd-card); border-radius:1rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.04); padding:1.25rem; } .moldura-lg{ padding:2rem; } .moldura-dash{ border-style:dashed; } .maxw-860{ max-width:860px; margin-left:auto; margin-right:auto; } .maxw-920{ max-width:920px; margin-left:auto; margin-right:auto; } .text-justify{ text-align:justify; text-justify:inter-word; hyphens:auto; } .fs-tight { font-size: .985rem; line-height: 1.5; } .fs-lean { font-size: .925rem; line-height: 1.5; } .heading-med{ color:var(--text-med); } .text-strong{ color:var(--text-strong); } .text-muted-2{ color:var(--text-muted); } /* Ajustes finos da seção */ #intro-espiritual h2, #intro-espiritual h5, #intro-espiritual h6 { margin-bottom:.6rem; } #intro-espiritual .blockquote { font-size:1rem; } #intro-espiritual .lead { font-size:1rem; line-height:1.6; } @media (min-width: 992px){ #intro-espiritual .lead { font-size:1.05rem; } }