/* Sistema de Gestão Andracon — identidade da Andracon Engenharia sobre os componentes do app.
   Marca tirada do logotipo e do site andraconengenharia.com: marinho #162945, amarelo #FFE606
   (só acento: ativo, em curso, foco), papel #F3F1EC. Archivo nos títulos e números, Inter no texto.
   Estrutura de painel denso, lateral escura, placas brancas: mesma família da plataforma Transbiaga. */

@font-face { font-family: 'Archivo'; src: url('../assets/fontes/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root, [data-tema="claro"] {
  --a-marinho: #162945;
  --a-marinho-profundo: #0E1C31;
  --a-marinho-700: #22395E;
  --a-marinho-100: #E3E8F0;
  --a-amarelo: #FFE606;
  --a-amarelo-escuro: #8A7A00;
  --a-papel: #F3F1EC;
  --a-placa: #FFFFFF;
  --a-tinta: #14213A;
  --a-tinta-2: #3B4660;
  --a-tinta-3: #5A6478;
  --a-linha: rgba(22, 41, 69, .12);
  --a-linha-forte: rgba(22, 41, 69, .24);

  --v-canvas: var(--a-papel);
  --v-canvas-rebaixado: #ECE9E2;
  --v-superficie: var(--a-placa);
  --v-superficie-alta: #F7F6F2;
  --v-texto: var(--a-tinta);
  --v-texto-suave: var(--a-tinta-2);
  --v-texto-sutil: var(--a-tinta-3);
  --v-texto-invertido: #FFFFFF;
  --v-borda: var(--a-linha);
  --v-borda-sutil: rgba(22, 41, 69, .07);
  --v-borda-forte: var(--a-linha-forte);
  --v-acento: var(--a-marinho);
  --v-acento-hover: var(--a-marinho-700);
  --v-acento-texto: #1F4A8A;
  --v-acento-suave: var(--a-marinho-100);
  --v-acento-contraste: #FFFFFF;
  --v-foco: var(--a-marinho);
  --v-sombra-foco: 0 0 0 2px var(--a-papel), 0 0 0 4px var(--a-marinho);
  --v-sucesso: #17734B;
  --v-sucesso-suave: #E2F1E9;
  --v-atencao: #A86A00;
  --v-atencao-suave: #FBF0D6;
  --v-critico: #B02E25;
  --v-critico-suave: #F8E3E1;
  --v-informacao: #2D5A96;
  --v-informacao-suave: #E3EBF6;
  --v-serie-1: var(--a-marinho);
  --v-serie-2: #8A93A3;
  --v-fonte-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --v-fonte-texto: 'Inter', system-ui, sans-serif;
  --v-raio-sm: 3px;
  --v-raio-md: 5px;
  --v-raio-lg: 7px;
  --v-sombra-sm: 0 0 0 1px var(--a-linha);
  --v-sombra-md: 0 0 0 1px var(--a-linha), 0 1px 2px rgba(14, 28, 49, .06);
  --lateral: 15.5rem;
}

html { scrollbar-gutter: stable; }
body { background: var(--a-papel); color: var(--a-tinta); font-family: var(--v-fonte-texto); }

/* ------------------------------------------------------------------ estrutura */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-block-size: 100svh; }
.lateral {
  position: sticky; inset-block-start: 0; block-size: 100svh; overflow-y: auto;
  background: var(--a-marinho-profundo); color: #DCE3EE;
  display: flex; flex-direction: column; gap: var(--v-espaco-5); padding: var(--v-espaco-5) var(--v-espaco-3) var(--v-espaco-4);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.lateral__marca { display: flex; flex-direction: column; gap: .35rem; padding: var(--v-espaco-1) var(--v-espaco-3) var(--v-espaco-3); border-block-end: 1px solid rgba(255,255,255,.1); text-decoration: none; }
.lateral__marca img { inline-size: 9.5rem; block-size: auto; display: block; }
.lateral__sistema { font-family: var(--v-fonte-display); font-stretch: 85%; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: #9FB0C8; }
.nav-grupo { display: flex; flex-direction: column; gap: 1px; }
.nav-grupo__titulo { font-size: .8125rem; color: #8FA0BA; padding: 0 var(--v-espaco-3) var(--v-espaco-1); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: .65rem; padding: .5rem var(--v-espaco-3);
  border-radius: var(--v-raio-sm); color: #DCE3EE; text-decoration: none; font-size: .9375rem;
}
.nav-item svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item--ativo { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.nav-item--ativo::before { content: ''; position: absolute; inset-block: .35rem; inset-inline-start: -.75rem; inline-size: 3px; border-radius: 0 2px 2px 0; background: var(--a-amarelo); }
.nav-item--ativo svg { stroke: var(--a-amarelo); opacity: 1; }
.nav-item:focus-visible { outline: 2px solid var(--a-amarelo); outline-offset: 1px; }
.nav-item .contador { margin-inline-start: auto; border: 0; background: var(--a-amarelo); color: var(--a-marinho-profundo); font-weight: 700; font-size: .75rem; padding: 0 .45em; border-radius: 999px; }
.lateral__pe { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--v-espaco-2); padding: var(--v-espaco-3) var(--v-espaco-3) 0; border-block-start: 1px solid rgba(255,255,255,.1); font-size: .8125rem; color: #9FB0C8; }
.lateral__pe a { color: #DCE3EE; }
.lateral__credito { font-size: .75rem; color: #7F90AA; }

.corpo { min-inline-size: 0; display: flex; flex-direction: column; }
.barra-topo {
  position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: var(--v-espaco-3);
  min-block-size: 3.5rem; padding: .5rem var(--v-espaco-6); background: rgba(243, 241, 236, .94); backdrop-filter: blur(6px);
  border-block-end: 1px solid var(--a-linha);
}
.barra-topo__trilha { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--a-tinta-3); min-inline-size: 0; }
.barra-topo__trilha a { color: var(--a-tinta-2); text-decoration: none; }
.barra-topo__trilha a:hover { color: var(--a-tinta); text-decoration: underline; }
.barra-topo__conta { margin-inline-start: auto; display: flex; align-items: center; gap: var(--v-espaco-3); font-size: .875rem; }
.barra-topo__quem { display: flex; align-items: center; gap: .5rem; color: var(--a-tinta); text-decoration: none; }
.avatar { inline-size: 2rem; block-size: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--a-marinho); color: #fff; font-family: var(--v-fonte-display); font-weight: 700; font-size: .8125rem; }
.botao-menu { display: none; }

.principal { max-inline-size: 84rem; inline-size: 100%; margin-inline: auto; padding: var(--v-espaco-6) var(--v-espaco-6) var(--v-espaco-12); gap: var(--v-espaco-6); }
.principal:has(.tabela--larga) { max-inline-size: 104rem; }

/* ------------------------------------------------------------------ tipografia */
.principal h1 { font-family: var(--v-fonte-display); font-stretch: 88%; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.125rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; color: var(--a-tinta); }
.bloco__titulo, .principal h2 { font-family: var(--v-fonte-display); font-stretch: 92%; font-weight: 650; letter-spacing: -.005em; }
.cabeca .carimbo:first-child { font-size: .875rem; }
.numero strong, .num, .kpi__valor { font-family: var(--v-fonte-display); font-stretch: 90%; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ placas */
.v-card, .cartao, .numero, .alerta, .pergunta, .kanban__card, .faixa {
  background: var(--a-placa); border: 0; box-shadow: var(--v-sombra-md); border-radius: var(--v-raio-md);
}
.cartao:hover { box-shadow: 0 0 0 1px var(--a-marinho), 0 2px 6px rgba(14,28,49,.08); }
.faixa { background: #FBFAF7; }
.faixa--atencao { box-shadow: var(--v-sombra-md), inset 3px 0 0 var(--v-atencao); }
.faixa--critica { box-shadow: var(--v-sombra-md), inset 3px 0 0 var(--v-critico); }
.alerta--alta { box-shadow: var(--v-sombra-md), inset 3px 0 0 var(--v-critico); }
.alerta--media { box-shadow: var(--v-sombra-md), inset 3px 0 0 var(--v-atencao); }
.alerta--info { box-shadow: var(--v-sombra-md), inset 3px 0 0 var(--a-linha-forte); }
.pergunta--alta { box-shadow: var(--v-sombra-md), inset 3px 0 0 var(--v-critico); }
.pergunta--respondida { box-shadow: var(--v-sombra-md), inset 3px 0 0 var(--v-sucesso); }

.tabela-rolo { background: var(--a-placa); box-shadow: var(--v-sombra-md); border-radius: var(--v-raio-md); }
.tabela th { background: #F7F6F2; color: var(--a-tinta-3); font-size: .8125rem; font-weight: 600; position: sticky; inset-block-start: 0; }
.tabela th, .tabela td { border-block-end: 1px solid var(--a-linha); }
.tabela tbody tr:last-child td { border-block-end: 0; }
.tabela tr[data-href]:hover td { background: #F8F7F3; }

.v-btn--primario { background: var(--a-marinho); color: #fff; border-color: var(--a-marinho); box-shadow: none; }
.v-btn--primario:hover:not(:disabled) { background: var(--a-marinho-700); border-color: var(--a-marinho-700); }
.v-btn { box-shadow: none; border-radius: var(--v-raio-sm); }
.v-input { background: #fff; border-radius: var(--v-raio-sm); }
.filtro { background: #fff; }
.filtro--ativo { background: var(--a-marinho); color: #fff; border-color: var(--a-marinho); }

.progresso__trilho { background: #E4E1D8; border-radius: 2px; block-size: .55rem; }
/* Assinatura: avanço em blocos de alvenaria (6 px cheios, 1 px de junta). */
.progresso__barra { background: var(--a-marinho); border-radius: 2px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 7px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 7px); }

.selo { border-radius: var(--v-raio-sm); }
.conf--documento { background: var(--v-sucesso-suave); }

/* ------------------------------------------------------------------ visão geral */
.kpis { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: var(--v-espaco-4); }
.kpi { display: flex; flex-direction: column; gap: .35rem; padding: var(--v-espaco-5); background: var(--a-placa); box-shadow: var(--v-sombra-md); border-radius: var(--v-raio-md); color: inherit; text-decoration: none; }
a.kpi:hover { box-shadow: 0 0 0 1px var(--a-marinho), 0 2px 6px rgba(14,28,49,.08); }
.kpi__rotulo { font-size: .875rem; color: var(--a-tinta-3); }
.kpi__valor { font-size: 1.85rem; font-weight: 700; line-height: 1; color: var(--a-tinta); }
.kpi__valor small { font-size: 1rem; font-weight: 600; color: var(--a-tinta-3); }
.kpi__nota { font-size: .8125rem; color: var(--a-tinta-3); }
.kpi--heroi { background: var(--a-marinho); color: #fff; box-shadow: none; }
.kpi--heroi .kpi__rotulo, .kpi--heroi .kpi__nota { color: #B8C4D6; }
.kpi--heroi .kpi__valor { color: #fff; font-size: 2.3rem; }
.kpi--heroi .progresso__trilho { background: rgba(255,255,255,.18); }
.kpi--heroi .progresso__barra { background: var(--a-amarelo); }
.kpi--ruim .kpi__valor { color: var(--v-critico); }
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--v-espaco-5); align-items: start; }
.placa { background: var(--a-placa); box-shadow: var(--v-sombra-md); border-radius: var(--v-raio-md); padding: var(--v-espaco-5); display: flex; flex-direction: column; gap: var(--v-espaco-4); min-inline-size: 0; }
.placa__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v-espaco-3); }
.placa__topo h2 { font-size: 1.125rem; }
.placa__topo a { font-size: .875rem; }
.placa .tabela-rolo { box-shadow: none; margin-inline: calc(-1 * var(--v-espaco-5)); border-radius: 0; }
.placa .tabela th:first-child, .placa .tabela td:first-child { padding-inline-start: var(--v-espaco-5); }
.lista-compacta { list-style: none; display: flex; flex-direction: column; }
.lista-compacta li { display: grid; grid-template-columns: auto 1fr; gap: .25rem var(--v-espaco-3); padding-block: .7rem; border-block-end: 1px solid var(--a-linha); }
.lista-compacta li:last-child { border-block-end: 0; }
.data-bloco { inline-size: 3.1rem; text-align: center; border-radius: var(--v-raio-sm); background: #F3F1EC; padding: .3rem 0; line-height: 1.05; }
.data-bloco strong { display: block; font-family: var(--v-fonte-display); font-size: 1.15rem; }
.data-bloco span { font-size: .7rem; text-transform: lowercase; color: var(--a-tinta-3); }
.data-bloco--ruim { background: var(--v-critico-suave); color: var(--v-critico); }
.data-bloco--atencao { background: var(--v-atencao-suave); }
.estado { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; }
.estado::before { content: ''; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--a-linha-forte); }
.estado--bom::before { background: var(--v-sucesso); }
.estado--atencao::before { background: var(--v-atencao); }
.estado--ruim::before { background: var(--v-critico); }

/* ------------------------------------------------------------------ entrada */
.entrada { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--a-papel); }
.entrada__marca { background: var(--a-marinho-profundo); color: #fff; position: relative; overflow: hidden; }
.entrada__marca::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 32px 32px; }
.entrada__marca > * { position: relative; z-index: 1; }
.entrada__marca img { inline-size: 14rem !important; block-size: auto !important; }
.entrada__tese { font-family: var(--v-fonte-display); font-stretch: 85%; color: #fff; font-weight: 700; }
.entrada__tese span { color: var(--a-amarelo); }
.entrada__apoio { color: #B8C4D6; }
.entrada__marca .carimbo { color: #8FA0BA; }
.entrada__form h1 { font-family: var(--v-fonte-display); font-stretch: 88%; font-size: 1.85rem; font-weight: 700; }

/* ------------------------------------------------------------------ celular */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi--heroi { grid-column: 1 / -1; }
  .painel-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(17rem, 85vw); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .app--menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(14,28,49,.45); }
  .botao-menu { display: inline-flex; }
  .barra-topo { padding-inline: var(--v-espaco-4); }
  .barra-topo__nome { display: none; }
  .principal { padding: var(--v-espaco-5) var(--v-espaco-4) var(--v-espaco-10); }
  .kpi__valor { font-size: 1.6rem; }
  .kpi--heroi .kpi__valor { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }

/* ajustes da revisão visual */
.lateral__marca img { inline-size: 10rem; block-size: auto; }
.lateral nav { display: flex; flex-direction: column; gap: var(--v-espaco-5); }
.placa .tabela .col-obra { min-inline-size: 15rem; inline-size: 15rem; }
.placa .tabela a strong { font-weight: 600; }
.placa .tabela a { text-decoration: none; color: var(--a-tinta); }
.placa .tabela a:hover { text-decoration: underline; }