/* =========================================================================
   Dimora della Riva — app do hóspede.

   Consome o Design System v1.0. Os TOKENS vêm de `dimora.tokens.css`, que é
   cópia LITERAL do pacote entregue — fonte única, não editar aqui (§2.2).
   Este arquivo só APLICA os tokens; se um valor precisar mudar, muda lá.

   Decisões herdadas do sistema:
   - tema CLARO (Lino/Surface/Riva Ink). O `.dark` fictício foi descartado (§19.2 item 8).
   - superfície pública RETA: raio 0 em cards e CTAs; 4 px só em campos (§7.1).
   - CTA primário Noce, 11 px uppercase, tracking .28em, altura ≥44 px (§11.5).
   - hairline em `--color-border`; contorno FUNCIONAL em `--border-strong` (§4.4).
   - foco visível em Sole com offset de 3 px, igual em todo controle (§4.4, §15).
   ========================================================================= */

@import url("dimora.tokens.css");

/* --------------------------------------------------------------- tipografia
   EB Garamond (display) + Inter (corpo), com pilha de fallback SÓLIDA: se a
   fonte não carregar (rede ruim na chegada, CDN bloqueada), o app continua
   legível em Georgia/system-ui — a hierarquia não depende do download. */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap");

:root{
  /* Papéis de superfície do app (mapeados sobre os tokens da marca). */
  --app-bg: var(--color-lino);
  --app-surface: var(--color-surface);
  --app-ink: var(--color-riva-ink);
  --app-ink-2: var(--color-text-secondary);
  --app-hairline: var(--color-border);
  --app-line-strong: var(--border-strong);

  --nav-h: 68px;
  --tracking-ui: 0.28em;   /* assinatura da marca em botões e eyebrows */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--app-bg);
  color:var(--app-ink);
  font-family:var(--font-body-family);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + var(--space-6));
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{font-family:inherit}

/* Foco ÚNICO para todo controle — o sistema aponta a divergência de focus ring
   como problema (§15.3 item 3). Aqui só existe este.

   ⚠ O §4.4 permite "Sole OU Noce". Medimos: **Sole sobre Lino dá 1,81:1** e
   reprova o mínimo de 3:1 para indicador não-textual (WCAG 2.4.11/1.4.11) —
   um anel de foco que mal se enxerga é o mesmo que não ter foco para quem
   navega por teclado. Sole só passa sobre fundo escuro (7,98:1 sobre Riva Ink,
   como a própria tabela do §4.1 mostra). Como este app é todo claro, o anel é
   **Noce (5,81:1)**. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--color-noce);
  outline-offset:3px;
  border-radius:1px;
}

.wrap{max-width:640px;margin:0 auto;padding:0 var(--space-6)}

/* ------------------------------------------------------------------ marca */
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-6) 0 var(--space-5);
}
/* Wordmark em currentColor: herda a tinta do contexto (§3.4 corrigido). */
.topo a{display:inline-flex;align-items:center;min-height:44px}
.wordmark{width:180px;color:var(--app-ink)}
.wordmark svg,.wordmark img{width:100%;height:auto}
.monograma{width:44px;color:var(--color-noce)}

/* Eyebrow — 11 px, uppercase, tracking .28em, Noce (§5.3). */
.eyebrow{
  font-family:var(--font-body-family);
  font-size:11px;font-weight:500;line-height:1.2;
  text-transform:uppercase;letter-spacing:var(--tracking-ui);
  color:var(--color-noce);
}
.eyebrow-ink{color:var(--color-riva-ink);opacity:.55}

/* Display itálico — a assinatura editorial (§5.3). */
.display-italic{
  font-family:var(--font-display-family);
  font-style:italic;font-weight:400;
  letter-spacing:-0.015em;line-height:1.05;
}

h1,h2,h3{font-family:var(--font-display-family);font-weight:500;letter-spacing:-0.01em;margin:0}
h1{font-size:36px;line-height:1.1}
h2{font-size:24px;line-height:1.25}
h3{font-size:20px;line-height:1.25}
@media (min-width:640px){ h1{font-size:48px} }

p{margin:0}
.lead{font-size:18px;line-height:1.7;color:var(--app-ink-2)}
.meta{font-size:13px;line-height:1.6;color:var(--app-ink-2)}
.caption{font-size:12px;line-height:1.6;color:var(--app-ink-2)}

