/* ==========================================================================
   CANTEIRO — sistema de design
   Direcao: "claro e limpo" — branco, azul-aco, muito respiro. Tela de gestao
   que tambem funciona de luva no celular: alvo de toque >= 44px em tudo que
   o pessoal de obra usa.

   Ordem do arquivo: tokens -> base -> layout -> componentes -> telas -> midia.
   Nao use valor magico solto: derive dos tokens.
   ========================================================================== */

:root {
  /* --- espacamento (base 4px) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* --- tipografia (escala ~1.25) --- */
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --text-3xl: 2.25rem; --text-4xl: 3rem;
  --leading-tight: 1.15; --leading-normal: 1.55;
  --peso-medio: 550; --peso-forte: 680;

  /* --- forma --- */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-full: 999px;
  --toque: 44px;                     /* alvo minimo de toque */

  /* --- movimento --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --rapido: .16s; --normal: .24s;

  /* --- cor: tema claro ---------------------------------------------------
     Direcao "canteiro": concreto quente no fundo, asfalto na tinta e
     amarelo-seguranca como marca. O amarelo NUNCA e texto sobre fundo claro
     (2,2:1) — quando o acento precisa virar texto, usa-se --marca-escura. */
  --bg: #EDE7DC;               /* cimento — o plano de fundo da pagina */
  --painel: #FAF8F4;           /* concreto claro — cartoes, barra, campos */
  --superficie: #E9E4D9;       /* segundo plano dentro do cartao */
  --superficie-2: #DED8CA;
  --borda: #DBD3C4;
  --borda-forte: #BEB4A2;
  --tinta: #17191C;            /* asfalto */
  --tinta-media: #43484F;
  --tinta-fraca: #5F636B;
  --marca: #E19A0C;            /* amarelo-seguranca — cor de acao e de marca */
  --marca-forte: #C88606;      /* hover (texto asfalto por cima) */
  --marca-fraca: #F6EEDA;      /* fundo de estado ativo */
  --marca-escura: #7A5200;     /* o acento quando precisa ser TEXTO */
  --marca-tinta: #1A1C1F;      /* tinta sobre o amarelo */
  --link: #15537D;             /* azul-planta: links, foco, informacao */

  --ok: #2E6B41;      --ok-bg: #E4EFE3;   --ok-borda: #BBD8BC;
  --atencao: #8A5A00; --atencao-bg: #FAEFD6; --atencao-borda: #E8D3A3;
  --grave: #9E2B20;   --grave-bg: #FAE7E3; --grave-borda: #EEC0B8;
  --neutro-bg: #EAE5DA; --neutro-borda: #D8D1C2;

  /* cores de GRAFICO — nao sao as de status da UI.
     Recalibradas para o fundo de concreto: alem do matiz, as tres tem
     LUMINANCIA diferente (ok mais escuro, observacao mais claro), entao a barra
     empilhada continua legivel em escala de cinza e sob daltonismo.
     O par de status (verde/ambar/vermelho) fica indistinguivel sob deuteranopia
     numa barra empilhada; este trio foi medido e mantem separacao. Sempre com
     legenda, 2px de respiro entre segmentos e a tabela "por obra" como
     visao alternativa. */
  --g-ok: #0F5C3D; --g-obs: #B98600; --g-crit: #D33A2C;

  --sombra-sm: 0 1px 2px rgba(23,25,28,.06);
  --sombra: 0 1px 2px rgba(23,25,28,.06), 0 10px 24px -12px rgba(23,25,28,.16);
  --sombra-lg: 0 16px 40px -12px rgba(23,25,28,.28);
  --anel: 0 0 0 3px rgba(21,83,125,.24);

  /* faixa de risco — a assinatura visual, usada com parcimonia */
  --faixa: repeating-linear-gradient(45deg,
            var(--marca) 0 10px, var(--tinta) 10px 20px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #101216;               /* asfalto — plano de fundo da pagina */
    --painel: #1A1D22;           /* cartoes, barra, campos */
    --superficie: #23272D;       /* segundo plano dentro do cartao */
    --superficie-2: #2B3038;
    --borda: #2E333A;
    --borda-forte: #454C55;
    --tinta: #F0EDE6;            /* concreto */
    --tinta-media: #B6BAC1;
    --tinta-fraca: #8A9099;
    --marca: #E8A62A;
    --marca-forte: #F5B845;
    --marca-fraca: #2A2213;
    --marca-escura: #F0B94A;     /* no escuro o acento ja e legivel como texto */
    --marca-tinta: #14161A;
    --link: #7FB6E8;

    --ok: #6FC98E;      --ok-bg: #122318;   --ok-borda: #26472F;
    --atencao: #E8BC6A; --atencao-bg: #2A2213; --atencao-borda: #4B3B1C;
    --grave: #F0958A;   --grave-bg: #2B1714; --grave-borda: #4E2822;
    --neutro-bg: #23272D; --neutro-borda: #333941;

    --g-ok: #57C795; --g-obs: #B28B1F; --g-crit: #C1483C;

    --sombra-sm: 0 1px 2px rgba(0,0,0,.45);
    --sombra: 0 1px 3px rgba(0,0,0,.5), 0 10px 24px -12px rgba(0,0,0,.7);
    --sombra-lg: 0 16px 40px -12px rgba(0,0,0,.75);
    --anel: 0 0 0 3px rgba(127,182,232,.32);
    --faixa: repeating-linear-gradient(45deg,
              var(--marca) 0 10px, #0B0D10 10px 20px);
  }
}

:root[data-tema="escuro"] {
  --bg: #101216;               /* asfalto — plano de fundo da pagina */
  --painel: #1A1D22;           /* cartoes, barra, campos */
  --superficie: #23272D;       /* segundo plano dentro do cartao */
  --superficie-2: #2B3038;
  --borda: #2E333A;
  --borda-forte: #454C55;
  --tinta: #F0EDE6;            /* concreto */
  --tinta-media: #B6BAC1;
  --tinta-fraca: #8A9099;
  --marca: #E8A62A;
  --marca-forte: #F5B845;
  --marca-fraca: #2A2213;
  --marca-escura: #F0B94A;     /* no escuro o acento ja e legivel como texto */
  --marca-tinta: #14161A;
  --link: #7FB6E8;

  --ok: #6FC98E;      --ok-bg: #122318;   --ok-borda: #26472F;
  --atencao: #E8BC6A; --atencao-bg: #2A2213; --atencao-borda: #4B3B1C;
  --grave: #F0958A;   --grave-bg: #2B1714; --grave-borda: #4E2822;
  --neutro-bg: #23272D; --neutro-borda: #333941;

  --g-ok: #57C795; --g-obs: #B28B1F; --g-crit: #C1483C;

  --sombra-sm: 0 1px 2px rgba(0,0,0,.45);
  --sombra: 0 1px 3px rgba(0,0,0,.5), 0 10px 24px -12px rgba(0,0,0,.7);
  --sombra-lg: 0 16px 40px -12px rgba(0,0,0,.75);
  --anel: 0 0 0 3px rgba(127,182,232,.32);
  --faixa: repeating-linear-gradient(45deg,
            var(--marca) 0 10px, #0B0D10 10px 20px);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); font-weight: var(--peso-forte); letter-spacing: -0.015em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
a { color: var(--link); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* rotulo de secao, em caixa alta discreta */
.sobrenome {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: var(--peso-forte);
}
.fraco { color: var(--tinta-fraca); }
.medio { color: var(--tinta-media); }
.sm { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.numero { font-variant-numeric: tabular-nums; }
.centro { text-align: center; }
.direita { text-align: right; }
.esconde { display: none !important; }

/* ==========================================================================
   Estrutura: barra superior + navegacao + conteudo
   ========================================================================== */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

.topo {
  position: sticky; top: 0; z-index: 30;
  isolation: isolate;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  background: color-mix(in srgb, var(--painel) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--borda);
}
/* faixa de risco de 3px: a assinatura da marca, uma vez por tela */
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--faixa); opacity: .9;
}
@supports not (backdrop-filter: blur(1px)) { .topo { background: var(--painel); } }

.marca-topo { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--peso-forte); letter-spacing: -.02em; }
.marca-topo svg { width: 22px; height: 22px; color: var(--marca-escura); flex: none; }
.marca-topo b { font-size: var(--text-base); letter-spacing: .04em; }
.topo-espaco { flex: 1 1 auto; }

.identidade { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.identidade .avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full); flex: none;
  display: grid; place-items: center;
  background: var(--marca-fraca); color: var(--marca-escura);
  font-size: var(--text-xs); font-weight: var(--peso-forte);
}

/* casca = barra lateral + area de conteudo lado a lado (nome proprio de proposito:
   uma classe generica como `.corpo` colide com o texto dentro dos avisos) */
.casca { flex: 1 1 auto; display: flex; align-items: flex-start; width: 100%; }

.lateral { display: none; }

.conteudo {
  flex: 1 1 auto; min-width: 0; width: 100%;
  padding: var(--space-5) var(--space-4) var(--space-20);
}
.conteudo-largura { max-width: 1180px; margin-inline: auto; }

.cabecalho-tela {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.cabecalho-tela .subtitulo { color: var(--tinta-fraca); font-size: var(--text-sm); margin-top: var(--space-1); }

/* --- navegacao inferior (celular) --- */
.abas-baixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  padding-bottom: max(var(--space-1), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--painel) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borda);
}
.abas-baixo a {
  flex: 1 1 0; min-width: 0; min-height: var(--toque);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--space-1);
  color: var(--tinta-fraca); text-decoration: none;
  font-size: 11px; font-weight: var(--peso-medio);
  border-radius: var(--radius-sm);
  transition: color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.abas-baixo a svg { width: 22px; height: 22px; }
