/* Perfil Studio — tokens/componentes alinhados ao padrão Plataforma Perfil */
/* ─── Superfícies ─────────────────────────────────────────── */
.card {
background: var(--surface-raised);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--sp-5) var(--sp-6);
}
.card + .card { margin-top: var(--sp-4); }
.card-head {
display: flex; align-items: center; gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.card-head h2 {
margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight); flex: 1; min-width: 0;
}
.card-head .sub { font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: var(--sp-4) var(--sp-5); margin: 0; border-bottom: 1px solid var(--border); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row-end { margin-left: auto; }
.grid { display: grid; gap: var(--sp-4); }
/* Dentro da grade quem espaça é o `gap`. A regra geral `.card + .card`
empurrava o segundo cartão para baixo e a linha nascia desalinhada —
o cabeçalho de "Contatos" 15px abaixo do de "Identidade". */
.grid > .card + .card { margin-top: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.section-title {
font-size: var(--fs-11); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--text-3); margin: 0 0 var(--sp-3);
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: var(--fs-12); }
.nums { font-variant-numeric: tabular-nums; }
.text-sm { font-size: var(--fs-12); }
.hint { font-size: var(--fs-12); color: var(--text-2); line-height: var(--lh-normal); }
/* ─── Botões ──────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--sp-2);
padding: 9px 16px; border-radius: var(--r-sm);
font-size: var(--fs-13); font-weight: var(--fw-medium);
border: 1px solid transparent; cursor: pointer;
white-space: nowrap; text-decoration: none;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
.btn:hover { text-decoration: none; }
}
.btn .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.btn-primary { background: var(--color-action-surface); color: var(--color-on-action); }
@media (hover: hover) {
.btn-primary:hover { filter: brightness(0.95); }
}
[data-theme="dark"] .btn-primary { background: var(--color-action-surface); color: var(--color-on-action); }
@media (hover: hover) {
[data-theme="dark"] .btn-primary:hover { background: var(--color-action-accent); color: #11151c; }
}
.btn-secondary {
background: var(--surface-raised); color: var(--text-1);
border-color: var(--border-strong);
}
@media (hover: hover) {
.btn-secondary:hover { background: var(--surface-hover); }
}
.btn-quiet { background: transparent; color: var(--text-2); }
@media (hover: hover) {
.btn-quiet:hover { background: var(--surface-hover); color: var(--text-1); }
}
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger-border); }
@media (hover: hover) {
.btn-danger:hover { background: var(--danger-soft); }
}
.btn-success { background: var(--success); color: #fff; }
@media (hover: hover) {
.btn-success:hover { filter: brightness(1.08); }
}
[data-theme="dark"] .btn-success { color: #10201a; }
.btn:disabled, .btn[aria-disabled="true"] {
opacity: .45; cursor: not-allowed; pointer-events: none;
}
.btn-sm { padding: 5px 10px; font-size: var(--fs-12); }
.btn-sm .ico { width: 14px; height: 14px; flex-basis: 14px; }
.btn-lg { padding: 12px 22px; font-size: var(--fs-15); }
.btn-block { width: 100%; }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .ico { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-group { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.btn-group .btn { border-radius: 0; border: 0; border-right: 1px solid var(--border); }
.btn-group .btn:last-child { border-right: 0; }
.btn-group .btn[aria-pressed="true"] { background: var(--color-action-soft); color: var(--color-action-accent); }
[data-theme="dark"] .btn-group .btn[aria-pressed="true"] { color: var(--color-action-accent); }
/* ─── Campos ──────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2);
display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.field .opt { color: var(--text-3); font-weight: var(--fw-regular); }
.input, .select, .textarea {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: var(--surface-raised); color: var(--text-1);
font-size: var(--fs-13);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--color-action-accent);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.textarea { min-height: 84px; resize: vertical; }
.select {
appearance: none; padding-right: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
[data-theme="dark"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
.input.is-warning { border-color: var(--warning-border); background: var(--warning-soft); }
.input.is-danger { border-color: var(--danger-border); background: var(--danger-soft); }
.field-note { font-size: var(--fs-11); color: var(--text-3); display: flex; gap: 4px; align-items: flex-start; }
.field-note .ico { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 1px; }
.search {
position: relative; flex: 1 1 240px; min-width: 180px; max-width: 380px;
}
.search .ico {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--text-3); pointer-events: none;
}
.search .input { padding-left: 33px; }
.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--color-action-accent); cursor: pointer; }
/* ─── Selo / etiqueta ─────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-11); font-weight: var(--fw-medium);
padding: 2px 8px; border-radius: var(--r-pill);
border: 1px solid var(--border); background: var(--neutral-soft);
color: var(--text-2); white-space: nowrap;
}
.badge .ico { width: 12px; height: 12px; flex: 0 0 12px; }
.badge-accent { background: var(--color-action-soft); color: var(--color-brand-accent); border-color: var(--color-action-border); }
[data-theme="dark"] .badge-accent { color: var(--color-action-accent); }
.badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.badge-square { border-radius: var(--r-xs); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--text-3); }
.dot-success { background: var(--success); }
.dot-warning { background: var(--warning); }
.dot-danger { background: var(--danger); }
.dot-accent { background: var(--color-action-accent); }
/* ─── Indicadores numéricos ───────────────────────────────── */
.stat {
background: var(--surface-raised); border: 1px solid var(--border);
border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.stat .stat-label {
font-size: var(--fs-12); color: var(--text-2);
display: flex; align-items: center; gap: 6px;
}
.stat .stat-label .ico { width: 14px; height: 14px; flex: 0 0 14px; color: var(--text-3); }
.stat .stat-value {
font-size: var(--fs-24); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.stat .stat-foot { font-size: var(--fs-11); color: var(--text-3); }
.stat.is-critical { border-color: var(--danger-border); }
.stat.is-critical .stat-value { color: var(--danger); }
/* ─── Alertas ─────────────────────────────────────────────── */
/* O AVISO É UM PARÁGRAFO COM UM ÍCONE, não uma grade de pedaços.
Era `display: flex`, e num flex TODO filho vira item: um `` no meio
da frase saltava para uma coluna própria e a frase saía picada — "Este é um
/ perfil / do / sistema / : o nome não muda". O mesmo defeito que quebrou os
passos da Ajuda, e pelo mesmo motivo.
Bloco com o ícone flutuando à esquerda mantém o texto corrido, com ou sem
ênfase no meio dele, e não exige que quem escreve o aviso saiba embrulhar o
conteúdo num elemento só. */
.alert {
display: block;
padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
border: 1px solid var(--border); background: var(--neutral-soft);
font-size: var(--fs-13); line-height: var(--lh-normal);
}
.alert > .ico {
width: 18px; height: 18px; flex: 0 0 18px;
float: left; margin: 1px var(--sp-3) 0 0;
}
.alert::after { content: ""; display: block; clear: both; }
/* `strong` É ÊNFASE, sempre. Tentei tratar como TÍTULO o que abre o aviso, com
`.ico + strong` — e o seletor de irmão adjacente ignora nós de texto: ele
casava com um `` que estava no MEIO da frase, logo depois do ícone e
de umas palavras. A frase saía partida de novo, agora em outro lugar.
CSS não enxerga texto solto, então não há como distinguir os dois casos por
seletor. Quem quiser um título no aviso declara `.alert-titulo` — explícito
é melhor do que adivinhado. */
.alert strong { font-weight: var(--fw-semibold); }
.alert .alert-titulo { display: block; font-weight: var(--fw-semibold); margin-bottom: 2px; }
.alert-info { background: var(--color-action-soft); border-color: var(--color-action-border); color: var(--text-1); }
.alert-info .ico { color: var(--color-action-accent); }
.alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--text-1); }
.alert-success .ico { color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--text-1); }
.alert-warning .ico { color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--text-1); }
.alert-danger .ico { color: var(--danger); }
.alert .row-end { flex: 0 0 auto; }
/* ─── Tabelas ─────────────────────────────────────────────── */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table th {
text-align: left; font-size: var(--fs-11); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--text-3); padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border); white-space: nowrap;
background: var(--surface-raised);
}
.table td {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) {
.table tbody tr:hover { background: var(--surface-hover); }
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-strong { font-weight: var(--fw-medium); color: var(--text-1); }
.table .cell-sub { font-size: var(--fs-11); color: var(--text-3); margin-top: 2px; }
.table .cell-actions { text-align: right; white-space: nowrap; }
.table tr.is-selected td { background: var(--color-action-soft); }
/* Tabela ampla com cabeçalho fixo (PMAI) */
.sheet-wrap {
overflow: auto; max-height: calc(100vh - 320px); min-height: 260px;
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface-raised);
}
.sheet { border-collapse: separate; border-spacing: 0; font-size: var(--fs-12); width: max-content; min-width: 100%; }
.sheet th, .sheet td {
padding: 7px 10px; border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border); white-space: nowrap;
}
.sheet th {
position: sticky; top: 0; z-index: 3;
background: var(--surface-sunken);
font-size: var(--fs-10); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: .04em; color: var(--text-2);
text-align: left;
}
.sheet th.grp {
top: 0; z-index: 4; text-align: center;
border-bottom: 1px solid var(--border-strong);
}
.sheet thead tr:nth-child(2) th { top: 29px; z-index: 3; }
.sheet .col-freeze {
position: sticky; left: 0; z-index: 2;
background: var(--surface-raised);
border-right: 1px solid var(--border-strong);
}
.sheet thead .col-freeze { z-index: 5; background: var(--surface-sunken); }
.sheet .col-freeze-2 { position: sticky; left: 64px; z-index: 2; background: var(--surface-raised); }
.sheet thead .col-freeze-2 { z-index: 5; background: var(--surface-sunken); }
@media (hover: hover) {
.sheet tbody tr:hover td { background: var(--surface-hover); }
}
@media (hover: hover) {
.sheet tbody tr:hover td.col-freeze, .sheet tbody tr:hover td.col-freeze-2 { background: var(--surface-hover); }
}
.sheet td.calc { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; background: var(--surface-sunken); }
.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .cell-input {
width: 100%; border: 1px solid transparent; background: transparent;
border-radius: var(--r-xs); padding: 3px 5px; font-size: var(--fs-12);
color: var(--text-1); min-width: 74px;
}
@media (hover: hover) {
.sheet .cell-input:hover { border-color: var(--border); background: var(--surface-raised); }
}
.sheet .cell-input:focus { outline: none; border-color: var(--color-action-accent); box-shadow: 0 0 0 2px var(--focus-ring); background: var(--surface-raised); }
.sheet .cell-input.num { text-align: right; }
.sheet tfoot td {
position: sticky; bottom: 0; z-index: 3;
background: var(--surface-sunken); font-weight: var(--fw-semibold);
border-top: 1px solid var(--border-strong);
}
.group-tint-a { background: color-mix(in srgb, var(--color-action-soft) 45%, transparent); }
.group-tint-b { background: color-mix(in srgb, var(--warning-soft) 40%, transparent); }
.group-tint-c { background: color-mix(in srgb, var(--success-soft) 40%, transparent); }
/* ─── Abas ────────────────────────────────────────────────── */
.tabs {
display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border);
overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
padding: var(--sp-3) var(--sp-3); border: 0; background: transparent;
color: var(--text-2); font-size: var(--fs-13); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px;
display: inline-flex; align-items: center; gap: var(--sp-2);
white-space: nowrap;
}
@media (hover: hover) {
.tab:hover { color: var(--text-1); }
}
.tab[aria-selected="true"] {
color: var(--color-brand-accent); border-bottom-color: var(--color-action-accent);
font-weight: var(--fw-medium);
}
[data-theme="dark"] .tab[aria-selected="true"] { color: var(--color-action-accent); }
.tab .ico { width: 15px; height: 15px; flex: 0 0 15px; }
.tab .count { font-size: var(--fs-10); padding: 0 6px; }
/* ─── Trilha (breadcrumb) ─────────────────────────────────── */
.crumbs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: var(--fs-13); color: var(--text-2); min-width: 0;
}
.crumbs .sep { color: var(--text-3); }
.crumbs a { color: var(--text-2); }
@media (hover: hover) {
.crumbs a:hover { color: var(--color-action-accent); }
}
.crumbs .current { color: var(--text-1); font-weight: var(--fw-medium); }
/* ─── Estados ─────────────────────────────────────────────── */
.state {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: var(--sp-3);
padding: var(--sp-12) var(--sp-6);
}
.state .state-icon {
width: 48px; height: 48px; border-radius: var(--r-md);
display: grid; place-items: center;
background: var(--neutral-soft); color: var(--text-3);
border: 1px solid var(--border);
}
.state .state-icon .ico { width: 24px; height: 24px; }
.state h3 { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); }
.state p { margin: 0; font-size: var(--fs-13); color: var(--text-2); max-width: 460px; }
.state .state-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.state.is-warning .state-icon { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.state.is-danger .state-icon { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.state.is-locked .state-icon { background: var(--neutral-soft); color: var(--text-2); }
/* Carregando */
.skeleton {
background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-hover) 37%, var(--surface-sunken) 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
border-radius: var(--r-xs);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-line { height: 12px; margin-bottom: 10px; }
.sk-line.w-30 { width: 30%; } .sk-line.w-45 { width: 45%; }
.sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; } .sk-line.w-100 { width: 100%; }
.spinner {
width: 18px; height: 18px; flex: 0 0 18px;
border: 2px solid var(--border-strong); border-top-color: var(--color-action-accent);
border-radius: 50%; animation: spin .8s linear infinite;
}
.progress-track { height: 5px; background: var(--neutral-soft); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-action-accent); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }
/* ─── Área de envio ───────────────────────────────────────── */
.dropzone {
border: 1.5px dashed var(--border-dashed); border-radius: var(--r-md);
padding: var(--sp-10) var(--sp-6); text-align: center;
background: var(--surface-code); cursor: pointer;
transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
@media (hover: hover) {
.dropzone:hover, .dropzone.is-over { border-color: var(--color-action-accent); background: var(--color-action-soft); }
}
.dropzone .ico { width: 30px; height: 30px; margin: 0 auto var(--sp-3); color: var(--text-3); }
.dropzone .dz-title { font-size: var(--fs-14); font-weight: var(--fw-medium); }
.dropzone .dz-sub { font-size: var(--fs-12); color: var(--text-3); margin-top: 4px; }
.file-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: var(--r-pill);
border: 1px solid var(--border); background: var(--surface-raised);
font-size: var(--fs-12); color: var(--text-2);
}
.file-chip .ico { width: 13px; height: 13px; flex: 0 0 13px; }
/* ─── Linha do tempo / etapas ─────────────────────────────── */
.steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.step {
display: flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-12); color: var(--text-3);
padding: 5px 10px; border-radius: var(--r-pill);
border: 1px solid var(--border); background: var(--surface-raised);
}
.step .ico { width: 14px; height: 14px; flex: 0 0 14px; }
.step.is-done { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.step.is-active { color: var(--color-brand-accent); border-color: var(--color-action-border); background: var(--color-action-soft); font-weight: var(--fw-medium); }
[data-theme="dark"] .step.is-active { color: var(--color-action-accent); }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-4); position: relative; }
.tl-item::before {
content: ""; position: absolute; left: 11px; top: 26px; bottom: 0;
width: 1px; background: var(--border);
}
.tl-item:last-child::before { display: none; }
.tl-dot {
width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%;
display: grid; place-items: center; background: var(--neutral-soft);
border: 1px solid var(--border); color: var(--text-2); z-index: 1;
}
.tl-dot .ico { width: 12px; height: 12px; }
.tl-body { flex: 1; min-width: 0; font-size: var(--fs-13); }
.tl-body .tl-meta { font-size: var(--fs-11); color: var(--text-3); margin-top: 2px; }
/* ─── Painel dividido / painéis contextuais ───────────────── */
.split {
display: grid; gap: var(--sp-4);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
}
.split-pane {
background: var(--surface-raised); border: 1px solid var(--border);
border-radius: var(--r-md); overflow: hidden; min-width: 0;
}
.split-pane-head {
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2);
background: var(--surface-sunken);
}
.split-pane-body { padding: var(--sp-4); max-height: 560px; overflow: auto; }
@media (max-width: 1023px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* Painel contextual lateral (Perfil Source) — NÃO é navegação principal */
.workspace {
display: grid; gap: var(--sp-4);
grid-template-columns: 268px minmax(0, 1fr);
align-items: start;
}
.workspace.right { grid-template-columns: minmax(0, 1fr) 300px; }
.ctx-panel {
background: var(--surface-raised); border: 1px solid var(--border);
border-radius: var(--r-md); overflow: hidden;
position: sticky; top: calc(var(--contexthdr-h) + var(--sp-4));
}
.ctx-panel-head {
padding: var(--sp-3); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2);
}
.ctx-panel-head .ico { width: 15px; height: 15px; flex: 0 0 15px; }
.ctx-panel-body { padding: var(--sp-2); max-height: 480px; overflow: auto; }
.ctx-item {
display: flex; align-items: center; gap: var(--sp-2);
padding: 6px var(--sp-2); border-radius: var(--r-xs);
font-size: var(--fs-12); color: var(--text-2); cursor: pointer;
border: 0; background: transparent; width: 100%; text-align: left;
}
@media (hover: hover) {
.ctx-item:hover { background: var(--surface-hover); color: var(--text-1); }
}
.ctx-item[aria-current="true"] { background: var(--color-action-soft); color: var(--color-action-accent); font-weight: var(--fw-medium); }
[data-theme="dark"] .ctx-item[aria-current="true"] { color: var(--color-action-accent); }
.ctx-item .ico { width: 15px; height: 15px; flex: 0 0 15px; color: var(--text-3); }
.ctx-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item .mark { font-size: var(--fs-10); font-variant-numeric: tabular-nums; }
.ctx-item .mark.add { color: var(--success); }
.ctx-item .mark.del { color: var(--danger); }
@media (max-width: 1023px) {
.workspace, .workspace.right { grid-template-columns: minmax(0, 1fr); }
.ctx-panel { position: static; }
}
/* ─── Código e diff ───────────────────────────────────────── */
.code {
font-family: var(--font-mono); font-size: var(--fs-12);
line-height: 1.65; background: var(--surface-code);
overflow-x: auto;
}
.code table { border-collapse: collapse; width: 100%; }
.code td { padding: 0 var(--sp-3); vertical-align: top; }
.code .ln {
width: 1%; text-align: right; color: var(--text-3);
user-select: none; border-right: 1px solid var(--border);
padding-right: var(--sp-3); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.code .src { white-space: pre; }
.code tr.add td { background: var(--diff-add-bg); }
.code tr.del td { background: var(--diff-del-bg); }
.code tr.add .ln { color: var(--diff-add-marker); }
.code tr.del .ln { color: var(--diff-del-marker); }
.code tr.hunk td { background: var(--surface-sunken); color: var(--text-2); font-size: var(--fs-11); padding-block: 4px; }
.tok-kw { color: #9333EA; } .tok-str { color: #0F766E; }
.tok-com { color: var(--text-3); font-style: italic; }
.tok-fn { color: #1D4FD8; } .tok-num { color: #B45309; }
[data-theme="dark"] .tok-kw { color: #C4A2FF; }
[data-theme="dark"] .tok-str { color: #7FDCB4; }
[data-theme="dark"] .tok-fn { color: #86B7FF; }
[data-theme="dark"] .tok-num { color: #F0B76B; }
.diffbar { display: inline-flex; gap: 1px; align-items: center; vertical-align: middle; }
.diffbar i { width: 7px; height: 7px; border-radius: 1px; background: var(--neutral-border); display: block; }
.diffbar i.a { background: var(--success); }
.diffbar i.d { background: var(--danger); }
/* ─── Lista de itens ──────────────────────────────────────── */
.list { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-raised); }
.list-item {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
min-width: 0;
}
.list-item:last-child { border-bottom: 0; }
@media (hover: hover) {
.list-item:hover { background: var(--surface-hover); }
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title {
font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-1);
display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.list-item .li-meta { font-size: var(--fs-11); color: var(--text-3); margin-top: 3px; }
.list-item .li-side { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.list-item > .ico { width: 17px; height: 17px; color: var(--text-3); }
.list-item > input[type="radio"], .list-item > input[type="checkbox"] { flex: 0 0 auto; }
/* ─── Sobreposição / modal ──────────────────────────────────
UM padrão para todo diálogo da aplicação: `.overlay > .modal > .modal-head +
.modal-body + .modal-foot`. Confirmação, valor, convite, acesso, perfil,
capacidade, contato, documento — todos a mesma casca, e a regra abaixo vale
para o próximo que alguém escrever.
O QUE ELA GARANTE, em qualquer altura de janela:
· o diálogo nunca passa de 90% da janela, e fica centralizado;
· o CABEÇALHO (título) e o RODAPÉ (botões) ficam presos nas pontas;
· quem rola é o MIOLO — e a rolagem para nele, sem arrastar a página;
· no celular (≤ 640px) ele sobe do rodapé como folha, igual aos menus.
`dvh` e não só `vh`: no Safari do iPhone `100vh` é a janela SEM a barra de
endereço, então `90vh` passa da área visível e o rodapé some atrás dela.
`min(90vh, 90dvh)` pega o menor dos dois onde `dvh` existe e cai em `vh`
onde não existe. */
.overlay {
position: fixed; inset: 0; background: var(--overlay-scrim);
display: grid; place-items: center; padding: var(--sp-4);
z-index: var(--z-overlay);
}
/* O RODAPÉ NÃO SAI DA TELA. O diálogo inteiro rolava: um editor de perfil com
sete módulos passava da altura da janela e os botões Cancelar/Salvar ficavam
abaixo da dobra — quem não pensasse em rolar dentro do diálogo concluía que
não dava para salvar.
Agora quem rola é o CORPO; cabeçalho e rodapé ficam presos nas pontas. */
.modal {
background: var(--surface-raised); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
width: min(560px, 100%);
max-height: 90vh; max-height: min(90vh, 90dvh);
display: flex; flex-direction: column; min-height: 0;
}
.modal-head {
padding: var(--sp-5) var(--sp-6) var(--sp-3); flex: 0 0 auto;
border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: var(--fs-17); font-weight: var(--fw-semibold); }
.modal-body {
padding: var(--sp-4) var(--sp-6) var(--sp-5); font-size: var(--fs-13); color: var(--text-2);
flex: 1 1 auto; min-height: 0; overflow-y: auto;
/* A rolagem termina no miolo, não continua na página atrás do véu. */
overscroll-behavior: contain;
}
.modal-foot {
padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border);
display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
flex: 0 0 auto; background: var(--surface-raised);
border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg);
}
/* NO CELULAR O MODAL É FOLHA. Mesma largura de corte dos menus (640px, a de
`folha.js`): sobe do rodapé, cantos só em cima, alça no topo, safe-area no
rodapé. Caixa centralizada em tela de 390px é uma caixa com margem de 16px
e o polegar longe dos botões. */
@media (max-width: 640px) {
.overlay { padding: 0; place-items: end center; }
.modal, .modal-largo {
width: 100%; max-width: none;
max-height: 92vh; max-height: min(92vh, 92dvh);
border-radius: var(--r-lg) var(--r-lg) 0 0;
border-left: 0; border-right: 0; border-bottom: 0;
animation: folha-sobe var(--dur-slow) var(--ease);
}
/* A ALÇA diz "isto se arrasta" — a mesma dos menus em folha. */
.modal-head { position: relative; padding-top: var(--sp-6); }
.modal-head::before {
content: ""; position: absolute; top: var(--sp-2); left: 50%;
width: 38px; height: 4px; border-radius: 999px;
background: var(--border); transform: translateX(-50%);
}
.modal-foot {
border-radius: 0;
padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}
/* Alvo de 44px em tudo que se toca no rodapé da folha. */
.modal-foot .btn { min-height: 44px; }
}
/* ─── Menu suspenso genérico ──────────────────────────────────
Um só componente: menu do usuário, seletor de aplicação, menu
secundário do módulo (shell superior) e menu "Mais".
───────────────────────────────────────────────────────────── */
.menu {
position: absolute; right: 0; top: calc(100% + 6px);
min-width: 210px; background: var(--surface-raised);
border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-lg); padding: var(--sp-2); z-index: var(--z-overlay);
}
.menu-wide { min-width: 258px; }
.menu-label {
font-size: var(--fs-10); text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--text-3); padding: var(--sp-3) var(--sp-3) var(--sp-1); font-weight: var(--fw-semibold);
}
.menu-head {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3) var(--sp-3); margin-bottom: var(--sp-1);
border-bottom: 1px solid var(--border);
}
.menu-head .mh-nome { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-1); }
.menu-head .mh-sub { font-size: var(--fs-11); color: var(--text-3); }
.menu-item {
display: flex; align-items: center; gap: var(--sp-3); width: 100%;
padding: 7px var(--sp-3); border-radius: var(--r-sm);
border: 0; background: transparent; color: var(--text-2);
font-size: var(--fs-13); cursor: pointer; text-align: left;
}
@media (hover: hover) {
.menu-item:hover { background: var(--surface-hover); color: var(--text-1); text-decoration: none; }
}
.menu-item .ico { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-3); }
@media (hover: hover) {
.menu-item:hover .ico { color: var(--text-2); }
}
.menu-item .check { margin-left: auto; width: 15px; height: 15px; color: var(--color-action-accent); opacity: 0; }
.menu-item[aria-checked="true"] { color: var(--text-1); font-weight: var(--fw-medium); }
.menu-item[aria-checked="true"] .check { opacity: 1; }
.menu-item[aria-current="page"] {
background: var(--surface-active); color: var(--text-1); font-weight: var(--fw-medium);
}
.menu-item[aria-current="page"] .ico { color: var(--color-action-accent); }
.menu-item[aria-disabled="true"] { opacity: .5; cursor: default; }
.menu-item .soon {
margin-left: auto; font-size: var(--fs-10); color: var(--text-3);
background: var(--neutral-soft); border: 1px solid var(--border);
padding: 1px 6px; border-radius: var(--r-pill); font-weight: var(--fw-medium);
}
/* Atividade com descrição — usada no menu secundário do módulo */
.menu-item .mi-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.menu-item .mi-label { line-height: 1.3; }
.menu-item .mi-desc {
font-size: var(--fs-11); color: var(--text-3); line-height: 1.35;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}
.menu-item .count { margin-left: auto; }
/* Utilidades no menu de conta: por padrão NÃO aparecem — no shell-a elas
moram no bloco inferior da lateral, e duplicá-las seria ruído. O shell.css
as revela no shell-b, onde não existe coluna inferior. */
.menu-group[data-utils] { display: none; }
/* Cabeçalho e rodapé do menu de conta */
.menu-head { display: flex; align-items: center; gap: var(--sp-3); }
.menu-head .mh-text { min-width: 0; display: grid; }
.menu-foot {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3);
font-size: var(--fs-11); color: var(--text-3);
border-top: 1px solid var(--border);
}
.menu-foot .mf-rotulo { letter-spacing: var(--tracking-caps); text-transform: uppercase; }
/* Controle de tema compacto — três alvos visíveis, sem menu. Mora aqui, e não
em auth.css, porque o shell autenticado também o usa: deixá-lo só na folha
das telas de login obrigava a aplicação a carregar auth.css no shell. */
/* Um alvo, não três. Três botões lado a lado gastam largura permanente para
uma escolha que se faz uma vez por mês; o ícone mostra o estado atual e o
menu aparece só quando alguém quer trocar. */
.icon-btn {
display: grid; place-items: center;
min-width: 36px; min-height: 36px; padding: 0 var(--sp-2);
border: 1px solid transparent; border-radius: var(--r-sm);
background: transparent; color: var(--text-2); cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
.icon-btn:hover { background: var(--surface-hover); color: var(--text-1); }
}
.icon-btn[aria-expanded="true"] { background: var(--surface-active); color: var(--text-1); }
.icon-btn .ico { width: 17px; height: 17px; }
.theme-mini {
display: inline-flex; border: 1px solid var(--border);
border-radius: var(--r-pill); overflow: hidden; flex: 0 0 auto;
}
.theme-mini .theme-opt {
display: grid; place-items: center;
min-width: 34px; min-height: 30px; padding: 0 var(--sp-2);
border: 0; background: transparent; color: var(--text-3); cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme-mini .theme-opt + .theme-opt { border-left: 1px solid var(--border); }
@media (hover: hover) {
.theme-mini .theme-opt:hover { background: var(--surface-hover); color: var(--text-1); }
}
.theme-mini .theme-opt[aria-pressed="true"] {
background: var(--color-action-soft); color: var(--color-action-accent);
}
.theme-mini .ico { width: 14px; height: 14px; }
.menu-sep { height: 1px; background: var(--border); margin: var(--sp-2) 0; }
/* ─────────────────────────────────────────────
MENU DE CONTA — grupos rotulados
─────────────────────────────────────────────
O menu do chip de usuário é o único lugar que existe nos DOIS shells: no
rodapé da lateral (shell-a) e à direita da faixa (shell-b). Por isso tudo o
que vive nele funciona nos dois por construção — e o acesso a preferências e
à administração deixa de depender do modelo de navegação que a pessoa
escolheu.
A gramática é a mesma da sidebar agrupada: rótulo em maiúsculas, peso
reduzido, cor secundária. Quem já sabe ler a navegação sabe ler este menu.
Ordem canônica dos grupos:
MINHA CONTA — preferências pessoais, trocar senha
CONFIGURAÇÕES DA APLICAÇÃO — administração, visível conforme permissão
(separador) — Ajuda, e Sair isolado no rodapé
───────────────────────────────────────────── */
.menu-group + .menu-group { margin-top: var(--sp-2); }
.menu-group > .menu-label { padding-top: var(--sp-1); }
/* Alvo de toque do HIG. O menu de conta é usado no celular com o polegar, e
item de 32px ali é erro de mira, não de leitura. */
.menu-item { min-height: 44px; }
/* Sair fica isolado no rodapé, depois do separador, e em cor de perigo: é a
única ação do menu que interrompe o trabalho. */
.menu-item[data-conta="sair"] { color: var(--danger); }
.menu-item[data-conta="sair"] .ico { color: var(--danger); }
@media (hover: hover) {
.menu-item[data-conta="sair"]:hover { background: var(--danger-soft); color: var(--danger); }
}
/* ═══════════════════════════════════════════════════════════════════════════
FOLHA INFERIOR — o que todo menu flutuante vira na tela estreita.
Menu ancorado no canto superior direito é desenho de mouse. No celular ele
nasce longe do polegar, encosta na safe-area e, quando cresce, sai da tela —
foi o que apareceu nas capturas do iPhone: o menu da conta terminando na
borda de baixo, com "Sair" rente ao vidro.
A largura aqui é a MESMA de `folha.js` (640px). Duas fontes de verdade para
"é estreito?" dariam uma folha sem alça, ou uma alça sem folha, nos pixels
entre elas.
Vale para `.user-wrap .menu`, que é a estrutura do menu da conta E do
seletor de tema — o `theme.js` põe `user-wrap` no próprio host. Um
tratamento, duas superfícies, e a terceira que alguém criar amanhã.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.user-wrap .menu {
position: fixed;
left: 0; right: 0; top: auto; bottom: 0;
min-width: 0;
/* Cantos só em cima: a folha ENCOSTA no rodapé, e canto arredondado embaixo
deixa uma fresta de fundo que parece defeito de renderização. */
border-radius: var(--r-lg) var(--r-lg) 0 0;
border-left: 0; border-right: 0; border-bottom: 0;
padding: var(--sp-2) var(--sp-3)
calc(var(--sp-4) + env(safe-area-inset-bottom));
max-height: 82vh; overflow-y: auto;
/* A rolagem para no fim da folha em vez de arrastar a página atrás. */
overscroll-behavior: contain;
/* O ESCURECIMENTO é uma SOMBRA de espalhamento gigante, não um véu.
A primeira tentativa foi um `::before` com `position: fixed; inset: 0;
z-index: -1` — e ele escureceu a própria folha. O motivo é a ordem de
pintura: `.menu` tem `position: fixed` e `z-index`, então cria contexto
de empilhamento, e filho com z-index negativo é pintado DEPOIS do fundo
do pai. O véu ficava em cima do que devia proteger.
`0 0 0 100vmax` pinta só PARA FORA da caixa. Não tem esse problema, não
precisa de elemento novo no DOM, e o toque fora continua fechando pelo
ouvinte de documento que os menus já registram. */
box-shadow: 0 -8px 32px -8px rgba(0, 0, 0, .28),
0 0 0 100vmax rgba(0, 0, 0, .42);
animation: folha-sobe var(--dur-slow) var(--ease);
}
/* A ALÇA diz "isto se arrasta". Sem ela a folha é um menu grande no lugar
errado: ninguém tenta arrastar o que não parece arrastável. */
.folha-alca {
width: 38px; height: 4px; border-radius: 999px;
background: var(--border); margin: var(--sp-1) auto var(--sp-2);
flex: 0 0 auto;
}
.folha-x {
position: absolute; top: var(--sp-2); right: var(--sp-2);
display: grid; place-items: center;
min-width: 44px; min-height: 44px;
border: 0; background: none; color: var(--text-3);
border-radius: var(--r-sm); cursor: pointer;
}
.folha-x:focus-visible { outline: 2px solid var(--color-action-accent); outline-offset: -2px; }
/* Alvo de 44px em tudo que se toca dentro da folha. */
.user-wrap .menu .menu-item { min-height: 44px; }
}
/* Fora da tela estreita a alça e o X não existem — `folha.js` os remove, e
estas regras garantem que um resquício não apareça no desktop. */
@media (min-width: 641px) {
.folha-alca, .folha-x { display: none; }
}
@keyframes folha-sobe {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.user-wrap .menu { animation: none; }
}
/* ─── Rodapé de identidade ────────────────────────────────── */
.shell-foot {
font-size: var(--fs-11); color: var(--text-3);
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
justify-content: center;
/* recuo inferior generoso: a barra flutuante do estudo mora no canto e
cobria este texto em 1366 px no checkpoint 0.2 */
padding: var(--sp-6) var(--sp-4) 96px;
}
.env-tag {
font-size: var(--fs-10); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: .05em;
padding: 1px 6px; border-radius: var(--r-xs);
background: var(--warning-soft); color: var(--warning);
border: 1px solid var(--warning-border);
}
/* ─── Utilidades ──────────────────────────────────────────── */
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scroll-x { overflow-x: auto; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--sp-3); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.flex-1 { flex: 1; min-width: 0; }
.w-full { width: 100%; }
/* ─────────────────────────────────────────────
TOAST — confirmação passageira
─────────────────────────────────────────────
`.alert` ocupa espaço no fluxo e permanece até alguém removê-lo. Faltava o
oposto: a confirmação que aparece sobre o conteúdo, diz "salvo" e some
sozinha. Toda app precisava disso, e cada uma reimplementava — o Service Hub
chegou a carregá-la no próprio CSS enquanto o pin v2 não podia mudar.
───────────────────────────────────────────── */
.toast {
position: fixed;
left: 50%;
bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: var(--z-toast);
max-width: min(420px, calc(100vw - var(--sp-8)));
padding: var(--sp-3) var(--sp-5);
background: var(--surface-raised);
border: 1px solid var(--border);
border-radius: var(--r-pill);
box-shadow: var(--shadow-lg);
color: var(--text-1);
font-size: var(--fs-13);
display: flex; align-items: center; gap: var(--sp-2);
}
.toast .ico { width: 15px; height: 15px; flex: 0 0 15px; }
.toast.is-danger { border-color: var(--danger-border); color: var(--danger); }
.toast.is-success { border-color: var(--success-border); color: var(--success); }
@media (prefers-reduced-motion: no-preference) {
.toast { animation: toast-entra var(--dur-fast) var(--ease); }
@keyframes toast-entra {
from { opacity: 0; transform: translate(-50%, 6px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
}
/* ─────────────────────────────────────────────
TOUR GUIADO — vindo do PerfilReembolso
─────────────────────────────────────────────
O véu escurece a tela MENOS do que um modal: o objetivo é olhar para a
aplicação, não para o balão. E o alvo fica por cima do véu, iluminado —
é o dedo apontando. */
.tour-overlay {
position: fixed; inset: 0; z-index: var(--z-modal, 80);
background: var(--overlay-scrim);
}
body.tour-aberto { overflow: hidden; }
.tour-alvo {
position: relative; z-index: calc(var(--z-modal, 80) + 1);
border-radius: var(--r-sm);
box-shadow: 0 0 0 3px var(--color-action-accent), 0 0 0 9px var(--color-action-soft);
}
.tour-balao {
position: absolute; width: 340px; max-width: calc(100vw - 32px);
background: var(--surface-raised); color: var(--text-1);
border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-lg, 0 18px 48px rgba(0,0,0,.18));
padding: var(--sp-5); z-index: calc(var(--z-modal, 80) + 2);
}
.tour-balao.is-centro {
top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px;
}
.tour-titulo {
margin: 0 0 var(--sp-2); font-size: var(--fs-16);
font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight);
}
.tour-texto { font-size: var(--fs-13); line-height: var(--lh-relaxed); color: var(--text-2); }
.tour-texto strong { color: var(--text-1); font-weight: var(--fw-semibold); }
.tour-passos {
display: flex; gap: 6px; justify-content: center;
margin: var(--sp-4) 0 var(--sp-3);
}
.tour-ponto {
width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tour-ponto.is-atual { background: var(--color-action-accent); transform: scale(1.35); }
.tour-ponto.is-visto { background: var(--success); }
.tour-acoes { display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 860px) {
.tour-balao { width: calc(100vw - 32px); }
.tour-balao.is-centro { width: calc(100vw - 32px); }
}
/* ─────────────────────────────────────────────
TABELA DENSA — lista de trabalho, não vitrine
─────────────────────────────────────────────
Cartão mostra três coisas por item e ocupa a tela inteira com dez; linha
mostra oito e cabe cinquenta. Quem trabalha na lista precisa comparar, e
comparar exige ver junto. */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--border);
border-radius: var(--r-md); background: var(--surface-raised); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.tabela th, .tabela td {
padding: 9px var(--sp-4); text-align: left; vertical-align: middle;
border-bottom: 1px solid var(--border);
}
.tabela thead th {
position: sticky; top: 0; z-index: 1;
background: var(--surface-shell); color: var(--text-3);
font-size: var(--fs-11); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
white-space: nowrap;
}
.tabela thead th[data-ordenar] { cursor: pointer; user-select: none; }
@media (hover: hover) {
.tabela thead th[data-ordenar]:hover { color: var(--text-1); }
.tabela tbody tr:hover { background: var(--surface-hover); }
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr.is-clicavel { cursor: pointer; }
.tabela .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .cel-principal { font-weight: var(--fw-medium); color: var(--text-1); }
.tabela .cel-sub { display: block; color: var(--text-3); font-size: var(--fs-11); }
/* No celular a tabela vira lista de fichas: rolar de lado com o polegar é
pior do que empilhar. */
@media (max-width: 860px) {
.tabela-wrap { border: 0; background: transparent; }
.tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
.tabela thead { display: none; }
.tabela tbody tr {
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface-raised); margin-bottom: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
}
.tabela td { border: 0; padding: 3px 0; display: flex; gap: var(--sp-3); }
.tabela td::before {
content: attr(data-rotulo); flex: 0 0 40%;
color: var(--text-3); font-size: var(--fs-11);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.tabela td:first-child::before { content: ""; flex: 0; }
.tabela .col-num { text-align: left; }
}
/* ═══════════════════════════════════════════════════════════════════════
AJUSTE PARA IPHONE E IPAD — ordem do CEO, "Apple-friendly na aplicação
inteira".
Quatro das cinco coisas pedidas já estavam de pé e vieram de família:
a tipografia de sistema (-apple-system → SF), a paleta (#F5F5F7 de fundo,
#1D1D1F de tinta, #2563EB de ação), os raios e as sombras discretas. Isso
não é coincidência: PerfilEdu (static/style.css:1-21), Autopilot
(app.py:2302-2324) e PerfilX (templates/base.html:9-23) usam exatamente
estes valores. O que faltava é o que só aparece com o aparelho na mão —
e é o que este bloco resolve.
═══════════════════════════════════════════════════════════════════════ */
/* 1. NADA DE ZOOM INVOLUNTÁRIO AO TOCAR NUM CAMPO.
O Safari do iPhone dá zoom sozinho quando o campo tem menos de 16px, e
depois não volta: a pessoa digita o e-mail e a tela fica torta pelo resto
da sessão. 16px no campo é a única forma de impedir — `user-scalable=no`
resolveria e é proibido, porque tira o zoom de quem PRECISA dele. */
@media (max-width: 860px) {
.input, .select, .textarea { font-size: 16px; }
}
/* 2. ALVO DE TOQUE DE 44px.
A medida é da Apple e a razão é física: é a largura da polpa do dedo. Vale
onde o ponteiro é grosso — no mouse, 36px é confortável e 44px vira
desperdício de altura numa barra de ferramentas. */
@media (pointer: coarse) {
.btn, .icon-btn, .nav-item, .menu-item, .mod-item,
.theme-mini .theme-opt, .user-chip, .sidebar-toggle {
min-height: 44px;
}
/* CAMPO também é alvo de toque. Ficavam em 43px — um pixel abaixo da régua,
que ninguém acerta lendo o CSS e que só aparece medindo no aparelho.
`textarea` fica de fora porque a altura dela é a do conteúdo. */
.input:not(textarea), .select { min-height: 44px; }
.btn-sm { min-height: 40px; padding-inline: var(--sp-3); }
/* Ações em linha de tabela: o alvo cresce, a linha não. */
.acoes-linha .icon-btn { min-width: 44px; }
}
/* 3. RECUO DE SEGURANÇA (notch, ilha dinâmica, barra do gesto).
Sem isto o conteúdo passa por baixo do relevo do aparelho e a última linha
da tela fica cortada ao meio. */
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
.content { padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom)); }
.topnav-inner, .context-inner {
padding-left: max(var(--sp-4), env(safe-area-inset-left));
padding-right: max(var(--sp-4), env(safe-area-inset-right));
}
/* 4. RESPOSTA AO TOQUE.
Sem hover, a única confirmação de que o toque pegou é o próprio botão
afundar. É curto de propósito: animação longa numa lista de itens vira
espera. Fica fora de quem pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
.btn, .icon-btn, .nav-item, .mod-item, .card.stat, .tabela tr.is-clicavel {
transition: transform var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.btn:active, .icon-btn:active, .card.stat:active { transform: scale(.97); }
}
/* O realce cinza do toque no iOS aparece por cima do estilo próprio e some
com atraso, deixando um bloco pintado onde não há nada. */
.btn, .icon-btn, .nav-item, .mod-item, .menu-item, .tabela tr.is-clicavel,
.card.stat, .user-chip { -webkit-tap-highlight-color: transparent; }
/* 5. LARGURA: nada rola de lado.
Quem rola de lado é o próprio bloco largo (tabela, código), dentro da sua
caixa. A página nunca. */
.tabela-wrap, .table-wrap, .sheet-wrap, pre { max-width: 100%; overflow-x: auto; }
.card, .state, .list-item { min-width: 0; }
/* O VALOR pode quebrar em qualquer ponto: e-mail e URL longos não têm espaço
onde quebrar e, sem isto, esticam o cartão. O RÓTULO não — `anywhere`
partia "Nome" em "No/me", que é a tela dando defeito no lugar de dado
grande. Rótulo é curto por natureza; se não coube, o problema é a coluna. */
.list-item dd { min-width: 0; overflow-wrap: anywhere; }
.list-item dt { min-width: 0; overflow-wrap: break-word; }
/* RÓTULO E VALOR — o rótulo NUNCA quebra dentro da palavra.
Este par era flex com `dt { flex: 1 1 auto; min-width: 0 }` e
`dd { flex: 0 0 auto }`. O `dd` não encolhia nunca, então um valor longo —
um e-mail, um nome de contato inteiro — tomava a linha toda e o `dt`, que
podia encolher até zero, virava uma coluna de um caractere: "Classificação
fiscal" descia a tela uma letra por linha. Não é detalhe de estilo; é a
ficha do prestador ilegível.
Grade de duas colunas resolve na origem. `fit-content(42%)` dá ao rótulo a
largura do seu conteúdo, com teto de 42% — e o piso é o `min-content` dele,
que é a maior PALAVRA. Por isso a coluna nunca fica menor que a palavra e a
quebra no meio dela deixa de ser possível. Quem encolhe é o valor, que tem
`overflow-wrap: anywhere` e pode quebrar em qualquer ponto — e-mail e URL
longos não têm espaço onde quebrar. */
.list-item:has(> dt) {
display: grid;
grid-template-columns: fit-content(42%) minmax(0, 1fr);
gap: var(--sp-2) var(--sp-4);
align-items: baseline;
}
.list-item > dt { min-width: 0; }
.list-item > dd { margin: 0; min-width: 0; text-align: right; }
.list-item > dd .acoes-linha { justify-content: flex-end; }
/* Navegador sem `:has` cai aqui: continua flex, mas com o rótulo impedido de
encolher — que é a única parte que não pode faltar. */
@supports not selector(:has(*)) {
.list-item > dt { flex: 0 1 auto; }
.list-item > dd { flex: 1 1 auto; margin-left: auto; }
}
/* ═══════════════════════════════════════════════════════════════════════
AJUDA RÁPIDA — painel lateral por tela.
Origem: PerfilReembolso, `openHelp()` em frontend/index.html:7613. A
estrutura dele é seção da tela atual + seções fixas + rodapé com "rever
tour" e "manual completo", e é essa que está copiada aqui. O gatilho — um
"?" no cabeçalho de cada tela — vem do Autopilot (app.py:2709,
`? ajuda` chamando toggleHelp por página).
As duas apps chegaram na mesma conclusão por caminhos diferentes: a dúvida
se resolve NA TELA onde nasceu. Manual em outro lugar é manual que ninguém
abre.
═══════════════════════════════════════════════════════════════════════ */
.ajuda-scrim {
position: fixed; inset: 0; background: var(--overlay-scrim);
z-index: var(--z-overlay); opacity: 0; pointer-events: none;
transition: opacity var(--dur-base) var(--ease);
}
.ajuda-scrim.is-open { opacity: 1; pointer-events: auto; }
.ajuda-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
z-index: calc(var(--z-overlay) + 1);
background: var(--surface-raised);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform var(--dur-slow) var(--ease);
padding-bottom: env(safe-area-inset-bottom);
}
.ajuda-panel.is-open { transform: translateX(0); }
.ajuda-head {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.ajuda-head h2 {
margin: 0; flex: 1; font-size: var(--fs-17);
font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight);
}
.ajuda-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: var(--sp-5); -webkit-overflow-scrolling: touch;
}
.ajuda-sec + .ajuda-sec {
margin-top: var(--sp-5); padding-top: var(--sp-5);
border-top: 1px solid var(--border);
}
.ajuda-sec h3 {
margin: 0 0 var(--sp-2); font-size: var(--fs-11);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--text-3); font-weight: var(--fw-semibold);
}
.ajuda-sec p, .ajuda-sec li { color: var(--text-2); margin: 0 0 var(--sp-2); }
.ajuda-sec ul, .ajuda-sec ol { margin: 0; padding-left: var(--sp-5); }
.ajuda-sec strong { color: var(--text-1); font-weight: var(--fw-semibold); }
.ajuda-foot {
flex: 0 0 auto; display: grid; gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5);
border-top: 1px solid var(--border); background: var(--surface-shell);
}
/* ═══════════════════════════════════════════════════════════════════════
AÇÕES POR LINHA — a lista onde o trabalho acontece.
Origem: PerfilX, base_conhecimento.html:1444-1451 — fila de botões de
ícone na última célula, com `title` fazendo o rótulo. Duas regras de lá
vieram junto, e as duas são decisões, não estilo:
· ação que não cabe fica DESABILITADA, não some. Sumir muda a posição
das outras e a pessoa clica na errada por memória muscular;
· o destrutivo só fica vermelho quando o ponteiro chega nele. Vermelho
permanente numa lista de cinquenta linhas é cinquenta alarmes.
O que o Hub faz diferente da origem: no PerfilX a linha desenha todas as
ações e o 403 barra depois (a proteção é só no servidor, app.py:1002). Aqui
a tela recebe `permissoes` e não desenha o que a pessoa não pode fazer — o
servidor continua sendo quem decide, mas ninguém é convidado para um beco.
═══════════════════════════════════════════════════════════════════════ */
/* NUNCA QUEBRA LINHA. Com `wrap`, três botões numa coluna de 74px viravam uma
pilha vertical e cada linha da tabela passava a ter 129px de altura — a
lista inteira esticada por causa da coluna mais estreita. Os botões ficam
lado a lado e quem cede é a coluna, que se ajusta ao conteúdo. */
.acoes-linha {
display: flex; gap: var(--sp-1); align-items: center;
justify-content: flex-end; flex-wrap: nowrap;
}
.acoes-linha .icon-btn {
width: 32px; height: 32px; min-width: 32px; min-height: 32px;
flex: 0 0 32px; color: var(--text-3);
}
.acoes-linha .icon-btn:disabled { opacity: .3; cursor: default; }
@media (hover: hover) {
.acoes-linha .icon-btn:not(:disabled):hover { color: var(--text-1); background: var(--surface-hover); }
.acoes-linha .icon-btn.is-destrutivo:not(:disabled):hover {
color: var(--danger); background: var(--danger-soft);
}
}
.tabela td.col-acoes { text-align: right; white-space: nowrap; width: 1%; }
/* No celular a linha virou ficha: as ações ganham uma faixa própria no pé
dela, separadas do dado por uma linha, para o polegar não errar. */
@media (max-width: 860px) {
.tabela td.col-acoes {
width: auto; justify-content: flex-start;
margin-top: var(--sp-2); padding-top: var(--sp-2);
border-top: 1px solid var(--border);
}
.tabela td.col-acoes::before { content: ""; flex: 0; }
.acoes-linha { justify-content: flex-start; }
}
/* ═══════════════════════════════════════════════════════════════════════
O CAMPO DO INÍCIO — um campo, escrita livre.
Não é balão de conversa. A versão anterior empilhava perguntas e respostas:
a pessoa rolava para achar a resposta boa e a pergunta velha continuava na
tela como se ainda valesse. Aqui o texto fica DENTRO do campo, refinar é
editar o que está escrito, e a resposta é sempre uma só, no mesmo lugar.
═══════════════════════════════════════════════════════════════════════ */
.busca-hero { margin: 0 0 var(--sp-2); }
.busca-linha {
display: flex; align-items: center; gap: var(--sp-2);
background: var(--surface-raised);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
padding: var(--sp-2);
box-shadow: var(--shadow-sm);
transition: border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.busca-linha:focus-within {
border-color: var(--color-action-accent);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.busca-ico { display: grid; place-items: center; padding-left: var(--sp-2); color: var(--text-3); }
.busca-ico .ico { width: 20px; height: 20px; }
/* O campo não tem borda própria: quem desenha a caixa é a linha inteira, e
duas bordas concêntricas é o desenho contando a mesma coisa duas vezes. */
.busca-campo {
flex: 1; min-width: 0;
border: 0; background: transparent; box-shadow: none;
font-size: var(--fs-17); padding: var(--sp-2) 0;
}
.busca-campo:focus { border: 0; box-shadow: none; }
.busca-linha .btn { flex: 0 0 auto; min-height: 40px; }
.busca-nota {
margin: var(--sp-3) 0 0; font-size: var(--fs-12); color: var(--text-3);
max-width: 70ch;
}
.busca-exemplos {
display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3);
}
.busca-exemplos .btn {
border: 1px solid var(--border); border-radius: var(--r-pill);
color: var(--text-2);
}
@media (max-width: 860px) {
/* No celular o botão desce: lado a lado com o campo, sobra menos de dez
caracteres visíveis do que se está escrevendo. */
.busca-linha { flex-wrap: wrap; }
.busca-campo { flex: 1 1 100%; order: 2; padding-inline: var(--sp-2); }
.busca-ico { order: 1; }
.busca-linha .btn { order: 3; flex: 1 1 auto; }
.busca-linha .icon-btn { order: 1; margin-left: auto; }
}
/* CADA ACHADO responde a três perguntas: quem é, ONDE atende, por que entrou. */
.achados { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.achado {
border: 1px solid var(--border); border-radius: var(--r-md);
padding: var(--sp-4); background: var(--surface-raised);
}
.achado-topo {
display: flex; align-items: baseline; gap: var(--sp-3);
flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.achado-nome {
margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
}
.achado-selos { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* Rótulo à esquerda, valor à direita: a coluna de rótulos deixa "Atende" e
"Por quê" alinhados, e o olho compara dois achados na vertical. */
.achado-dados {
display: grid; grid-template-columns: 84px minmax(0, 1fr);
gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3);
}
.achado-dados dt {
font-size: var(--fs-11); color: var(--text-3);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
padding-top: 3px;
}
.achado-dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.achado-dados dd .badge { margin-right: var(--sp-1); }
@media (max-width: 520px) {
.achado-dados { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
.achado-dados dd { margin-bottom: var(--sp-2); }
}
/* O tom da pendência vive no ícone, não no fundo da linha inteira: três
linhas com fundo colorido viram um semáforo em que nada se destaca. */
.pend-tom { display: inline-grid; place-items: center; color: var(--text-3); }
.pend-tom.is-warning { color: var(--warning); }
.pend-tom.is-danger { color: var(--danger); }
/* BARRA DE FILTROS — os controles ficam do tamanho do que dizem.
`.select` e `.input` nascem com `width: 100%`, o que é certo dentro de um
`.field` de formulário e errado numa barra: cada seletor esticava para os
1148px da linha e os três empilhavam, 191px de altura para três palavras.
Aqui a largura é do conteúdo, e o campo de texto é o único que cresce. */
.barra-filtros { align-items: center; gap: var(--sp-2); }
.barra-filtros .select { width: auto; min-width: 150px; flex: 0 0 auto; }
.barra-filtros .search { flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.barra-filtros .search .input { width: 100%; }
.barra-filtros .btn { flex: 0 0 auto; }
@media (max-width: 860px) {
/* No celular a busca ocupa a linha inteira e os seletores dividem a de
baixo: 150px cada não cabem lado a lado com o campo em 390px. */
.barra-filtros .search { flex: 1 1 100%; max-width: none; }
.barra-filtros .btn { flex: 1 1 100%; }
.barra-filtros .select { flex: 1 1 calc(50% - var(--sp-2)); min-width: 0; }
}
/* A FICHA DO CELULAR — a primeira célula é o título, não uma linha de dado.
A `td` vira `display: flex` para pôr o rótulo à esquerda e o valor à
direita. Na primeira célula não há rótulo, e o `::before` vazio continuava
ocupando o `gap`: o nome nascia recuado, e o CNPJ — que é `display: block`
no desktop — virava um irmão de flex e ia parar ao lado do nome em vez de
embaixo. Aqui ela volta a ser bloco e ganha o peso de título da ficha. */
@media (max-width: 860px) {
.tabela td:first-child {
display: block; padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
border-bottom: 1px solid var(--border);
}
.tabela td:first-child::before { display: none; }
.tabela td:first-child .cel-principal {
display: block; font-size: var(--fs-15); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
}
.tabela td:first-child .cel-sub { margin-top: 2px; }
/* Rótulo e valor com o mesmo peso visual do resto do produto. */
.tabela td::before { align-self: center; }
.tabela td { align-items: center; min-height: 28px; }
}
/* SELO QUE NÃO VAZA. `.badge` é `nowrap` de propósito — "Em avaliação" não
pode quebrar no meio. Mas o dado importado trouxe frases inteiras no campo
de especialização, e a pílula crescia até sair do cartão. Corta aqui; o
texto completo fica no `title`. */
.badge-corta {
max-width: 26ch; overflow: hidden; text-overflow: ellipsis;
display: inline-block; vertical-align: middle;
}
/* LOGOTIPO DO PRESTADOR — a marca cabe inteira, sem corte.
O avatar é redondo e recortado no quadrado porque um rosto sobrevive ao
corte. Uma marca não: metade delas é símbolo + palavra, e o corte quadrado
come a palavra. Aqui a caixa é fixa e a imagem se ajusta dentro dela. */
.logo-prestador {
display: grid; place-items: center;
width: 88px; height: 88px; flex: 0 0 88px;
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface-raised); overflow: hidden; padding: var(--sp-2);
}
.logo-prestador img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-prestador.is-vazio { border-style: dashed; color: var(--text-3); }
.logo-prestador.is-vazio .ico { width: 24px; height: 24px; }
/* A marca do modelo escolhido, no fim da linha. `.mi-check` era emitido pelo
seletor de navegação e não tinha regra: o "✓" caía colado no texto, sem
folga e sem alinhamento, parecendo parte da frase. */
.menu-item .mi-check {
margin-left: auto; display: grid; place-items: center;
color: var(--color-action-accent); flex: 0 0 auto;
}
.menu-item[aria-checked="true"] { background: var(--color-action-soft); }
.menu-item[aria-checked="true"] .mi-label { font-weight: var(--fw-semibold); }
/* SELETOR DE APARÊNCIA — as três classes que o componente emitia sem regra.
`theme-wrap` precisa ser o bloco relativo, senão o menu de temas abre
ancorado no que estiver acima na árvore, não no botão. `theme-ico` é um
`.avatar` que carrega ícone e não iniciais: sem isto o ícone herda o
tamanho de fonte do avatar e sai minúsculo dentro do círculo. `mi-ico` é a
coluna do ícone no item de menu — sem ela o desenho encosta no rótulo. */
.theme-wrap { position: relative; display: inline-flex; }
.theme-wrap .avatar.theme-ico {
background: var(--neutral-soft); color: var(--text-2);
}
.theme-wrap .avatar.theme-ico .ico { width: 15px; height: 15px; }
.menu-item .mi-ico {
display: grid; place-items: center; flex: 0 0 20px; color: var(--text-3);
}
/* PASSO A PASSO — a numeração é do ``, não de uma coluna desenhada à mão.
Antes era um `` com `
1
texto
` dentro: HTML
inválido, sem semântica de lista para leitor de tela, e que vazou para fora
do cartão assim que as listas de rótulo/valor mudaram de alinhamento. */
.passos {
list-style: none; counter-reset: passo;
margin: 0; padding: 0; display: grid; gap: var(--sp-3);
}
.passos li {
counter-increment: passo;
display: grid; grid-template-columns: 22px minmax(0, 1fr);
gap: var(--sp-3); align-items: start;
color: var(--text-2);
}
.passos li::before {
content: counter(passo);
display: grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--color-action-soft); color: var(--color-action-accent);
font-size: var(--fs-11); font-weight: var(--fw-semibold);
}
.passos li > span { min-width: 0; }
.passos li strong { color: var(--text-1); font-weight: var(--fw-semibold); }
/* ═══════════════════════════════════════════════════════════════════════
CABEÇALHO DA FICHA DO PRESTADOR
Quem é o registro, antes de qualquer atributo. Referência: a ficha do
Attio, onde a identidade ocupa uma faixa própria e os atributos vêm
agrupados abaixo dela.
A ficha tinha nove cartões do mesmo tamanho numa grade: "Marca",
"Impedimentos" e "Pendências" pesavam igual a "Identidade e fiscal", e
quem abria não tinha por onde começar a ler.
═══════════════════════════════════════════════════════════════════════ */
.ficha-topo {
display: flex; align-items: flex-start; gap: var(--sp-5);
padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border);
}
.ficha-marca { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.ficha-id { flex: 1; min-width: 0; }
.ficha-nome {
margin: 0; font-size: var(--fs-24); font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight); line-height: 1.2;
overflow-wrap: break-word;
}
.ficha-razao {
margin: 2px 0 0; font-size: var(--fs-13); color: var(--text-2);
overflow-wrap: break-word;
}
.ficha-selos {
display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3);
}
.ficha-site {
display: inline-flex; align-items: center; gap: 6px;
margin-top: var(--sp-3); font-size: var(--fs-13);
color: var(--color-action-accent);
}
.ficha-site .ico { width: 14px; height: 14px; }
.ficha-acoes { flex: 0 0 auto; }
/* O botão de trocar mora SOBRE o logotipo. Em tela de toque não há passagem
de ponteiro, então ele fica sempre visível — esconder atrás de um gesto que
não existe é esconder de vez. */
.logo-prestador { position: relative; }
.logo-trocar {
position: absolute; right: 4px; bottom: 4px;
display: grid; place-items: center; width: 26px; height: 26px;
border-radius: var(--r-sm); cursor: pointer;
background: var(--surface-raised); border: 1px solid var(--border);
color: var(--text-2); box-shadow: var(--shadow-sm);
}
.logo-trocar .ico { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
.logo-trocar { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.logo-prestador:hover .logo-trocar,
.logo-trocar:focus-visible { opacity: 1; }
}
/* Descrição é texto para LER: largura de leitura, e não a do cartão. */
.texto-corrido { max-width: 64ch; color: var(--text-2); }
@media (max-width: 640px) {
.ficha-topo { flex-wrap: wrap; gap: var(--sp-4); }
.ficha-acoes { flex: 1 1 100%; }
.ficha-nome { font-size: var(--fs-20); }
}
/* ═══════════════════════════════════════════════════════════════════════
PREFERÊNCIAS — no padrão único de painel de seção: `.grid.grid-2`, cartões
que fluem (decisão do CEO, 02/09/2026). A coluna única que existia aqui
era um segundo padrão para a mesma coisa, e foi embora.
═══════════════════════════════════════════════════════════════════════ */
.bloco-foto { display: grid; gap: var(--sp-2); }
/* Rótulo à esquerda, controle à direita — a forma de uma linha de ajuste. */
.preferencia {
display: flex; align-items: center; gap: var(--sp-3) var(--sp-4);
flex-wrap: wrap;
padding: var(--sp-4) 0; border-top: 1px solid var(--border);
}
.preferencia:first-of-type { border-top: 0; padding-top: 0; }
/* O texto pede uma largura mínima de leitura; se o controle não couber ao
lado, ele desce para a linha de baixo em vez de espremer o texto numa
coluna de uma palavra por linha — que foi o que a grade de cartões fez
com "Modelo de navegação". */
.preferencia-texto { flex: 1 1 220px; min-width: 0; }
.preferencia-texto h3 {
margin: 0 0 2px; font-size: var(--fs-14); font-weight: var(--fw-semibold);
}
.preferencia-texto p { margin: 0; font-size: var(--fs-13); }
.preferencia > *:last-child { flex: 0 0 auto; }
/* O seletor de modelo é uma escolha de duas linhas: precisa de largura. */
.preferencia .shell-choice { flex: 1 1 260px; min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
.preferencia { flex-direction: column; align-items: stretch; }
.preferencia .shell-choice { flex: 1 1 auto; }
}
/* NOME QUE ABRE A FICHA. Ele era texto solto numa lista de nomes, e clicar
num nome é o primeiro gesto de qualquer pessoa: precisava parecer e ser um
controle, sem virar um botão azul de formulário no meio da lista. */
.link-nome {
border: 0; background: transparent; padding: 0; margin: 0;
font: inherit; color: var(--text-1); font-weight: var(--fw-medium);
text-align: left; cursor: pointer; border-radius: var(--r-xs);
}
@media (hover: hover) {
.link-nome:hover { color: var(--color-action-accent); text-decoration: underline; }
}
.link-nome:focus-visible { outline: 2px solid var(--color-action-accent); outline-offset: 2px; }
@media (pointer: coarse) { .link-nome { min-height: 32px; } }
/* ═══════════════════════════════════════════════════════════════════════
MATRIZ DE ACESSO — módulos nas linhas, níveis nas colunas.
Eram nove seletores de "allow / deny / como o papel manda", e ninguém
conseguia ver o acesso de uma pessoa de relance: era preciso ler nove
caixas e combinar cada uma com um padrão invisível. Aqui o estado inteiro
cabe numa olhada, e a marca só existe onde há escolha.
═══════════════════════════════════════════════════════════════════════ */
.modal-largo { width: min(760px, 94vw); }
.matriz th.col-nivel, .matriz td.col-nivel { text-align: center; width: 108px; }
.celula-nivel {
width: 100%; min-height: 34px; display: grid; place-items: center;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface-raised); color: var(--text-3); cursor: pointer;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
.celula-nivel:hover { background: var(--surface-hover); border-color: var(--border-strong); }
}
.celula-nivel.is-marcada {
background: var(--color-action-soft);
border-color: var(--color-action-border);
color: var(--color-action-accent);
}
.celula-nivel .ico { width: 17px; height: 17px; }
@media (pointer: coarse) { .celula-nivel { min-height: 44px; } }
/* No celular a matriz vira ficha: o nome do nível vem do `data-rotulo`, e a
célula precisa de largura para o polegar. */
@media (max-width: 860px) {
.matriz td.col-nivel { width: auto; }
.matriz td.col-nivel .celula-nivel { max-width: 120px; }
}
/* ═══════════════════════════════════════════════════════════════════════
AJUDA POR TAREFA — passos à esquerda, a tela de verdade à direita.
Estrutura do PerfilReembolso, com uma diferença: cada tarefa mostra a tela
real. Texto sozinho obriga a pessoa a montar a imagem na cabeça e depois
conferir; a captura ao lado responde "é esta tela mesmo?" antes de a
dúvida existir.
═══════════════════════════════════════════════════════════════════════ */
.indice-tarefas {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
padding-bottom: var(--sp-2);
}
.indice-item {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--r-pill);
border: 1px solid var(--border); background: var(--surface-raised);
color: var(--text-2); font-size: var(--fs-13); text-decoration: none;
}
.indice-item .ico { width: 14px; height: 14px; color: var(--text-3); }
@media (hover: hover) {
.indice-item:hover {
border-color: var(--color-action-border); color: var(--text-1);
text-decoration: none;
}
}
@media (pointer: coarse) { .indice-item { min-height: 40px; } }
.tarefa {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--sp-6); align-items: start;
/* A âncora do índice não pode parar embaixo do cabeçalho grudado. */
scroll-margin-top: calc(var(--contexthdr-h) + var(--sp-6));
}
.tarefa-texto { min-width: 0; }
.tarefa-quando {
margin: 0 0 var(--sp-4); font-size: var(--fs-13); color: var(--text-3);
font-style: italic;
}
.tarefa-figura { margin: 0; min-width: 0; }
.tarefa-figura img {
width: 100%; height: auto; display: block;
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface-sunken);
}
@media (max-width: 860px) {
/* No celular a captura vem DEPOIS dos passos: quem lê num telefone lê para
executar, e o texto é o que se executa. */
.tarefa { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
/* ═══════════════════════════════════════════════════════════════════════
QUADRO DE HOMOLOGAÇÃO — o cartão diz o que falta e oferece o passo.
Antes cada coluna era uma lista de nomes: o quadro dizia em que estágio
cada um está e não dizia o que impede o próximo passo. Quem quisesse agir
abria as 54 fichas para descobrir onde.
═══════════════════════════════════════════════════════════════════════ */
.quadro-coluna { display: grid; gap: 0; }
.cartao-homolog {
display: grid; gap: 6px; align-content: start;
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border);
}
.cartao-homolog:last-child { border-bottom: 0; }
.cartao-homolog .link-nome { justify-self: start; }
.cartao-checklist {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-12); color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.cartao-checklist .ico { width: 14px; height: 14px; color: var(--warning); }
.cartao-checklist.is-completo { color: var(--success); }
.cartao-checklist.is-completo .ico { color: var(--success); }
.cartao-falta, .cartao-obs {
margin: 0; font-size: var(--fs-11); color: var(--text-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 2px; }
.cartao-acoes .btn .ico { width: 13px; height: 13px; }
/* Capacidade arquivada continua na lista, apagada: ela saiu de circulação mas
o que já foi decidido sobre ela continua de pé, e escondê-la faria a pessoa
tentar criar outra com o mesmo nome. */
.tabela tr.is-arquivada .cel-principal { color: var(--text-3); }
.tabela tr.is-arquivada { opacity: .72; }
/* A trilha do perfil: o que mudou, de onde para onde. */
.tl-mudancas { margin: 6px 0 0; padding-left: var(--sp-5); font-size: var(--fs-12); }
.tl-mudancas li { color: var(--text-2); }
.tl-mudancas s { color: var(--text-3); }
.tl-mudancas strong { color: var(--text-1); font-weight: var(--fw-semibold); }
/* Numa tabela larga — sete módulos mais contas e ações — a primeira coluna é
espremida pelo resto e o nome desce em três linhas. Ela é a coluna que
identifica a linha: precisa de piso. */
.tabela th:first-child, .tabela td:first-child { min-width: 168px; }
@media (max-width: 860px) {
/* Na ficha do celular a primeira célula já é o título de largura inteira. */
.tabela td:first-child { min-width: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MOSTRAR / OCULTAR A SENHA
O botão é INJETADO por `auth.js` em todo `input[type=password]`, então o
markup das quatro páginas de senha continua sendo só o campo. Aqui só existe
a moldura: a caixa que posiciona, e o botão dentro dela.
`padding-right` no campo, e não `width` menor: o texto da senha precisa
parar ANTES do botão. Sem isso o último caractere fica embaixo do olho,
justamente quando a pessoa revelou a senha para conferir o último caractere.
═══════════════════════════════════════════════════════════════════════════ */
.campo-com-olho { position: relative; display: block; min-width: 0; }
.campo-com-olho > .input { width: 100%; padding-right: 40px; }
.olho-senha {
position: absolute;
top: 0; bottom: 0; right: 0;
width: 38px;
display: flex; align-items: center; justify-content: center;
border: 0; background: none; padding: 0; margin: 0;
color: var(--text-3);
cursor: pointer;
border-radius: var(--r-sm);
}
.olho-senha:focus-visible {
outline: 2px solid var(--color-action-accent);
outline-offset: -2px;
}
/* Estado ligado: o olho aberto é o estado de RISCO (senha à mostra) e precisa
ser visível de canto de olho, não só quando se procura por ele. */
.olho-senha[aria-pressed="true"] { color: var(--text-1); }
@media (hover: hover) {
.olho-senha:hover { color: var(--text-1); }
}
/* Ponteiro grosso: 44px de alvo, a régua da Apple. O botão cresce, o campo
abre espaço junto — senão o alvo maior passa por cima do texto. */
@media (pointer: coarse) {
.olho-senha { width: 44px; }
.campo-com-olho > .input { padding-right: 46px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CONVITE EM LOTE — o campo de vários e o resultado nominal
O campo é `textarea` com a mesma pele do `.input`: quem cola vinte linhas
precisa VER que cabem várias, e um campo de uma linha só diz o contrário
antes de qualquer instrução ser lida.
═══════════════════════════════════════════════════════════════════════════ */
textarea.input { min-height: 76px; resize: vertical; line-height: 1.5; font-family: inherit; }
.lote-bloco { margin-bottom: 18px; }
.lote-bloco:last-child { margin-bottom: 0; }
.lote-titulo {
font-size: var(--fs-12); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: .06em;
margin: 0 0 4px; color: var(--text-2);
}
.lote-nota { font-size: var(--fs-12); color: var(--text-3); margin: 0 0 8px; }
.lote-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lote-lista li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
padding: 7px 10px; border-radius: var(--r-sm);
background: var(--surface-sunken); font-size: var(--fs-13);
}
.lote-email { font-weight: var(--fw-medium); word-break: break-all; }
.lote-motivo { color: var(--text-3); font-size: var(--fs-12); }
/* A cor mora na BARRA, não no fundo: vinte linhas de fundo colorido viram um
bloco de cor onde não se lê nada, e o que importa é o endereço. */
.lote-ok .lote-lista li { box-shadow: inset 2px 0 0 var(--success); }
.lote-aviso .lote-lista li { box-shadow: inset 2px 0 0 var(--warning); }
.lote-erro .lote-lista li { box-shadow: inset 2px 0 0 var(--danger); }
.lote-neutro .lote-lista li { box-shadow: inset 2px 0 0 var(--border); }
/* ═══════════════════════════════════════════════════════════════════════════
CARTÕES DE PERFIL — a escolha de acesso no convite.
Nada de caixa de seleção: caixa marca VÁRIOS, e acesso é UM. A forma tem de
dizer a regra antes de qualquer texto — quem vê três quadradinhos tenta
marcar dois.
Cada cartão traz o nome E o que ele permite, numa linha. Só o nome obriga a
pessoa a lembrar o que "Gestor de parcerias" significa — e ninguém lembra na
hora de convidar; escolhe o que soa mais generoso.
═══════════════════════════════════════════════════════════════════════════ */
.campo-perfis { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }
.campo-perfis > legend {
font-size: var(--fs-13); font-weight: var(--fw-medium);
color: var(--text-1); padding: 0; margin-bottom: var(--sp-2);
}
.perfis-cartoes { display: grid; gap: var(--sp-2); }
.cartao-perfil {
display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%;
text-align: left; padding: var(--sp-3);
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface-raised); color: var(--text-1);
cursor: pointer; min-height: 44px;
transition: border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.cartao-perfil .cp-marca { flex: 0 0 auto; color: var(--text-3); padding-top: 1px; }
.cartao-perfil .cp-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartao-perfil .cp-nome { font-weight: var(--fw-medium); font-size: var(--fs-14); }
.cartao-perfil .cp-desc { font-size: var(--fs-12); color: var(--text-3); }
.cartao-perfil.is-escolhido {
border-color: var(--color-action-accent);
background: var(--color-action-soft);
}
.cartao-perfil.is-escolhido .cp-marca { color: var(--color-action-accent); }
/* ADMINISTRADOR PEDE INTENÇÃO. Cor de atenção no cartão, e o botão passa a
dizer "Enviar como Administrador" — a clareza no lugar de um segundo
"tem certeza?", que é aprovado no automático. A cor não é. */
.cartao-perfil.is-administrativo { border-color: var(--warning-border); }
.cartao-perfil.is-administrativo.is-escolhido {
border-color: var(--warning); background: var(--warning-soft);
}
.cartao-perfil.is-administrativo.is-escolhido .cp-marca { color: var(--warning); }
.cartao-perfil .cp-nome .badge { margin-left: var(--sp-2); vertical-align: middle; }
.cartao-perfil:focus-visible {
outline: 2px solid var(--color-action-accent); outline-offset: 2px;
}
@media (hover: hover) {
.cartao-perfil:hover { border-color: var(--text-3); }
.cartao-perfil.is-escolhido:hover { border-color: var(--color-action-accent); }
}
/* ═══════════════════════════════════════════════════════════════════════════
VALOR EDITÁVEL — clicar no dado edita o dado.
A edição vive onde o dado vive. O quadro de pendências segue sendo o resumo
do que falta, mas quem está olhando a razão social errada quer corrigir A
RAZÃO SOCIAL, não caçar um item numa lista em outro cartão.
O lápis aparece no hover (mouse) e é PERMANENTE no toque: no celular não há
hover, e um afeto que só existe com o ponteiro em cima é um afeto que não
existe no aparelho onde metade das pessoas trabalha.
═══════════════════════════════════════════════════════════════════════════ */
.valor-editavel {
display: inline-flex; align-items: center; gap: var(--sp-2);
border: 1px solid transparent; border-radius: var(--r-sm);
background: none; color: inherit; font: inherit; text-align: left;
padding: 2px var(--sp-2); margin: -2px calc(var(--sp-2) * -1);
cursor: pointer; max-width: 100%;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.valor-editavel .ve-lapis {
display: inline-flex; color: var(--text-3); opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.valor-editavel .ve-lapis .ico { width: 13px; height: 13px; }
.valor-editavel:focus-visible {
outline: 2px solid var(--color-action-accent); outline-offset: 1px;
}
.valor-editavel:focus-visible .ve-lapis { opacity: 1; }
@media (hover: hover) {
.valor-editavel:hover { background: var(--surface-sunken); border-color: var(--border); }
.valor-editavel:hover .ve-lapis { opacity: 1; }
}
/* No toque o lápis fica visível sempre: sem hover, ele nunca apareceria. */
@media (pointer: coarse) {
.valor-editavel { min-height: 44px; }
.valor-editavel .ve-lapis { opacity: .55; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CONSULTA À RECEITA — o que veio da base pública, antes de virar cadastro.
═══════════════════════════════════════════════════════════════════════════ */
.receita-achado { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.receita-linha {
display: grid; grid-template-columns: fit-content(38%) 1fr;
gap: var(--sp-2) var(--sp-3); align-items: baseline;
padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
background: var(--surface-sunken); font-size: var(--fs-13);
}
.receita-linha dt { color: var(--text-3); font-size: var(--fs-12); }
.receita-linha dd { margin: 0; font-weight: var(--fw-medium); word-break: break-word; }
.receita-fonte { font-size: var(--fs-12); color: var(--text-3); }
/* ═══════════════════════════════════════════════════════════════════════════
DADO PESSOAL NA FICHA — o cuidado precisa ser VISÍVEL.
O selo e a finalidade ficam junto do dado, não numa política em outro lugar.
Quem lê o CPF lê, na mesma linha, por que ele está ali — e quem vê o valor
protegido lê por quê, em vez de achar que o cadastro está incompleto.
═══════════════════════════════════════════════════════════════════════════ */
.dado-pessoal {
margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
border-left: 2px solid var(--color-action-border);
background: var(--surface-sunken); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.dp-selo {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-11); text-transform: uppercase;
letter-spacing: var(--tracking-caps); color: var(--text-3);
font-weight: var(--fw-semibold); margin-bottom: var(--sp-1);
}
.dp-selo .ico { width: 13px; height: 13px; }
.dp-linha { display: flex; gap: var(--sp-2); font-size: var(--fs-13); align-items: baseline; }
.dp-rot { color: var(--text-3); flex: 0 0 62px; font-size: var(--fs-12); }
.dp-finalidade {
display: flex; gap: 5px; align-items: flex-start;
font-size: var(--fs-12); color: var(--text-3); margin: var(--sp-2) 0 0;
}
.dp-finalidade .ico { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; }
.check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); }
.check input { width: 18px; height: 18px; }
/* A seta da linha do tempo: "de onde" → "para onde". Sem ela, dois avanços
seguidos parecem o mesmo evento repetido — e é justamente quando alguém
VOLTA um estágio que a origem importa. */
.tl-seta { display: inline-flex; vertical-align: middle; color: var(--text-3); }
.tl-seta .ico { width: 13px; height: 13px; }
/* Barra de ação de um cartão: o botão que abre o formulário daquele bloco.
Quebra em telas estreitas em vez de empurrar o cartão para os lados. */
.barra-acoes {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
/* O RECORTE que veio de um contador. Ele se anuncia e se desfaz: chegar numa
lista de 50 de 54 sem explicação é a pessoa achando que quatro registros
sumiram. */
.recorte {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
background: var(--color-action-soft); border: 1px solid var(--color-action-border);
font-size: var(--fs-13);
}
.recorte .ico { width: 15px; height: 15px; color: var(--color-action-accent); }