/* Divisor de 48 px do section header (§11.4). */
.divisor{width:48px;height:1px;background:var(--color-noce);margin:var(--space-4) 0}

/* ------------------------------------------------------------------- hero */
.hero{
  background:var(--app-surface);
  border:1px solid var(--app-hairline);
  padding:var(--space-8) var(--space-6);
}
.hero .display-italic{font-size:34px;margin:var(--space-2) 0 var(--space-1)}
@media (min-width:640px){ .hero{padding:var(--space-10)} .hero .display-italic{font-size:44px} }

/* Datas da estadia: hairline de 1 px criada pelo gap, sem sombra (§11.6). */
.datas{
  display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-4);
  align-items:center;margin-top:var(--space-6);
  padding-top:var(--space-6);border-top:1px solid var(--app-hairline);
}
.data-box .rot{font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-ui);color:var(--app-ink-2)}
.data-box .val{font-family:var(--font-display-family);font-size:22px;line-height:1.2;margin-top:var(--space-1)}
.data-box .hh{font-size:13px;color:var(--app-ink-2)}
.seta{color:var(--color-noce);font-size:18px}

/* Contagem — informação, não urgência: a marca evita contadores promocionais (§1.1). */
.contagem{
  display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-5);padding:var(--space-2) var(--space-3);
  background:var(--status-accent-bg);color:var(--status-accent-fg);
  font-size:12px;letter-spacing:.02em;border-radius:2px;
}

/* ------------------------------------------------------------------ seções */
.secao{margin-top:var(--space-10)}
.secao > .eyebrow{margin-bottom:var(--space-3)}

.card{
  background:var(--app-surface);
  border:1px solid var(--app-hairline);
  padding:var(--space-6);
  margin-bottom:var(--space-4);
}
/* ⚠ Título de card é <h2>, não <h3> — e continua com o TAMANHO de h3.
   O app não usa h2 em lugar nenhum, então antes a sequência era h1 → h3: quem
   navega por cabeçalhos no leitor de tela ouve um nível "pulado" e fica sem
   saber se perdeu conteúdo pelo caminho. Agora a hierarquia é contínua e a
   aparência é a mesma — o peso visual vem daqui, não do número da tag. */
.card h2,.card h3{font-size:20px;line-height:1.25;margin-bottom:var(--space-2)}
.card p{color:var(--app-ink-2);font-size:15px}

/* Atalhos: grid com gap de 1 px sobre fundo, formando hairline (§6.5 pilares). */
.atalhos{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--app-hairline);border:1px solid var(--app-hairline);
}
.atalho{
  background:var(--app-surface);
  padding:var(--space-5);min-height:120px;
  display:flex;flex-direction:column;gap:var(--space-2);
  transition:background var(--duration-base) var(--ease-emphasized);
}
.atalho:hover,.atalho:active{background:var(--app-bg)}
.atalho .ic{color:var(--color-noce)}
.atalho .tt{font-family:var(--font-display-family);font-size:19px;line-height:1.25}
.atalho .ds{font-size:12px;color:var(--app-ink-2);line-height:1.5}
.atalho.destaque{background:var(--app-bg)}
/* Indisponível não é só cor: o texto sempre diz o motivo (§15, "nunca só cor"). */
.atalho.off .tt,.atalho.off .ic{color:var(--app-ink-2)}
@media (min-width:640px){ .atalhos{grid-template-columns:repeat(3,1fr)} }

/* ----------------------------------------------------------------- botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  width:100%;min-height:44px;padding:var(--space-4) var(--space-8);
  border:1px solid transparent;border-radius:0;   /* público é reto (§7.1) */
  background:var(--color-noce);color:var(--color-lino);
  font-family:var(--font-body-family);
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-ui);
  cursor:pointer;
  transition:background var(--duration-base) var(--ease-emphasized),
             color var(--duration-base) var(--ease-emphasized);
}
.btn:hover{background:var(--color-riva-ink)}          /* §11.5 */
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--app-ink);border-color:var(--app-line-strong)}
.btn-ghost:hover{background:var(--app-surface);color:var(--app-ink)}

/* Link editorial: sublinhado que cresce da esquerda em 500 ms (§11.5).
   ⚠ min-height 44px: o texto tem 11 px, então SEM isto o alvo de toque ficaria
   em ~37 px — abaixo do mínimo do §15.1. O §15.3 item 2 registra exatamente
   esse defeito (botões com área clicável mínima) no código original. */
