/* Central Voyage Villas · base do Portal Wellness (30/09/2026)
   Sistema limpo e operacional na paleta da marca: papel, tinta marrom, areia; terracota só em
   acento pequeno. Canto reto em tudo (regra do grupo). Jost no lugar da Futura (web). */
:root {
  --papel: #E7E8DF;  --cartao: #F1F1EB; --cartao-2: #EAEBE3;
  --tinta: #51453D;  --tinta-2: #6B5D52; --tinta-3: #716459;
  --fio: #D1D1C4;    --fio-2: #C2C1B2;
  --areia: #DBC596;  --areia-2: #EDE3C9;
  --terra: #A33E12;
  --ok: #3F6B4A;  --ok-f: #DCE6D8;
  --aj: #8A5412;  --aj-f: #F3E4C8;
  --no: #7A2E1E;  --no-f: #F2DCD4;
  --info: #3F5A6B; --info-f: #DCE4E8;
  --sans: "Jost", "Futura PT", Futura, "Avenir Next", system-ui, sans-serif;
  --tap: 44px;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--papel); color: var(--tinta); }
body { font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--terra); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- entrada ---------- */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; }
.entrada .caixa { width: 100%; max-width: 400px; background: var(--cartao); border: 1px solid var(--fio); border-top: 2px solid var(--tinta); padding: 34px 30px 30px; }
.entrada .marca { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.entrada .marca img { width: 44px; height: 44px; }
.entrada h1 { font-size: 22px; font-weight: 500; letter-spacing: .02em; }
.entrada .sob { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-2); }
.entrada p.ajuda { font-size: 13px; color: var(--tinta-2); margin-top: 16px; }
.entrada .troca { margin-top: 18px; font-size: 14px; }
.entrada .troca button { background: none; border: 0; padding: 0; color: var(--terra); text-decoration: underline; cursor: pointer; }

/* ---------- campos e botões ---------- */
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo > span { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--tap); padding: 9px 11px; background: #fff; border: 1px solid var(--fio-2); border-radius: 0;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); }
.campo .dica { font-size: 12px; color: var(--tinta-3); letter-spacing: 0; text-transform: none; }
.linha { display: flex; flex-wrap: wrap; gap: 12px; }
.linha > .campo { flex: 1 1 160px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px;
       border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel); font-weight: 500; letter-spacing: .03em; cursor: pointer; border-radius: 0; }
