/* Panorama de Obras — sistema visual do CBNet Hub.
   Tokens copiados do cbnethub/DESIGN.md §3 e §4 na íntegra, nomes canônicos.
   Nunca copiar cor de outro módulo: foi assim que o hub chegou em jul/2026 com
   três verdes e três convenções de nome convivendo. */

/* Poppins vendorada — DESIGN.md §5. NUNCA CDN: a CSP é default-src 'self' e o
   Google Fonts é bloqueado. Só o subset LATIN e só dois pesos; qualquer
   font-weight fora de 500/600 vira negrito sintético. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('vendor/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('vendor/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Cor: tema escuro (padrão) — DESIGN.md §3 ─────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:            #061423;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.03);
  --border:        rgba(255,255,255,.10);
  --text:          #eaf2f8;
  --text-muted:    #93a7ba;
  --accent:        #2fd15a;
  --accent-text:   #2fd15a;
  --on-accent:     #061423;
  --danger:        #ff6b7a;
  --warning:       #ffb020;
  --on-danger:     #061423;  /* INVERTE no claro — DESIGN.md §3 */
  --on-warning:    #061423;
  --warning-text:  #ffb020;
  --focus-ring:    color-mix(in srgb, var(--accent) 55%, transparent);

  --elev-1: 0 1px 2px rgba(0,0,0,.30);
  --elev-2: 0 20px 46px rgba(0,0,0,.50);
}

/* ── Cor: tema claro ──────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            #eaeff6;
  --surface:       #ffffff;
  --surface-2:     #dde5ef;
  --border:        #ccd7e4;
  --text:          #0f1c2b;
  --text-muted:    #54637a;
  --accent:        #22a847;
  --accent-text:   #147233;  /* o verde de marca não serve como TEXTO no claro */
  --on-accent:     #061423;
  --danger:        #b3352f;
  --warning:       #b7791f;
  --on-danger:     #ffffff;
  --on-warning:    #061423;
  --warning-text:  #8a5a12;
  --focus-ring:    color-mix(in srgb, var(--accent) 55%, transparent);

  --elev-1: 0 1px 2px rgba(15,28,43,.05), 0 1px 1px rgba(15,28,43,.04);
  --elev-2: 0 18px 42px rgba(15,28,43,.16);
}

/* ── Espaço, raio, movimento, largura — DESIGN.md §4, §6, §7 ──────────────── */
:root {
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;

  --r-campo: 10px;
  --r-card:  14px;
  --r-pill:  999px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --t-press: 120ms;
  --t-hover: 160ms;
  --t-enter: 240ms;

  /* Painel de lista densa a partir do B2: largura única do módulo inteiro. */
  --medida: 72rem;
}

/* Widgets nativos no esquema do tema (DESIGN.md §3.2). */
:root { color-scheme: dark; accent-color: var(--accent) }
[data-theme="light"] { color-scheme: light }

/* Barra de rolagem tematizada (DESIGN.md §3.1). */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent }
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: var(--r-pill) }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 70%, transparent) }

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }

html, body { margin: 0; min-height: 100vh }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sem topbar próprio (MODULE_CONTRACT): o hub já é a moldura. */
  display: flex;
  flex-direction: column;
}

strong, b { font-weight: 600 }

h1, h2 { margin: 0; font-weight: 600 }

/* Tracking por tamanho (DESIGN.md §5): grande fecha, miúdo abre. */
h1 { font-size: 1.75rem; line-height: 1.12; letter-spacing: -.021em }
h2 { font-size: 1rem;    line-height: 1.32; letter-spacing: -.006em }

p { margin: 0 }

.muted { color: var(--text-muted) }

/* `hidden` vence qualquer `display` de classe (senão .acoes{display:flex}
   mostraria o que o JS escondeu). */
[hidden] { display: none !important }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px }

/* ── Layout: uma coluna, uma largura (DESIGN.md §7) ───────────────────────── */
.app {
  width: 100%;
  max-width: var(--medida);
  margin-inline: auto;
  padding: var(--s-5) var(--s-5) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) }
.cabecalho .titulo { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0 }
.cabecalho .acoes { display: flex; align-items: center; gap: var(--s-3) }
.cabecalho .sub {
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .005em;
}

.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* P-032: texto longo (nome, mensagem) quebra em vez de estourar a tela. */
  overflow-wrap: anywhere;
}
.cartao.aviso { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)) }
.cartao.aviso h2 { color: var(--warning-text) }
.cartao.erro { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)) }