.link-ed{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tracking-ui);
  color:var(--color-noce);position:relative;
}
.link-ed:after{
  content:"";position:absolute;left:0;bottom:12px;height:1px;width:0;
  background:currentColor;transition:width var(--duration-base) var(--ease-emphasized);
}
.link-ed:hover:after,.link-ed:focus-visible:after{width:100%}

/* ----------------------------------------------------------------- chaves */
.chave{
  display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;
  background:var(--app-surface);border:1px solid var(--app-hairline);border-radius:0;
  padding:var(--space-5);margin-bottom:var(--space-3);color:var(--app-ink);cursor:pointer;
  transition:border-color var(--duration-base) var(--ease-emphasized),
             background var(--duration-base) var(--ease-emphasized);
}
.chave:hover:not([disabled]){background:var(--app-bg);border-color:var(--app-line-strong)}
.chave[disabled]{cursor:not-allowed;background:var(--app-bg)}
.chave[disabled] .nm,.chave[disabled] .ic{color:var(--app-ink-2)}
.chave .ic{flex:none;color:var(--color-noce)}
.chave .nm{font-family:var(--font-display-family);font-size:19px;line-height:1.25;display:block}
.chave .ds{font-size:12px;color:var(--app-ink-2)}
.chave .st{
  margin-left:auto;text-align:right;min-width:72px;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--app-ink-2);
}
/* Estados por FUNDO + TEXTO (nunca só cor) — pares do §4.5. */
.chave.ok{border-color:var(--status-success-fg)}
.chave.ok .st{color:var(--status-success-fg)}
.chave.falhou{border-color:var(--status-danger-fg)}
.chave.falhou .st{color:var(--status-danger-fg)}
.chave.abrindo .ic{animation:respira 1.2s var(--ease-emphasized) infinite}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.35}}

/* =========================================================== A CASA (cômodos)
   O toque tem que responder ANTES da rede: as transições são curtas
   (--duration-fast) e o estado muda no clique (otimista). O que chega do
   servidor só reconcilia. */

/* Chips de cômodo — trilho horizontal, sem barra de rolagem visível. */
.comodos{
  display:flex;gap:var(--space-2);overflow-x:auto;padding:2px 0 var(--space-4);
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;
}
.comodos::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 var(--space-4);scroll-snap-align:start;
  background:var(--app-surface);border:1px solid var(--app-hairline);
  color:var(--app-ink-2);cursor:pointer;white-space:nowrap;
  font-family:inherit;font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-ui);
  transition:background var(--duration-fast) var(--ease-emphasized),
             color var(--duration-fast) var(--ease-emphasized),
             border-color var(--duration-fast) var(--ease-emphasized);
}
.chip[aria-selected="true"]{
  background:var(--color-riva-ink);border-color:var(--color-riva-ink);color:var(--color-lino);
}
.chip .n{
  font-size:10px;letter-spacing:0;opacity:.7;
}

/* Cenas — o atalho nobre: um toque muda o ambiente inteiro. */
.cenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--app-hairline);border:1px solid var(--app-hairline);margin-bottom:var(--space-6);}
.cena{
  background:var(--app-surface);border:none;cursor:pointer;color:var(--app-ink);
  padding:var(--space-5) var(--space-4);min-height:96px;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  font-family:inherit;text-align:left;
  transition:background var(--duration-fast) var(--ease-emphasized);
}
.cena:hover{background:var(--app-bg)}
.cena .ic{color:var(--color-noce)}
.cena .tt{font-family:var(--font-display-family);font-size:18px;line-height:1.2}
.cena.rodando{background:var(--status-accent-bg)}
.cena.rodando .ic{animation:respira 1.1s var(--ease-emphasized) infinite}
.cena.feita .ic{color:var(--status-success-fg)}

/* ===================================================== CARTÃO DE APARELHO
   ⚠ O CARTÃO INTEIRO é o botão — não uma linha com um interruptorzinho no
   canto. Duas razões: alvo grande (o dedo acerta de primeira, no escuro, com a
   mão molhada da piscina) e leitura correta — uma grade de peças se lê como
   AMBIENTE; uma lista com controles à direita se lê como formulário.

   O estado LIGADO aparece como LUZ: o ícone acende em Noce sobre um halo
   quente. Não é enfeite — é a metáfora certa, e o olho encontra na hora o que
   está aceso num cômodo com oito itens. O texto ("Ligado"/"Desligado") continua
   embaixo, porque estado nunca pode depender só de cor. */
