/* ============================================================================ onda-15-configuracao.css — Página "Configurações" (engrenagem do header) Padrão canônico Ever (menu-configuracao.md §3): área única de administração. Segmented control de sub-abas (.config-tabs / .config-tab): pílula ATIVA petróleo (var(--color-primary)) + texto branco; inativa slate em trilho cinza. NÃO confundir com .drawer-tabs (underline, dentro de drawer) — ver abas-no-drawer.md §5. Visual e propósito diferentes. Cascade: carrega POR ÚLTIMO no (depois de onda-14). Reusa tokens existentes (petróleo / slate / canvas) — sem paleta paralela. AAA via tokens. Engrenagem do header (.topnav-gear) vive aqui pra ficar junto da página que ela abre; estilo herda .header-icon-btn do padrão (44×44 hit-target, 18px). ============================================================================ */ /* ============================================================================ 1) ENGRENAGEM no grupo de ações do header (substitui o dropdown "Admin") ============================================================================ */ :root[data-theme="light"] .topnav-gear { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: rgba(250, 246, 239, 0.74); cursor: pointer; /* Hit-target 44×44 sem esticar a barra: cresce a área clicável com margem negativa (header-global.md §7 / icones-padrao.md §4). */ margin: 0 -4px; position: relative; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } :root[data-theme="light"] .topnav-gear::before { content: ""; position: absolute; inset: -4px; /* 36 + 8 = 44 */ } :root[data-theme="light"] .topnav-gear:hover { color: var(--canvas); background: rgba(250, 246, 239, 0.06); } :root[data-theme="light"] .topnav-gear.is-active { color: var(--canvas); background: rgba(166, 135, 92, 0.14); border-color: rgba(166, 135, 92, 0.30); } :root[data-theme="light"] .topnav-gear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-deep), 0 0 0 4px var(--color-accent-soft, #C9A877); } :root[data-theme="light"] .topnav-gear__icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Badge de contador da aba Melhorias na nav principal (header-global.md §9 — único contador permitido no header). Dourado discreto sobre header escuro. */ :root[data-theme="light"] .topnav-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9999px; background: var(--color-accent-soft, #C9A877); color: var(--ink-deep); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } /* ============================================================================ 2) SEGMENTED CONTROL — .config-tabs / .config-tab (menu-configuracao.md §3) ============================================================================ */ :root[data-theme="light"] .config-tabs { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; margin: 0 0 var(--sp-5, 24px); background: var(--canvas-2); border: 1px solid var(--border-subtle); border-radius: 10px; max-width: 100%; } :root[data-theme="light"] .config-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; background: transparent; border: none; border-radius: 7px; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 500; color: var(--ink-500); /* slate — inativa */ cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } :root[data-theme="light"] .config-tab:hover { color: var(--ink-deep); background: var(--surface-pure); } /* Pílula ativa: petróleo + texto branco (cor da marca via token). */ :root[data-theme="light"] .config-tab.is-active { background: var(--color-primary); color: #FFFFFF; font-weight: 600; } :root[data-theme="light"] .config-tab.is-active:hover { background: var(--color-primary-deep, var(--color-primary)); color: #FFFFFF; } :root[data-theme="light"] .config-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--canvas-2), 0 0 0 4px var(--color-primary); } :root[data-theme="light"] .config-tab__icon { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* ============================================================================ 3) LAYOUT DA PÁGINA — wrapper das sub-abas ============================================================================ */ :root[data-theme="light"] .config-page__panel { /* cada sub-painel é um
com x-show="sub==='X'". Sem estilo de caixa próprio — herda o layout das telas internas. */ display: block; } /* ============================================================================ 4) EMPTY-STATE — Setores (placeholder Fase 1, sem backend) ============================================================================ */ :root[data-theme="light"] .config-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 24px; background: var(--surface-pure); border: 1px dashed var(--border-subtle); border-radius: var(--radius-lg, 8px); } :root[data-theme="light"] .config-empty__icon { width: 32px; height: 32px; margin-bottom: 16px; color: var(--ink-500); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } :root[data-theme="light"] .config-empty__title { margin: 0 0 6px; font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-deep); } :root[data-theme="light"] .config-empty__text { margin: 0; max-width: 46ch; font-size: var(--fs-base); line-height: 1.55; color: var(--text-secondary); } /* ============================================================================ 5) USUÁRIOS — lista no padrão Ever (avatar · nome+badges · e-mail · escopo) ============================================================================ */ :root[data-theme="light"] .user-row { display: flex; align-items: center; gap: 14px; } :root[data-theme="light"] .user-row__avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--color-primary); /* cor da marca (petróleo) via token */ color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-base); font-weight: 600; } :root[data-theme="light"] .user-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } :root[data-theme="light"] .user-row__name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } :root[data-theme="light"] .user-row__name { font-size: var(--fs-base); font-weight: 600; color: var(--ink-deep); line-height: 1.2; } :root[data-theme="light"] .user-row__email { font-size: var(--fs-sm-plus); color: var(--text-secondary); line-height: 1.2; } :root[data-theme="light"] .user-row__scope { font-size: var(--fs-sm-plus); color: var(--text-secondary); } /* Badge "Admin" na cor da marca (petróleo). */ :root[data-theme="light"] .badge--marca { background: var(--color-primary); color: #FFFFFF; border-color: transparent; } /* Badge "Senha temporária" — âmbar discreto (estado, não marca). Texto AAA. */ :root[data-theme="light"] .badge--senha-temp { display: inline-flex; align-items: center; gap: 4px; } :root[data-theme="light"] .badge--senha-temp svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; } /* ============================================================================ 5b) SETORES — 3 papéis fixos (Dev · Admin · Operador), read-only ============================================================================ */ :root[data-theme="light"] .roles-note { margin: 0 0 var(--sp-5, 24px); padding: 12px 16px; background: var(--color-primary-10); border: 1px solid var(--color-primary-20); border-radius: var(--radius-md, 8px); font-size: var(--fs-base); line-height: 1.5; color: var(--ink-deep); } :root[data-theme="light"] .roles-note strong { font-weight: 600; } :root[data-theme="light"] .roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; /* cards com MESMA altura (simétricos), independente do nº de bullets */ } :root[data-theme="light"] .role-spec { display: flex; flex-direction: column; background: var(--surface-pure); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 12px); padding: 20px; } /* Dev/Admin: faixa superior na cor da marca (petróleo). */ :root[data-theme="light"] .role-spec--brand { border-top: 3px solid var(--color-primary); } :root[data-theme="light"] .role-spec--neutral { border-top: 3px solid var(--border-strong, var(--ink-300, #cbd5e1)); } :root[data-theme="light"] .role-spec__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } :root[data-theme="light"] .role-spec__icon { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; } :root[data-theme="light"] .role-spec--brand .role-spec__icon { background: var(--color-primary); color: #FFFFFF; } :root[data-theme="light"] .role-spec--neutral .role-spec__icon { background: var(--canvas-2); color: var(--ink-deep); } :root[data-theme="light"] .role-spec__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; } :root[data-theme="light"] .role-spec__head-text { min-width: 0; } :root[data-theme="light"] .role-spec__name { margin: 0 0 2px; font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-deep); line-height: 1.25; } :root[data-theme="light"] .role-spec__who { margin: 0; font-size: var(--fs-sm-plus); color: var(--text-secondary); line-height: 1.4; } :root[data-theme="light"] .role-spec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } :root[data-theme="light"] .role-spec__item { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-base); line-height: 1.45; color: var(--ink-deep); } :root[data-theme="light"] .role-spec__item svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; stroke-width: 2; fill: none; } :root[data-theme="light"] .role-spec__item--yes svg { color: var(--color-success-text, #166534); } :root[data-theme="light"] .role-spec__item--no svg { color: var(--color-danger-text, #b91c1c); } :root[data-theme="light"] .role-spec__item--no span { color: var(--text-secondary); } /* ============================================================================ 5c) BADGE de papel na lista de usuários (Dev/Admin = shield; Operador = user) ============================================================================ */ :root[data-theme="light"] .role-badge { display: inline-flex; align-items: center; gap: 5px; } :root[data-theme="light"] .role-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; } /* ============================================================================ 5d) MODAL — seletor de PAPEL (cards-radio) + ajuste avançado (Dev) ============================================================================ */ :root[data-theme="light"] .role-picker { display: flex; flex-direction: column; gap: 10px; } :root[data-theme="light"] .role-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; background: var(--surface-pure); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md, 10px); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } :root[data-theme="light"] .role-card:hover { border-color: var(--color-primary-20); background: var(--canvas-2); } :root[data-theme="light"] .role-card--active { border-color: var(--color-primary); background: var(--color-primary-10); } :root[data-theme="light"] .role-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-pure), 0 0 0 4px var(--color-primary); } :root[data-theme="light"] .role-card__icon { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--canvas-2); color: var(--color-primary); } :root[data-theme="light"] .role-card--active .role-card__icon { background: var(--color-primary); color: #FFFFFF; } :root[data-theme="light"] .role-card__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } :root[data-theme="light"] .role-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } :root[data-theme="light"] .role-card__name { font-size: var(--fs-base); font-weight: 600; color: var(--ink-deep); } :root[data-theme="light"] .role-card__desc { font-size: var(--fs-sm-plus); color: var(--text-secondary); line-height: 1.4; } :root[data-theme="light"] .role-card__check { flex-shrink: 0; color: var(--color-primary); } :root[data-theme="light"] .role-card__check svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } /* Ajuste avançado — só Dev. Colapsado por default (
). */ :root[data-theme="light"] .caps-advanced { border-top: 1px solid var(--border-subtle); padding-top: 4px; } :root[data-theme="light"] .caps-advanced__summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 8px 0; } :root[data-theme="light"] .caps-advanced__summary::-webkit-details-marker { display: none; } :root[data-theme="light"] .caps-advanced__summary .modal-section__title { margin: 0; } :root[data-theme="light"] .caps-advanced__hint { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); } :root[data-theme="light"] .caps-advanced__summary .caps-group__chevron { margin-left: auto; display: inline-flex; color: var(--text-secondary); transition: transform var(--dur-fast) var(--ease-out); } :root[data-theme="light"] .caps-advanced[open] .caps-advanced__summary .caps-group__chevron { transform: rotate(180deg); } :root[data-theme="light"] .caps-advanced__summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-pure), 0 0 0 4px var(--color-primary); border-radius: 6px; } /* ============================================================================ 6) RESPONSIVO — config-tabs com scroll horizontal em telas estreitas ============================================================================ */ @media (max-width: 760px) { :root[data-theme="light"] .config-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } :root[data-theme="light"] .config-tabs::-webkit-scrollbar { display: none; } :root[data-theme="light"] .config-tab { flex: 0 0 auto; } } /* ============================================================================ 7) PREFERS-REDUCED-MOTION ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root[data-theme="light"] .topnav-gear, :root[data-theme="light"] .config-tab, :root[data-theme="light"] .role-card, :root[data-theme="light"] .caps-advanced__summary .caps-group__chevron { transition: none !important; } } /* ============================================================================ FIM — onda-15-configuracao.css ============================================================================ */