/* MB Terraplenagem — visual de trabalho.
   A regra que manda aqui (secao 4 do CLAUDE.md): a tela e lida no sol, com a
   mao suja e o celular na outra. Contraste alto, campo e botao de 52px, fonte
   grande, uma coluna no celular, pouca coisa por tela.
   Fundo claro de proposito: no sol, texto escuro sobre claro ganha do inverso. */

:root {
  --fundo: #f1f3f5;
  --carta: #ffffff;
  --tinta: #14171a;
  --tinta-fraca: #59636e;
  --borda: #ccd2d9;
  --borda-forte: #9aa4ae;

  --acento: #c2410c;        /* laranja de maquina */
  --acento-escuro: #9a3412;
  --acento-clara: #fff1e9;

  --bom: #15803d;
  --bom-claro: #e9f7ee;
  --ruim: #b91c1c;
  --ruim-claro: #fdecec;
  --atencao: #a16207;
  --atencao-claro: #fdf6e3;

  --toque: 52px;            /* altura minima de tudo que se toca */
  --raio: 10px;
  --sombra: 0 1px 2px rgba(20, 23, 26, .08), 0 4px 12px rgba(20, 23, 26, .05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* Escuro com um leve azul-ardósia, não preto puro: preto puro contra texto
       branco vibra e cansa. E a carta fica MAIS CLARA que o fundo, senão o
       cartão desaparece e a tela vira uma parede só. */
    --fundo: #0e1114;
    --carta: #1a1f25;
    --carta-alta: #222831;
    --tinta: #eef1f4;
    --tinta-fraca: #9aa6b2;
    --borda: #2c333b;
    --borda-forte: #414b56;

    /* O laranja de #c2410c fica sujo no escuro. Sobe para âmbar, que mantém a
       identidade de máquina e passa o contraste sobre fundo escuro. */
    --acento: #fb923c;
    --acento-escuro: #fdba74;
    --acento-clara: #2a1a0e;

    --bom: #4ade80;
    --bom-claro: #10241a;
    --ruim: #fb7185;
    --ruim-claro: #2a1419;
    --atencao: #fbbf24;
    --atencao-claro: #241c0b;
    --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .3);
  }

  /* No escuro, botão de acento com texto branco fica ilegível: âmbar claro
     pede texto ESCURO por cima. */
  :root:not([data-tema="claro"]) .botao,
  :root:not([data-tema="claro"]) .recado.bom,
  :root:not([data-tema="claro"]) .recado.ruim {
    color: #14171a;
  }
  :root:not([data-tema="claro"]) .botao.calmo { color: var(--tinta); }
  :root:not([data-tema="claro"]) tbody tr:nth-child(even) { background: #ffffff05; }
}

* { box-sizing: border-box; }

/* O atributo `hidden` esconde por `display:none` da folha do navegador, e
   QUALQUER regra de autor com display ganha dele. Como .portao e .menu usam
   `display:grid`, sem esta linha a tela de login continuava aparecendo depois
   de entrar. Apareceu no navegador, nao no teste — por isso se olha a tela. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; letter-spacing: -.005em; }
p { margin: 0 0 .75rem; }

/* ---------------------------------------------------------- ícones */
/* Traço em currentColor: herdam a cor de quem os contém e funcionam igual nos
   dois temas, sem arquivo e sem uma segunda requisição. */

.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}

.titulo-secao {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .6rem;
}
.titulo-secao > .icone { color: var(--acento); width: 1.25em; height: 1.25em; }
.titulo-secao > h2, .titulo-secao > h3 { margin: 0; }
.titulo-secao > :last-child:not(h2):not(h3):not(.icone) { margin-left: auto; }

/* ---------------------------------------------------------- portao */

.portao {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.cartao-entrar {
  width: 100%;
  max-width: 26rem;
  background: var(--carta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.75rem 1.5rem;
}

.marca {
  font-size: 1.5rem;
  letter-spacing: .01em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  font-weight: 800;
}
.marca span { color: var(--acento); }

.cartao-entrar label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin: 1rem 0 .35rem;
}

/* ---------------------------------------------------------- campos */

input, select, textarea {
  width: 100%;
  min-height: var(--toque);
  padding: .6rem .75rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--tinta);
  background: var(--carta);
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio);
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}
input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-height: 0; }

