/* =========================================================================
   Componentes do design system (KORPO). Carrega por ULTIMO e sobrescreve o
   app.css (upstream, nao se mexe) por ordem: mesma especificidade, quem vem
   depois ganha. Sem !important, sem cor escrita aqui: tudo vem de tokens.css.

   COMO ADICIONAR UM COMPONENTE: use so var(--...) do tokens.css, escreva o
   estado base, :hover, :active, :focus-visible e :disabled, e, se for algo
   que se toca, garanta var(--touch) dentro de @media (pointer: coarse).
   ========================================================================= */

/* ----------------------------------------------------------------- foco --- */
/* Um unico anel de foco no sistema inteiro; nunca removido. */
:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
/* Sobre a barra escura o azul de texto some: o anel passa a ser claro. */
:is(.topbar, .gaveta__painel) :focus-visible { outline-color: var(--on-topbar); }

/* -------------------------------------------------------------- botoes ---- */
/* Escada de tamanhos: --sm 32 / padrao 40 / --lg 44. Variantes: secundario
   (padrao), --primary, --ghost, --danger, --danger-ghost, --icon, --block. */
.btn {
  min-height: var(--control); padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text);
  font-size: var(--fs-md); font-weight: var(--fw-strong); line-height: var(--lh-tight);
  gap: var(--space-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--bg-hover); filter: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-hover-edge); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }

.btn--danger { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-accent); }
.btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger-solid) 85%, black);
  border-color: color-mix(in srgb, var(--danger-solid) 85%, black);
}
.btn--danger-ghost { background: transparent; border-color: transparent; color: var(--danger-fg); }
.btn--danger-ghost:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger-fg); }

/* Verde do Zapia: marca de terceiro, fica de proposito (ver tokens.css). */
.btn--zapia { background: var(--zapia); border-color: var(--zapia); color: var(--on-accent); }
.btn--zapia:hover:not(:disabled) { background: var(--zapia-strong); border-color: var(--zapia-strong); }

.btn--sm { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--fs-sm); }
.btn--lg { min-height: var(--control-lg); padding: 0 var(--space-5); font-size: var(--fs-lg); }
.btn--block { width: 100%; }
.btn--icon { width: var(--control); padding: 0; justify-content: center; }
.btn--icon.btn--sm { width: var(--control-sm); }
.btn--icon.btn--lg { width: var(--control-lg); }

/* Botao alternado (barra de ferramentas do Gantt) e area de soltar arquivo. */
.gt-toolbar .btn.is-on { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-text); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text); }

/* Botoes redondos da barra do topo e botao discreto dentro de cartao/tabela. */
.icon-btn { color: var(--on-topbar); }
.icon-btn .dot { background: var(--danger-solid); }
.icon-btn.is-recording { background: var(--danger-solid); }
.mini-btn:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.pill { background: var(--accent); color: var(--on-accent); }

/* --------------------------------------------------------------- campos ---- */
.input, .select {
  min-height: var(--control); padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text);
  transition: border-color var(--dur) var(--ease);
}
.textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text);
  transition: border-color var(--dur) var(--ease);
}
.select--sm { min-height: var(--control-sm); width: auto; max-width: 220px; padding: 0 var(--space-2); font-size: var(--fs-sm); }
.input::placeholder, .textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
.input:hover:not(:disabled), .textarea:hover:not(:disabled), .select:hover:not(:disabled) { border-color: var(--text-placeholder); }
.input:focus, .textarea:focus, .select:focus { box-shadow: none; border-color: var(--accent); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: var(--focus-width) solid var(--focus-color); outline-offset: 1px;
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--bg-sunken); color: var(--text-soft); cursor: not-allowed;
}
.input[aria-invalid="true"], .input.is-invalid, .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--danger);
}
.field label { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--text-soft); margin-bottom: var(--space-1); }
.hint { font-size: var(--fs-xs); color: var(--text-soft); margin-top: var(--space-1); }
.field__erro { font-size: var(--fs-xs); color: var(--danger); margin-top: var(--space-1); }

/* ----------------------------------------------------- badges (1 sistema) --- */
/* Um unico par fundo/texto por estado (-bg/-fg do tokens.css) para as 8
   familias antigas. A cor nunca vem sozinha: o texto do selo diz o estado. */