.abas-baixo a[aria-current="page"] { color: var(--marca-escura); background: var(--marca-fraca); }
.abas-baixo a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; width: 26px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--marca);
}
.abas-baixo a { position: relative; }
.abas-baixo a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ==========================================================================
   Componentes
   ========================================================================== */

/* --- cartao --- */
.cartao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  box-shadow: var(--sombra-sm);
}
.cartao + .cartao { margin-top: var(--space-4); }
.cartao-corpo { padding: var(--space-5); }
.cartao-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--borda);
}
.cartao-topo h2, .cartao-topo h3 { font-size: var(--text-base); }
.cartao-rodape {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* --- grade --- */
.grade { display: grid; gap: var(--space-4); }
.grade-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.linha { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.pilha { display: flex; flex-direction: column; gap: var(--space-3); }

/* --- KPI --- */
.kpi {
  position: relative;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--radius); padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.kpi::before {
  content: ""; position: absolute; top: 0; left: var(--space-4);
  width: 26px; height: 3px; background: var(--marca);
  border-radius: 0 0 2px 2px;
}
.kpi.ok::before { background: var(--ok); }
.kpi.atencao::before { background: var(--atencao); }
.kpi.grave::before { background: var(--grave); }
.kpi .valor {
  font-size: var(--text-3xl); font-weight: var(--peso-forte);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.kpi .rotulo { font-size: var(--text-sm); color: var(--tinta-fraca); }
.kpi .nota { font-size: var(--text-xs); color: var(--tinta-fraca); }
.kpi.ok .valor { color: var(--ok); }
.kpi.atencao .valor { color: var(--atencao); }
.kpi.grave .valor { color: var(--grave); }
.kpi.clicavel { cursor: pointer; text-align: left; font: inherit; transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease); }
.kpi.clicavel:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }

/* --- botoes --- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--toque); padding: 0 var(--space-4);
  font: inherit; font-weight: var(--peso-medio); font-size: var(--text-sm);
  border-radius: var(--radius-sm); border: 1px solid var(--borda-forte);
  background: var(--painel); color: var(--tinta); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease),
              transform var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
.botao:hover { background: var(--superficie); border-color: var(--borda-forte); }
.botao:active { transform: translateY(1px); }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao[disabled] { opacity: .55; cursor: not-allowed; }

.botao.principal {
  background: var(--marca); border-color: var(--marca-forte); color: var(--marca-tinta);
  font-weight: var(--peso-forte);
}
.botao.principal:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.botao.grave { background: var(--grave-bg); border-color: var(--grave-borda); color: var(--grave); }
.botao.discreto { border-color: transparent; background: transparent; color: var(--tinta-media); }
.botao.discreto:hover { background: var(--superficie); }
.botao.pequeno { min-height: 34px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.botao.largo { width: 100%; }
.botao.icone { padding: 0; width: var(--toque); }

/* --- formulario --- */
.campo { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.campo > label { font-size: var(--text-sm); font-weight: var(--peso-medio); color: var(--tinta-media); }
.campo .ajuda { font-size: var(--text-xs); color: var(--tinta-fraca); }
.campo.obrigatorio > label::after { content: " *"; color: var(--grave); }

input[type="text"], input[type="password"], input[type="date"], input[type="month"],
input[type="number"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%; min-height: var(--toque);
  padding: var(--space-2) var(--space-3);
  font: inherit; font-size: var(--text-base);
  color: var(--tinta); background: var(--painel);
  border: 1px solid var(--borda-forte); border-radius: var(--radius-sm);
  transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
textarea { min-height: 92px; resize: vertical; line-height: var(--leading-normal); padding-top: var(--space-3); }
select { appearance: none; padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2367728A' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 18px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: var(--anel); }
input::placeholder, textarea::placeholder { color: var(--tinta-fraca); }
input[type="file"] { padding: var(--space-2); }

/* --- segmentado: o sim/nao/parcial do checklist --- */
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
.segmentado.tres { grid-template-columns: repeat(3, 1fr); }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--toque); padding: var(--space-2);
  border: 1px solid var(--borda-forte); border-radius: var(--radius-sm);
  background: var(--painel); color: var(--tinta-media);
  font-size: var(--text-sm); font-weight: var(--peso-medio);
  cursor: pointer; text-align: center;
  transition: all var(--rapido) var(--ease);
}
.segmentado label:hover { background: var(--superficie); }
.segmentado input:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 2px; }
/* selecionado SEM significado de status fica neutro; o ambar e reservado para
   "atencao" (.mediano), senao as duas escolhas viram a mesma cor na tela */
.segmentado input:checked + label {
  border-color: var(--tinta-media); background: var(--superficie-2);
  color: var(--tinta); font-weight: var(--peso-forte);
}
.segmentado input:checked + label.bom { border-color: var(--ok-borda); background: var(--ok-bg); color: var(--ok); }
.segmentado input:checked + label.mediano { border-color: var(--atencao-borda); background: var(--atencao-bg); color: var(--atencao); }
.segmentado input:checked + label.ruim { border-color: var(--grave-borda); background: var(--grave-bg); color: var(--grave); }

/* --- caixa de marcar --- */
.marcar { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--toque); cursor: pointer; }
.marcar input { width: 22px; height: 22px; margin-top: 11px; accent-color: var(--marca); flex: none; }
.marcar span { padding-top: 10px; font-size: var(--text-sm); }

