/*
 * Identidade visual do projeto Master (extraída de
 * https://www.cbvaplicativos.com.br/MasterSaquarema/praia/css/style.css em 2026-08-14).
 * Cor de destaque #9F7239 (bronze), fundo em degradê preto, fonte Roboto, logo no navbar.
 */

:root {
    --master-cor-primaria: #9F7239;
    --master-cor-primaria-hover: #705027;
    --master-cor-fundo-inicio: #000000;
    --master-cor-fundo-fim: #222222;
}

body {
    font-family: "Roboto", sans-serif;
    background-color: var(--master-cor-fundo-inicio);
    color: #333;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Roboto", sans-serif;
}

/* Envolve o conteúdo de toda página (aberto em header.php, fechado em footer.php) com o
   mesmo degradê preto → cinza-escuro usado no login do sistema Master. */
.contents {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(34, 34, 34, 1) 85%);
    min-height: calc(100vh - 90px);
    padding-bottom: 2rem;
}

/* O painel de conteúdo de cada página vira um "card" claro sobre o degradê escuro —
   sem isso, texto comum (tabelas, labels, títulos) ficaria escuro sobre fundo escuro,
   ilegível. Aplicado aqui de forma genérica (no container de nível superior de cada
   página) em vez de editar cada arquivo .php individualmente. */
.contents > .container,
.contents > .container-fluid {
    background: #f6f7fc;
    color: #333;
    border-radius: 8px;
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 576px) {
    .contents > .container,
    .contents > .container-fluid {
        padding: 1.25rem;
        margin-top: 1rem;
        border-radius: 0;
    }
}

/* Navbar preta com o mesmo degradê do sistema Master.
   sticky-top: fica visível ao rolar listas longas (reservas, relatórios etc.) em vez
   de sumir para cima da tela. */
.navbar {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(20, 20, 20, 1) 85%);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.logo-master {
    max-width: 220px;
    height: auto;
}

@media (max-width: 768px) {
    .logo-master {
        max-width: 160px;
    }
}

.navbar-nav .nav-link {
    color: #fff;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--master-cor-primaria) !important;
}

/* Cor de destaque em botões, links e estados de foco — igual ao sistema Master */
.btn-primary {
    color: #fff !important;
    background-color: var(--master-cor-primaria) !important;
    border-color: var(--master-cor-primaria) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--master-cor-primaria-hover) !important;
    border-color: var(--master-cor-primaria-hover) !important;
}

.btn-outline-primary {
    color: var(--master-cor-primaria);
    border-color: var(--master-cor-primaria);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--master-cor-primaria);
    border-color: var(--master-cor-primaria);
}

a {
    color: var(--master-cor-primaria);
}

a:hover {
    color: var(--master-cor-primaria-hover);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--master-cor-primaria);
    box-shadow: 0 0 0 0.25rem rgba(159, 114, 57, 0.25);
}

.form-check-input:checked {
    background-color: var(--master-cor-primaria);
    border-color: var(--master-cor-primaria);
}

.nav-tabs .nav-link.active {
    color: var(--master-cor-primaria);
    border-color: var(--master-cor-primaria);
}

/* Alertas com o mesmo padrão de cor sólida + texto branco do sistema Master */
.alert-success {
    color: #fff;
    background-color: #079128;
    border: none;
}

.alert-warning {
    color: #fff;
    background-color: #a47d01;
    border: none;
}

.alert-danger {
    color: #fff;
    background-color: #a40101;
    border: none;
}

/* Cards e modais ficam claros, "flutuando" sobre o fundo escuro — mesmo padrão do
   sistema Master (background #f6f7fc, texto #333) */
.card,
.modal-content {
    background: #f6f7fc;
    color: #333;
    border: none;
}

.badge.text-bg-light {
    color: #333 !important;
}

/* Voucher de reserva (confirmacao.php): fica escondido na tela, só aparece impresso. */
.voucher-cabecalho {
    text-align: center;
    margin-bottom: 24px;
}

.voucher-logo {
    max-width: 200px;
    margin-bottom: 12px;
}

.voucher-tabela {
    width: 100%;
    border-collapse: collapse;
}

.voucher-tabela th,
.voucher-tabela td {
    border: 1px solid #333;
    padding: 8px 12px;
    text-align: left;
}

.voucher-tabela th {
    width: 35%;
    background: #f0f0f0;
}

.voucher-rodape {
    margin-top: 24px;
    text-align: center;
    font-weight: bold;
}

/* Botão flutuante "voltar ao topo": escondido por padrão, main.js mostra ao rolar a
   página (ver #btn-voltar-topo). Presente em toda página (footer.php é compartilhado),
   útil sobretudo nas telas de listagem admin com tabelas longas. */
.btn-voltar-topo {
    display: none;
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: var(--master-cor-primaria);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    z-index: 1040;
}

.btn-voltar-topo:hover {
    background-color: var(--master-cor-primaria-hover);
    color: #fff;
}

.btn-voltar-topo.mostrar {
    display: block;
}

@media print {
    /* display:none (não visibility:hidden) — remove o espaço ocupado de verdade.
       Com visibility:hidden o layout inteiro da página continuava reservado,
       sobrando uma segunda página em branco atrás do voucher. */
    html, body {
        background: #fff !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .contents {
        background: none !important;
        min-height: 0 !important;
    }

    nav,
    .btn-voltar-topo,
    .contents > .container {
        display: none !important;
    }

    #voucher-impressao {
        display: block !important;
        color: #000;
        background: #fff;
    }
}