/* ===========================================================================
   O autoatendimento do Hideaway.

   MESMAS CORES DO SITE (marca.css): verde, creme, laranja, amarelo. Quem
   reservou pelo site tem de reconhecer o totem como a mesma casa -- e o
   contrario, uma tela generica de PMS ao lado da marca, e o que faz o
   autoatendimento parecer um caixa de banco.

   TUDO GRANDE. Quem opera esta tela esta de pe, com mala, de madrugada, as
   vezes sem oculos. Alvo de toque nunca abaixo de 56 px; texto de leitura
   nunca abaixo de 18 px.
   =========================================================================== */

:root {
    --verde: #20433d;
    --verde-escuro: #17322e;
    --creme: #f4edc3;
    --laranja: #ff6037;
    --amarelo: #ffd64f;

    --texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Arial Narrow', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
    background: var(--verde);
    color: var(--creme);
    font-family: var(--texto);
    font-size: 18px;
    line-height: 1.5;

    /* Nada de selecionar texto num totem: o unico efeito de arrastar o dedo sobre
       uma frase e deixar a tela azul de selecao para o proximo hospede. */
    -webkit-user-select: none;
    user-select: none;
}

.fundo-quiosque {
    min-height: 100%;
    display: flex;
    flex-direction: column;

    /* A textura de mapa da marca, em CSS: curvas de nivel. O PNG do site nao
       viaja para ca, e um verde chapado perderia o que faz a tela ser do
       Hideaway. */
    background-image:
        radial-gradient(ellipse 55% 38% at 22% 28%, transparent 40%, rgba(244,237,195,.05) 41%, transparent 43%),
        radial-gradient(ellipse 46% 30% at 22% 28%, transparent 54%, rgba(244,237,195,.05) 55%, transparent 57%),
        radial-gradient(ellipse 65% 44% at 80% 74%, transparent 44%, rgba(244,237,195,.04) 45%, transparent 47%);
}

/* ---------- topo ---------- */
.topo-quiosque {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .8;
}

.topo-quiosque .marca { font-family: var(--display); font-weight: 700; letter-spacing: .1em; }

.topo-quiosque .idiomas { display: flex; gap: 2px; }

.topo-quiosque .idiomas a {
    color: var(--creme);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(244,237,195,.25);
}

.topo-quiosque .socorro {
    margin-left: auto;
    color: var(--creme);
    text-decoration: none;
    border: 1px solid rgba(244,237,195,.35);
    border-radius: 999px;
    padding: 10px 18px;
}

.topo-quiosque .relogio { font-variant-numeric: tabular-nums; }

main { flex: 1; display: flex; }

/* ---------- as telas ---------- */
.tela-cheia {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 20px 40px 56px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.tela-cheia.estreita { max-width: 680px; }

.script {
    font-family: 'Segoe Script', 'Brush Script MT', cursive;
    color: var(--amarelo);
    font-size: 2rem;
    line-height: 1;
}

.titulo {
    font-family: var(--display);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--creme);
}

.titulo .interrogacao { color: var(--amarelo); }

.apoio { font-size: 1.15rem; opacity: .85; margin: 0; max-width: 46ch; }
.apoio.pequena { font-size: .95rem; opacity: .7; }

.icone-grande { font-size: 3.4rem; color: var(--amarelo); }

/* ---------- campos ---------- */
.campo { display: block; }
.campo > span { display: block; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-bottom: 8px; }

.entrada {
    width: 100%;
    background: rgba(250,247,238,.08);
    border: 1px solid rgba(244,237,195,.3);
    border-radius: 8px;
    color: var(--creme);
    font-family: var(--texto);
    font-size: 1.8rem;
    letter-spacing: .08em;
    padding: 16px 20px;
}

.entrada:focus { outline: 3px solid var(--amarelo); outline-offset: 2px; }

/* ---------- botoes ---------- */
.botoes-grandes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

.btn-grande {
    font-family: var(--texto);
    font-weight: 700;
    font-size: 1.15rem;
    border: 0;
    border-radius: 999px;
    padding: 18px 40px;
    min-height: 60px;
    background: var(--laranja);
    color: #fff;
    cursor: pointer;
}

.btn-grande.fantasma { background: transparent; color: var(--creme); border: 1px solid rgba(244,237,195,.4); }
.btn-grande:disabled { opacity: .55; }
.btn-grande:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

/* ---------- a ficha e a conta ---------- */
.ficha {
    background: rgba(250,247,238,.07);
    border-left: 4px solid var(--amarelo);
    border-radius: 6px;
    padding: 18px 22px;
}

.ficha .linha {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    padding: 10px 0;
    font-size: 1.05rem;
    width: 100%;
}

.ficha .linha + .linha { border-top: 1px solid rgba(244,237,195,.15); }
.ficha .linha span { opacity: .75; }
.ficha .linha.total { font-size: 1.35rem; font-weight: 700; }

/* Item da conta e BOTAO: contestar e um toque, nao um formulario. */
.ficha .linha.item {
    background: none;
    border-left: 0;
    border-right: 0;
    color: inherit;
    font-family: var(--texto);
    text-align: left;
    cursor: pointer;
}

