/* Diário da Operação — identidade Cris Borriello.
 *
 * Serif nos títulos (a marca), sans no operacional (o que se lê rápido).
 * A cor carrega significado e NUNCA sozinha: todo sinal tem texto ao lado,
 * porque quem enxerga mal e quem imprime a tela precisam entender igual.
*/

[hidden] { display: none !important; }
button svg, a svg { width: 16px; height: 16px; flex: 0 0 16px; vertical-align: middle; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #137d9b; outline-offset: 3px;
}
.grupo-menu { margin-bottom: 12px; }
.grupo-menu h2 { font: 600 11px Inter, sans-serif; color: #5f7078; margin: 16px 10px 6px; }
.grupo-menu .item-menu { font-size: 13px; min-height: 38px; }
.barra-movel { display: none; }
.filtros-hospedes, .consulta-stays { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px 0; border-block: 1px solid #dfe5e8; }
.filtros-hospedes .campo, .consulta-stays .campo { margin: 0; flex: 1 1 150px; min-width: 0; }
.filtros-hospedes .filtro-busca { flex-basis: 280px; }
.filtros-hospedes input, .filtros-hospedes select, .consulta-stays input, .consulta-stays select { min-height: 40px; width: 100%; }
.opcao-checkbox { display: flex; align-items: center; gap: 8px; margin: 0; }
.opcao-checkbox input { width: 16px; min-height: 16px; }
.resumo-hospedes, .resumo-conexao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 0; }
.resumo-hospedes span, .resumo-conexao { font-size: 13px; color: #4b5d65; }
.tabela-hospedes { background: #fff; }
.tabela-hospedes td { vertical-align: top; }
.tabela-hospedes td:first-child { min-width: 220px; }
.canal { display: inline-block; border-radius: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; margin-block: 4px; }
.canal-airbnb { background: #fff0f0; color: #a6213a; }
.canal-booking { background: #eaf1fc; color: #214d99; }
.canal-direto { background: #e5f5ef; color: #17634f; }
.canal-outro { background: #eef0f2; color: #49585f; }
.checklist-reserva { display: grid; font-size: 12px; gap: 3px; }
.link-acao { border: 0; padding: 0; background: transparent; color: #7c2d4a; text-align: left; text-decoration: underline; }
.paginacao { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; font-size: 13px; }
.paginacao button { width: 36px; height: 36px; padding: 6px; }
.resumo-reserva { display: flex; align-items: center; gap: 12px; }
.dados-reserva { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: 10px; font-size: 14px; }
.dados-reserva dt { color: #5f7078; }
.dados-reserva dd { margin: 0; overflow-wrap: anywhere; }
.acoes-reserva { gap: 8px; border-top: 1px solid #dfe5e8; padding-top: 16px; }
.botao-link { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid #becbd0; border-radius: 6px; }
.foto-imovel { width: min(100%, 480px); height: 260px; object-fit: contain; background: #edf1f3; display: block; margin-bottom: 16px; }
.resultado-stays td { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 600px; }
.recursos-catalogo { margin-top: 24px; }
.recursos-catalogo h2 { font-size: 18px; }
.consulta-stays { scroll-margin-top: 16px; }
.contexto-troca { border-left: 2px solid #b7c7cf; padding-left: 8px; }

@media (max-width: 860px) {
  .app .lateral { display: none; }
  .barra-movel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .barra-movel > span { font: 600 22px "Cormorant Garamond", Georgia, serif; }
  body.menu-aberto .app .lateral { display: flex; position: fixed; z-index: 50; left: 0; top: 60px; bottom: 0; width: min(290px, 85%); height: calc(100dvh - 60px); flex-direction: column; padding: 16px; box-shadow: 8px 0 24px #25323922; }
  body.menu-aberto #menu { display: block; overflow-y: auto; width: 100%; }
  body.menu-aberto .lateral .marca { display: none; }
  body.menu-aberto .item-menu { width: 100%; white-space: normal; }
  .filtros-hospedes .campo, .consulta-stays .campo { flex-basis: calc(50% - 12px); }
  .filtros-hospedes .filtro-busca { flex-basis: 100%; }
  .tabela-hospedes, .tabela-hospedes tbody { display: block; width: 100%; min-width: 0; }
  .tabela-hospedes thead { display: none; }
  .tabela-hospedes tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; padding: 16px; border-bottom: 1px solid #dfe5e8; }
  .tabela-hospedes td { display: block; padding: 0; border: 0; min-width: 0 !important; overflow-wrap: anywhere; }
  .tabela-hospedes td:first-child, .tabela-hospedes td:nth-child(5), .tabela-hospedes td:last-child { grid-column: 1 / -1; }
  .tabela-hospedes td:nth-child(2)::before { content: "Apartamento"; display: block; color: #5f7078; font-size: 11px; margin-bottom: 4px; }
  .tabela-hospedes td:nth-child(3)::before { content: "Estadia"; display: block; color: #5f7078; font-size: 11px; margin-bottom: 4px; }
  .tabela-hospedes td:last-child button { width: 100%; min-height: 40px; }
  .resumo-hospedes { gap: 8px 14px; }
  .linha-hospede { flex-wrap: wrap; }
  .linha-hospede > div { text-align: left !important; }
  .linha-hospede .acoes { justify-content: flex-start !important; }
}

:root {
  --tinta:        #253239;
  --tinta-media:  #4b5d65;
  --tinta-fraca:  #5f7078;
  --papel:        #f5f7f8;
  --papel-alto:   #ffffff;
  --linha:        #dfe5e8;
  --linha-forte:  #becbd0;

  /* Semáforo da operação */
  --ok:           #15803d;
  --ok-fundo:     #f0fdf4;
  --ok-linha:     #bbf7d0;
  --espera:       #b45309;
  --espera-fundo: #fffbeb;
  --espera-linha: #fde68a;
  --trava:        #b91c1c;
  --trava-fundo:  #fef2f2;
  --trava-linha:  #fecaca;

  --marca:        #7c2d4a;   /* vinho da marca */
  --marca-clara:  #fdf2f6;

  --raio:         8px;
  --sombra:       0 1px 2px rgba(28,25,23,.06), 0 4px 12px rgba(28,25,23,.04);
  --lateral:      224px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

a { color: var(--marca); }

/* ---------------------------------------------------------------- estrutura */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--papel-alto);
  border-right: 1px solid var(--linha);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca {
  padding: 4px 10px 18px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 14px;
}
.marca b {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
}
.marca span {
  font-size: 10px;
  letter-spacing: 0;
  color: var(--tinta-fraca);
}

.item-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.item-menu:hover { background: var(--papel); color: var(--tinta); }
/* O `:hover` precisa ser repetido aqui: depois de clicar, o ponteiro fica em
 * cima do item ativo, e sem esta linha o texto branco cai sobre o fundo claro
 * do hover — o item selecionado vira o único ilegível da lista. */
.item-menu.ativo,
.item-menu.ativo:hover { background: var(--tinta); color: #fff; }
.item-menu .selo {
  margin-left: auto;
  background: var(--trava);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0 5px;
}
.item-menu.ativo .selo { background: #fff; color: var(--tinta); }
.icone { width: 17px; text-align: center; flex: 0 0 17px; }

.conteudo { flex: 1; min-width: 0; padding: 26px 30px 70px; }

.topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.topo h1 { font-size: 30px; margin: 0 0 2px; }
.topo p  { margin: 0; color: var(--tinta-fraca); font-size: 13px; }

/* ------------------------------------------------------------------ cartões */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.cartao .rotulo {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--tinta-fraca);
  font-weight: 600;
}
.cartao .numero {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.cartao .nota { font-size: 12px; color: var(--tinta-fraca); }
.cartao.alerta { background: var(--trava-fundo); border-color: var(--trava-linha); }
.cartao.alerta .numero, .cartao.alerta .rotulo { color: var(--trava); }
.cartao.espera { background: var(--espera-fundo); border-color: var(--espera-linha); }
.cartao.espera .numero, .cartao.espera .rotulo { color: var(--espera); }
.cartao.bom { background: var(--ok-fundo); border-color: var(--ok-linha); }
.cartao.bom .numero, .cartao.bom .rotulo { color: var(--ok); }

/* ------------------------------------------------------------------- blocos */

.bloco {
  background: var(--papel-alto);
  border: 0;
  border-top: 1px solid var(--linha);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 18px;
  overflow: hidden;
}
.bloco > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linha);
  background: var(--papel-alto);
}
.bloco > header h2 { font-size: 19px; margin: 0; }
.bloco > header .conta {
  margin-left: auto;
  font-size: 12px;
  color: var(--tinta-fraca);
  font-weight: 500;
}
.bloco .corpo { padding: 14px 16px; }
.bloco .corpo.sem-respiro { padding: 0; }

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  align-items: start;
}

/* ------------------------------------------------------------------- linhas */

.linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linha);
}
.linha:last-child { border-bottom: 0; }
.linha:hover { background: #fcfbfa; }
.linha .principal { flex: 1; min-width: 0; }
.linha .titulo {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.linha .sub {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-top: 2px;
}
.linha .acoes { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }

/* A unidade é o que o olho procura primeiro: monoespaçada e sempre igual. */
.uh {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 13px;
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- sinais */

.sinal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.sinal::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 7px;
}
.sinal.verde    { color: var(--ok);     background: var(--ok-fundo);     border-color: var(--ok-linha); }
.sinal.amarelo  { color: var(--espera); background: var(--espera-fundo); border-color: var(--espera-linha); }
.sinal.vermelho { color: var(--trava);  background: var(--trava-fundo);  border-color: var(--trava-linha); }
.sinal.neutro   { color: var(--tinta-media); background: var(--papel); border-color: var(--linha-forte); }

/* Realocação precisa GRITAR — foi o pedido explícito da Cris. */
.realocacao {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--trava-fundo);
  border: 1px solid var(--trava-linha);
  border-left: 4px solid var(--trava);
  border-radius: var(--raio);
  padding: 12px 15px;
  margin-bottom: 9px;
}
.realocacao .faixa {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--trava);
  margin-bottom: 3px;
}
.realocacao .movimento {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px;
}
.realocacao .movimento .seta { color: var(--trava); margin: 0 7px; font-weight: 700; }

.autorizacao {
  background: var(--espera-fundo);
  border: 1px solid var(--espera-linha);
  border-left: 4px solid var(--espera);
  border-radius: var(--raio);
  padding: 11px 15px;
  margin-bottom: 9px;
}

/* ------------------------------------------------------------------ botões */

button, .botao {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--linha-forte);
  background: var(--papel-alto);
  color: var(--tinta);
  padding: 7px 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--papel); border-color: var(--tinta-fraca); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.principal { background: var(--tinta); color: #fff; border-color: var(--tinta); }
button.principal:hover:not(:disabled) { background: #000; }
button.bom   { background: var(--ok);    color: #fff; border-color: var(--ok); }
button.bom:hover:not(:disabled)   { filter: brightness(1.08); background: var(--ok); }
button.perigo { background: var(--trava); color: #fff; border-color: var(--trava); }
button.mini  { padding: 4px 9px; font-size: 12px; }

/* --------------------------------------------------------------- formulário */

label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: var(--tinta-media); }
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: 7px;
  background: var(--papel-alto);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca);
  outline-offset: -1px;
  border-color: var(--marca);
}
textarea { min-height: 76px; resize: vertical; }
.campo { margin-bottom: 12px; }
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.busca { position: relative; max-width: 380px; }
.busca input { padding-left: 34px; }
.busca::before {
  content: "⌕";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-fraca);
  font-size: 17px;
}

/* ----------------------------------------------------------------- tabelas */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
  white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfbfa; }

/* ------------------------------------------------------------ estado vazio */

.vazio { padding: 34px 20px; text-align: center; color: var(--tinta-fraca); }
.vazio .simbolo { font-size: 30px; opacity: .3; display: block; margin-bottom: 8px; }
.vazio p { margin: 0 0 12px; font-size: 14px; }
.vazio strong { color: var(--tinta-media); display: block; margin-bottom: 3px; font-size: 15px; }

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

.aviso {
  border-radius: var(--raio);
  padding: 12px 15px;
  margin-bottom: 15px;
  font-size: 13.5px;
  border: 1px solid;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.aviso.erro   { background: var(--trava-fundo);  border-color: var(--trava-linha);  color: #7f1d1d; }
.aviso.atencao{ background: var(--espera-fundo); border-color: var(--espera-linha); color: #78350f; }
.aviso.ok     { background: var(--ok-fundo);     border-color: var(--ok-linha);     color: #14532d; }
.aviso b { display: block; margin-bottom: 2px; }
.aviso .dica { opacity: .85; font-size: 12.5px; }

/* ------------------------------------------------------------------- recado */

#recado {
  position: fixed;
  right: 18px; bottom: 18px;
  background: var(--tinta);
  color: #fff;
  padding: 12px 17px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  z-index: 90;
  max-width: 380px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
#recado.aparece { opacity: 1; transform: translateY(0); }
#recado.erro { background: var(--trava); }
#recado.bom  { background: var(--ok); }

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

.fundo-modal {
  position: fixed; inset: 0;
  background: rgba(28,25,23,.42);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 100;
}
.modal {
  background: var(--papel-alto);
  border-radius: 13px;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 22px 60px rgba(0,0,0,.26);
}
.modal header {
  padding: 17px 20px 13px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
}
.modal header h2 { margin: 0; font-size: 21px; }
.modal header button { margin-left: auto; border: 0; background: transparent; font-size: 21px; padding: 0 5px; }
.modal .corpo { padding: 18px 20px; }
.modal footer {
  padding: 13px 20px 18px;
  display: flex;
  gap: 9px;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------- login */

/* Pelo ID, não pela classe: `.entrada` casava também com `<div class="mov
 * entrada">`, a linha de quem CHEGA na Recepção. Cada uma dessas linhas
 * herdava `min-height: 100vh` e o degradê do login, e ficava com 900px de
 * altura — a tela de 7 dias passava de 23 mil pixels de rolagem, com o
 * conteúdo no alto de cada bloco e vazio embaixo. Não parecia defeito;
 * parecia um layout "arejado". */
#tela-entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(1100px 520px at 50% -10%, #fff, transparent),
    var(--papel);
}
.caixa-entrada {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 15px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 14px 44px rgba(28,25,23,.09);
}
.caixa-entrada .marca { text-align: center; border: 0; margin-bottom: 22px; padding-bottom: 0; }
.caixa-entrada .marca b { font-size: 31px; }

/* -------------------------------------------------------------- utilitários */

.discreto { color: var(--tinta-fraca); font-size: 12.5px; }
.fila { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fila.fim { justify-content: flex-end; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.espaco { margin-top: 15px; }
.nada { display: none !important; }
.copiavel { cursor: pointer; border-bottom: 1px dashed var(--tinta-fraca); }

/* ---------------------------------------------------------------- celular */

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 9px;
    gap: 5px;
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }
  /* A marca da LATERAL sai no celular (a barra de cima já diz o nome), mas a
   * do login precisa ficar: sem escopo, esta regra apagava as duas, e a tela
   * de entrada no celular virava um cartão anônimo pedindo e-mail e senha —
   * justo onde a pessoa confere se está no sistema certo. */
  .lateral .marca { display: none; }

  /* O menu é um DIV com botões dentro: sem virar flex ele empilha um item por
   * linha e empurra o conteúdo do dia para fora da primeira tela. No celular a
   * pessoa precisa ver a chegada, não a lista de seções. */
  #menu {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
  }
  #menu::-webkit-scrollbar { display: none; }

  .lateral > div:last-child {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    flex: 0 0 auto;
  }
  /* Quem sou fica no cabeçalho do celular; o espaço vale mais para o menu. */
  #quem-sou { display: none; }

  .item-menu { width: auto; white-space: nowrap; padding: 8px 12px; flex: 0 0 auto; }
  .conteudo { padding: 17px 16px 60px; }
  .topo h1 { font-size: 24px; }
  .cartoes { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 9px; }
  .cartao .numero { font-size: 25px; }

  /* A linha de lista quebra em duas faixas no celular: medido no CRM da casa,
   * três colunas numa caixa de ~318px cortam o nome do hóspede junto com o
   * botão. Ler o nome vale mais que manter uma linha só. */
  .linha { flex-wrap: wrap; padding: 12px 14px; }
  .linha .principal { flex: 1 0 100%; }
  .linha .titulo { white-space: normal; }
  .linha .acoes { flex: 1 0 100%; margin-top: 9px; }
  .linha .acoes button { flex: 1; }

  .tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #recado { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

@media print {
  .lateral, .acoes, button { display: none !important; }
  .conteudo { padding: 0; }
  .bloco { break-inside: avoid; box-shadow: none; }
}

/* ===================================================================== */
/* Telas vindas dos apps ativos da Stays (Recepção, Tarefas, Enxoval,     */
/* Inventário, Cauções, Serviços, Avaliações, Mensagens, Comissões,       */
/* Proprietários, Repasse, Estatísticas).                                 */
/*                                                                        */
/* Nada de componente novo onde o existente serve: `cartao`, `bloco`,     */
/* `sinal`, `mini` e `tabela-rolavel` continuam sendo os mesmos. O que    */
/* está aqui embaixo é só o que essas telas têm e as outras não: o par    */
/* saída/entrada do mesmo apartamento, e a folha de contagem.             */
/* ===================================================================== */

/* --- Recepção: o dia, e o apartamento dentro dele -------------------- */
.dia-recepcao { margin: 0 0 18px; }
/* O dia da Recepção é um `<details>`: a cabeça continua parecendo o título que
 * era, e ganha alvo de clique de linha inteira — no celular, ponta a ponta. */
.dia-recepcao > summary {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 6px 2px; border-bottom: 1px solid var(--linha);
  cursor: pointer; list-style: none; min-height: 40px;
}
.dia-recepcao > summary::-webkit-details-marker { display: none; }
.dia-recepcao > summary::before {
  content: "▸"; color: var(--tinta-fraca); font-size: 12px;
  transition: transform .15s; display: inline-block; flex: 0 0 10px;
}
.dia-recepcao[open] > summary::before { transform: rotate(90deg); }
.dia-recepcao > summary:hover { background: var(--papel); }
.dia-recepcao > summary .discreto { margin-left: auto; text-transform: none; font-weight: 400; }

.bloco-apto {
  background: var(--fundo-caixa, #fff); border: 1px solid var(--linha);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
/* O apartamento que vira no mesmo dia é o que decide a manhã da governança. */
.bloco-apto.apertado { border-left: 3px solid var(--alerta, #c2410c); }
.cabeca-apto {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}

.mov { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.mov + .mov { border-top: 1px dashed var(--linha); }
.mov .seta {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 2px 6px; border-radius: 6px; margin-top: 2px;
}
.mov.saida .seta { background: #fef3c7; color: #92400e; }
.mov.entrada .seta { background: #dcfce7; color: #166534; }
.linha-hospede { display: flex; gap: 10px; flex: 1; min-width: 0; align-items: flex-start; }
.linha-hospede b { display: block; }

/* --- Tarefas: o tipo em uma etiqueta, o atraso na linha inteira ------ */
.etiqueta {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.etiqueta.t-limpeza  { background: #e0f2fe; color: #075985; }
.etiqueta.t-recepcao { background: #ede9fe; color: #5b21b6; }
.etiqueta.t-tecnica  { background: #ffedd5; color: #9a3412; }
.etiqueta.t-outra    { background: #f1f5f9; color: #334155; }

tr.atrasada > td { background: #fff1f2; }
tr.apagada > td, .bloco-apto.apagada { opacity: .55; }

/* --- Folhas de contagem (enxoval e inventário) ----------------------- */
input.num { width: 72px; text-align: center; }

/* --- Mensagens: o texto que será copiado ---------------------------- */
.texto-pronto {
  white-space: pre-wrap; font-family: inherit; font-size: 13px;
  background: var(--fundo-suave, #f8fafc); border: 1px solid var(--linha);
  border-radius: 8px; padding: 10px; margin: 6px 0; line-height: 1.5;
}

/* --- Dinheiro: crédito sobe, débito desce --------------------------- */
.positivo { color: #15803d; font-weight: 600; }
.negativo { color: #b91c1c; font-weight: 600; }

/* --- Estatísticas: barra proporcional ------------------------------- */
.barra {
  background: var(--fundo-suave, #f1f5f9); border-radius: 999px;
  height: 8px; overflow: hidden; min-width: 60px;
}
.barra span { display: block; height: 100%; background: var(--destaque, #0f766e); }

/* --- Filtro em botão: o "ativo" que faltava no `mini` ---------------- */
.mini.ativo {
  background: var(--destaque, #0f766e); color: #fff; border-color: transparent;
}
.alternador {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; white-space: nowrap;
}

/* --- Impressão: a Recepção é levada no bolso ------------------------ */
@media print {
  .lateral, .topo .fila, #recado, .acoes, .cartoes { display: none !important; }
  .conteudo { padding: 0; }
  .bloco-apto { break-inside: avoid; border-color: #999; }
  .dia-recepcao { break-inside: avoid-page; }
}

/* --- Celular: a folha de contagem não pode virar rolagem lateral ---- */
@media (max-width: 640px) {
  .linha-hospede { flex-direction: column; gap: 4px; }
  .linha-hospede > div[style*="text-align:right"] { text-align: left !important; }
  .linha-hospede .acoes { justify-content: flex-start !important; }
  input.num { width: 60px; }
}

/* --- Colunas que só existem no desktop -------------------------------
   Nas duas tabelas mais usadas (Tarefas e Inventário) o botão de ação é a
   última coluna, e no celular ele caía fora da área visível: a pessoa via a
   tarefa e não alcançava o "Resolver". O que sai é o que já está repetido
   embaixo do título em `.so-celular`. */
.so-celular { display: none; }
@media (max-width: 640px) {
  .so-desktop { display: none; }
  .so-celular { display: block; }
}

/* --- Faixa de atalhos da tela Hoje -----------------------------------
   Aparece só quando há número. Um aviso permanente vira paisagem em três
   dias — e paisagem é o que cada um desses módulos virou na Stays. */
.faixa-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.faixa-atalho {
  border: 1px solid var(--linha); border-left: 3px solid var(--alerta, #c2410c);
  background: var(--fundo-caixa, #fff); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; text-align: left; cursor: pointer;
}
.faixa-atalho:hover { background: var(--fundo-suave, #f8fafc); }
.faixa-atalho b { font-size: 15px; }
@media (max-width: 640px) { .faixa-atalho { width: 100%; } }

/* ------------------------------------------------- cartão que leva a algum lugar
 *
 * O cartão do topo é <button> quando tem destino, e por isso precisa desmontar
 * o que o navegador dá de graça a um botão (fonte menor, centralizado, borda
 * de tema). Sem isto ele encolhe e desalinha no meio dos irmãos <div>.
 */
.cartao.clicavel {
  font: inherit;
  text-align: left;
  width: 100%;
  min-width: 0;
  display: block;
  cursor: pointer;
  /* `button` nasce com `white-space: nowrap` neste projeto (bom para botão de
   * ação, péssimo para cartão): a nota do cartão virava uma linha só, o botão
   * pedia a largura inteira do texto e o grid de cartões estourava a tela em
   * 390px. Sem isto, a tela Hoje ganha rolagem lateral no celular. */
  white-space: normal;
}
.cartao.clicavel:hover:not(:disabled) {
  border-color: var(--tinta-fraca);
  background: var(--papel-alto);
}
.cartao.clicavel.espera:hover { background: var(--espera-fundo); }
.cartao.clicavel.alerta:hover { background: var(--trava-fundo); }
.cartao.clicavel.bom:hover    { background: var(--ok-fundo); }

/* O bloco para onde o cartão levou pisca uma vez: sem isso, em tela cheia de
 * bloco parecido, a pessoa clica e não vê que a página andou. */
.piscou { animation: piscada 1.1s ease-out; }
@keyframes piscada {
  0%   { box-shadow: inset 3px 0 0 var(--marca); background: var(--marca-clara); }
  100% { box-shadow: inset 3px 0 0 transparent; background: transparent; }
}

/* ------------------------------------------------------------------- chips
 *
 * O que falta numa chegada, em três palavras soltas em vez de uma frase.
 * Nove linhas com a mesma frase completa viram parede; nove linhas de chips
 * deixam ver de relance qual tem um a menos.
 */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid;
  white-space: nowrap;
}
.chip.falta { color: var(--espera); background: var(--espera-fundo); border-color: var(--espera-linha); }
.chip.ok    { color: var(--ok);     background: var(--ok-fundo);     border-color: var(--ok-linha); }

/* --------------------------------------------------------------- preparo
 *
 * O que ainda não foi montado na casa. Só aparece enquanto falta — e é por
 * isso que pode ocupar o topo: ele se apaga sozinho quando a operação começa.
 */
.preparo {
  background: var(--marca-clara);
  border: 1px solid #f3d9e4;
  border-left: 3px solid var(--marca);
  border-radius: var(--raio);
  padding: 11px 14px;
  margin-bottom: 18px;
}
.preparo-titulo { font-weight: 700; font-size: 13px; color: var(--marca); }
.preparo-nota { margin: 2px 0 9px; font-size: 12px; color: var(--tinta-media); max-width: 70ch; }
.preparo-itens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
}
.preparo-item {
  display: block;
  text-align: left;
  background: var(--papel-alto);
  border: 1px solid #f0cfdd;
  padding: 7px 11px;
  white-space: normal;
}
.preparo-item b { font-size: 12.5px; display: block; }
.preparo-item span { font-size: 11px; font-weight: 400; color: var(--tinta-fraca); line-height: 1.3; }

/* --- Central de atendimento -------------------------------------------
   A única tela que fica aberta o turno inteiro, e a única com duas colunas:
   a fila à esquerda, a conversa à direita. No celular vira uma coluna só,
   porque ler conversa em coluna de 160px é o que empurra a pessoa de volta
   para o aplicativo — que é exatamente o hábito que esta tela substitui.

   Altura fixa em `dvh` (e não `vh`): no iPhone a barra do navegador come
   parte da tela, e a caixa de escrita ficava fora do alcance do polegar. */
.filtros-central { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filtros-central input { flex: 1 1 220px; min-height: 38px; }

.central {
  display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 16px; align-items: stretch; height: calc(100dvh - 210px); min-height: 520px;
}
.lista-conversas {
  overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-alto); padding: 6px;
}
.conversa {
  display: block; width: 100%; min-width: 0; text-align: left; border: 0;
  background: transparent; border-bottom: 1px solid var(--linha); border-radius: 6px;
  padding: 9px 10px; cursor: pointer;
  /* Mesma armadilha já anotada em `.cartao.clicavel`: neste projeto `button`
     nasce com `white-space: nowrap`, e a prévia da conversa saía cortada no
     meio da palavra em vez de quebrar em duas linhas. */
  white-space: normal;
}
.conversa:hover { background: var(--papel); }
.conversa.ativa { background: var(--marca-clara); box-shadow: inset 3px 0 0 var(--marca); }
.conversa.esperando { border-left: 3px solid var(--espera); }
.conversa-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conversa-topo b { font-size: 14px; overflow-wrap: anywhere; }
.conversa-linha { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.conversa .previa {
  margin: 2px 0 4px; font-size: 12.5px; color: var(--tinta-media);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.aviso-espera { font-size: 11px; font-weight: 600; color: var(--espera); }

.janela-conversa {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel-alto);
}
.topo-conversa {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linha);
}
.topo-conversa .identidade { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topo-conversa h2 { margin: 0; font-size: 17px; }
.ficha-reserva {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  padding: 8px 14px; font-size: 12.5px; background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.sem-reserva {
  padding: 8px 14px; font-size: 12.5px; color: var(--espera);
  background: var(--espera-fundo); border-bottom: 1px solid var(--espera-linha);
}
/* `min-height` aqui porque o fluxo é o único pedaço elástico da coluna: sem
   ele, num notebook de tela baixa a caixa de escrita empurrava a conversa para
   79px de altura — sobrava a última linha do diálogo e nada mais. */
.fluxo {
  flex: 1 1 auto; min-height: 180px; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.balao { max-width: 74%; border-radius: 10px; padding: 8px 11px; font-size: 14px; }
.balao p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.balao.deles { align-self: flex-start; background: var(--papel); border: 1px solid var(--linha); }
.balao.nosso { align-self: flex-end; background: var(--marca-clara); border: 1px solid #f0d9e2; }
.balao footer {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
  font-size: 11px; color: var(--tinta-fraca);
}
.composicao { border-top: 1px solid var(--linha); padding: 10px 14px 14px; }
.composicao .escrita { display: flex; flex-direction: column; gap: 8px; }
.composicao textarea { width: 100%; resize: vertical; }
.faixa-janela { font-size: 12.5px; padding: 7px 10px; border-radius: 6px; margin-bottom: 8px; }
.faixa-janela.aberta { background: var(--ok-fundo); border: 1px solid var(--ok-linha); color: var(--ok); }
.faixa-janela.fechada { background: var(--espera-fundo); border: 1px solid var(--espera-linha); color: var(--espera); }
.lista-simples { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

@media (max-width: 860px) {
  .central { grid-template-columns: 1fr; height: calc(100dvh - 200px); }
  .central .janela-conversa { display: none; }
  .central.com-conversa .lista-conversas { display: none; }
  .central.com-conversa .janela-conversa { display: flex; }
  .balao { max-width: 88%; }
}

/* Central: os detalhes que fazem a tela ser lida como uma conversa, e não como
   uma tabela de mensagens. Separador de dia, inicial colorida e o registro do
   que aconteceu fora da tela (ligação) no meio do fluxo. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  color: #fff; font: 700 12px Inter, sans-serif;
}
.conversa-topo { align-items: center; }
.conversa-topo b { flex: 1; }
.separador-dia { display: flex; justify-content: center; margin: 4px 0; }
.separador-dia span {
  font-size: 11px; font-weight: 600; color: var(--tinta-fraca);
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: 999px; padding: 2px 10px;
}
.balao.sistema {
  align-self: center; max-width: 85%; text-align: center;
  background: var(--papel); border: 1px dashed var(--linha-forte);
  color: var(--tinta-media); font-size: 12.5px; padding: 6px 12px;
}
.balao.sistema span { color: var(--tinta-fraca); margin-left: 6px; }

/* --- Ritmo de vendas: a noite que pede decisão -----------------------
   Fundo, e não texto colorido: a linha inteira é o alvo, e num calendário
   de noventa linhas o olho precisa achar a data de longe, rolando. */
tr.linha-trava  { background: var(--trava-fundo); }
tr.linha-espera { background: var(--espera-fundo); }