/* Componentes. Só tokens, zero literais. */

/* ===========================================================================
   Áreas de vista
   =========================================================================== */

/* Região que leva um quadro de altura inteira. */
.area { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 26px 20px; }

/* ===========================================================================
   Quadro — cartão com cabeçalho fixo, corpo que desliza e rodapé
   =========================================================================== */
.quadro {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r10);
  box-shadow: var(--sh);
  overflow: hidden;
}
.quadro-topo {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 46px;
  border-bottom: 1px solid var(--line);
}
.quadro-corpo { flex: 1; overflow-y: auto; overflow-x: hidden; }
.quadro-rodape {
  flex: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4);
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface2);
  font-size: var(--m-micro); line-height: 1.4; color: var(--text3);
}

/* ---------------------------------------------------------------------------
   Grelha: cabeçalho e linhas partilham a mesma definição de colunas, que vem
   em --cols. É isto que garante que não desalinham.
   --------------------------------------------------------------------------- */
.grelha {
  box-sizing: border-box;
  display: grid; grid-template-columns: var(--cols);
  /* A goteira não é decoração: sem ela, uma coluna alinhada à direita encosta
     à seguinte alinhada à esquerda e lê-se «3imovirtual». */
  column-gap: 12px;
  align-items: center;
  padding: 0 18px;
}
.grelha.cab {
  flex: none; height: 34px;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
  font-size: var(--m-micro); font-weight: 500; line-height: 1;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text3);
}
.grelha.linha {
  height: 52px;
  border-bottom: 1px solid var(--line2);
  background: var(--surface);
  transition: background var(--dur) var(--ease);
}
.grelha.linha.comp { height: 38px; cursor: pointer; }
.grelha.linha.alta { height: 58px; }
.grelha.linha:hover { background: var(--surface3); }
.grelha.linha.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.grelha.linha.descartado { background: var(--surface2); }
.grelha.linha.descartado .nome { text-decoration: line-through; color: var(--faint); }
.grelha.linha.descartado .preco { color: var(--faint); }

.grelha .n { text-align: right; }
.grelha .c { text-align: center; }
.pad-sinal { padding-left: 18px; }

/* ---------------------------------------------------------------------------
   Células
   --------------------------------------------------------------------------- */
.cel-nome { padding-right: 16px; min-width: 0; }
.nome {
  font-size: var(--m-body); font-weight: 500; line-height: 1.25; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sob { font-size: var(--m-label); line-height: 1.35; color: var(--text4); margin-top: 3px; }
.peq { font-size: var(--m-small); }
.forte { font-weight: 500; color: var(--text); }
.elipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preco { font-size: var(--m-body); font-weight: 500; color: var(--text); }

.cel-nome-l {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 12px;
  font-size: 12.5px; color: var(--text);
}

/* Precisão da localização: cheio = morada exacta, tracejado = zona.
   A mesma linguagem do mapa e do gráfico de distribuição. */
.prec {
  width: 9px; height: 9px; flex: none; border-radius: 3px;
  background: var(--gold-soft); border: 1.5px solid var(--btn);
}
.prec.exacta { border-radius: 50%; background: var(--btn); }

.sinal-act {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--line3);
}
.sinal-act.on { background: var(--green); border-color: var(--green); }

/* ---------------------------------------------------------------------------
   Estado vazio
   --------------------------------------------------------------------------- */
.vazio { padding: 64px 26px; text-align: center; }
.vazio-t { font-size: var(--t-body); font-weight: 500; line-height: 1.4; color: var(--strong); }
.vazio-e {
  font-size: var(--m-small); line-height: 1.6; color: var(--text4);
  margin-top: var(--s2); max-width: 56ch; margin-inline: auto; text-wrap: pretty;
}

/* ===========================================================================
   Cartões
   =========================================================================== */
.cartao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r10);
  box-shadow: var(--sh);
  padding: 16px 20px 18px;
}
.cartao.solto { margin: 16px 26px 0; flex: none; }
.cartao-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3); flex-wrap: wrap;
}
.cartao-topo.linha-topo { align-items: center; }
.hero {
  font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.025em;
  margin-top: var(--s3);
}
.apoio {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-size: var(--m-small); color: var(--text2); margin-top: var(--s2);
}
.nota {
  font-size: 11.5px; line-height: 1.6; color: var(--text3);
  margin-top: 9px; text-wrap: pretty;
}
.conf {
  font-size: var(--m-micro); font-weight: 500;
  border: 1px solid; border-radius: var(--r-pill); padding: 2px 8px;
}
.conf-alta  { color: var(--green-text); border-color: var(--green-line); background: var(--green-soft); }
.conf-média { color: var(--gold-text);  border-color: var(--gold-line);  background: var(--gold-soft); }
.conf-baixa { color: var(--amber);      border-color: var(--amber); }