/* --- etiqueta de status --- */
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--peso-forte);
  border: 1px solid transparent; white-space: nowrap;
}
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.etiqueta.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-borda); }
.etiqueta.observacao { background: var(--atencao-bg); color: var(--atencao); border-color: var(--atencao-borda); }
.etiqueta.critico { background: var(--grave-bg); color: var(--grave); border-color: var(--grave-borda); }
.etiqueta.neutro { background: var(--neutro-bg); color: var(--tinta-media); border-color: var(--neutro-borda); }
.etiqueta.marca { background: var(--marca-fraca); color: var(--marca-escura); border-color: var(--marca-forte); }
.etiqueta.sem-ponto::before { display: none; }

/* --- tabela --- */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: var(--text-xs); font-weight: var(--peso-medio);
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-fraca);
  background: var(--superficie);
  padding: var(--space-3); border-bottom: 1px solid var(--borda); white-space: nowrap;
}
tbody td { padding: var(--space-3); border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: var(--superficie); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- lista de itens (versao celular da tabela) --- */
.itens { display: flex; flex-direction: column; }
.item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--borda);
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background var(--rapido) var(--ease);
}
.item:last-child { border-bottom: none; }
.item:hover { background: var(--superficie); }
.item-texto { flex: 1 1 auto; min-width: 0; }
.item-titulo { font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: var(--text-xs); color: var(--tinta-fraca); }
.item-fim { flex: none; display: flex; align-items: center; gap: var(--space-2); }