/* ── Botão — DESIGN.md §6, P-031 ──────────────────────────────────────────── */
.botao {
  min-height: 2.25rem;
  padding: 0 var(--s-4);
  border-radius: var(--r-campo);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  /* Responde no press, não no release. Só transform anima. */
  transition: transform var(--t-press) var(--ease-out);
}
.botao:active { transform: scale(.97) }
.botao.primario { background: var(--accent); border-color: transparent; color: var(--on-accent) }

@media (hover: hover) and (pointer: fine) {
  .botao:hover { filter: brightness(1.06) }
}

/* Alvo de toque SÓ no toque, nunca na regra base (P-031): na regra base o
   botão engordaria no desktop também. */
@media (hover: none) and (pointer: coarse) {
  .botao { min-height: 44px }
}

/* ── Aviso de versão nova (P-050) ─────────────────────────────────────────── */
/* Persistente: não some sozinho — some quando a pessoa clicar em Atualizar. */
.avisos {
  position: fixed;
  inset-inline: var(--s-4);
  bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  pointer-events: none;
  z-index: 10;
}
.aviso-versao {
  pointer-events: auto;
  /* P-032: largura canônica de aviso fixo — densa no desktop, nunca mais
     larga que a tela em 360px; texto quebra em vez de vazar. */
  max-width: min(420px, calc(100vw - 32px));
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
  /* Entrada ocasional: opacidade + deslocamento curto, ease-out forte,
     transição (interrompível) em vez de keyframe. */
  transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(8px) }
}

/* Aviso efêmero (salvou com conflito, não salvou, excluída). Some sozinho. */
.aviso {
  pointer-events: auto;
  max-width: min(420px, calc(100vw - 32px));
  overflow-wrap: break-word;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
  font-size: .875rem;
  transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(8px) }
}

.estado-salvar { font-size: .8125rem; letter-spacing: .005em; color: var(--text-muted) }
.estado-salvar.ok { color: var(--accent-text) }
.estado-salvar.erro { color: var(--danger) }

/* ── Cores de domínio (status, material, prioridade) ──────────────────────── */
/* Só tokens do DESIGN.md: concluída = acento, atrasada = perigo, andamento =
   neutro; material: estoque = acento, parcial = alerta, compra = perigo. */
.st-concluida, .ma-estoque { background: var(--accent) }
.st-atrasada, .ma-compra   { background: var(--danger) }
.st-andamento              { background: var(--text-muted) }
.ma-parcial                { background: var(--warning) }
.a-definir                 { background: var(--border) }

/* As seções do painel seguem o mesmo ritmo vertical da .app. */
#painel { display: flex; flex-direction: column; gap: var(--s-5) }

/* ── KPIs ─────────────────────────────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-3);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.rotulo {
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi .valor { font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.021em; font-variant-numeric: tabular-nums }
.kpi .sub { font-size: .8125rem; line-height: 1.45; letter-spacing: .005em }
.kpi.ruim .valor { color: var(--danger) }
.kpi.atencao .valor { color: var(--warning-text) }

/* ── Atenção + distribuição ───────────────────────────────────────────────── */
.grade2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-3) }
.atencao { display: flex; flex-direction: column; gap: var(--s-1); max-height: 22rem; overflow-y: auto }
.item-atencao {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-campo);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out);
}
.item-atencao:active { transform: scale(.99) }
.item-atencao .faixa { align-self: stretch; border-radius: var(--r-pill) }
.item-atencao.sev-0 .faixa { background: var(--danger) }
.item-atencao.sev-1 .faixa, .item-atencao.sev-2 .faixa { background: var(--warning) }
.item-atencao.sev-3 .faixa { background: var(--border) }
.item-atencao .txt { display: flex; flex-direction: column; min-width: 0 }
.item-atencao .titulo-item { font-weight: 600; overflow-wrap: anywhere }
.item-atencao .motivo, .item-atencao .quando { font-size: .8125rem; letter-spacing: .005em }
.item-atencao .motivo { color: var(--text-muted); overflow-wrap: anywhere }
.item-atencao .quando { white-space: nowrap }
.vazio { padding: var(--s-3) 0 }

.distribuicao { gap: var(--s-4) }
.segmentos { display: flex; height: .625rem; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); margin-top: var(--s-2) }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); font-size: .8125rem; color: var(--text-muted) }
.legenda span { display: inline-flex; align-items: center; gap: var(--s-1) }
.legenda i { width: .625rem; height: .625rem; border-radius: var(--r-pill); display: inline-block }
.legenda b { color: var(--text); font-weight: 600 }
.barras { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); font-size: .8125rem }
.barras .trilho { height: .5rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden }
.barras .cheio { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill) }
.barras .n { font-variant-numeric: tabular-nums; font-weight: 600 }

/* ── Filtros ──────────────────────────────────────────────────────────────── */
.lista-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3) }
.contagem { font-size: .8125rem }
.filtros { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3) }
.filtros input { flex: 1 1 14rem }
.filtros select { flex: 0 1 auto }