.aparelhos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;background:var(--app-hairline);
  border:1px solid var(--app-hairline);
}
.ap-wrap{display:contents}          /* o form não pode virar célula da grade */
.ap-form{margin:0;display:contents}

.ap{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  width:100%;min-height:132px;padding:var(--space-5) var(--space-4);
  background:var(--app-surface);border:0;border-radius:0;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--app-ink);
  transition:background var(--duration-fast) var(--ease-emphasized);
}
.ap:hover{background:var(--app-bg)}

/* A "lâmpada": o ícone dentro de um disco que ACENDE. */
.ap .lamp{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--app-line-strong);color:var(--app-ink-2);
  transition:color var(--duration-fast) var(--ease-emphasized),
             border-color var(--duration-fast) var(--ease-emphasized),
             background var(--duration-fast) var(--ease-emphasized),
             box-shadow var(--duration-fast) var(--ease-emphasized);
}
.ap .nm{font-family:var(--font-display-family);font-size:17px;line-height:1.2;margin-top:auto}
.ap .st{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--app-ink-2)}

/* LIGADO. A borda em Noce (5,81:1) é o contorno de estado; o halo é o efeito. */
.ap.on{background:var(--app-bg);box-shadow:inset 0 0 0 1px var(--color-noce)}
.ap.on .lamp{
  color:var(--color-noce);border-color:var(--color-noce);
  background:var(--status-accent-bg);
  box-shadow:0 0 0 6px rgba(196,176,141,.28);   /* Sole a 28% — halo, não informação */
}
.ap.on .st{color:var(--status-accent-fg)}

/* Persiana e afins: PULSO, sem estado ligado/desligado. */
.ap.pulsavel .lamp{border-style:dashed}
.ap.acionando .lamp{animation:respira 1.1s var(--ease-emphasized) infinite}

/* Sem resposta: some o convite ao toque, mas o texto explica. */
.ap.off-line{opacity:.55;cursor:not-allowed}
.ap.off-line .st{color:var(--status-danger-fg);opacity:1}
.ap.erro{animation:tremor .4s}
@keyframes tremor{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Cabeçalho do ambiente: o que está aceso + apagar tudo. */
.comodo-topo{
  display:flex;align-items:center;gap:var(--space-3);
  margin:var(--space-4) 0 var(--space-3);
}
.comodo-resumo{
  flex:1;display:flex;align-items:center;gap:8px;margin:0;
  font-size:12px;color:var(--app-ink-2);
}
.comodo-resumo .pt{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--app-line-strong);
}
.comodo-resumo.aceso .pt{background:var(--color-noce)}
.comodo-resumo.aceso{color:var(--status-accent-fg)}
.apagar-form{margin:0;flex:none}
.apagar{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 var(--space-3);
  background:transparent;border:1px solid var(--app-line-strong);border-radius:2px;
  color:var(--app-ink);cursor:pointer;font-family:inherit;
  font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  transition:background var(--duration-fast) var(--ease-emphasized);
}
.apagar:hover{background:var(--app-surface)}
.apagar[disabled]{opacity:.5;cursor:wait}
/* Nada aceso ⇒ o botão não tem o que fazer. Escondido, não desabilitado: um
   botão morto no topo de todo cômodo é ruído permanente. */
.comodo-topo.vazio .apagar-form{display:none}

@media (max-width:380px){
  .aparelhos{grid-template-columns:1fr 1fr}
  .ap{min-height:118px;padding:var(--space-4) var(--space-3)}
  .ap .lamp{width:40px;height:40px}
  .ap .nm{font-size:15px}
}

/* "Como usar" — o manual dentro do app, sem PDF. */
.como{margin-top:var(--space-6)}
.como details{
  background:var(--app-surface);border:1px solid var(--app-hairline);margin-bottom:var(--space-3);
}
.como summary{
  display:flex;align-items:center;gap:10px;padding:var(--space-4) var(--space-5);
  cursor:pointer;min-height:44px;font-size:15px;
}
.como summary::-webkit-details-marker{display:none}
.como summary .seta{margin-left:auto;color:var(--app-ink-2);transition:transform var(--duration-fast) var(--ease-emphasized)}
.como details[open] summary .seta{transform:rotate(90deg)}
.como .corpo{
  padding:0 var(--space-5) var(--space-5);border-top:1px solid var(--app-hairline);
  padding-top:var(--space-4);white-space:pre-line;font-size:15px;line-height:1.75;color:var(--app-ink-2);
}
/* Ajuda de UM aparelho: some junto com ele quando o cômodo troca. */
.ap-ajuda{
  border:1px solid var(--app-hairline);border-top:none;background:var(--app-bg);
  padding:var(--space-4) var(--space-5);font-size:14px;line-height:1.7;color:var(--app-ink-2);
  white-space:pre-line;margin-top:-1px;
}