/* --- avisos --- */
.aviso {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--borda); background: var(--superficie);
  font-size: var(--text-sm);
}
.aviso svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.aviso.ok { background: var(--ok-bg); border-color: var(--ok-borda); color: var(--ok); }
.aviso.atencao { background: var(--atencao-bg); border-color: var(--atencao-borda); color: var(--atencao); }
.aviso.grave {
  background: var(--grave-bg); border-color: var(--grave-borda); color: var(--grave);
  border-left: 3px solid var(--grave);
}
.aviso strong { display: block; }
/* nome proprio: `.corpo` sozinho e a casca do app (flex) — colidir aqui quebra o aviso */
.aviso .aviso-texto { color: inherit; min-width: 0; flex: 1 1 auto; }
.aviso .aviso-texto ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; }

.vazio {
  padding: var(--space-12) var(--space-5); text-align: center; color: var(--tinta-fraca);
}
.vazio svg { width: 40px; height: 40px; opacity: .5; margin-bottom: var(--space-3); }

/* --- modal --- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16,21,31,.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; animation: aparecer var(--normal) var(--ease);
}
.modal {
  width: 100%; max-height: 92dvh; overflow: auto;
  background: var(--painel); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--sombra-lg);
  animation: subir var(--normal) var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.modal-topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--painel); border-bottom: 1px solid var(--borda);
}
.modal-corpo { padding: var(--space-5); }
.modal-rodape {
  position: sticky; bottom: 0;
  display: flex; gap: var(--space-3); justify-content: flex-end;
  padding: var(--space-4) var(--space-5);
  background: var(--painel); border-top: 1px solid var(--borda);
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }
@keyframes subir { from { transform: translateY(24px) } to { transform: none } }

/* --- aviso flutuante --- */
#avisos {
  position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--space-16) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(560px, calc(100% - var(--space-8)));
  pointer-events: none;
}
.flutuante {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); box-shadow: var(--sombra-lg);
  background: var(--tinta); color: var(--painel);
  font-size: var(--text-sm); animation: subir var(--normal) var(--ease);
}
.flutuante.erro { background: var(--grave); color: #fff; }
.flutuante.bom { background: var(--ok); color: #fff; }

/* --- barra de conexao --- */
.barra-conexao {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: var(--peso-medio);
  background: var(--atencao-bg); color: var(--atencao); border-bottom: 1px solid var(--atencao-borda);
}
.barra-conexao.sincronizando { background: var(--marca-fraca); color: var(--marca); border-color: transparent; }

/* --- grafico de barras empilhadas --- */
/* As colunas precisam ESTICAR ate a altura do grafico: com align-items:flex-end
   a coluna encolhe para o conteudo e a altura percentual das fatias nao resolve
   (era por isso que as barras apareciam como tracinhos). */
.grafico { display: flex; align-items: stretch; gap: 3px; height: 140px; padding-top: var(--space-2); }
.grafico .coluna {
  flex: 1 1 0; min-width: 3px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.grafico .fatia { border-radius: 2px; min-height: 2px; }
.grafico .fatia.f-crit { background: var(--g-crit); }
.grafico .fatia.f-obs { background: var(--g-obs); }
.grafico .fatia.f-ok { background: var(--g-ok); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--tinta-media); }
.legenda span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- barra de progresso --- */
.progresso { height: 8px; border-radius: var(--radius-full); background: var(--superficie-2); overflow: hidden; }
.progresso > i { display: block; height: 100%; background: var(--marca); border-radius: inherit; transition: width var(--normal) var(--ease); }

/* --- login --- */
.tela-login {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--space-6);
  background:
    linear-gradient(transparent 0 calc(100% - 1px), var(--borda) 100%) 0 0 / 100% 28px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), var(--borda) 100%) 0 0 / 28px 100%,
    radial-gradient(120% 80% at 50% 0%, var(--marca-fraca) 0%, transparent 55%),
    var(--bg);
}
.caixa-login { width: min(420px, 100%); }
.caixa-login .cartao-corpo { padding: var(--space-8); }
.selo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-6); font-weight: var(--peso-forte); font-size: var(--text-xl); letter-spacing: -.02em;
}
.selo svg { width: 28px; height: 28px; color: var(--marca-escura); }
/* a faixa entra so no topo do cartao: border-image contornaria os 4 lados */
.caixa-login .cartao { position: relative; overflow: hidden; }
.caixa-login .cartao::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--faixa);
}

