/* ============================================================================ 23-ux-procedimentos.css — CAMADA 23 · refino UX · 2026-08-17 Escopo: aba PROCEDIMENTOS do Painel Master (#master-tab-procedimentos) e o MODAL de procedimento (#reg-modal, quando traz #proc-codigo). POR QUE UMA FOLHA SEPARADA A tela de Procedimentos vive em #view-master, mas o modal dela e filho direto de (reg/01.js: ensureModalRoot), FORA de #view-master. Como 23-ux-admin.css tem por contrato "tudo escopado em #view-master/#view-admin", uma regra de #reg-modal nao cabe la. Esta folha carrega depois e trata os dois lugares. PEDIDO ATENDIDO "Diminuir o layout da pagina e o espacamento do campo procedimento, para visualizar todas as funcionalidades na tela." REGRAS DERROTADAS (cada uma citada como arquivo:linha na secao) - aurora-master.css:362-375 th/td 10px 12px - aurora-core.css:326 td 11px 12px - aurora-core.css:130 .filters padding 14px 18px / gap 14px - aurora-core.css:359 .au-sec gap 12px / margin-bottom 18px - aurora-core.css:167 .kpis gap 14px / minmax(190px) - 14-kanban-ubs-agenda.css:905 .reg-proc-checks (regra MORTA, ver secao 4) ARMADILHA DE ESPECIFICIDADE (a mesma de 23-ux-admin.css:29-34) aurora-master.css usa "#view-master .master-tab:not(#master-tab-map) td", que pesa (2,3,1) porque :not(#id) vale um ID. Para vencer sem !important o id aparece repetido: "#view-master#view-master.aur". REVERSIVEL: apague o de css/23-ux-procedimentos.css no index.html e a tela volta exatamente ao estado de 17/08/2026. ============================================================================ */ /* ============================================================================ 1. DENSIDADE DA TABELA [derrota aurora-master.css:362] ---------------------------------------------------------------------------- Sao ~4.759 procedimentos em paginas de 100. Com 10px 12px por celula cabem ~9 linhas na dobra; a 6px 10px cabem ~13, sem encostar texto em texto (font-size continua 13px, line-height do kit). ========================================================================== */ #view-master#view-master.aur #master-tab-procedimentos .au-table th{ padding:7px 10px; } #view-master#view-master.aur #master-tab-procedimentos .au-table td{ padding:6px 10px; } /* a coluna de acoes nao precisa da altura do botao inteiro */ #view-master#view-master.aur #master-tab-procedimentos .au-table .icon-btn{ width:26px; height:26px; } /* MEDIDO NO NAVEGADOR: a linha estava com 73px mesmo com o td em 6px 10px. O culpado nao era o padding — era .au-toolbar (aurora-core.css:362) com flex-wrap:wrap na coluna de acoes: depois que a coluna "Situacao" entrou, a ultima coluna ficou estreita e os DOIS botoes de 26px quebravam em duas linhas (26+8+26 = 60px), esticando a linha inteira. nowrap + largura minima da coluna resolve na origem. */ #view-master#view-master.aur #master-tab-procedimentos .au-table td .au-toolbar{ flex-wrap:nowrap; gap:4px; } #view-master#view-master.aur #master-tab-procedimentos .au-table th:last-child, #view-master#view-master.aur #master-tab-procedimentos .au-table td:last-child{ width:1%; white-space:nowrap; } /* o avatar da inicial puxava a linha para 34px */ #view-master#view-master.aur #master-tab-procedimentos .au-table .pt .av{ width:24px; height:24px; font-size:11px; } #view-master#view-master.aur #master-tab-procedimentos .au-table .pt{ gap:8px; } /* legenda da especialidade: passa a caber na mesma altura da linha */ #view-master#view-master.aur #master-tab-procedimentos .au-table .k-sub{ font-size:11px; line-height:1.25; margin-top:1px; } /* ============================================================================ 2. BARRA DE FILTROS E RITMO DA SECAO [derrota aurora-core.css:130/359] ---------------------------------------------------------------------------- .filters com 14px 18px de padding + .au-sec com 18px de margem embaixo empurravam a tabela para fora da primeira dobra em telas de 768px de altura. ========================================================================== */ #view-master#view-master.aur #master-tab-procedimentos .filters{ padding:9px 12px; gap:8px; } #view-master#view-master.aur #master-tab-procedimentos .au-sec{ gap:8px; margin-bottom:10px; } #view-master#view-master.aur #master-tab-procedimentos .au-sec-head{ gap:8px; } /* ============================================================================ 3. CARTOES DE INDICADOR [derrota aurora-core.css:167] ---------------------------------------------------------------------------- Quatro KPIs ocupavam ~150px de altura antes da busca. Encolhidos, seguem legiveis e devolvem a tabela para a dobra. Sem mexer nas cores (secao 9 de 23-ux-admin.css continua valendo). ========================================================================== */ #view-master#view-master.aur #master-tab-procedimentos .kpis{ grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px; } #view-master#view-master.aur #master-tab-procedimentos .kpis .kpi{ padding:10px 12px; } #view-master#view-master.aur #master-tab-procedimentos .kpis .k-val{ font-size:19px; line-height:1.15; } #view-master#view-master.aur #master-tab-procedimentos .kpis .k-val em{ font-size:11px; } #view-master#view-master.aur #master-tab-procedimentos .kpis .k-sub{ font-size:10.5px; line-height:1.3; } #view-master#view-master.aur #master-tab-procedimentos .kpis .ring{ width:38px; height:38px; } /* em tela baixa os KPIs viram uma faixa de 2 colunas: a tabela e o que importa */ @media (max-height:820px){ #view-master#view-master.aur #master-tab-procedimentos .kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); } #view-master#view-master.aur #master-tab-procedimentos .kpis .ring{ display:none; } } /* ============================================================================ 4. MODAL DO PROCEDIMENTO — GRADE DOS CHECKBOXES [regra morta reposta] ---------------------------------------------------------------------------- BUG: 14-kanban-ubs-agenda.css:905 declara "#view-regulacao .reg-proc-checks { display:grid; ... }" mas #reg-modal e filho direto de (reg/01.js: ensureModalRoot), logo NUNCA esta sob #view-regulacao. A grade nunca valeu: os 8 checkboxes de "Configuracao / Regulacao" empilhavam em coluna unica e esticavam o modal alem da altura da tela. O mesmo defeito ja tinha sido diagnosticado e resolvido na Farmacia com .rf-group — ver aurora-p-regfarm.css:20-23. Aqui a grade e reposta no lugar, sem renomear classe (o markup de reg/01.js:741-743 fica intacto). ========================================================================== */ #reg-modal .reg-proc-flags{ margin-top:6px; } #reg-modal .reg-proc-checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:4px 14px; } #reg-modal .reg-chk{ display:flex; align-items:center; gap:8px; font-size:.85rem; line-height:1.25; } #reg-modal .reg-chk input{ width:16px; height:16px; flex:0 0 auto; margin:0; } /* ============================================================================ 5. MODAL DO PROCEDIMENTO — DENSIDADE [derrota 02-base.css:959-993] ---------------------------------------------------------------------------- O formulario tem 7 blocos (busca SIGTAP, identificacao, nome/descricao, sexo/idade/complexidade, configuracao, acompanhantes, variacoes, unidades). Com a grade da secao 4 ja cabe muito mais; aqui so se aperta o respiro vertical para o rodape de acoes ficar visivel sem rolar. :has() restringe ao modal de PROCEDIMENTO — os outros modais da regulacao (vaga, importacao, laboratorio) nao sao afetados. ========================================================================== */ #reg-modal:has(#proc-codigo) .au-form{ gap:8px; } #reg-modal:has(#proc-codigo) .au-fld{ gap:4px; } #reg-modal:has(#proc-codigo) .au-fld > label{ font-size:11px; line-height:1.2; } #reg-modal:has(#proc-codigo) .reg-proc-relations{ margin-top:4px; } #reg-modal:has(#proc-codigo) .reg-ac-label{ font-size:11px; line-height:1.3; } #reg-modal:has(#proc-codigo) .reg-modal-actions{ margin-top:10px; } /* o modal de procedimento e o mais alto da regulacao: ganha largura para que a grade da secao 4 renda 3 colunas em vez de 2 */ #reg-modal:has(#proc-codigo) .reg-modal-box{ --modal-w:920px; } /* ============================================================================ 6. GRADE DE AGENDA — COLUNAS NOVAS [Onda 2 · parametrizacao] ---------------------------------------------------------------------------- A tabela de "Profissionais e horários" ganhou Tipo de compromisso, Faixa etaria e a observacao que sai no comprovante. Sem estas regras os dois campos de idade quebram a linha e o campo de observacao estica a coluna. Escopado na propria tabela (.reg-agenda-rows), nao no modulo inteiro. ========================================================================== */ .reg-agenda-rows .reg-ag-idade{ display:flex; align-items:center; gap:4px; white-space:nowrap; } .reg-agenda-rows .reg-ag-idade input{ width:58px; min-width:0; padding-left:6px; padding-right:4px; text-align:center; } .reg-agenda-rows .reg-ag-idade span{ color:var(--ink-soft); font-size:12px; } /* observacao vira uma segunda linha dentro da propria celula de vagas/dias */ .reg-agenda-rows .reg-ag-obs{ display:block; width:100%; margin-top:6px; font-size:12px; padding:5px 8px; } /* a coluna de tipo nao precisa competir por largura com o nome do profissional */ .reg-agenda-rows select{ min-width:150px; } /* ============================================================================ 7. CADASTROS — UNIFICACAO DE PACIENTES [Onda 2 · item 2.5] ---------------------------------------------------------------------------- Aba "Cadastros" do Painel Master. Cada cartao e UM PAR de cadastros que o sistema suspeita ser a mesma pessoa; quem decide e o operador. O par fica lado a lado de proposito: a decisao e uma comparacao, e comparar em duas colunas e mais rapido do que ler duas fichas empilhadas. ========================================================================== */ #view-master#view-master.aur #master-tab-cadastros .cad-lista{ display:flex; flex-direction:column; gap:8px; } #view-master#view-master.aur #master-tab-cadastros .cad-card{ padding:12px 14px; border-radius:12px; } #view-master#view-master.aur #master-tab-cadastros .cad-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; } #view-master#view-master.aur #master-tab-cadastros .cad-motivo{ font-size:12.5px; color:var(--ink-soft); line-height:1.3; } /* o par: duas fichas + a seta no meio */ #view-master#view-master.aur #master-tab-cadastros .cad-par{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:stretch; } #view-master#view-master.aur #master-tab-cadastros .cad-seta{ display:flex; align-items:center; color:var(--ink-soft); font-size:18px; } #view-master#view-master.aur #master-tab-cadastros .cad-lado{ border:1px solid var(--line); border-radius:10px; padding:9px 11px; display:flex; flex-direction:column; gap:4px; min-width:0; } /* lado ja absorvido: a ficha vem do retrato guardado, nao existe mais no banco */ #view-master#view-master.aur #master-tab-cadastros .cad-lado.is-absorvida{ opacity:.62; border-style:dashed; } #view-master#view-master.aur #master-tab-cadastros .cad-lado-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } #view-master#view-master.aur #master-tab-cadastros .cad-nome{ font-weight:700; font-size:13.5px; line-height:1.25; word-break:break-word; } #view-master#view-master.aur #master-tab-cadastros .cad-meta{ display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-soft); } #view-master#view-master.aur #master-tab-cadastros .cad-silos{ display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; } #view-master#view-master.aur #master-tab-cadastros .cad-acoes{ margin-top:10px; padding-top:9px; border-top:1px solid var(--line); justify-content:flex-end; } /* em tela estreita o par empilha e a seta vira separador horizontal */ @media (max-width:820px){ #view-master#view-master.aur #master-tab-cadastros .cad-par{ grid-template-columns:1fr; gap:8px; } #view-master#view-master.aur #master-tab-cadastros .cad-seta{ justify-content:center; transform:rotate(90deg); } } /* As celulas da grade nao carregam mais .au-fld (ela e display:flex e tirava a do layout de tabela). O respiro entre rotulo e campo continua vindo do .au-fld interno; a celula so precisa nao esticar os controles. */ .reg-agenda-rows td > .au-fld{ gap:4px; } .reg-agenda-rows td > .au-fld > input, .reg-agenda-rows td > .au-fld > select{ width:100%; }