/* ------------------------------------------------------------------- wifi */
.wifi-qr{
  width:min(232px,62vw);aspect-ratio:1;margin:var(--space-6) auto;
  /* ⚠ BRANCO PURO de propósito (único hex cru do arquivo): leitor de QR precisa
     de contraste máximo. Surface (#FAF8F5) até funciona, mas em luz fraca e
     câmera ruim o branco puro é o que garante a leitura na primeira tentativa.
     O SVG vem do servidor (App\Support\QrCode) e já traz a zona silenciosa. */
  background:#fff;border:1px solid var(--app-hairline);padding:var(--space-2);
  display:flex;align-items:center;justify-content:center;
}
.wifi-qr svg,.wifi-qr canvas,.wifi-qr img{width:100%;height:auto;display:block}
.campo-copia{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--app-bg);border:1px solid var(--app-hairline);
  padding:var(--space-3) var(--space-4);margin-top:var(--space-2);
}
.campo-copia .rot{font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-ui);color:var(--app-ink-2)}
.campo-copia .vl{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;word-break:break-all}
.campo-copia button{
  margin-left:auto;flex:none;min-width:44px;min-height:44px;
  background:transparent;border:1px solid var(--app-line-strong);border-radius:2px;
  color:var(--app-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--duration-base) var(--ease-emphasized);
}
.campo-copia button:hover{background:var(--app-surface)}

/* -------------------------------------------------------------- formulário */
.campo{margin-bottom:var(--space-5)}
.campo label{
  display:block;font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tracking-ui);
  color:var(--app-ink);opacity:.75;margin-bottom:var(--space-2);
}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:44px;                       /* fluxo principal (§12.2) */
  background:var(--app-surface);
  border:1px solid var(--app-line-strong);          /* contorno FUNCIONAL, não hairline */
  border-radius:var(--radius);                      /* 4 px */
  padding:var(--space-3) var(--space-4);
  color:var(--app-ink);font-family:inherit;font-size:16px;  /* 16px evita zoom no iOS */
  transition:border-color var(--duration-fast) var(--ease-emphasized);
}
/* ⚠ PLACEHOLDER NÃO PODE SER `--color-pietra`. O token está descrito no pacote
   como "neutro suave / placeholders", mas medindo dá **1,41:1 sobre Surface** —
   reprova o mínimo de 4,5:1 do texto (WCAG 1.4.3) com folga enorme. Placeholder
   é texto na tela; se ninguém consegue ler, ele não está ajudando ninguém.
   Usamos `--app-ink-2` (6,13:1) e marcamos a diferença por ITÁLICO, não por
   cor: assim continua lendo como "dica" e não como valor já preenchido — e o
   itálico é a assinatura editorial da marca. É a mesma classe de divergência
   medida do anel de foco em Sole (ver o bloco de :focus-visible acima). */
.campo input::placeholder,
.campo textarea::placeholder{color:var(--app-ink-2);font-style:italic}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--color-noce)}
.campo .dica{font-size:13px;line-height:1.6;color:var(--app-ink-2);margin-top:var(--space-2)}
.opcional{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--app-ink-2)}

.pin-input{
  letter-spacing:.55em;text-align:center;
  font-size:26px !important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ----------------------------------------------------------------- avisos */
.aviso{
  padding:var(--space-4);margin-bottom:var(--space-4);font-size:14px;line-height:1.6;
  border-left:2px solid transparent;border-radius:2px;
}
.aviso.info{background:var(--status-info-bg);color:var(--status-info-fg);border-left-color:var(--status-info-fg)}
.aviso.ok{background:var(--status-success-bg);color:var(--status-success-fg);border-left-color:var(--status-success-fg)}
.aviso.erro{background:var(--status-danger-bg);color:var(--status-danger-fg);border-left-color:var(--status-danger-fg)}
.aviso.atencao{background:var(--status-warning-bg);color:var(--status-warning-fg);border-left-color:var(--status-warning-fg)}
.aviso.neutro{background:var(--status-neutral-bg);color:var(--status-neutral-fg);border-left-color:var(--status-neutral-fg)}

.selo{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:4px var(--space-2);border-radius:2px;
  font-size:11px;font-weight:500;letter-spacing:.04em;
  background:var(--status-neutral-bg);color:var(--status-neutral-fg);
  border:1px solid currentColor;
}
.selo.ok{background:var(--status-success-bg);color:var(--status-success-fg)}
.selo.pendente{background:var(--status-pending-bg);color:var(--status-pending-fg)}

/* ----------------------------------------------------------------- listas */
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:var(--space-3) 0;border-bottom:1px solid var(--app-hairline);font-size:15px}
.lista li:last-child{border-bottom:none}