.badge--ok, .badge--warn, .badge--danger, .badge--info, .badge--neutral {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-strong); line-height: var(--lh-tight); white-space: nowrap;
}
.tag { background: var(--neutral-bg); color: var(--neutral-fg); }

.badge--ok, .badge--due.is-done, .tag--ok, .kx-chip--ok, .obra-tile__status.is-concluida,
.rdo-step.is-done, .sk-ia { background: var(--ok-bg); color: var(--ok-fg); }

.badge--warn, .badge--due.is-soon, .badge--parado.is-aviso, .list__parados.is-aviso, .tag--warn,
.tag--locado, .kx-chip--warn, .sk-ia.is-off, .notas__selo { background: var(--warn-bg); color: var(--warn-fg); }

.badge--danger, .badge--due.is-late, .badge--parado.is-alerta, .list__parados.is-alerta, .tag--off,
.obra-tile__status.is-paralisada, .kx-chip--danger { background: var(--danger-bg); color: var(--danger-fg); }
.notas__selo.is-alerta { background: var(--danger-solid); color: var(--on-accent); }

.badge--info, .tag--proprio, .obra-tile__status.is-em_andamento, .kx-chip--info {
  background: var(--info-bg); color: var(--info-fg);
}
.badge--neutral, .tag--terceiro, .tag--mei, .kx-chip--neutro { background: var(--neutral-bg); color: var(--neutral-fg); }

.fin-chip.is-vencido { background: var(--danger-bg); }
.fin-chip.is-vencido .fin-chip__valor { color: var(--danger-fg); }

/* ------------------------------------------------------ alertas (1 sistema) -- */
.alert {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  font-size: var(--fs-sm); line-height: var(--lh);
}
.alert svg, .alert .icon { flex: none; margin-top: 2px; }
.alert--ok { background: var(--ok-bg); color: var(--ok-fg); }
.alert--warn, .fin-aviso, .notas__falhas, .nota__avisos, .sk-faltas { background: var(--warn-bg); color: var(--warn-fg); }
.alert--danger, .auth__err { background: var(--danger-bg); color: var(--danger-fg); }
.alert--info { background: var(--info-bg); color: var(--info-fg); }
.fin-aviso { border-color: color-mix(in srgb, currentColor 25%, transparent); }
.notas__falhas-erro { color: inherit; }

/* ---------------------------------------------------------------- cartoes -- */
/* Borda fina em vez de sombra: limpo no claro e no escuro. */
.cartao { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; padding: var(--space-5); }
/* So na tela: na impressao vale a regra .card-panel do upstream (borda cinza, sem fundo). */
@media screen {
  .card-panel, .kx-cartao {
    background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: none; padding: var(--space-5);
  }
}
.cartao__titulo { margin: 0 0 var(--space-1); font-size: var(--fs-lg); font-weight: var(--fw-strong); }
.cartao__desc { margin: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--text-soft); max-width: 70ch; }
.modal { box-shadow: var(--shadow-pop); }
.overlay, .gaveta { background: var(--scrim); }

/* ---------------------------------------------------------------- tabelas -- */
.table, .kx-tabela { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.table th, .kx-tabela th {
  padding: var(--space-3) var(--space-4); background: var(--bg-sunken); color: var(--text-soft);
  font-size: var(--fs-sm); font-weight: var(--fw-strong);
}
.table td { padding: var(--space-3) var(--space-4); }
/* Acima de 640px: abaixo disso a tabela vira cartoes (korpo_auth.css) e tem padding proprio. */
@media (min-width: 641px) {
  .kx-tabela td { padding: var(--space-3) var(--space-4); }
}
.table tbody tr:hover td, .kx-tabela tbody tr:hover { background: var(--bg-sunken); }

/* ------------------------------------------------------------------ abas --- */
.tab, .kx-aba { min-height: var(--control); padding: 0 var(--space-4); font-size: var(--fs-md); font-weight: var(--fw-strong); }
.tab { display: inline-flex; align-items: center; }
.tab.is-on, .kx-aba[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.tab:focus-visible, .kx-aba:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }

/* --------------------------------------- vazio / carregando / erro ----------- */
.empty, .kx-vazio { padding: var(--space-8) var(--space-5); color: var(--text-soft); }
.empty h2 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-strong); }
.empty p { margin: 0 auto var(--space-4); max-width: 46ch; font-size: var(--fs-sm); }
.empty--erro h2 { color: var(--danger); }
.kx-vazio { border: 1px solid var(--line); box-shadow: none; }
.skeleton, .kx-esqueleto {
  display: block; height: var(--control); margin-bottom: var(--space-2);
  border-radius: var(--radius-sm); background: var(--bg-sunken); animation: kx-pulso 1.2s ease-in-out infinite;
}
.skeleton--linha { height: var(--space-3); }