.ficha .linha.item.contestado { opacity: .5; text-decoration: line-through; }
.ficha .linha.item em { font-style: normal; font-size: .8rem; color: var(--amarelo); margin-left: 8px; text-decoration: none; }

.regulamento {
    background: rgba(250,247,238,.07);
    border-radius: 6px;
    padding: 18px 22px;
    font-size: 1.02rem;
}

.regulamento p { margin: 0 0 12px; }
.regulamento p:last-child { margin-bottom: 0; }

.alerta {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255,214,79,.14);
    border: 1px solid rgba(255,214,79,.45);
    border-radius: 8px;
    padding: 16px 20px;
}

.alerta i { font-size: 1.5rem; color: var(--amarelo); }
.alerta b { font-size: 1.1rem; }
.alerta p { margin: 4px 0 0; opacity: .85; font-size: .98rem; }

.aviso { color: var(--amarelo); font-size: 1.05rem; margin: 0; }

/* ---------- a chave ---------- */
.chave {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    background: var(--amarelo);
    color: var(--verde-escuro);
    border-radius: 12px;
    padding: 22px 30px;
    max-width: 640px;
}

.chave small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; opacity: .75; }
.numero-quarto { font-family: var(--display); font-size: 4rem; font-weight: 700; line-height: .9; }
.pin { font-size: 3rem; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; line-height: 1; }

.bloco-qr { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.bloco-qr img { width: 190px; height: 190px; background: var(--creme); border-radius: 8px; padding: 10px; }
.bloco-qr .chamada { font-size: 1.25rem; font-weight: 600; }

/* ===========================================================================
   O guia no celular. Outra tela, outro corpo: aqui a pessoa esta ANDANDO.
   =========================================================================== */
.guia {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 32px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

.cabeca-guia { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cabeca-guia span { opacity: .7; font-size: .9rem; }
.cabeca-guia b { font-size: 1.1rem; }

.seta { font-size: 5rem; line-height: 1; color: var(--amarelo); }
.seta.chegada { color: var(--laranja); }

.metros { font-family: var(--display); font-size: 3.4rem; font-weight: 700; line-height: 1; }
.metros small { font-size: 1.1rem; opacity: .7; margin-left: 4px; }

.instrucao { font-size: 1.45rem; font-weight: 600; line-height: 1.25; margin: 0; }

.progresso { height: 5px; background: rgba(244,237,195,.2); border-radius: 3px; overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--laranja); transition: width .3s ease; }

.chegou { background: var(--amarelo); color: var(--verde-escuro); border-radius: 10px; padding: 18px 22px; }
.chegou small { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; opacity: .75; }
.chegou p { margin: 6px 0 0; font-size: .92rem; }

.planta {
    width: 100%;
    height: auto;
    max-height: 34vh;
    background: rgba(0,0,0,.16);
    border-radius: 10px;
    padding: 10px;
}

.sem-rota { text-align: center; padding: 30px 0; }
.sem-rota .numero-quarto { color: var(--amarelo); font-size: 5rem; }

.acoes { margin-top: auto; display: flex; gap: 10px; }
.acoes .btn-grande { flex: 1; padding: 18px 12px; }

@media (prefers-reduced-motion: reduce) {
    .progresso i { transition: none; }
}

@media (max-width: 640px) {
    .tela-cheia { padding: 16px 20px 40px; }
    .titulo { font-size: clamp(2rem, 9vw, 2.8rem); }
    .chave { gap: 24px; padding: 18px 22px; }
    .bloco-qr img { width: 150px; height: 150px; }
}

/* ---------------------------------------------------------------------------
   O topo no celular.

   O guia de corredor e lido NO TELEFONE, e la o topo do totem nao cabe: o botao
   de chamar a recepcao quebrava em quatro linhas e empurrava o resto da tela
   para baixo. Abaixo de 560 px ele vira so o icone -- continua do tamanho de um
   dedo, que e o que importa, e o texto nao e o que faz alguem reconhece-lo.
   --------------------------------------------------------------------------- */
.topo-quiosque .socorro { white-space: nowrap; }

@media (max-width: 560px) {
    .topo-quiosque {
        gap: 10px;
        padding: 10px 14px;
        font-size: .72rem;
        letter-spacing: .1em;
    }

    .topo-quiosque .marca { font-size: .78rem; }
    .topo-quiosque .idiomas a { padding: 7px 9px; }

    .topo-quiosque .socorro {
        padding: 8px 12px;
        margin-left: auto;
    }

    .topo-quiosque .socorro .rotulo-socorro { display: none; }

    /* O relogio sai: quem esta com o telefone na mao ja tem a hora dele na tela. */
    .topo-quiosque .relogio { display: none; }
}

@media (max-width: 380px) {
    /* Aparelho estreito: o nome do grupo cede o lugar, porque ele esta escrito
       logo abaixo, no proprio conteudo. */
    .topo-quiosque .marca { display: none; }
}