/* --- filtros --- */
.filtros {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end;
  padding: var(--space-4); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.filtros .campo { margin: 0; min-width: 150px; flex: 1 1 150px; }
.filtros .campo > label { font-size: var(--text-xs); }

/* --- abas internas --- */
.abas { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--space-5); overflow-x: auto; }
.abas button {
  min-height: var(--toque); padding: 0 var(--space-4);
  background: none; border: none; border-bottom: 2px solid transparent;
  font: inherit; font-size: var(--text-sm); font-weight: var(--peso-medio);
  color: var(--tinta-fraca); cursor: pointer; white-space: nowrap;
  transition: color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.abas button:hover { color: var(--tinta); }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--marca); font-weight: var(--peso-forte); }

/* --- miniaturas de anexo --- */
.anexos { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.anexo {
  position: relative; width: 84px; height: 84px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--borda); background: var(--superficie);
  display: grid; place-items: center; cursor: pointer;
}
.anexo img { width: 100%; height: 100%; object-fit: cover; }
.anexo .remover {
  position: absolute; top: 2px; right: 2px; width: 26px; height: 26px;
  border-radius: var(--radius-full); border: none; cursor: pointer;
  background: rgba(16,21,31,.72); color: #fff; display: grid; place-items: center;
}
.botao-foto {
  width: 84px; height: 84px; border-radius: var(--radius-sm);
  border: 1px dashed var(--borda-forte); background: var(--painel); color: var(--tinta-fraca);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; cursor: pointer;
}
.botao-foto:hover { border-color: var(--marca); color: var(--marca); }
.botao-foto svg { width: 22px; height: 22px; }