.contato{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--app-hairline)}
.contato:last-child{border-bottom:none}
.contato .ic{flex:none;color:var(--color-acqua-riva)}
.contato .nm{font-size:15px;display:block}
.contato .fn{font-size:12px;color:var(--app-ink-2)}
.contato .cta{margin-left:auto}

/* ------------------------------------------------------------- navegação */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--app-surface);border-top:1px solid var(--app-hairline);
  display:flex;align-items:stretch;
}
.nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:44px;color:var(--app-ink-2);
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  border-top:2px solid transparent;      /* barra Noce do item ativo (§13.1) */
  transition:color var(--duration-base) var(--ease-emphasized);
}
.nav a[aria-current="page"]{color:var(--color-noce);border-top-color:var(--color-noce)}

/* --------------------------------------------------- páginas de entrada */
.entrada{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:var(--space-8) var(--space-6);background:var(--app-bg);
}
.entrada .caixa{width:100%;max-width:420px;text-align:center}
.entrada .monograma{margin:0 auto var(--space-6)}
.entrada h1{font-family:var(--font-display-family);font-style:italic;font-weight:400;
  font-size:32px;line-height:1.1;margin-bottom:var(--space-3)}
.entrada .lead{margin-bottom:var(--space-8);font-size:16px}
.entrada form{text-align:left}
.entrada .rodape{margin-top:var(--space-8);font-size:13px;color:var(--app-ink-2);line-height:1.6}
.entrada .divisor{margin:var(--space-4) auto}

/* ------------------------------------------------------------------ toast */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--space-5));
  transform:translateX(-50%) translateY(8px);
  background:var(--color-riva-ink);color:var(--color-lino);
  padding:var(--space-3) var(--space-5);font-size:14px;border-radius:2px;
  max-width:88vw;text-align:center;z-index:60;
  opacity:0;pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease-emphasized),
             transform var(--duration-fast) var(--ease-emphasized);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.erro{background:var(--status-danger-fg)}

/* Só de leitor de tela. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* ⚠ O "pular para o conteúdo" é um .sr-only que PRECISA reaparecer ao receber
   foco — sem isto quem navega por teclado recebe foco num link invisível e não
   tem como saber que ele existe (WCAG 2.4.7). O link existia; só não funcionava
   para quem ele serve. */
.sr-only:focus,.sr-only:focus-visible{
  position:fixed;top:12px;left:12px;z-index:100;
  width:auto;height:auto;min-height:44px;margin:0;clip:auto;overflow:visible;
  display:inline-flex;align-items:center;padding:0 16px;
  background:var(--color-riva-ink);color:var(--color-lino);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;
  outline:2px solid var(--color-noce);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ── ZONAS no trilho de cômodos ────────────────────────────────────────────
   O título da zona é RÓTULO, não item tocável: sem ícone, sem pílula, sem
   hover — a mesma disciplina do cabeçalho de seção do menu (§3.3 do sgci.io).
   Com ícone e fundo, ele viraria visualmente idêntico a um chip de cômodo e a
   pessoa tocaria nele esperando navegar. */
.comodos-zonas{ margin-bottom:var(--space-4) }
.zona-t{
  margin:var(--space-4) 0 var(--space-2); font-size:11px; text-transform:uppercase;
  letter-spacing:.28em; color:var(--app-ink-2); font-weight:400;
}
.comodos-zonas > .zona-t:first-child{ margin-top:0 }
/* A zona no alto do ambiente responde "Suíte 1 de qual pavimento?" — sem ela,
   num prédio com cômodos de nome repetido o hóspede não sabe onde está. */
.comodo-zona{
  margin:0 0 2px; font-size:11px; text-transform:uppercase; letter-spacing:.28em;
  color:var(--app-ink-2);
}