/* Campos de formulário: um estilo só, nos dois temas. */
input:not([type="checkbox"]), select {
  min-height: 2.25rem;
  min-width: 0;
  padding: 0 var(--s-3);
  border-radius: var(--r-campo);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
}
/* Widget nativo: fundo OPACO e na cor da PÁGINA, no controle e nas opções
   (DESIGN.md §3.2). No Windows o Chrome desenha o popup a partir do fundo do
   campo; translúcido ali compõe sobre branco e vira a caixa clara no escuro. */
select, select option, select optgroup { background-color: var(--bg); color: var(--text) }
input::placeholder { color: var(--text-muted); opacity: .8 }

/* ── Cartão da obra ───────────────────────────────────────────────────────── */
.lista { display: flex; flex-direction: column; gap: var(--s-3) }
.obra {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
/* A faixa à esquerda diz o status sem ler nada. */
/* Raio próprio (e não overflow:hidden no cartão, que cortaria anel de foco e
   conteúdo dinâmico): a faixa acompanha o canto arredondado. */
.obra > .faixa { position: absolute; inset-block: 0; left: 0; width: 4px; background: var(--border); border-radius: var(--r-card) 0 0 var(--r-card) }
.obra.st-andamento > .faixa { background: var(--text-muted) }
.obra.st-atrasada > .faixa { background: var(--danger) }
.obra.st-concluida > .faixa { background: var(--accent) }
/* A classe st-* no <article> pinta a faixa, não o cartão inteiro. */
.obra.st-andamento, .obra.st-atrasada, .obra.st-concluida { background: var(--surface) }

.obra .topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3) }
.obra .cliente { flex: 1 1 14rem; font-weight: 600; font-size: 1rem; letter-spacing: -.006em; overflow-wrap: anywhere }
.obra input.cliente { background: transparent; border-color: transparent; padding-inline: var(--s-2) }
.obra input.cliente:hover, .obra input.cliente:focus { border-color: var(--border); background: var(--surface-2) }
.tag {
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.selos { display: inline-flex; flex-wrap: wrap; gap: var(--s-1) }
.selo { font-size: .75rem; padding: 0 var(--s-2); border-radius: var(--r-pill); line-height: 1.6; white-space: nowrap }
.selo.ruim { background: var(--danger); color: var(--on-danger) }
.selo.atencao { background: var(--warning); color: var(--on-warning) }
.selo.neutro { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border) }
.acoes-cartao { display: inline-flex; gap: var(--s-2); margin-left: auto }
.botao.pequeno { min-height: 2rem; padding: 0 var(--s-3); font-size: .8125rem }
.botao.perigo { color: var(--danger) }
.botao.perigo.armado { background: var(--danger); color: var(--on-danger); border-color: transparent }

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--s-3);
}
.campo { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0 }
.campo .rotulo { letter-spacing: .04em }
.campo.largo, .campos > .largo { grid-column: 1 / -1 }
.campo.duplo { grid-column: span 2 }
.campo input, .campo select { width: 100% }

/* O select pinta o próprio valor (tipo, nunca preenchimento: -text). */
select.tom-status-atrasada, select.tom-prioridade-urgente, select.tom-material-compra { color: var(--danger) }
select.tom-status-concluida, select.tom-material-estoque { color: var(--accent-text) }
select.tom-material-parcial, select.tom-prioridade-intermediario { color: var(--warning-text) }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2) }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.25rem;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: .875rem;
  white-space: nowrap;
  cursor: pointer;
}
.chip:has(input:checked) { border-color: var(--accent-text); color: var(--accent-text) }

.historico { border-top: 1px solid var(--border); padding-top: var(--s-3); font-size: .875rem }
.historico ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2) }
.historico li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere }
.historico .quando { font-size: .75rem; letter-spacing: .005em }

/* ── Toque: alvos e anti-zoom (P-031) ─────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]), select, .chip, .botao.pequeno { min-height: 44px }
  /* < 16px faz o Safari dar zoom ao focar, dentro do iframe do hub. */
  input:not([type="checkbox"]), select { font-size: 16px }
  .chip input { width: 20px; height: 20px }
}

/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .grade2 { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 600px) {
  .app { padding: var(--s-4) var(--s-4) var(--s-8) }
  h1 { font-size: 1.5rem }
  .avisos { align-items: stretch }
  .aviso-versao { justify-content: space-between }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .filtros select { flex: 1 1 45% }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .obra { padding-left: var(--s-4) }
  .acoes-cartao { margin-left: 0 }
}

/* ── Movimento reduzido — retorno sem deslocamento ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}