.rotulo.ouro { color: var(--gold-text); font-weight: 600; }

/* ===========================================================================
   Controlos
   =========================================================================== */
.btn {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--strong);
  background: var(--surface);
  border: 1px solid var(--line3);
  border-radius: var(--r6);
  padding: 10px 15px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface3); }
.btn-solido {
  font-weight: 600;
  color: var(--btn-ink); background: var(--btn); border-color: var(--btn);
}
.btn-solido:hover { background: var(--btn-hover); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Botões de linha: pequenos, sempre à vista.
   Cheguei a escondê-los até passar o rato. Errado por duas razões: num tablet
   não há rato nenhum — e esta app usa-se em tablet, de pé, ao lado de um
   cliente — e uma acção que não se vê é uma acção que ninguém descobre. */
.mini {
  font-family: var(--sans); font-size: var(--m-micro); font-weight: 500;
  color: var(--text3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r5);
  padding: 7px 10px; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mini:hover { background: var(--surface3); color: var(--text); }
.mini-ouro {
  color: var(--gold-text); background: var(--gold-soft); border-color: var(--gold-line);
}
.mini-ouro:hover { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.mini-verde {
  color: var(--green-text); background: var(--green-soft); border-color: var(--green-line);
}
.mini-verde:hover { background: var(--green); color: var(--on-dark); border-color: var(--green); }
.mini[aria-expanded="true"], .mini.activa {
  color: var(--gold-text); background: var(--gold-soft); border-color: var(--gold-line);
}
.mini[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.cel-accoes { display: flex; justify-content: flex-end; gap: 7px; }

.pill {
  font-family: var(--sans); font-size: var(--m-micro); font-weight: 500;
  color: var(--text3); background: var(--surface);
  border: 1px solid var(--line3); border-radius: var(--r6);
  padding: 7px 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill:hover { background: var(--surface3); color: var(--text); }
.pill[aria-pressed="true"] {
  color: var(--btn-ink); background: var(--btn); border-color: var(--btn);
}

/* Fila de chips: os eixos que cortam os dados. */
.chips {
  flex: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 18px 26px 0;
}
.chips .rotulo { margin-right: var(--s1); }
.chip {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--text3);
  background: var(--surface2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--text4); color: var(--text); }
.chip[aria-pressed="true"] {
  color: var(--text); background: var(--surface); border-color: var(--btn);
}
.chip-n { font-size: var(--m-micro); font-weight: 600; color: var(--faint); }
.chip[aria-pressed="true"] .chip-n { color: var(--gold-text); }

/* Separadores de tipologia, no cabeçalho. Encostados, como um segmentado. */
.tabs { display: flex; }
.tabs button {
  font-family: var(--sans); font-size: var(--m-small); font-weight: 500;
  color: var(--text2); background: var(--surface);
  border: 1px solid var(--line3); margin-left: -1px;
  padding: 9px 14px; cursor: pointer;
}
.tabs button:first-child { border-radius: var(--r6) 0 0 var(--r6); margin-left: 0; }
.tabs button:last-child { border-radius: 0 var(--r6) var(--r6) 0; }
.tabs button[aria-pressed="true"] {
  color: var(--btn-ink); background: var(--btn); border-color: var(--btn); position: relative;
}

/* Contagem no cabeçalho: quanto trabalho falta hoje. */
.marcador {
  font-size: var(--m-small); font-weight: 500;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 7px 11px; border-radius: var(--r6); white-space: nowrap;
}

/* Estado de trabalho: por contactar → contactado → descartado, cíclico. */
.estado {
  width: 15px; height: 15px; border-radius: var(--r5);
  border: 1.5px solid var(--line3);
  background: transparent; cursor: pointer; padding: 0; display: block;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.estado[data-estado="por-contactar"] { border-color: var(--btn); }
.estado[data-estado="contactado"]    { border-color: var(--green); background: var(--green); }
.estado[data-estado="descartado"]    { border-color: var(--line3); background: var(--line2); }

/* ===========================================================================
   VISTA 1 — tira de sinais
   =========================================================================== */
.tira {
  flex: none;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  padding: 20px 26px 0;
}
.cartao-sinal {
  box-sizing: border-box;
  appearance: none; cursor: pointer; text-align: left;
  background: var(--surface2);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  border-radius: var(--r9);
  padding: 14px 16px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cartao-sinal:hover { border-color: var(--text4); }
.cartao-sinal[aria-pressed="true"] {
  background: var(--surface); border-color: var(--btn);
  box-shadow: 0 0 0 3px var(--ring);
}
.cs-topo { display: flex; align-items: center; gap: var(--s2); }
.pip { width: 7px; height: 7px; border-radius: 2px; display: block; flex: none; }
.cs-baixo { display: flex; align-items: baseline; gap: 9px; margin-top: var(--s3); }
.cs-n { font-size: var(--m-hero); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.cartao-sinal[aria-pressed="true"] .cs-n { color: var(--gold-text); }
.cs-pista { font-size: var(--m-micro); color: var(--text4); }

/* Sinal na linha: barra da cor + rótulo + detalhe. */
.cel-sinal { padding-left: 18px; display: flex; align-items: center; gap: 10px; }
.cel-sinal .barra { width: 3px; height: 26px; border-radius: 2px; display: block; flex: none; }
.sinal-t { font-size: var(--m-small); font-weight: 500; line-height: 1.25; }
.sinal-d { font-size: var(--m-micro); line-height: 1.3; color: var(--text4); margin-top: 2px; }

/* Um imóvel em mais do que um portal. */
.portais { color: var(--gold-text); border-bottom: 1px dotted var(--gold-line); cursor: help; }

/* Etiqueta de republicação. Aviso, não categoria. */
.tag-repub {
  display: inline-block; margin-left: var(--s2);
  font-size: 9px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--neg); border: 1px solid var(--neg);
  border-radius: 3px; padding: 1px var(--s1);
  vertical-align: 2px;
}

/* ---------------------------------------------------------------------------
   Histórico de preço, aberto por baixo da linha
   --------------------------------------------------------------------------- */
.linha-hist { background: var(--surface2); border-bottom: 1px solid var(--line); }
.hist { padding: var(--s4) 26px; }
.hist-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); margin-bottom: var(--s3); flex-wrap: wrap;
  font-size: var(--m-small);
}
.hist-linha {
  display: grid; grid-template-columns: 90px 110px 1fr;
  gap: var(--s3); align-items: baseline;
  padding: var(--s1) 0 var(--s1) var(--s4); margin-left: var(--s2);
  border-left: 2px solid var(--line3);
  font-size: var(--m-small);
}
/* Os passos herdados do anúncio anterior ficam recuados e mais apagados: são
   reais, mas já não estão visíveis em lado nenhum no portal. */
.hist-linha.anterior { border-left-color: var(--neg); opacity: 0.75; }
.hist-quando { font-size: var(--m-micro); }
.hist-preco  { font-size: var(--m-body); font-weight: 500; }
.hist-corte {
  display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap;
  margin: var(--s2) 0 var(--s2) var(--s2);
  padding: var(--s2) var(--s4);
  border-left: 2px solid var(--neg);
  background: color-mix(in srgb, var(--neg) 10%, transparent);
  font-size: var(--m-micro);
}
.hist-corte span:first-child {
  color: var(--neg); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
}
.hist-nota { margin-top: var(--s3); font-size: var(--m-micro); }

/* ===========================================================================
   VISTA 2 — avaliação
   =========================================================================== */
.procura {
  flex: none;
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.procura label {
  display: flex; flex-direction: column; gap: var(--s1);
  font-size: var(--m-micro); color: var(--text3);
}
.procura select, .procura input {
  font-family: var(--sans); font-size: var(--m-small);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line3); border-radius: var(--r6);
  padding: 8px 10px; min-height: 36px; min-width: 110px;
}
.procura select { min-width: 190px; }
.procura .btn { min-height: 36px; padding-block: 8px; }

.fila-topo { flex: none; display: flex; gap: 14px; padding: 18px 26px 0; }
.fila-topo .cartao { flex: 1; min-width: 0; }
.fila-topo .cartao.lado { flex: none; width: 330px; }

.fila-baixo { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 14px 26px 20px; }
.area-tabela { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mapa-cartao {
  width: 456px; flex: none;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.mapa-cartao .cartao-topo {
  flex: none; padding: 0 18px; height: 46px;
  border-bottom: 1px solid var(--line);
}
.mapa-caixa { flex: 1; min-height: 0; background: var(--map-bg); overflow: hidden; }
.mapa-caixa svg { display: block; width: 100%; height: 100%; }

/* Mapa ampliado: troca as proporções sem trocar de layout. */
.fila-baixo.mapa-grande .mapa-cartao { width: 62%; }

.legenda {
  flex: none; display: grid; gap: 9px;
  padding: 14px 18px; border-top: 1px solid var(--line);
  background: var(--surface2);
}
.legenda div {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; line-height: 1.4; color: var(--text2);
}

/* ===========================================================================
   VISTA 3 — mercado
   =========================================================================== */
.nota-tempo {
  padding: 26px 0 10px; text-align: center;
  font-size: var(--m-small); line-height: 1.7; color: var(--text3);
  max-width: 70ch; margin-inline: auto; text-wrap: pretty;
}

/* Barra de dispersão: p25 a p75, com a mediana marcada. A largura é a
   dispersão, não o valor — é isso que distingue uma zona onde se negoceia de
   uma onde o preço é o que é. */
.faixa { position: relative; height: 18px; }
.faixa::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line2);
}
.faixa .amplitude {
  position: absolute; top: 4px; height: 10px;
  background: var(--accent-soft); border: 1px solid var(--band-line);
  border-radius: 2px;
}
.faixa .marca { position: absolute; top: 1px; height: 16px; width: 2px; background: var(--accent); }

.suprimida { color: var(--text4); cursor: help; }

.quadro-rodape.nota-n { align-items: flex-start; gap: 11px; padding: 12px 18px; }
.amber-tag { font-size: var(--m-micro); font-weight: 600; color: var(--amber); flex: none; }
.quadro-rodape.nota-n div { font-size: 11.5px; line-height: 1.55; text-wrap: pretty; }

/* ===========================================================================
   VISTA 4 — leitura
   =========================================================================== */
.contexto {
  flex: none; display: flex; align-items: center; gap: var(--s3);
  padding: 0 26px; height: 42px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.contexto .sep { width: 1px; height: 18px; background: var(--line); display: block; flex: none; }

.fio { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; justify-content: center; }
.fio-interior {
  width: 812px; max-width: 100%; height: max-content;
  padding: 24px 26px 8px;
  display: flex; flex-direction: column; gap: 26px;
}

.msg { display: flex; }
.msg.eu { justify-content: flex-end; }
.msg.eu .balao {
  max-width: 560px;
  background: var(--surface3); border: 1px solid var(--line);
  border-radius: var(--r12); padding: 12px 15px;
  font-size: 14.5px; line-height: 1.62; color: var(--text2);
  white-space: pre-wrap; text-wrap: pretty;
}
.msg.ia { gap: 13px; align-items: flex-start; }
.msg.ia .avatar {
  width: 26px; height: 26px; flex: none; border-radius: var(--r7);
  background: var(--btn); border: 1px solid var(--btn); color: var(--btn-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; margin-top: 2px;
}
.msg.ia .corpo { min-width: 0; padding-top: 1px; }
.msg.ia .texto {
  font-size: 14.5px; line-height: 1.62; color: var(--text);
  white-space: pre-wrap; text-wrap: pretty;
}
.provas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.prova {
  font-size: var(--m-micro); font-weight: 500; color: var(--text2);
  background: var(--surface3); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: var(--r5);
}
.limite {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line2);
  font-size: var(--m-small); line-height: 1.55; color: var(--text3);
  text-wrap: pretty;
}
.limite-t {
  font-size: var(--m-micro); font-weight: 600; line-height: 1.5;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); flex: none;
}

.compor { flex: none; display: flex; justify-content: center; padding: 0 26px 22px; }
.compor-interior { width: 812px; max-width: 100%; }
.sugestoes { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: 11px; }
.sugestao {
  font-family: var(--sans); font-size: var(--m-small); line-height: 1.35;
  text-align: left; color: var(--text2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 9px 12px; border-radius: var(--r-pill); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sugestao:hover { border-color: var(--btn); color: var(--text); }
.caixa {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line3);
  border-radius: var(--r12); padding: 10px 10px 10px 16px;
  box-shadow: var(--sh);
}
.caixa input {
  flex: 1; min-width: 0; appearance: none; border: 0; outline: none; background: none;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--text);
  padding: 7px 0;
}
.caixa input::placeholder { color: var(--text4); }
.caixa .btn { height: 38px; padding: 0 18px; }
.aviso { padding: 10px 2px 0; line-height: 1.55; }

/* ===========================================================================
   VISTA 5 — guardadas
   =========================================================================== */
.cel-intervalo { padding-left: 16px; padding-right: 16px; }
.int-v { font-size: 12.5px; font-weight: 500; color: var(--text); }
.int-barra {
  position: relative; height: 6px; margin-top: 7px;
  background: var(--line2); border-radius: 3px;
}
.int-barra span {
  position: absolute; top: 0; bottom: 0; display: block;
  background: var(--btn); border-radius: 3px;
}

/* ===========================================================================
   Gráficos
   =========================================================================== */
svg .eixo    { stroke: var(--line); stroke-width: 1; }
svg .rot     { fill: var(--text4); font-family: var(--sans); font-size: var(--m-micro); }
svg .rot-b   { fill: var(--text); font-family: var(--sans); font-size: var(--m-small); font-weight: 600; }
svg .ponto   { fill: var(--accent); }
svg .ponto-o { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
svg .mediana { stroke: var(--accent); stroke-width: 2; }
svg .banda   { fill: var(--accent); opacity: 0.12; }
svg .serie   { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .serie-tracejada { stroke-dasharray: 5 4; }

/* ===========================================================================
   Tooltip
   =========================================================================== */
.tt {
  position: fixed; pointer-events: none; z-index: 60; opacity: 0;
  background: var(--surface); border: 1px solid var(--line3);
  border-radius: var(--r8); padding: var(--s2) var(--s3);
  font-size: var(--m-micro); color: var(--text);
  box-shadow: var(--tt-shadow);
  transition: opacity var(--dur) var(--ease);
}
.tt b { display: block; font-size: var(--t-small); margin-bottom: 2px; }

/* ===========================================================================
   Ecrã de entrada — <dialog> nativo. O ::backdrop escurece o resto sem um
   overlay à mão, e o Escape e a prisão do foco vêm de graça.
   =========================================================================== */
.dlg-entrar {
  border: 1px solid var(--line3);
  border-radius: var(--r10);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(94vw, 420px);
  /* O reset global zera a margem de tudo, e é a margem `auto` que centra um
     <dialog> modal. Sem esta linha aparecia encostado ao canto. */
  margin: auto;
  box-shadow: var(--tt-shadow);
}
.dlg-entrar::backdrop { background: rgba(0, 0, 0, 0.62); }

.entrar { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); }
.entrar h2 { font-size: var(--m-big); font-weight: 600; letter-spacing: -0.01em; }
.entrar .sub { color: var(--text3); font-size: var(--m-small); line-height: 1.5; }
.entrar label {
  display: flex; flex-direction: column; gap: var(--s2);
  font-size: var(--m-small); color: var(--text2);
}
.entrar input {
  font-family: var(--sans); font-size: var(--m-body);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--line3); border-radius: var(--r6);
  padding: 10px 12px;
  /* 44 px de alvo: isto abre-se em tablet, de pé, ao lado de um cliente. */
  min-height: var(--touch);
}
.entrar input:focus-visible { outline: 2px solid var(--btn); outline-offset: 1px; }
.entrar .dica { color: var(--text4); font-size: var(--m-micro); }
/* O projeto a que se está a ligar. Discreto, mas visível: se um dia houver um
   segundo ambiente, é isto que evita entrar no errado sem dar por ela. */
.entrar .projeto {
  text-align: right; border-top: 1px solid var(--line2); padding-top: var(--s3);
}
.entrar .erro {
  padding: 10px 12px;
  border: 1px solid var(--neg); border-radius: var(--r6);
  color: var(--neg); font-size: var(--m-small); line-height: 1.45;
}
.entrar menu { display: flex; gap: var(--s3); justify-content: flex-end; }
.entrar menu .btn { min-height: var(--touch); padding-inline: var(--s5); }

/* ===========================================================================
   Ecrãs estreitos — tablet em retrato e telefone.
   A barra lateral deita-se e passa a fila de separadores; as duas colunas da
   vista 2 empilham. Alvos de 44 px: isto usa-se de pé.
   =========================================================================== */
@media (max-width: 1100px) {
  .fila-topo, .fila-baixo { flex-direction: column; }
  .fila-topo .cartao.lado, .mapa-cartao, .fila-baixo.mapa-grande .mapa-cartao { width: auto; }
  .mapa-caixa { min-height: 320px; }
  .fila-baixo { overflow-y: auto; }
  .area-tabela { min-height: 420px; }
  .tira { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .rail { width: auto; flex-direction: row; align-items: center; gap: var(--s3); padding-right: var(--s3); }
  .rail-topo { padding: 0 0 0 var(--s4); flex: none; }
  /* Deitada, a barra não tem fundo para empurrar: o vazio comia metade do
     espaço e escondia as duas últimas vistas atrás de um deslize horizontal
     que ninguém adivinha. */
  .rail > .spacer { display: none; }
  .marca-sub { display: none; }
  .rail-nav {
    flex-direction: row; padding: 0; gap: 0;
    overflow-x: auto; scrollbar-width: none; flex: 1;
  }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-item { padding: 10px var(--s3); border-radius: 0; white-space: nowrap; }
  .rail-item .sub, .rail-item .num { display: none; }
  .rail-estado { margin: 0; padding: var(--s2) var(--s3); background: none; }
  .rail-estado-val, .rail-estado-sub { display: none; }
  .rail-estado-accoes { margin-top: 0; }
  .rail-nota { display: none; }

  .topo { height: auto; padding: var(--s3) var(--s4); flex-wrap: wrap; gap: var(--s3); }
  .area, .chips, .tira, .fila-topo, .fila-baixo, .procura { padding-inline: var(--s4); }

  /* Uma linha de dez colunas não cabe. Vira cartão, com a zona por título. */
  .grelha.cab { display: none; }
  .grelha.linha, .grelha.linha.comp, .grelha.linha.alta {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
    height: auto; min-height: var(--touch); padding: var(--s3) var(--s4);
  }
  .grelha.linha .n, .grelha.linha .c { text-align: left; }
  .cel-nome, .cel-nome-l { flex: 1 0 100%; padding-right: 0; }
  .cel-sinal { padding-left: 0; flex: 1 0 100%; }
  .cel-accoes { flex: 1 0 100%; justify-content: flex-start; }
  .cel-intervalo { padding-inline: 0; flex: 1 0 100%; }
  .hist-linha { grid-template-columns: 80px 1fr auto; }

  .procura { flex-direction: column; align-items: stretch; }
  .procura select, .procura input { width: 100%; }
  .mini, .btn { min-height: var(--touch); }
}

/* ===========================================================================
   Folha impressa. Fundo branco, tinta preta — escuro no papel não se lê e
   gasta toner. Sai a distribuição, o intervalo e a tabela; some o resto.
   =========================================================================== */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface2: #fff; --surface3: #fff;
    --text: #111; --strong: #222; --text2: #444; --text3: #555;
    --text4: #666; --faint: #777;
    --line: #ccc; --line2: #ddd; --line3: #bbb;
    --accent: #14405e; --accent-soft: #eef3f8; --accent-line: #c8d8e6; --band-line: #a8c2d6;
    --gold-text: #8a6410; --gold-soft: #fbf5e8; --gold-line: #c8a75e;
    --btn: #e7b465; --btn-ink: #3a2205;
    --green: #1a6b45; --green-text: #1a6b45; --neg: #8c3a24; --amber: #8a5a08;
    --map-bg: #fff; --sh: none;
  }
  html, body, .app { height: auto; overflow: visible; }
  .rail, .topo, .procura, .chips, .sem-impressao, .cel-accoes, .skip, .tt,
  .tira, .compor { display: none !important; }
  .conteudo { position: static; overflow: visible; }
  .conteudo > section { position: static; }
  .quadro { border: 1px solid #ccc; box-shadow: none; }
  .quadro-corpo, .fila-baixo { overflow: visible !important; }
  .fila-topo, .fila-baixo { flex-direction: row; }
  .quadro, .cartao, .grelha.linha { break-inside: avoid; }
  a[href]::after { content: ""; }
}