/* ---------------------------------------------------------- botoes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--toque);
  padding: .5rem 1.25rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--acento);
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: var(--acento-escuro); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.grande { width: 100%; margin-top: 1.5rem; font-size: 1.15rem; }
.botao.calmo {
  background: var(--carta);
  color: var(--tinta);
  border: 1.5px solid var(--borda-forte);
}
.botao.calmo:hover { background: var(--fundo); }
.botao.perigo { background: var(--ruim); }
.botao.pequeno { min-height: 40px; padding: .3rem .8rem; font-size: .95rem; }

.botao-icone {
  min-width: var(--toque);
  min-height: var(--toque);
  font-size: 1.5rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--raio);
}

/* ------------------------------------------------------------ topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  padding-top: calc(.5rem + env(safe-area-inset-top));
  background: var(--carta);
  border-bottom: 2px solid var(--borda);
}

.marca-topo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: inherit;
  text-decoration: none;
  min-height: var(--toque);
}
.marca-topo .marca-texto span { color: var(--acento); }
.marca-sinal { width: 30px; height: 30px; flex: none; }
.marca-sinal rect:first-child { fill: var(--acento); }
.marca-sinal .claro { fill: #fff; }
/* No escuro o acento é âmbar claro: a marca dentro dele pede tinta escura. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-sinal .claro { fill: #14171a; }
}
/* Em tela estreita fica só o símbolo — o nome já está na aba e no ícone. */
@media (max-width: 25rem) {
  .marca-topo .marca-texto { display: none; }
}

.topo-direita { display: flex; align-items: center; gap: .5rem; }

/* Fila do offline: silencio aqui e pior que erro. Ver secao 3.1. */
.fila {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--atencao);
  background: var(--atencao-claro);
  border: 1.5px solid var(--atencao);
  border-radius: 999px;
}

.menu {
  display: grid;
  gap: .15rem;
  padding: .5rem;
  background: var(--carta);
  border-bottom: 2px solid var(--borda);
  box-shadow: var(--sombra);
}
@media (min-width: 46rem) {
  /* Com poucos itens, o menu inteiro cabe em duas colunas e some em um toque
     em vez de dois. */
  .menu { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.menu a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--toque);
  padding: .8rem 1rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-radius: var(--raio);
  border: 1.5px solid transparent;
}
.menu a .icone { color: var(--tinta-fraca); }
.menu a:hover { background: var(--fundo); border-color: var(--borda); }
.menu a:hover .icone { color: var(--acento); }
.menu a.atual {
  background: var(--acento-clara);
  color: var(--acento-escuro);
  border-color: var(--acento);
}
.menu a.atual .icone { color: var(--acento); }
/* Ocupa a linha inteira: com o menu em várias colunas, a borda de cima ficava
   um traço solto do tamanho de uma célula, no meio do nada. */
.menu a.sair {
  grid-column: 1 / -1;
  margin-top: .4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--borda);
  border-radius: 0 0 var(--raio) var(--raio);
}
.menu a.sair .icone { color: var(--ruim); }

/* ------------------------------------------------------------ tela */

.tela {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem .75rem 4rem;
}

.cartao {
  background: var(--carta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.1rem;
  margin-bottom: 1rem;
}
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }

.cabecalho-tela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------- numeros */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.numero {
  position: relative;
  background: var(--carta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  overflow: hidden;
}
/* Fio de cor na borda de cima: dá hierarquia entre os cartões sem depender só
   do valor, que é o que o olho lê depois. */
.numero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--borda-forte);
}
.numero.bom::before { background: var(--bom); }
.numero.ruim::before { background: var(--ruim); }
.numero.destaque::before { background: var(--acento); height: 4px; }