/* ---------------------------------------------------------------- avisos ---- */
.toasts { z-index: var(--z-toast); }
.toast {
  background: var(--topbar); color: var(--on-topbar); border: 1px solid var(--toast-border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.toast--err { background: var(--danger-solid); color: var(--on-accent); }
.toast--ok { background: var(--ok-solid); color: var(--on-accent); }
.toast--acao .btn { background: var(--on-topbar); border-color: var(--on-topbar); color: var(--topbar); }
.toast--acao .btn:hover:not(:disabled) { background: var(--on-topbar); color: var(--topbar); filter: brightness(.92); }

/* ------------------------------------------------- marca, login e topo ----- */
.auth { background: var(--auth-bg); }
.brand-mark { background-image: var(--brand-mark); }
.topbar { z-index: var(--z-topbar); box-shadow: inset 0 -1px 0 var(--topbar-hover); }

/* ------------------------------------------------ topo por largura de tela ---
   Medido: os 10 botoes do menu, a marca e a conta pedem ~1251px; com a busca
   aberta (so em /quadros, /concluidas e /b/*), ~1501px. O upstream so trocava
   pela gaveta a 720px e o topo estourava nessa faixa. Pontos de quebra deste
   arquivo: 640 e 720 (celular), 860 (tabela), 1280 e 1500 (topo). */
@media (max-width: 1280px) {
  .topbar__menu { display: grid; }
  .topbar__nav { display: none; }
}
/* Entre a gaveta e a largura que o topo pede com busca: a busca cede espaco em
   vez de empurrar a conta para fora, e nao cresce ao focar. */
@media (min-width: 1281px) and (max-width: 1500px) {
  .tbtn { padding: 7px 8px; }
  .topbar__search { flex: 0 1 220px; min-width: 40px; }
  .topbar__search input { width: 100%; min-width: 0; }
  .topbar__search input:focus { width: 100%; }
}
/* Celular com alvo de toque de 44px: menu + marca + 4 botoes ja ocupam ~300px
   de 360. A busca (so nas telas de quadro) encolhe para o que sobra; ao tocar,
   o upstream abre ela na largura inteira. */
@media (max-width: 720px) {
  .topbar__search { flex: 0 1 118px; min-width: 0; }
  .topbar__search input { width: 100%; min-width: 0; }
  /* 16px evita o zoom do iOS (app.css:1555); o font-size do .select--sm acima nao pode vencer isso. */
  .select--sm { font-size: 16px; }
}

/* -------------------------------------------------- alvos para o dedo ------ */
/* Em tela de toque tudo que se aperta chega a 44px (WCAG 2.5.5). No mouse,
   a escada 32/40/44 acima continua valendo. */
@media (pointer: coarse) {
  .btn, .btn--sm, .btn--lg, .tab, .kx-aba, .input, .select, .select--sm {
    min-height: var(--touch);
  }
  .btn--icon, .btn--icon.btn--sm { width: var(--touch); }
  .icon-btn, .modal__close, .mini-btn, .list__collapse, .list__menu {
    min-width: var(--touch); min-height: var(--touch);
  }
  .mini-btn { width: var(--touch); height: var(--touch); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .input, .textarea, .select { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
  .skeleton, .kx-esqueleto { animation: none; }
}

/* ---- QA 22/10: iOS da zoom em campo < 16px. O app.css (e telas como o Gantt,
   o Resumo do WhatsApp e o card) fixam 12-14px com seletor de classe; o prefixo
   por id (1,0,1) vence todos sem !important. */
@media (max-width: 720px) {
  :is(#app, #modalRoot, #menuRoot) :is(input, select, textarea) { font-size: 16px; }
}