/*
 * A marca Go Hostly num lugar só: cores, a logo (SVG em paginas/_logo.html) e o
 * documento impresso (o PDF do demonstrativo, pelo "Imprimir / salvar PDF" do
 * navegador — D27), que na tela tem o mesmo desenho no painel e no portal.
 * Carregado pela apresentação, pelo portal, pelo painel e pelo card do hóspede.
 */

:root {
    --marca-fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --marca-azul: #5fb0c9;
    --marca-azul-escuro: #1f5f6b;
    --marca-tinta: #1b1b1b;
    --marca-suave: #5a6268;
    --marca-papel: #f3f3f1;
    --marca-raio: 28px;

    /* Títulos em azul: o escuro some no fundo escuro do painel, então lá clareia. */
    --marca-titulo: var(--marca-azul-escuro);
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --marca-titulo: var(--marca-azul);
    }
}

/* --- Logo -------------------------------------------------------------------- */

.logo {
    width: 220px;
    height: auto;
    display: block;
}

.logo-pequena {
    width: 96px;
}

.logo-casa {
    fill: var(--marca-azul);
}

.logo-janela {
    fill: var(--marca-tinta);
}

.logo-janela-linha {
    stroke: var(--marca-azul);
}

.logo-nome {
    font: 800 34px system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 1px;
}

.logo-hostly {
    fill: var(--marca-azul);
}

.logo-pais {
    font: 700 11px system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 6px;
}

.logo-claro .logo-sinal {
    stroke: var(--marca-tinta);
}

.logo-claro .logo-go,
.logo-claro .logo-pais {
    fill: var(--marca-tinta);
}

.logo-escuro .logo-sinal {
    stroke: #ffffff;
}

.logo-escuro .logo-go {
    fill: #ffffff;
}

.logo-escuro .logo-pais {
    fill: #9a9a9a;
}

.logo-escuro .logo-janela {
    fill: #000000;
}

/* No painel, que segue o tema do sistema: clara no claro, escura no escuro (e clara no papel). */
.logo-auto .logo-sinal {
    stroke: var(--marca-tinta);
}

.logo-auto .logo-go,
.logo-auto .logo-pais {
    fill: var(--marca-tinta);
}

@media screen and (prefers-color-scheme: dark) {
    .logo-auto .logo-sinal {
        stroke: #ffffff;
    }

    .logo-auto .logo-go {
        fill: #ffffff;
    }

    .logo-auto .logo-pais {
        fill: #9a9a9a;
    }

    .logo-auto .logo-janela {
        fill: #000000;
    }
}

/* --- Demonstrativo na tela (painel e portal) ---------------------------------- */

/* No celular o selo desce para a linha de baixo, em vez de espremer o título. */
.demonstrativo .cabecalho-demonstrativo {
    flex-wrap: wrap;
}

.demonstrativo .etiqueta {
    white-space: nowrap;
}

.demonstrativo h3 {
    color: var(--marca-titulo);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}

.demonstrativo .cascata .subtotal th,
.demonstrativo .cascata .subtotal td {
    border-top: 1px solid var(--marca-azul);
}

.demonstrativo .cascata .total th,
.demonstrativo .cascata .total td {
    padding: 10px 12px;
    color: #ffffff;
    background: var(--marca-azul-escuro);
    border-bottom: 0;
}

.demonstrativo .cascata .total th {
    border-radius: 14px 0 0 14px;
}

.demonstrativo .cascata .total td {
    border-radius: 0 14px 14px 0;
}

.demonstrativo .cascata .total.devedor td {
    color: #ffd7d3;
}

/* --- Documento impresso (demonstrativo) ------------------------------------- */

/* Só no papel: na tela o demonstrativo já está dentro do painel ou do portal. */
.so-impressao {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 14mm 14mm 16mm;
    }

    .so-impressao {
        display: block;
    }

    /* O azul da marca sai no papel também (navegadores cortam fundo por padrão). */
    .demonstrativo {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        color: var(--marca-tinta);
    }

    .demonstrativo .cabecalho-demonstrativo {
        flex-wrap: nowrap;
        align-items: center;
        padding-bottom: 10px;
        margin-bottom: 14px;
        border-bottom: 3px solid var(--marca-azul);
    }

    .demonstrativo .cabecalho-demonstrativo > div:nth-child(2) {
        flex: 1;
    }

    .demonstrativo .impresso-marca .logo {
        width: 120px;
    }

    .demonstrativo .cabecalho-demonstrativo h2 {
        font-size: 16pt;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .demonstrativo h3 {
        color: var(--marca-azul-escuro);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 10.5pt;
        margin: 14px 0 6px;
    }

    .demonstrativo .cascata .subtotal th,
    .demonstrativo .cascata .subtotal td {
        border-top: 1px solid var(--marca-azul);
    }

    .demonstrativo .cascata .total th,
    .demonstrativo .cascata .total td {
        background: var(--marca-azul-escuro);
        color: #ffffff;
        border-bottom: 0;
        padding: 8px 10px;
    }

    .demonstrativo .cascata .total.devedor td {
        color: #ffd7d3;
    }

    .demonstrativo .tabela th {
        color: var(--marca-azul-escuro);
    }

    .impresso-rodape {
        margin-top: 18px;
        padding-top: 8px;
        border-top: 1px solid var(--marca-azul);
        font-size: 8.5pt;
        color: var(--marca-suave);
        text-align: center;
    }
}