/* =============================================================================
   hx-painel.css - base visual "painel de operacao" do painel do agente (10/10/2026).
   Regras de uso: docs/UX-PAINEL-OPERACAO.md. Medidas e cores dos mockups aprovados (Relatorios,
   Configuracoes, Equipe). Carregado pelo _Layout depois de hx.css/hx-navigation.css e ANTES da
   secao Styles das paginas (a pagina continua podendo refinar).

   So tokens de hx.css (papeis fixos): nada de cor nova fora deles. Componentes:
     .hx-panel / .hx-panel-head      caixa branca com borda e cabecalho de 1 linha (titulo + acoes)
     .hx-table                       tabela densa (cabecalho 12 px, linhas 36 px, texto 13 px)
     .hx-kpi-band                    faixa de numeros-chave: N colunas iguais com divisorias
     .hx-filterbar / .hx-seg         barra de filtros numa linha e controle segmentado
     .hx-dot                         bolinha de estado 8 px (--ok/--warn/--bad/--off/--brand)
     .hx-help                        ajuda sob demanda (<details> com "?" ou texto curto)
     .hx-drawer                      painel lateral direito para cadastro/edicao (<dialog>, js/hx-drawer.js)
     .hx-pf-field / .hx-pf-input     campo de formulario de altura unica (--hx-control-h); prefixo pf (painel) para
                                     nao colidir com .hx-field/.hx-input de hx.css, usados pelos campos legados
     .hx-btn                         botao com largura do conteudo (.is-primary: um por area)
   ============================================================================= */

/* ----- largura e campos das telas administrativas (moldura de Configuracoes e telas legadas) -----
   Largura TODA da area util: nenhum container administrativo limita a largura (limite so para texto
   de leitura longo e login). Altura unica dos controles e botao com largura do conteudo. */
:is(.hx-settings-body, .hx-legacy.main) { --control-height: 36px; }
:is(.hx-settings-body, .hx-legacy.main) :is(
    input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
    input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
    select:not([multiple])) { padding-top: 0; padding-bottom: 0; }
:is(.hx-settings-body, .hx-legacy.main) .btn.block { width: auto; align-self: flex-start; justify-self: start; }

/* ----- .hx-panel: caixa de conteudo ----- */
.hx-panel { min-width: 0; background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 8px; }
.hx-panel-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--hx-row-line); }
.hx-panel-head > :is(h2, h3, .hx-panel-title) { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: normal; color: var(--hx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-panel-head .hx-panel-meta { font-size: 12px; color: var(--hx-ink3); white-space: nowrap; }
.hx-panel-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.hx-panel-body { padding: 12px 16px; }
.hx-panel > .hx-table, .hx-panel > .hx-table-wrap { border-radius: 0 0 8px 8px; }
.hx-panel-empty { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--hx-ink3); }

/* ----- .hx-table: lista densa ----- */
.hx-table-wrap { min-width: 0; overflow-x: auto; }
.hx-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--hx-ink); background: transparent; }
.hx-table thead tr { background: var(--hx-paper); }
.hx-table th { height: 32px; padding: 0 12px; border-bottom: 1px solid var(--hx-line); font-size: 12px; font-weight: 500; text-align: left; color: var(--hx-ink3); white-space: nowrap; background: none; }
.hx-table td { height: 36px; padding: 0 12px; border-bottom: 1px solid var(--hx-row-line); font-size: 13px; color: var(--hx-ink); vertical-align: middle; }
.hx-table :is(th, td):first-child { padding-left: 16px; }
.hx-table :is(th, td):last-child { padding-right: 16px; }
.hx-table tbody tr:last-child td { border-bottom: 0; }
.hx-table tbody tr:hover { background: #FBF9F6; }
.hx-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-table .is-muted { color: var(--hx-ink3); }
.hx-table .is-actions { width: 1%; text-align: right; white-space: nowrap; }
.hx-table .is-clip { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- .hx-kpi-band: numeros-chave numa faixa ----- */
.hx-kpi-band { display: grid; grid-template-columns: repeat(var(--hx-kpi-cols, 4), minmax(0, 1fr)); background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 8px; }
.hx-kpi { min-width: 0; padding: 12px 16px; }
.hx-kpi + .hx-kpi { border-left: 1px solid var(--hx-row-line); }
.hx-kpi-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hx-ink3); }
.hx-kpi-value { margin-top: 4px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--hx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-kpi-sub { margin-top: 2px; font-size: 12px; color: var(--hx-ink3); }
.hx-kpi-sub.is-alert { color: var(--hx-red-ink); }
@media (max-width: 1279px) {
    .hx-kpi-band { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .hx-kpi + .hx-kpi { border-left: 0; }
    .hx-kpi { border-bottom: 1px solid var(--hx-row-line); }
}

/* ----- .hx-filterbar e .hx-seg ----- */
.hx-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; }
.hx-filterbar :is(select, input:not([type="checkbox"]):not([type="radio"])),
.hx-pf-input { height: var(--hx-control-h); min-width: 0; padding: 0 10px; border: 1px solid var(--hx-line2); border-radius: 6px; background-color: var(--hx-surface); font: inherit; font-size: 13px; color: var(--hx-ink); box-shadow: none; }
/* Seletor da barra: a regra de campos acima tem especificidade 0,3,1 (o :is() pega a de input:not():not()) e zerava
   min-width e o respiro da seta (a seta cobria o texto); estes seletores empatam ou vencem e vem depois. width: auto
   vence o width: 100% do site.css. */
.hx-filterbar select:not([multiple]):not([size]) { width: auto; }
.hx-filterbar select:not([multiple]):not([size]), select.hx-pf-input { min-width: 160px; padding-right: 28px; }
.hx-filterbar-spacer { flex: 1 1 auto; }
.hx-filterbar-note { font-size: 12px; color: var(--hx-ink3); }
.hx-seg { display: inline-flex; flex: none; border: 1px solid var(--hx-line2); border-radius: 6px; overflow: hidden; background: var(--hx-surface); }
.hx-seg > :is(button, a, label) { display: inline-flex; align-items: center; height: calc(var(--hx-control-h) - 2px); padding: 0 12px; border: 0; border-radius: 0; background: var(--hx-surface); font: inherit; font-size: 13px; color: var(--hx-ink2); text-decoration: none; cursor: pointer; white-space: nowrap; }
.hx-seg > * + * { border-left: 1px solid var(--hx-line); }
.hx-seg > :is([aria-pressed="true"], [aria-current], .is-active) { background: var(--hx-ink); color: var(--hx-surface); }
.hx-seg > :is(button, a, label):hover { text-decoration: none; }

/* ----- .hx-dot: estado ----- */
.hx-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hx-line2); vertical-align: middle; }
.hx-dot.is-sm { width: 6px; height: 6px; }
.hx-dot--ok { background: var(--hx-green); }
.hx-dot--warn { background: var(--hx-amber); }
.hx-dot--bad { background: var(--hx-red); }
.hx-dot--off { background: var(--hx-line2); }
.hx-dot--brand { background: var(--hx-brand); }