.numero .rotulo {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-fraca);
  margin-bottom: .25rem;
}
.numero .rotulo .icone-numero { width: 1em; height: 1em; opacity: .85; }
.numero .valor {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.numero .nota { display: block; font-size: .85rem; color: var(--tinta-fraca); margin-top: .1rem; }
.numero.bom .valor { color: var(--bom); }
.numero.ruim .valor { color: var(--ruim); }
.numero.destaque {
  border-color: var(--acento);
  background: var(--acento-clara);
}
.numero.destaque .rotulo { color: var(--acento-escuro); }

/* -------------------------------------------------------- tabelas */
/* Tabela larga rola sozinha, sem empurrar a pagina. */

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { padding: .6rem .55rem; text-align: left; border-bottom: 1px solid var(--borda); }
th {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
.vazio { padding: 1.5rem; text-align: center; color: var(--tinta-fraca); }

/* --------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-block;
  padding: .15rem .55rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-radius: 999px;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.etiqueta.acento { background: var(--acento-clara); border-color: var(--acento); color: var(--acento-escuro); }
.etiqueta.bom { background: var(--bom-claro); border-color: var(--bom); color: var(--bom); }
.etiqueta.ruim { background: var(--ruim-claro); border-color: var(--ruim); color: var(--ruim); }
.etiqueta.atencao { background: var(--atencao-claro); border-color: var(--atencao); color: var(--atencao); }

.positivo { color: var(--bom); font-weight: 700; }
.negativo { color: var(--ruim); font-weight: 700; }

/* --------------------------------------------------------- avisos */

.erro {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--ruim-claro);
  border-left: 4px solid var(--ruim);
  border-radius: 6px;
  color: var(--ruim);
  font-weight: 600;
}
.aviso-forte {
  padding: .85rem 1rem;
  background: var(--atencao-claro);
  border-left: 4px solid var(--atencao);
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: .5rem;
}
.nota-pe { font-size: .9rem; color: var(--tinta-fraca); }

.recado {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: .9rem 1.25rem;
  background: var(--tinta);
  color: var(--fundo);
  border-radius: var(--raio);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  font-weight: 600;
}
.recado.ruim { background: var(--ruim); color: #fff; }
.recado.bom { background: var(--bom); color: #fff; }

/* -------------------------------------------------------- formulario */

.campos { display: grid; gap: .9rem; }
@media (min-width: 40rem) {
  .campos.duas { grid-template-columns: 1fr 1fr; }
  .campos.tres { grid-template-columns: 1fr 1fr 1fr; }
}
.campo label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .3rem;
}
.campo .dica { font-size: .85rem; color: var(--tinta-fraca); margin-top: .25rem; }
/* O valor entendido aparece enquanto se digita, para erro nao passar calado. */
.campo .entendido {
  font-size: .95rem;
  font-weight: 700;
  color: var(--acento-escuro);
  margin-top: .3rem;
  min-height: 1.4em;
}
.acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* --------------------------------------------------- escolha grande */
/* Escolher obra ou maquina e toque em botao grande, nao <select> com busca.
   So funciona porque sao poucas (secao 9.11) — 3 obras e 5 maquinas. */

.escolhas { display: grid; gap: .6rem; }
@media (min-width: 34rem) { .escolhas { grid-template-columns: 1fr 1fr; } }
.escolha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  min-height: 64px;
  padding: .8rem 1rem;
  text-align: left;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinta);
  background: var(--carta);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
}
.escolha small { font-weight: 500; font-size: .87rem; color: var(--tinta-fraca); }
.escolha:hover { border-color: var(--acento); }
.escolha[aria-pressed="true"] {
  background: var(--acento-clara);
  border-color: var(--acento);
  color: var(--acento-escuro);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.escolha[aria-pressed="true"] small { color: var(--acento-escuro); }

/* ------------------------------------------------------ relogio peao */

.relogio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: .5rem 0 1rem;
}
.relogio .botao { min-height: 76px; font-size: 1.2rem; flex-direction: column; gap: .1rem; }
.relogio .botao small { font-weight: 500; font-size: .85rem; opacity: .85; }

.hora-grande {
  font-size: 2.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: .02em;
}

/* --------------------------------------------------------- abas */

.abas {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  border-bottom: 2px solid var(--borda);
  margin-bottom: 1rem;
}
.abas button {
  min-height: 46px;
  padding: .5rem .95rem;
  font: inherit;
  font-weight: 700;
  color: var(--tinta-fraca);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.abas button.atual { color: var(--acento); border-bottom-color: var(--acento); }

.linha-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .85rem 0;
  border-bottom: 1px solid var(--borda);
}
.linha-lista:last-child { border-bottom: none; }
.linha-lista .principal { font-weight: 700; }
.linha-lista .secundario { font-size: .9rem; color: var(--tinta-fraca); }

/* Link de nome de obra herda a cor do texto: azul-de-navegador no meio de uma
   lista de numeros disputa a atencao com o que importa, que e a margem. */
a.principal { color: inherit; text-decoration: none; }
a.principal:hover { color: var(--acento); text-decoration: underline; }

.barra {
  height: 8px;
  background: var(--fundo);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--borda);
}
.barra > i { display: block; height: 100%; background: var(--acento); }

@media (max-width: 33.99rem) {
  .tela { padding: .75rem .6rem 4rem; }
  .cartao { padding: .9rem .8rem; }
  body { font-size: 17px; }
}