/* ==========================================================================
   Telas maiores
   ========================================================================== */
@media (min-width: 768px) {
  .conteudo { padding: var(--space-8) var(--space-6) var(--space-16); }
  h1 { font-size: var(--text-3xl); }
  .modal-fundo { align-items: center; padding: var(--space-6); }
  .modal { max-width: 720px; border-radius: var(--radius-lg); max-height: 88dvh; }
  .modal.largo { max-width: 980px; }
}

@media (min-width: 1024px) {
  .abas-baixo { display: none; }
  .lateral {
    display: flex; flex-direction: column; gap: var(--space-1);
    position: sticky; top: 61px; align-self: flex-start;
    width: 236px; flex: none;
    height: calc(100dvh - 61px); overflow-y: auto;
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--borda);
  }
  .lateral a {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 42px; padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--tinta-media); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--peso-medio);
    transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
  }
  .lateral a svg { width: 19px; height: 19px; flex: none; }
  .lateral a:hover { background: var(--superficie); color: var(--tinta); }
  .lateral a[aria-current="page"] {
    background: var(--marca-fraca); color: var(--marca-escura);
    font-weight: var(--peso-forte);
    box-shadow: inset 3px 0 0 var(--marca);
  }
  .lateral .grupo { margin-top: var(--space-5); padding: 0 var(--space-3) var(--space-2); }
  .conteudo { padding: var(--space-8) var(--space-8) var(--space-16); }
}

/* ==========================================================================
   Preferencias do sistema
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topo, .lateral, .abas-baixo, .filtros, .modal-rodape, .botao, #avisos { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .conteudo { padding: 0; }
}