/* ----- .hx-help: ajuda sob demanda (nada aberto por padrao) ----- */
.hx-help { position: relative; display: inline-block; font-size: 12px; color: var(--hx-ink3); }
.hx-help > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 4px; border-radius: 6px; list-style: none; cursor: pointer; color: var(--hx-ink3); }
.hx-help > summary::-webkit-details-marker { display: none; }
.hx-help > summary::marker { content: ""; }
.hx-help > summary:hover { color: var(--hx-ink); }
.hx-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--hx-line2); border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 1; color: var(--hx-ink3); }
.hx-help-body { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(420px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid var(--hx-line); border-radius: 8px; background: var(--hx-surface); box-shadow: 0 1px 2px rgba(35, 31, 28, .06), 0 12px 32px rgba(35, 31, 28, .12); font-size: 13px; line-height: 1.5; color: var(--hx-ink2); }
.hx-help.is-end .hx-help-body { left: auto; right: 0; }
.hx-help.is-inline .hx-help-body { position: static; width: auto; max-width: 72ch; margin-top: 6px; box-shadow: none; }
.hx-help-body > :first-child { margin-top: 0; }
.hx-help-body > :last-child { margin-bottom: 0; }

/* ----- .hx-drawer: painel lateral direito (cadastro/edicao) ----- */
dialog.hx-drawer { position: fixed; inset: 0 0 0 auto; width: min(var(--hx-drawer-w, 520px), 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--hx-line); border-radius: 0; background: var(--hx-surface); color: var(--hx-ink2); box-shadow: -18px 0 48px rgba(35, 31, 28, .16); font-size: 14px; }
dialog.hx-drawer[open] { display: flex; flex-direction: column; }
dialog.hx-drawer::backdrop { background: rgba(35, 31, 28, .32); }
.hx-drawer.is-wide { --hx-drawer-w: 560px; }
.hx-drawer.is-narrow { --hx-drawer-w: 480px; }
.hx-drawer-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--hx-line); }
.hx-drawer-head > :is(h2, .hx-drawer-title) { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--hx-ink); }
.hx-drawer-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--hx-ink3); font-size: 18px; line-height: 1; cursor: pointer; }
.hx-drawer-close:hover { border-color: var(--hx-line); color: var(--hx-ink); }
.hx-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: grid; align-content: start; gap: 14px; }
.hx-drawer-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--hx-line); background: var(--hx-paper); }
.hx-drawer-foot .hx-drawer-foot-start { margin-right: auto; }

/* ----- campos e botoes do painel ----- */
.hx-pf-field { display: grid; gap: 4px; min-width: 0; }
.hx-pf-field > label, .hx-pf-label { font-size: 13px; font-weight: 500; color: var(--hx-ink); }
.hx-pf-hint { font-size: 12px; color: var(--hx-ink3); }
.hx-pf-input { width: 100%; }
textarea.hx-pf-input { height: auto; min-height: 72px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.hx-pf-input:focus-visible, .hx-filterbar :is(select, input):focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 1px; border-color: var(--hx-line2); }
.hx-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; width: auto; height: var(--hx-control-h); padding: 0 12px; border: 1px solid var(--hx-line2); border-radius: 6px; background: var(--hx-surface); font: inherit; font-size: 13px; font-weight: 500; color: var(--hx-ink2); text-decoration: none; white-space: nowrap; cursor: pointer; }
.hx-btn:hover { border-color: var(--hx-ink3); color: var(--hx-ink); text-decoration: none; }
/* Primario em --hx-brand-deep: branco sobre #B35426 passa 4,5:1 em texto de 13 px (sobre #D9662C nao passa). */
.hx-btn.is-primary { border-color: var(--hx-brand-deep); background: var(--hx-brand-deep); color: #FFFFFF; }
.hx-btn.is-primary:hover { border-color: var(--hx-brand-ink); background: var(--hx-brand-ink); color: #FFFFFF; }
.hx-btn.is-danger { color: var(--hx-red-ink); }
.hx-btn.is-icon { width: 28px; height: 28px; padding: 0; border-color: var(--hx-line); color: var(--hx-ink3); }
.hx-btn:disabled, .hx-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }