/* Sala de Comando · tokens e componentes.
   Cor sempre em var(). Nenhum componente escreve cor crua.
   Sem gradiente, sem emoji, sem travessao. */

:root {
  --fundo:            oklch(0.15 0.018 264);
  --superficie-1:     oklch(0.19 0.020 264);
  --superficie-2:     oklch(0.23 0.022 264);
  --superficie-3:     oklch(0.28 0.024 264);
  --linha:            oklch(0.33 0.022 264);
  --linha-forte:      oklch(0.42 0.024 264);
  --tinta:            oklch(0.96 0.008 264);
  --tinta-media:      oklch(0.76 0.014 264);
  --tinta-fraca:      oklch(0.60 0.016 264);

  --acento:           oklch(0.72 0.115 40);
  --acento-ink:       oklch(0.18 0.030 40);
  --acento-soft:      oklch(0.72 0.115 40 / 0.13);
  --acento-line:      oklch(0.72 0.115 40 / 0.40);
  --acento-press:     oklch(0.66 0.115 40);

  --ok:               oklch(0.72 0.130 158);
  --ok-soft:          oklch(0.72 0.130 158 / 0.13);
  --atencao:          oklch(0.78 0.130 84);
  --atencao-soft:     oklch(0.78 0.130 84 / 0.14);
  --alerta:           oklch(0.66 0.150 18);
  --alerta-soft:      oklch(0.66 0.150 18 / 0.14);

  --display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --corpo: 'Inter', 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Consolas', monospace;

  --raio: 10px;
  --raio-g: 14px;
  --sombra: 0 1px 2px oklch(0.10 0.02 264 / 0.5), 0 8px 24px oklch(0.10 0.02 264 / 0.35);
  --nav: 244px;
}

:root[data-tema='claro'] {
  --fundo:            oklch(0.975 0.004 264);
  --superficie-1:     oklch(1 0 0);
  --superficie-2:     oklch(0.955 0.006 264);
  --superficie-3:     oklch(0.920 0.008 264);
  --linha:            oklch(0.878 0.008 264);
  --linha-forte:      oklch(0.780 0.012 264);
  --tinta:            oklch(0.22 0.020 264);
  --tinta-media:      oklch(0.42 0.018 264);
  --tinta-fraca:      oklch(0.56 0.016 264);

  --acento:           oklch(0.56 0.125 40);
  --acento-ink:       oklch(0.99 0.01 40);
  --acento-soft:      oklch(0.56 0.125 40 / 0.10);
  --acento-line:      oklch(0.56 0.125 40 / 0.34);
  --acento-press:     oklch(0.50 0.125 40);

  --ok:               oklch(0.52 0.120 158);
  --ok-soft:          oklch(0.52 0.120 158 / 0.10);
  --atencao:          oklch(0.60 0.120 74);
  --atencao-soft:     oklch(0.60 0.120 74 / 0.12);
  --alerta:           oklch(0.53 0.160 18);
  --alerta-soft:      oklch(0.53 0.160 18 / 0.10);

  --sombra: 0 1px 2px oklch(0.5 0.02 264 / 0.10), 0 8px 24px oklch(0.5 0.02 264 / 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
:root[data-tema='claro'] { color-scheme: light; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0;
  line-height: 1.14;
}
h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h2 { font-size: 1.24rem; }
h3 { font-size: 1.02rem; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.kicker {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tinta-fraca);
  font-weight: 500;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- controles ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--corpo); font-size: 0.86rem; font-weight: 600;
  padding: 9px 15px; border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--superficie-2); color: var(--tinta);
  cursor: pointer; transition: background .14s, border-color .14s, color .14s;
  white-space: nowrap;
}
.btn:hover { background: var(--superficie-3); border-color: var(--acento-line); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-forte { background: var(--acento); color: var(--acento-ink); border-color: var(--acento); }
.btn-forte:hover { background: var(--acento-press); border-color: var(--acento-press); }
.btn-vazio { background: transparent; border-color: transparent; color: var(--tinta-media); }
.btn-vazio:hover { background: var(--superficie-2); color: var(--tinta); }
.btn-mini { padding: 5px 10px; font-size: 0.76rem; }
.btn svg { width: 16px; height: 16px; flex: none; }

label.campo { display: block; margin-bottom: 13px; }
label.campo > span {
  display: block; font-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--tinta-fraca); margin-bottom: 6px;
}
input, select, textarea {
  width: 100%; font-family: var(--corpo); font-size: 0.9rem;
  padding: 10px 12px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--superficie-1);
  color: var(--tinta); outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-soft);
}
textarea { min-height: 84px; resize: vertical; }
select { appearance: none; padding-right: 30px; cursor: pointer; }
::placeholder { color: var(--tinta-fraca); }

.linha-campos { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* campo de senha com o botao de mostrar o que foi digitado */
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px; }
.ver-senha {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border: none; background: transparent; color: var(--tinta-fraca);
  cursor: pointer; border-radius: 7px; padding: 0;
}
.ver-senha:hover { color: var(--acento); background: var(--acento-soft); }
.ver-senha svg { width: 17px; height: 17px; }

/* --- superficies --------------------------------------------------------- */

.cartao {
  background: var(--superficie-1);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 18px;
}
.cartao-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.10em;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--linha-forte); color: var(--tinta-media);
  background: var(--superficie-2);
}
.chip-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.chip-atencao { color: var(--atencao); border-color: var(--atencao); background: var(--atencao-soft); }
.chip-alerta { color: var(--alerta); border-color: var(--alerta); background: var(--alerta-soft); }
.chip-acento { color: var(--acento); border-color: var(--acento-line); background: var(--acento-soft); }

/* --- numero gigante ------------------------------------------------------ */

.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-valor {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
/* Valor em reais nao cabe no corpo de numero gigante: "R$ 83.000,00" tem 12
   caracteres e invadia a coluna vizinha. Escala propria, uma so vez, aqui. */
.kpi-valor.moeda {
  font-size: clamp(1.15rem, 2.05vw, 1.6rem);
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.kpi-rotulo {
  font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--tinta-fraca);
}
.kpi-nota { font-size: 0.8rem; color: var(--tinta-media); }

.barra { height: 7px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.barra > i.ok { background: var(--ok); }
.barra > i.atencao { background: var(--atencao); }
.barra > i.alerta { background: var(--alerta); }

/* marcador do ritmo esperado sobre a barra */
.barra-com-marca { position: relative; }
.barra-com-marca > b {
  position: absolute; top: -3px; width: 2px; height: 13px;
  background: var(--tinta); opacity: .65; border-radius: 1px;
}

/* --- tabela -------------------------------------------------------------- */

.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
th {
  text-align: left; font-family: var(--mono); font-weight: 500;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--tinta-fraca); padding: 8px 10px;
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- mapa de calor ------------------------------------------------------- */

.calor { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.calor-celula {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px; background: var(--superficie-1); cursor: default;
  display: flex; flex-direction: column; gap: 5px; min-height: 78px;
}
.calor-celula > .nome { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
.calor-celula > .dado { font-family: var(--mono); font-size: 0.68rem; color: var(--tinta-media); }
.calor-celula[data-frio='1'] { border-style: dashed; border-color: var(--alerta); }

/* --- vazio e aviso ------------------------------------------------------- */

.vazio {
  text-align: center; padding: 34px 18px; color: var(--tinta-fraca);
  border: 1px dashed var(--linha-forte); border-radius: var(--raio-g);
}
.vazio h3 { color: var(--tinta-media); margin-bottom: 6px; }

.aviso {
  border-left: 3px solid var(--acento); background: var(--acento-soft);
  padding: 11px 14px; border-radius: 0 var(--raio) var(--raio) 0; font-size: 0.86rem;
}
.aviso-alerta { border-left-color: var(--alerta); background: var(--alerta-soft); }

/* --- modal --------------------------------------------------------------- */

.veu {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(0.10 0.02 264 / 0.66);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal {
  background: var(--superficie-1); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 20px;
}
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }

.recado {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  background: var(--superficie-2); border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--ok);
  border-radius: var(--raio); padding: 11px 15px; box-shadow: var(--sombra);
  font-size: 0.86rem; max-width: 340px;
}
.recado.ruim { border-left-color: var(--alerta); }

/* --- grades -------------------------------------------------------------- */

.grade-kpi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grade-kpi > * { min-width: 0; }
.grade-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pilha { display: flex; flex-direction: column; gap: 14px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Celular. A equipe de rua trabalha daqui, entao esta parte nao e adaptacao:
   tabela virou cartao, alvo de toque cresceu e o menu foi para o rodape.
   ========================================================================== */

/* barra de navegacao no rodape, so no celular */
.navpe { display: none; }

@media (max-width: 940px) {
  .navpe {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--superficie-1); border-top: 1px solid var(--linha);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
  }
  .navpe a {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; color: var(--tinta-fraca); text-decoration: none;
    font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.06em;
    text-transform: uppercase; text-align: center;
  }
  .navpe a:hover { text-decoration: none; }
  .navpe a.ativo { color: var(--acento); }
  .navpe a svg { width: 19px; height: 19px; }
  .navpe a span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* alvo de toque: dedo nao acerta botao de 28px */
  .btn { padding: 11px 16px; min-height: 44px; }
  .btn-mini { padding: 8px 13px; min-height: 38px; font-size: 0.8rem; }
  /* 16px no campo evita o zoom automatico do iOS ao focar */
  input, select, textarea { font-size: 16px; min-height: 46px; }
  textarea { min-height: 92px; }

  /* modal como gaveta de baixo, que e onde o polegar alcanca */
  .veu { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%; max-height: 92vh;
    border-radius: var(--raio-g) var(--raio-g) 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .linha-campos { grid-template-columns: 1fr; }

  .calor { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .recado { left: 12px; right: 12px; bottom: 74px; max-width: none; }
}

@media (max-width: 720px) {
  /* Tabela em celular vira lista de cartoes. O rotulo de cada linha vem do
     cabecalho da coluna, estampado em data-rotulo por rotularTabelas(). */
  .rolagem { overflow-x: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr {
    border: 1px solid var(--linha); border-radius: var(--raio);
    background: var(--superficie-1); margin-bottom: 10px; overflow: hidden;
  }
  tbody tr:hover td { background: transparent; }
  tbody tr:last-child { margin-bottom: 0; }
  td {
    border-bottom: 1px solid var(--linha);
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; text-align: right; padding: 9px 12px;
  }
  td:last-child { border-bottom: none; }
  td.num { text-align: right; }
  td::before {
    content: attr(data-rotulo);
    font-family: var(--mono); font-size: 0.55rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--tinta-fraca); text-align: left; flex: none; max-width: 42%;
  }
  td[data-rotulo='']::before, td:not([data-rotulo])::before { display: none; }
  /* celula de acoes ocupa a linha inteira, botoes lado a lado */
  td.acoes { justify-content: stretch; }
  td.acoes .btn { flex: 1; justify-content: center; }
  td > .barra { min-width: 96px; }

  .cartao { padding: 14px; }
  .cartao-topo { margin-bottom: 12px; }
  h1 { font-size: 1.5rem; }
  .titulo-tela p { font-size: 0.87rem; }
}