.btn:hover { background: #3F3530; }
.btn.claro { background: transparent; color: var(--tinta); }
.btn.claro:hover { background: var(--cartao-2); }
.btn.perigo { background: transparent; color: var(--no); border-color: var(--no); }
.btn.perigo:hover { background: var(--no-f); }
.btn.peq { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.cheio { width: 100%; }
.erro-msg { background: var(--no-f); color: var(--no); border-left: 3px solid var(--no); padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.ok-msg { background: var(--ok-f); color: var(--ok); border-left: 3px solid var(--ok); padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }

/* ---------- estrutura ---------- */
.sistema { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; background: linear-gradient(90deg, var(--tinta) 250px, var(--papel) 250px); }
.lateral { background: var(--tinta); color: var(--papel); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.lateral .topo { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; border-bottom: 1px solid rgba(231,232,223,.14); }
.lateral .topo img { width: 44px; height: 44px; }
.lateral .topo b { display: block; font-weight: 500; font-size: 15px; letter-spacing: .04em; }
.lateral .topo small { display: block; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #CBBFB2; }
.lateral .casa { padding: 14px 20px; border-bottom: 1px solid rgba(231,232,223,.14); }
.lateral .casa span { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #CBBFB2; margin-bottom: 6px; }
.lateral .casa select { width: 100%; min-height: 38px; background: #5E5149; color: var(--papel); border: 1px solid rgba(231,232,223,.22); padding: 6px 8px; border-radius: 0; }
.lateral nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.lateral nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 20px; background: none; border: 0;
                      border-left: 3px solid transparent; color: #E2DAD0; text-align: left; cursor: pointer; font-size: 14px; }
.lateral nav button:hover { background: rgba(231,232,223,.06); color: #fff; }
.lateral nav button.on { border-left-color: var(--areia); background: rgba(231,232,223,.09); color: #fff; }
.lateral nav button .n { margin-left: auto; min-width: 22px; padding: 1px 6px; font-size: 11px; text-align: center; background: var(--areia); color: var(--tinta); }
.lateral nav .grupo { padding: 16px 20px 6px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #CBBFB2; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.lateral .pessoa { padding: 16px 20px 20px; border-top: 1px solid rgba(231,232,223,.14); font-size: 13px; }
.lateral .pessoa b { display: block; font-weight: 500; font-size: 14px; }
.lateral .pessoa small { color: #CBBFB2; }
.lateral .pessoa .acoes { display: flex; gap: 14px; margin-top: 10px; }
.lateral .pessoa .acoes button { background: none; border: 0; padding: 0; color: #E2DAD0; text-decoration: underline; cursor: pointer; font-size: 13px; }

.barra-cel { display: none; }
.conteudo { min-width: 0; padding: 30px 36px 60px; }
.cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px;
       padding-bottom: 18px; border-bottom: 1px solid var(--fio); }
.cab .sob { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-2); }
.cab h1 { font-size: 30px; font-weight: 400; line-height: 1.1; margin-top: 4px; }
.cab .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- blocos ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 26px; }
.kpi { background: var(--cartao); border: 1px solid var(--fio); padding: 16px 18px; }
.kpi span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.kpi b { display: block; font-size: 30px; font-weight: 400; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--tinta-3); font-size: 12px; }
.kpi.alerta { border-left: 3px solid var(--terra); }
.bloco { background: var(--cartao); border: 1px solid var(--fio); margin-bottom: 20px; }
.bloco > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--fio); }
.bloco > header h2 { font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.bloco > header small { color: var(--tinta-3); }
.bloco .corpo { padding: 16px 18px; }
.vazio { padding: 26px 18px; color: var(--tinta-3); text-align: center; font-size: 14px; }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.alerta-linha { background: var(--cartao); border: 1px solid var(--fio); border-left: 3px solid var(--terra); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.alerta-linha b { font-weight: 500; }
.item-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; background: none; border: 0;
              border-bottom: 1px solid var(--fio); text-align: left; cursor: pointer; font-size: 14px; }
.item-lista:hover { background: #fff; }
.item-lista b { font-weight: 500; }

/* ---------- tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
             padding: 10px 12px; border-bottom: 1px solid var(--fio); background: var(--cartao-2); position: sticky; top: 0; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--fio); vertical-align: top; }
.tabela tr.clic { cursor: pointer; }
.tabela tr.clic:hover td { background: #fff; }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .sub { display: block; font-size: 12px; color: var(--tinta-3); }
.rolagem { overflow-x: auto; }

/* ---------- selos ---------- */
.selo { display: inline-block; padding: 2px 8px; font-size: 12px; border: 1px solid var(--fio-2); color: var(--tinta-2); white-space: nowrap; }
.selo.novo { background: var(--aj-f); border-color: var(--aj); color: var(--aj); }
.selo.andamento { background: var(--info-f); border-color: var(--info); color: var(--info); }
.selo.fim { background: var(--ok-f); border-color: var(--ok); color: var(--ok); }
.selo.cancelado { background: var(--no-f); border-color: var(--no); color: var(--no); }
.selo.hoje { background: var(--terra); border-color: var(--terra); color: #fff; letter-spacing: .08em; }
.selo.teste { border-style: dashed; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.selo.areia { background: var(--areia-2); border-color: var(--areia); color: var(--tinta); }

/* ---------- filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.filtros button { min-height: 36px; padding: 0 14px; border: 1px solid var(--fio-2); background: transparent; cursor: pointer; font-size: 13px; }
.filtros button.on { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.filtros input[type=date], .filtros input[type=search] { min-height: 36px; padding: 0 10px; border: 1px solid var(--fio-2); background: #fff; }

/* ---------- agenda ---------- */
.agenda { display: grid; grid-template-columns: 64px 1fr; border: 1px solid var(--fio); background: var(--cartao); padding-top: 10px; }
.agenda .horas { display: grid; grid-auto-rows: 30px; border-right: 1px solid var(--fio); }
.agenda .horas div { font-size: 11px; color: var(--tinta-3); padding: 0 8px; transform: translateY(-7px); text-align: right; font-variant-numeric: tabular-nums; }
.agenda .grade { position: relative; display: grid; grid-auto-rows: 30px; }
.agenda .grade .faixa { border-bottom: 1px solid #E2E2D8; }
.agenda .grade .faixa.cheia { border-bottom-color: var(--fio); }
.agenda .bloco-ag { margin: 2px 4px; padding: 6px 10px; background: var(--areia-2); border: 1px solid var(--areia); border-left: 3px solid var(--tinta);
                    overflow: hidden; cursor: pointer; font-size: 13px; line-height: 1.3; }
.agenda .bloco-ag b { font-weight: 500; }
.agenda .bloco-ag small { display: block; color: var(--tinta-2); }
.agenda .bloco-ag.fim { background: var(--ok-f); border-color: #B7CBB3; border-left-color: var(--ok); }
.agenda .bloco-ag.hoje-alerta { border-left-color: var(--terra); }
.agenda .agora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--terra); z-index: 2; pointer-events: none; }

/* ---------- gaveta de detalhe ---------- */
.veu { position: fixed; inset: 0; background: rgba(51,43,38,.36); z-index: 20; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--papel); z-index: 21; overflow-y: auto;
          border-left: 1px solid var(--fio-2); box-shadow: -12px 0 30px rgba(51,43,38,.12); }
.gaveta header { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
                 padding: 20px 22px 16px; background: var(--papel); border-bottom: 1px solid var(--fio); }
.gaveta header h2 { font-size: 20px; font-weight: 400; }
.gaveta header small { color: var(--tinta-3); font-size: 12px; }
.gaveta .fecha { width: 40px; height: 40px; border: 1px solid var(--fio-2); background: transparent; cursor: pointer; font-size: 20px; line-height: 1; }
.gaveta section { padding: 16px 22px; border-bottom: 1px solid var(--fio); }
.gaveta section h3 { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 10px; }
.pares { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.pares dt { color: var(--tinta-3); }
.pares dd { margin: 0; overflow-wrap: anywhere; }
.confidencial { background: var(--aj-f); border: 1px solid #E2C99B; padding: 12px 14px; }
.confidencial h3 { color: var(--aj); }
.senha-mini { letter-spacing: .14em; font-weight: 500; font-variant-numeric: tabular-nums; }
.senha-grande { font-size: 34px; letter-spacing: .22em; font-weight: 500; font-variant-numeric: tabular-nums; }
.valor-grande { font-size: 30px; font-weight: 400; font-variant-numeric: tabular-nums; }
.corrigir { margin-top: 14px; }
.lembrete { margin: 0; font-size: 14px; color: var(--tinta-2); padding-left: 12px; border-left: 2px solid var(--areia); }
.corrigir summary { display: inline-flex; align-items: center; min-height: 34px; cursor: pointer; color: var(--terra); font-size: 14px; }
.corrigir form, .gaveta dl + form { margin-top: 12px; }
.linha-tempo { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.linha-tempo li { padding-left: 14px; border-left: 2px solid var(--fio-2); }
.linha-tempo b { font-weight: 500; }
.linha-tempo small { color: var(--tinta-3); }

/* ---------- avaliações ---------- */
.medias { display: grid; gap: 10px; }
.media { display: grid; grid-template-columns: 150px 1fr 44px; gap: 12px; align-items: center; font-size: 14px; }
.media .trilho { height: 8px; background: var(--cartao-2); border: 1px solid var(--fio); position: relative; }
.media .trilho i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); }
.media b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.nota-5 { display: inline-flex; gap: 3px; }
.nota-5 i { width: 10px; height: 10px; border: 1px solid var(--tinta-2); }
.nota-5 i.on { background: var(--tinta); border-color: var(--tinta); }
.cartao-av { padding: 14px 18px; border-bottom: 1px solid var(--fio); display: grid; gap: 8px; }
.cartao-av .notas { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--tinta-2); }
.cartao-av blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--areia); font-size: 15px; }

/* ---------- inventário ---------- */
.inv-grupo { margin-bottom: 18px; }
.inv-grupo h3 { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 8px; }
.inv-item { display: grid; grid-template-columns: minmax(150px, 1fr) auto 70px minmax(120px, 1fr); gap: 10px; align-items: center;
            padding: 8px 0; border-bottom: 1px solid #E2E2D8; font-size: 14px; }
.estados { display: inline-flex; flex-wrap: wrap; }
.estados button { min-height: 32px; padding: 0 9px; border: 1px solid var(--fio-2); margin-left: -1px; background: #fff; font-size: 12px; cursor: pointer; }
.estados button.on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); position: relative; }
.estados button.on.acabando, .estados button.on.trocar { background: var(--aj); border-color: var(--aj); }
.estados button.on.acabou, .estados button.on.quebrado { background: var(--no); border-color: var(--no); }
.inv-item input { min-height: 32px; padding: 4px 8px; border: 1px solid var(--fio-2); background: #fff; width: 100%; }

/* ---------- logos ---------- */
.nota-logos { font-size: 14px; color: var(--tinta-2); margin: -6px 0 18px; max-width: 70ch; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* a linha entre os cartões é sombra de 1 px: sem fundo cinza onde a última fileira não completa */
.logo { margin: 0; display: flex; flex-direction: column; box-shadow: 1px 0 0 var(--fio), 0 1px 0 var(--fio); }
.logo .vitrine { background: #fff; height: 150px; padding: 22px; }
.logo .vitrine img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.logo .baixar { display: flex; gap: 6px; }

/* ---------- canal ---------- */
.conversa { padding: 16px 18px; border-bottom: 1px solid var(--fio); display: grid; gap: 10px; }
.conversa.resolvida { opacity: .72; }
.msg { font-size: 15px; }
.msg .quem { font-size: 12px; color: var(--tinta-3); margin-bottom: 2px; }
.respostas { display: grid; gap: 10px; padding-left: 16px; border-left: 2px solid var(--fio-2); }
.resposta-form { display: flex; gap: 8px; }
.resposta-form input { flex: 1; min-height: 38px; padding: 6px 10px; border: 1px solid var(--fio-2); background: #fff; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(51,43,38,.42); }
.modal .caixa { width: 100%; max-width: 520px; max-height: calc(100vh - 36px); overflow-y: auto; background: var(--papel); border: 1px solid var(--fio-2); border-top: 2px solid var(--tinta); padding: 24px; }
.modal h2 { font-size: 20px; font-weight: 400; margin-bottom: 14px; }
.modal .msg-copiar { background: #fff; border: 1px solid var(--fio-2); padding: 12px; font-size: 14px; white-space: pre-wrap; margin: 10px 0 14px; }
.modal .rodape { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; cursor: pointer; font-size: 14px; }
.checks input { width: 18px; height: 18px; accent-color: var(--tinta); }

.aviso-topo { background: var(--tinta); color: var(--papel); padding: 10px 16px; font-size: 14px; position: fixed; left: 50%; bottom: 20px;
              transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(51,43,38,.25); }
.aviso-topo.erro { background: var(--no); }
.carregando { padding: 40px; text-align: center; color: var(--tinta-3); }
.sub { display: block; font-size: 12px; color: var(--tinta-3); }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .sistema { grid-template-columns: 1fr; background: none; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 25; transform: translateX(-102%); transition: transform .22s ease; }
  body.menu-on .lateral { transform: none; }
  body.menu-on .veu-menu { display: block; }
  .veu-menu { display: none; position: fixed; inset: 0; background: rgba(51,43,38,.36); z-index: 24; }
  .barra-cel { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 15;
               padding: 10px 16px; background: var(--tinta); color: var(--papel); }
  .barra-cel b { font-weight: 500; letter-spacing: .04em; }
  .barra-cel button { min-height: 40px; padding: 0 12px; background: transparent; border: 1px solid rgba(231,232,223,.35); color: var(--papel); }
  .conteudo { padding: 20px 16px 50px; }
  .cab h1 { font-size: 24px; }
  .media { grid-template-columns: 110px 1fr 36px; }
  .inv-item { grid-template-columns: 72px 1fr; }
  .inv-item > span:first-child, .inv-item .estados { grid-column: 1 / -1; }
  .tabela.cartoes thead { display: none; }
  .tabela.cartoes, .tabela.cartoes tbody, .tabela.cartoes tr, .tabela.cartoes td { display: block; width: 100%; }
  .tabela.cartoes tr { border-bottom: 1px solid var(--fio); padding: 8px 0; }
  .tabela.cartoes td { border: 0; padding: 3px 12px; }
  .tabela.cartoes td.num { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }

/* ================================================================== Central Voyage Villas (04/10/2026)
   O mesmo sistema do Portal Wellness (papel, tinta, areia, canto reto, Jost), com as peças das casas. */
.lateral .topo img, .entrada .marca img { border-radius: 50%; }
.lateral .casa b { display: block; font-weight: 500; font-size: 14px; }
.kpi.clic { cursor: pointer; }
.kpi.clic:hover { background: #fff; }
.texto-livre { white-space: pre-wrap; }
.modal .caixa.larga { max-width: 760px; }
.filtros select { min-height: 36px; padding: 0 10px; border: 1px solid var(--fio-2); background: #fff; }
.linha-selos { display: flex; flex-wrap: wrap; gap: 6px; }

/* listas */
.lista-dias, .lista-simples { list-style: none; padding: 0; }
.lista-dias li, .lista-simples li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 11px 18px; border-bottom: 1px solid var(--fio); font-size: 14px; }
.lista-dias li:last-child, .lista-simples li:last-child { border-bottom: 0; }
.lista-dias .dia { min-width: 74px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.lista-dias b, .lista-simples b { font-weight: 500; }
.lista-dias .sub, .lista-simples .sub { flex-basis: 100%; }
.lista-dias .dia + .selo + b + .sub { padding-left: 84px; }
.gaveta .lista-simples li { padding: 9px 0; }
.lista-simples li .btn { margin-left: auto; }

/* casas */
.casas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.casa-card { display: grid; gap: 7px; align-content: start; padding: 16px 18px; background: none; border: 0; text-align: left; cursor: pointer;
             box-shadow: 1px 0 0 var(--fio), 0 1px 0 var(--fio); font-size: 14px; min-width: 0; }
.casa-card:hover { background: #fff; }
.casa-card .sob { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }
.casa-card b { font-weight: 500; font-size: 16px; }
.contato { margin-bottom: 8px; }
.contato input { flex: 1 1 140px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--fio-2); background: #fff; }

/* calendário: uma linha por casa, uma coluna por dia; a barra cobre as noites */
.cal { display: grid; grid-auto-rows: 46px; min-width: 960px; position: relative; }
.cal-cab { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: var(--tinta-2);
           border-bottom: 1px solid var(--fio); background: var(--cartao-2); font-variant-numeric: tabular-nums; }
.cal-cab small { font-size: 10px; text-transform: uppercase; color: var(--tinta-3); }
.cal-dia.fds { background: #E4E4DA; }
.cal-dia.hoje { background: var(--tinta); color: var(--papel); }
.cal-dia.hoje small { color: var(--areia-2); }
.cal-casa { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-bottom: 1px solid var(--fio); border-right: 1px solid var(--fio);
            background: var(--cartao); position: sticky; left: 0; z-index: 2; font-size: 13px; min-width: 0; }
.cal-casa b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cab.cal-casa { background: var(--cartao-2); z-index: 3; }
.cal-fundo { border-bottom: 1px solid var(--fio); border-right: 1px solid #E6E6DD; }
.cal-barra { margin: 8px 1px; padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
             font-size: 12px; z-index: 1; border: 1px solid var(--tinta-3); border-left-width: 3px; background: var(--cartao-2); color: var(--tinta); }
.cal-barra.corta-ini { border-left-style: dashed; }
.cal-barra.corta-fim { border-right-style: dashed; }
.o-stays { background: var(--info-f); border-color: var(--info); }
.o-ciirus { background: var(--aj-f); border-color: var(--aj); }
.o-airbnb, .o-booking, .o-vrbo { background: var(--no-f); border-color: var(--no); }
.o-site { background: var(--ok-f); border-color: var(--ok); }
.o-outro { background: var(--areia-2); border-color: var(--areia); }
.legenda-cal { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -8px 0 20px; font-size: 12px; color: var(--tinta-2); }
.legenda-cal span { padding: 2px 8px; border: 1px solid; border-left-width: 3px; }

/* estoque e compra */
.itens-compra, .contagem { display: grid; gap: 0; border: 1px solid var(--fio); background: #fff; max-height: 50vh; overflow-y: auto; }
.item-compra { display: grid; grid-template-columns: 1fr 90px auto; gap: 4px 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--fio); font-size: 14px; }
.item-compra b { font-weight: 500; }
.item-compra .sub { grid-column: 1; }
.item-compra input[type=number] { min-height: 36px; padding: 4px 8px; border: 1px solid var(--fio-2); width: 90px; }
.itens-compra .item-compra { grid-template-columns: auto 1fr 90px auto; }
.itens-compra .item-compra input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--tinta); }

@media (max-width: 900px) {
  .casas-grade { grid-template-columns: 1fr; }
  .lista-dias .dia + .selo + b + .sub { padding-left: 0; }
  .cal { min-width: 820px; }
}
.lista-simples li.clic { cursor: pointer; }
.lista-simples li.clic:hover { background: #fff; }


/* ================================================================== tela v2 (04/10/2026)
   Título em Prata, entrada com capa, capas das casas, contraste maior. Canto reto em tudo. */
:root { --serif: "Prata", Georgia, "Times New Roman", serif; }
.cab h1, .entrada h1 { font-family: var(--serif); font-weight: 400; letter-spacing: .01em; }
.cab h1 .alg, .entrada h1 .alg { font-family: var(--sans); font-weight: 400; }

/* entrada com a foto de um lado */
.entrada { padding: 0; }
.entrada-capa { display: none; }
.entrada-lado { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; width: 100%; }
.entrada .marca { gap: 28px; }
.entrada .marca img.arco { width: 24px; height: 28px; border-radius: 0; }
@media (min-width: 820px) {
  .entrada { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 100vh; place-items: stretch; }
  .entrada-capa { display: block; overflow: hidden; background: var(--tinta); }
  .entrada-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* capa da casa */
.capa { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--cartao-2); overflow: hidden; }
.capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa.sem-capa img { display: none; }
.casa-card .capa.card { aspect-ratio: 16 / 9; margin: -16px -18px 4px; box-shadow: inset 0 -1px 0 var(--fio); }

/* checkboxes de permissão, em duas colunas quando cabe */
.checks.col { display: grid; gap: 4px 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .modal .checks.col { grid-template-columns: 1fr 1fr; } }
.checks.col label { align-items: flex-start; min-height: 32px; }

/* botão de ver a senha (04/10/2026) */
.senha-campo { position: relative; display: block; }
.senha-campo input { padding-right: 48px; }
.olho { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; display: grid; place-items: center; padding: 0;
        background: none; border: 0; color: var(--tinta-3); cursor: pointer; }
.olho:hover, .olho[aria-pressed="true"] { color: var(--tinta); }
.olho .ico { width: 20px; height: 20px; }

/* senha ou convite errado: a caixa balança, sem recarregar a tela (04/10/2026) */
@keyframes treme {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.entrada .caixa.treme { animation: treme .45s cubic-bezier(.36, .07, .19, .97) both; }
@media (prefers-reduced-motion: reduce) { .entrada .caixa.treme { animation: none; } }
