/* =============================================================================
   Painel administrativo — ajustes sobre o AdminLTE 3.
   A identidade do restaurante entra pela cor da sidebar e dos destaques.
   ========================================================================== */

/* ----- A paleta da marca -----------------------------------------------------
   Estes são os valores de FÁBRICA. Quem opera o SaaS troca os quatro em
   /plataforma/configuracoes › Aparência, e `App\Support\Tema` injeta um
   `:root` novo logo DEPOIS deste arquivo, nos dois layouts de painel e nas
   quatro telas de login. Mesma especificidade, e quem vem depois vence — é o
   motivo de tudo abaixo ser `var()` e não hexadecimal solto.

   ⚠️ Cor de marca nova nesta lista precisa ser calculada também no `Tema::css()`,
   senão ela fica presa no valor de fábrica enquanto o resto da tela muda.     */
:root {
    --terra:        #7a3b1d;
    --terra-escuro: #5a2a13;
    --dende:        #d98324;
    --folha:        #2f5d3f;

    /* Derivados da marca — o `Tema` recalcula os cinco a partir das quatro
       acima. Texto legível sobre a cor principal, o fundo do selo, a caixa de
       apoio, o véu do login e as duas pontas do degradê da tela de entrada. */
    /* São exatamente o que `Tema::css()` devolve para a paleta de fábrica —
       conferidos, não estimados. Se divergirem, a tela muda de tom ao gravar a
       MESMA paleta que já estava valendo, e ninguém entende por quê. */
    --marca-texto:  #ffffff;
    --marca-fraca:  #efe7e4;
    --marca-tenue:  #faf7f6;
    --destaque-veu: rgba(217, 131, 36, .22);
    --login-topo:   #411e0e;
    --login-base:   #274c34;

    /* Sidebar: a tinta e os véus do menu. O AdminLTE assume menu escuro e
       escreve `#c2c7d0` e `rgba(255,255,255,…)` na mão — com a cor do menu
       editável, uma escolha clara deixaria o menu inteiro ilegível. O `Tema`
       vira os quatro conforme a claridade da cor escolhida. */
    --sidebar-texto:       #ffffff;
    --sidebar-texto-suave: rgba(255, 255, 255, .78);
    --sidebar-veu:         rgba(255, 255, 255, .12);
    --sidebar-veu-fraco:   rgba(255, 255, 255, .08);

    /* Barra superior. Ver o bloco "Barra superior e menu" no fim do arquivo. */
    --barra-fundo:       #fff;
    --barra-texto:       #343a40;
    --barra-texto-forte: #23282d;
    --barra-borda:       #e6e9ec;
    --barra-hover:       rgba(16, 24, 40, .05);
    --barra-sombra:      rgba(16, 24, 40, .04);

    /* ----- Paleta de apoio -------------------------------------------------
       O AdminLTE traz o vermelho/verde/azul do Bootstrap 4, que são cores de
       alerta usadas como cor de marca — num painel inteiro elas gritam e
       nenhuma conversa com o terra da casa. Estas são as mesmas famílias em
       tom fechado, e são elas que os cartões de número e os selos usam.      */
    --verde:        #2f5d3f;
    --verde-claro:  #eaf3ed;
    --azul:         #3d6b7d;
    --azul-claro:   #eaf1f4;
    --ambar:        #b8681f;
    --ambar-claro:  #fbf1e4;
    --tijolo:       #a63a2e;
    --tijolo-claro: #fbebe9;
    --chumbo:       #5c6670;
    --chumbo-claro: #eef0f2;

    /* ----- Tinta e superfícies --------------------------------------------- */
    --tinta:        #343a40;  /* texto normal            */
    --tinta-forte:  #23282d;  /* títulos                 */
    --tinta-suave:  #6c757d;  /* apoio                   */
    --tinta-fraca:  #8a939b;  /* legenda, rótulo de eixo */
    --borda:        #e6e9ec;
    --borda-clara:  #f1f3f5;
    --superficie:   #fbfbfc;  /* caixa de apoio dentro do card */

    --fonte-texto:  Roboto, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --fonte-titulo: Poppins, Roboto, "Source Sans Pro", -apple-system, "Segoe UI", Arial, sans-serif;

    --raio:         .4rem;
    --sombra:       0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-alta:  0 4px 16px rgba(16, 24, 40, .1);
}

/* Sidebar na cor da casa, sem a barra lateral colorida do tema padrão. */
.main-sidebar { background-color: var(--terra-escuro) !important; }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--terra) !important;
    color: var(--marca-texto);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: var(--sidebar-veu-fraco);
}

/* A tinta do menu. O AdminLTE fixa `#c2c7d0`, que só serve a menu escuro. */
.main-sidebar .nav-sidebar .nav-link { color: var(--sidebar-texto-suave); }
.main-sidebar .nav-sidebar .nav-link:hover { color: var(--sidebar-texto); }

/* Nome de restaurante longo não pode vazar os 250px da sidebar. O `.brand-link`
   do AdminLTE é `white-space: nowrap`, e como `.main-sidebar` fica com
   `overflow-y: hidden`, o CSS promove o eixo livre a `auto` — o excesso do nome
   virava uma barra de rolagem HORIZONTAL no rodapé do menu. Cortamos no texto
   (o nome inteiro fica no `title` do link) e travamos o eixo por garantia.
   O corte é em UMA linha de propósito: `.sidebar` tem altura
   `calc(100% - 3.5rem)`, contando com um cabeçalho de linha única — deixar o
   nome quebrar empurraria o último item do menu para fora da área visível. */
.main-sidebar { overflow-x: hidden; }

.brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--sidebar-veu);
}

.brand-text {
    font-size: .98rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* O AdminLTE já pede `scrollbar-width: none` na sidebar (a barra vertical é
   para sumir quando o menu passa da altura da tela), mas isso só vale no
   Firefox — o Chrome precisa do pseudo-elemento. A rolagem pela roda do mouse
   continua funcionando. */
.sidebar::-webkit-scrollbar { width: 0; height: 0; }

/* `--marca-texto` é branco ou quase-preto conforme a claridade da cor
   principal, calculado no `Tema`. Sem ele, uma paleta clara escolhida no painel
   daria botão de texto branco sobre fundo claro — e o estrago só apareceria
   depois de salvo, na tela de outra pessoa. */
.btn-primary {
    background-color: var(--terra);
    border-color: var(--terra);
    color: var(--marca-texto);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--terra-escuro);
    border-color: var(--terra-escuro);
    color: var(--marca-texto);
}

.btn-outline-primary { color: var(--terra); border-color: var(--terra); }
.btn-outline-primary:hover { background-color: var(--terra); border-color: var(--terra); color: var(--marca-texto); }

a { color: var(--terra); }
a:hover { color: var(--terra-escuro); }

.text-primary { color: var(--terra) !important; }
.bg-primary   { background-color: var(--terra) !important; color: var(--marca-texto) !important; }

/* ----- Cartões de número --------------------------------------------------- */

.small-box .icon { opacity: .22; }

/* O cartão do caixa usa a cor da marca, que o AdminLTE não tem como classe. */
.small-box.caixa-terra { background: var(--terra); color: var(--marca-texto); }
.small-box.caixa-terra .small-box-footer { color: var(--marca-texto); opacity: .85; }

/* Valor em real não cabe no corpo de 2.2rem que o tema dá ao número. */
.small-box .inner h3.valor-monetario { font-size: 1.65rem; }

/* Dinheiro em coluna de tabela: alinhar pelo dígito, não pela largura da fonte. */
.valor-monetario { font-variant-numeric: tabular-nums; }

/* O card é a moldura de tudo no painel: quem mexer aqui mexe nas 26 telas. */
.card {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1.25rem;
}

/* ⚠️ O cabeçalho continua sendo BLOCO, e o `.card-tools` continua indo para a
   direita por `float` (o AdminLTE já traz o clearfix). Virá-lo em flex quebra
   a única exceção da casa: `/admin/configuracoes` põe a barra de abas dentro
   de um `.card-header p-0 pt-1 border-bottom-0`, e como filho flex a `ul` das
   abas perde a largura toda. */
.card-header {
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--borda-clara);
    background: transparent;
}

.card-title {
    font-family: var(--fonte-titulo);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tinta-forte);
}

.card-body   { padding: 1.1rem; }
.card-footer { padding: .8rem 1.1rem; border-top: 1px solid var(--borda-clara); background: var(--superficie); }

/* Card com a listagem colada nas bordas (`card-body p-0`): o rodapé de
   paginação não pode ganhar o fundo cinza, senão parece outra seção. */
.card-body.p-0 + .card-footer { background: #fff; }

/* ----- Painel: variação contra o período anterior -------------------------- */

.variacao {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.variacao.sobe  { color: #2f7a4f; }
.variacao.desce { color: #c0392b; }
.variacao.igual { color: #8a939b; }

/* Sobre o fundo colorido do small-box, verde e vermelho somem — ali a seta já
   diz a direção, e o que falta é contraste. */
.variacao-clara { color: rgba(255, 255, 255, .92); }

.variacao-nota {
    font-size: .75rem;
    color: rgba(255, 255, 255, .75);
    white-space: nowrap;
}

/* ----- Painel: cartões de indicador ---------------------------------------- */

.metrica {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: .95rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    box-shadow: var(--sombra);
}

.metrica-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.metrica-corpo  { min-width: 0; }
.metrica-valor  { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #3a3f44; }

.metrica-rotulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a939b;
}

.metrica-nota { font-size: .78rem; color: #6c757d; line-height: 1.3; }

/* ----- Painel: gráficos ---------------------------------------------------- */

/* Chart.js com `maintainAspectRatio: false` mede o elemento-pai; sem altura
   aqui o canvas nasce com 0 e o gráfico não aparece. */
.grafico { position: relative; width: 100%; }
.grafico-alto  { height: 300px; }
.grafico-medio { height: 240px; }

/* ----- Painel: barras de proporção ----------------------------------------- */

.linha-barra + .linha-barra { margin-top: .85rem; }

.linha-barra-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .85rem;
    margin-bottom: .25rem;
}

.linha-barra .progress { height: 8px; margin-bottom: .2rem; background: #eef0f2; }
.linha-barra-nota { font-size: .76rem; color: #8a939b; }

/* ----- Painel: rodapé de totais -------------------------------------------- */

.resumo-rodape {
    display: flex;
    flex-wrap: wrap;
}

.resumo-rodape > div {
    flex: 1 1 0;
    min-width: 7rem;
    padding: .7rem .5rem;
    text-align: center;
    border-left: 1px solid #f1f3f5;
}

.resumo-rodape > div:first-child { border-left: none; }

.resumo-valor  { display: block; font-size: 1.05rem; font-weight: 700; color: #3a3f44; }
.resumo-rotulo { display: block; font-size: .74rem; color: #8a939b; }

/* Título de bloco dentro de um card que já tem cabeçalho. */
.titulo-bloco {
    margin: 1.1rem 0 .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a939b;
}

/* ----- Painel: agenda e pratos --------------------------------------------- */

.tabela-rolavel { max-height: 520px; overflow-y: auto; }

/* Quem já chegou sai do caminho visual de quem ainda não. */
.linha-chegou td { background: #f6faf7; }

.prato-barra { display: flex; align-items: center; gap: .5rem; }
.prato-barra .progress { flex: 1 1 auto; height: 8px; margin: 0; background: #eef0f2; }

.prato-qtd {
    min-width: 2rem;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ----- Painel: últimos recebimentos ---------------------------------------- */

.pagamento-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 0;
    color: inherit;
    border-top: 1px solid #f1f3f5;
}

.pagamento-item:first-child { border-top: none; }
.pagamento-item:hover { color: inherit; text-decoration: none; background: #fbfbfc; }

.pagamento-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: .8rem;
    color: #fff;
    flex-shrink: 0;
}

.pagamento-icone.online { background: #3d7d9c; }
.pagamento-icone.balcao { background: var(--folha); }

.pagamento-corpo  { flex: 1 1 auto; min-width: 0; font-size: .88rem; }
.pagamento-valor  { font-weight: 700; white-space: nowrap; }

/* ----- Plataforma: trilha de eventos --------------------------------------- */

.evento-item {
    display: flex;
    gap: .6rem;
    padding: .45rem 0;
    font-size: .85rem;
    border-top: 1px solid #f1f3f5;
}

.evento-item:first-child { border-top: none; }

/* Bolinha alinhada com a primeira linha do texto, não com o bloco todo. */
.evento-marca {
    width: 8px;
    height: 8px;
    margin-top: .42rem;
    border-radius: 50%;
    background: var(--dende);
    flex-shrink: 0;
}

.evento-corpo { min-width: 0; }

/* ----- Tabelas ------------------------------------------------------------- */

table.dataTable td, table.dataTable th { vertical-align: middle; }
.table td, .table th { vertical-align: middle; }

.tabela-compacta td, .tabela-compacta th { padding: .45rem .6rem; font-size: .88rem; }

/* ----- A célula de ações de uma linha (editar, excluir) ---------------------
   ⚠️ Sem o `nowrap` os botões EMPILHAM, e não é a largura declarada no `style`
   que decide isso: com a tabela sob pressão de espaço (a lista de pratos tem
   nome, descrição, marcadores e "onde é servido" na mesma linha), o navegador
   encolhe a coluna até o conteúdo mínimo dela — que, havendo espaço entre os
   dois botões, é a largura de UM. O `width: 1%` é o par disso: numa tabela que
   já ocupa 100%, ele quer dizer "o mínimo que couber", e sem o nowrap junto
   seria justamente o pedido de empilhar.

   Os dois vão dentro de um `.btn-group`: encostados, eles se leem como um
   controle só da linha, e o alvo de toque não fica dependendo do respiro entre
   duas caixas de 26px.                                                       */

.celula-acoes {
    width: 1%;
    white-space: nowrap;
}

.celula-acoes .btn-group + .btn-group { margin-left: .35rem; }

.codigo-reserva {
    font-family: "Courier New", monospace;
    font-weight: 700;
    letter-spacing: .05em;
}

/* ----- Validação de QR Code ------------------------------------------------ */

#leitor-qr {
    max-width: 460px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

#leitor-qr video { width: 100% !important; display: block; }

.resultado-validacao {
    border-radius: 12px;
    padding: 26px;
    text-align: center;
    color: #fff;
    animation: aparecer .2s ease;
}

.resultado-valido       { background: linear-gradient(135deg, #2f7a4f, #1d5334); }
.resultado-ja_validado  { background: linear-gradient(135deg, #b3541e, #7a3a11); }
.resultado-nao_pago     { background: linear-gradient(135deg, #b3541e, #7a3a11); }
.resultado-cancelada,
.resultado-invalido     { background: linear-gradient(135deg, #b3261e, #7d1b16); }

.resultado-validacao .icone-resultado { font-size: 3.2rem; margin-bottom: 10px; }
.resultado-validacao h3 { color: #fff; font-weight: 700; }

.ficha-validacao {
    background: #fff;
    border-radius: 0 0 12px 12px;
    padding: 20px 24px;
    border: 1px solid var(--borda);
    border-top: none;
}

.ficha-validacao .linha {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--borda);
    font-size: .92rem;
}

.ficha-validacao .linha:last-child { border-bottom: none; }
.ficha-validacao .linha .rotulo { color: #6c757d; }
.ficha-validacao .linha .valor  { font-weight: 600; text-align: right; }

@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ----- Agenda do dia ------------------------------------------------------- */

.bloco-horario {
    border-left: 4px solid var(--dende);
    background: #fff;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.bloco-horario.chegou   { border-left-color: var(--folha); background: #f6faf7; }
.bloco-horario.pendente { border-left-color: #ffc107; }
.bloco-horario .hora    { font-size: 1.15rem; font-weight: 700; color: var(--terra-escuro); }

/* ----- Cardápio ------------------------------------------------------------ */

.miniatura {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: #f4f6f9;
}

.item-indisponivel { opacity: .55; }

/* ----- Impressão do comprovante -------------------------------------------- */

@media print {
    .main-sidebar, .main-header, .main-footer, .content-header, .no-print { display: none !important; }
    .content-wrapper { margin-left: 0 !important; }
    body { background: #fff !important; }
}

/* ----- Login --------------------------------------------------------------- */

.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* A cor da sidebar no meio, com a de apoio embaixo; o radial da cor de
       destaque por cima tira o ar de degradê de gerador e dá profundidade.
       As três pontas saem do `Tema`, então a tela de entrada acompanha a
       paleta escolhida — é a primeira coisa que quem usa o painel vê. */
    background:
        radial-gradient(1200px 600px at 15% 0%, var(--destaque-veu), transparent 60%),
        linear-gradient(150deg, var(--login-topo), var(--terra-escuro) 45%, var(--login-base));
}

.caixa-login {
    width: 100%;
    max-width: 410px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .15);
    overflow: hidden;
}

.caixa-login .topo {
    padding: 30px 28px 26px;
    text-align: center;
    color: #fff;
    background: var(--terra-escuro);
    border-bottom: 3px solid var(--dende);
}

/* O ícone ganhou uma moldura redonda: solto, num cabeçalho escuro, ele lia
   como enfeite; dentro do círculo lê como marca. */
.caixa-login .topo .icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 1.6rem;
    color: var(--dende);
}

.caixa-login .topo h1 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: #fff;
    letter-spacing: -.01em;
}

.caixa-login .corpo { padding: 28px; }
.caixa-login .corpo label { font-size: .84rem; }
.caixa-login .btn-block { padding: .55rem; font-weight: 600; }

/* ----- Ver a senha ----------------------------------------------------------
   Quem monta o botão é `assets/js/ver-senha.js`, que o põe no lugar do cadeado
   decorativo do campo. Ele leva a classe `.input-group-text` junto justamente
   para herdar o desenho daquela caixinha — o que muda aqui é só o que a
   diferencia de um enfeite: o cursor, a resposta ao passar o mouse e o anel de
   foco, que um <div> não tinha e um botão precisa ter.                        */
.btn-ver-senha {
    cursor: pointer;
    color: var(--tinta-suave);
    transition: color .15s ease, background-color .15s ease;
}

.btn-ver-senha:hover { color: var(--terra); }

.btn-ver-senha:focus {
    outline: 0;
    color: var(--terra);
    box-shadow: 0 0 0 .2rem var(--destaque-veu);
    /* Sobe acima do campo: sem isso a borda do input come metade do anel. */
    position: relative;
    z-index: 2;
}

/* ----- Modais de cadastro --------------------------------------------------
   Formulário longo dividido em seções, cada campo com a sua explicação. As
   regras são escopadas em .modal-cadastro / .form-secao de propósito: mexer em
   `.form-group label` solto reestilizaria os dois painéis inteiros.          */

.modal-cadastro .modal-header { background: var(--marca-tenue); }

.modal-subtitulo {
    margin: 3px 0 0;
    font-size: .82rem;
    line-height: 1.35;
    color: #6c757d;
    max-width: 44rem;
}

.form-secao {
    padding: 18px 0;
    border-top: 1px solid #edf0f3;
}

.form-secao:first-child { padding-top: 0; border-top: none; }
.form-secao:last-child  { padding-bottom: 0; }

/* Em aba, a própria aba já separa: o traço e o respiro de cima sobram. */
.tab-content > .form-secao { padding-top: 0; border-top: none; }

/* As abas ficam FORA do .modal-body de propósito: com
   .modal-dialog-scrollable quem rola é o corpo, e a fila de abas dentro dele
   sumiria para cima na primeira rolagem. */
.nav-modal {
    flex-shrink: 0;
    padding: 0 1rem;
    background: var(--marca-tenue);
    border-bottom: 1px solid #dee2e6;
}

.nav-modal .nav-link {
    padding: .5rem .8rem;
    font-size: .84rem;
    font-weight: 600;
    color: #6c757d;
}

.nav-modal .nav-link i { margin-right: 5px; opacity: .8; }

/* O :not(.active) é necessário: sem ele o hover apagaria a borda que fecha a
   aba aberta contra o corpo do modal. */
.nav-modal .nav-link:not(.active):hover {
    color: var(--terra);
    border-color: transparent;
}

.nav-modal .nav-link.active {
    color: var(--terra);
    box-shadow: inset 0 2px 0 var(--terra);
}

/* Sem isto o modal encolhe e cresce a cada troca de aba. */
.modal-cadastro .tab-content { min-height: 330px; }

.form-secao-titulo {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--terra);
    margin-bottom: 3px;
}

.form-secao-titulo i { margin-right: 5px; opacity: .75; }

.form-secao-ajuda {
    font-size: .84rem;
    color: #6c757d;
    margin-bottom: 14px;
}

.form-secao label { font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }
.form-secao .custom-control-label { font-weight: 400; }
.form-secao .form-text { line-height: 1.4; }

.rotulo-opcional {
    font-weight: 400;
    font-size: .74rem;
    color: #8a939b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Faixa de aviso dentro do modal — menos pesada que um .alert do Bootstrap. */
.aviso-modal {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--dende);
    border-radius: 0 .3rem .3rem 0;
    background: var(--marca-tenue);
    font-size: .84rem;
    line-height: 1.4;
    color: #5c5348;
}

.aviso-modal i { margin-top: 2px; color: var(--dende); }

.caixa-dias {
    padding: 10px 12px 4px;
    border: 1px solid #ced4da;
    border-radius: var(--raio);
    background: #fff;
}

.caixa-dias .custom-control { margin-bottom: 6px; }

.atalhos-dias .btn { margin-right: 3px; }

.previa-imagem {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #ced4da;
    border-radius: .3rem;
    background: #f8f9fa;
}

.previa-imagem img {
    width: 88px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    background: #e9ecef;
    flex-shrink: 0;
}

/* ----- Marcação de categorias (dentro de modal) ----------------------------
   Um prato pode estar em várias categorias; com muitas cadastradas a lista
   passaria da altura do modal, então ela rola dentro da própria caixa.       */

.caixa-categorias {
    max-height: 190px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: var(--raio);
    background: #fff;
}

.caixa-categorias .custom-control {
    padding-bottom: 4px;
}

.caixa-categorias .badge {
    font-weight: 400;
}

/* No formulário do prato não há modal a caber: a tela é dele. A caixa mantém a
   moldura (é o que separa a marcação do resto do card) e perde a rolagem
   interna — era ela que escondia justamente as categorias que se veio marcar,
   e é o motivo de o cadastro ter ganhado endereço próprio. */
.form-prato .caixa-categorias {
    max-height: none;
    overflow-y: visible;
}

/* Os selos das abas do prato ("fora do cardápio", "oculto"). Peso normal para
   não competirem com o rótulo da aba, que é o que se lê primeiro. */
.form-prato .nav-tabs .nav-link .badge {
    font-weight: 400;
    vertical-align: middle;
}

/* Selo vazio não deixa buraco no rótulo: no caminho normal — prato visível e
   disponível — o de visibilidade não tem texto nenhum. */
.form-prato .nav-tabs .nav-link .badge:empty {
    display: none;
}

/* ----- Salão (a tela do garçom) ---------------------------------------------
   Único lugar do painel desenhado para o celular primeiro: é usado de pé, com
   uma mão, e muitas vezes com a tela suja. Daí o alvo grande em tudo que se
   toca e o cartão inteiro sendo o link — não um "ver" de 12px no canto.       */

/* ⚠️ A largura é travada em PIXEL, não numa coluna da grade. Com `col-lg-8`, a
   mesma tela que cabe na mão vira, num monitor, um "Abrir mesa" de mil pixels e
   um contador de seção a meia tela do rótulo dele — os dois defeitos que se via
   no caixa. Travada assim, o desenho é o mesmo nos dois lugares e o que muda é
   só a folga em volta.                                                        */
.salao-coluna {
    max-width: 680px;
    margin: 0 auto;
}

/* Duas ações, lado a lado a partir do tablet. No celular a grade de uma coluna
   já as deixa da largura da tela — daí o markup não precisar de `btn-block`. */
.salao-acoes {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

@media (min-width: 576px) {
    .salao-acoes { grid-template-columns: 1fr 1fr; }
}

/* ----- A barra do dia -------------------------------------------------------
   As setas são links de verdade (alvo de dedo, e funcionam sem JS); o campo
   continua submetendo sozinho no `change`. A palavra ao lado do campo é o que
   impede alguém de trabalhar uma tarde inteira olhando a lista de ontem.     */

.salao-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.salao-dia-seta {
    width: 42px;
    border: 1px solid var(--borda);
    color: var(--tinta-suave);
}

.salao-dia-seta:hover {
    border-color: var(--terra);
    color: var(--terra);
}

.salao-dia-campo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
}

.salao-dia-rotulo {
    font-weight: 600;
    color: var(--tinta-forte);
    white-space: nowrap;
}

/* O campo já mora dentro da caixa acima: a borda dele seria uma segunda moldura
   colada na primeira. */
.salao-dia-campo .form-control {
    width: auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding-left: 0;
}

.salao-dia-hoje {
    padding: 0 4px;
    font-size: .85rem;
}

/* ----- Rótulo de seção ------------------------------------------------------
   O contador cola no rótulo, e o fio ocupa o resto da linha. Antes os dois eram
   as pontas de um `space-between`: numa tela larga, o "0" ficava tão longe do
   "NA CASA" que não se lia como o contador dele.                             */

.salao-secao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--tinta-suave);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.salao-secao::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borda);
}

.salao-contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--marca-fraca);
    color: var(--terra);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Quem ainda não chegou não disputa a atenção com quem está na mesa. */
.salao-secao-espera .salao-contagem {
    background: var(--chumbo-claro);
    color: var(--chumbo);
}

/* ----- O cartão da conta ---------------------------------------------------
   A faixa da esquerda é o que se lê de relance: terra = está na casa,
   cinza = ainda esperado, azul = retirada (não ocupa mesa nenhuma).          */

.salao-cartao {
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--terra);
    border-radius: var(--raio);
    background: #fff;
    color: inherit;
    box-shadow: var(--sombra);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.salao-cartao-espera  { border-left-color: var(--chumbo); }
.salao-cartao-retirada { border-left-color: var(--azul); }

/* ⚠️ O cartão NÃO é clicável — nem ele, nem o corpo dele (decisão do dono,
   14/08). O cartão inteiro era um `<a>`; com os botões de ação no rodapé, o
   mesmo dedo passou a ter dois alvos, e o toque que errava o botão levava
   embora da lista. Quem abre a conta é o botão "Ver conta".

   Por isso não há mais hover de borda nem o `translateY` que havia aqui: os
   dois prometiam um clique que não existe. O realce sobrou só no foco de
   teclado, que é real — ele é de algum botão de dentro. */
.salao-cartao-corpo { display: block; }

.salao-cartao:focus-within {
    border-color: var(--terra);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .10);
}

/* Por que esta conta não tem botão de lançar nem de fechar. Fica entre o corpo
   e as ações porque é a resposta à pergunta que o rodapé provoca. */
.salao-cartao-aviso {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--borda-clara);
    font-size: .8125rem;
    color: var(--tinta-suave);
}

/* Com o aviso acima, o rodapé de ações não repete a linha divisória. */
.salao-cartao-aviso + .salao-cartao-acoes {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

/* As ações da conta: o que se faz com ela sem precisar abri-la. A linha de
   cima separa o que é informação do que é botão — sem ela, o dedo mira no
   "Lançar pedido" e acerta o saldo. */
.salao-cartao-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--borda-clara);
}

.salao-cartao-acoes .btn { flex: 1 1 auto; }

/* Conta encerrada pelo caixa: continua no dia, mas sem oferecer o que o
   servidor recusaria. O cinza é a diferença que se lê de longe, com a lista
   cheia. */
.salao-cartao-fechada {
    border-left-color: var(--tinta-fraca);
    background: var(--superficie);
}

.salao-cartao-fechada .salao-mesa { color: var(--tinta-suave); }


.salao-cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.salao-mesa {
    font-family: var(--fonte-titulo);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tinta-forte);
}

.salao-mesa .fa-chair { color: var(--tinta-fraca); }

.salao-cartao-retirada .salao-mesa { font-size: 1.05rem; color: var(--azul); }

.salao-cliente {
    margin: 3px 0 7px;
    font-weight: 600;
    line-height: 1.25;
}

/* Hora, refeição e quantidade numa linha só, separadas por ponto — três
   colunas espalhadas por `space-between` deixavam buraco no meio. */
.salao-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: .8125rem;
    color: var(--tinta-suave);
}

.salao-meta span + span::before {
    content: '·';
    margin-right: 8px;
    opacity: .55;
}

.salao-meta .fas,
.salao-meta .far { margin-right: 5px; }

/* O que falta fazer nesta conta, e é do garçom: atribuir a mesa. */
.salao-pendencia {
    color: var(--ambar);
    font-weight: 600;
}

.salao-conta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--borda-clara);
    font-size: .875rem;
}

.salao-conta-total { color: var(--tinta-suave); }
.salao-conta-total strong { color: var(--tinta-forte); }

/* ⚠️ É etiqueta, não alarme: o garçom lê o número para avisar o cliente — quem
   recebe é o caixa. Vermelho cheio aqui pediria uma ação que esta tela não
   tem. */
.salao-saldo {
    padding: 2px 9px;
    border-radius: 11px;
    background: var(--tijolo-claro);
    color: var(--tijolo);
    font-weight: 700;
    white-space: nowrap;
}

.salao-quitada {
    color: var(--verde);
    font-weight: 600;
    white-space: nowrap;
}

.salao-quitada .fas { margin-right: 5px; }

/* A mesa já definida, na ficha da conta: o nome dela e o "Trocar" que devolve o
   seletor. ⚠️ Classe própria em vez de `d-flex` de propósito — o utilitário do
   Bootstrap é `display: flex !important` e vence o `[hidden]` do reboot, então
   o bloco continuaria à vista quando o JS o escondesse. */
.salao-mesa-atual {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.salao-mesa-atual[hidden] { display: none; }

/* Formas de pagamento do caixa: cartões de toque, não um `<select>`. A escolha
   é feita com uma mão só, com o cliente na frente, e a forma errada é o erro
   que só aparece no fechamento do turno — um menu suspenso esconde as opções
   justamente na hora de conferir. O `<input>` fica escondido, e quem pinta é o
   `span` irmão: assim o rótulo inteiro é área clicável. */

.formas-pagamento {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.forma-pagamento { margin: 0; }

.forma-pagamento input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.forma-pagamento span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    color: var(--tinta);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.forma-pagamento span .fas,
.forma-pagamento span .far { color: var(--tinta-suave); }

.forma-pagamento input:checked + span {
    border-color: var(--terra);
    background: var(--marca-fraca);
    color: var(--terra-escuro);
    font-weight: 600;
}

.forma-pagamento input:checked + span .fas,
.forma-pagamento input:checked + span .far { color: var(--terra); }

/* Sem isto a escolha por teclado (setas, Tab) não aparece em lugar nenhum — o
   `<input>` que receberia o foco é o que está escondido. */
.forma-pagamento input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--marca-fraca);
}

/* Recebimento dividido: parte no dinheiro, parte no cartão.

   Enquanto há uma forma só, o bloco não se anuncia — é a tela de sempre, e uma
   moldura em volta do único campo daria peso a uma divisão que não existe. A
   partir da segunda forma o container ganha `.dividido` e cada parte vira uma
   caixa com contorno: é o que separa "R$ 10,00 no dinheiro" de "R$ 4,00 no
   cartão" quando os dois pares de campo/formas ficam empilhados na mesma
   modal. O `×` segue a mesma regra — com uma parte só não há o que tirar, e um
   botão que não faz nada só enganaria. */

.parte-recebimento + .parte-recebimento { margin-top: 10px; }

.partes-recebimento.dividido .parte-recebimento {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    padding: 10px 12px;
}

.parte-recebimento-valor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.parte-recebimento-valor .input-group { flex: 1; }

.parte-remover {
    display: none;
    color: var(--tinta-fraca);
    padding: 0 6px;
    line-height: 1;
}

.parte-remover:hover,
.parte-remover:focus { color: var(--tijolo); }

.partes-recebimento.dividido .parte-remover { display: inline-block; }

/* Numa parte dividida os cartões ficam menores: cinco formas por linha, vezes
   até cinco linhas, passariam da altura da modal no celular do caixa. */
.partes-recebimento.dividido .forma-pagamento span {
    padding: 6px 10px;
    font-size: .875rem;
}

/* A conta da divisão, em uma frase.

   ⚠️ Sobrar saldo NÃO é erro — é o recebimento parcial, que sempre foi
   legítimo (o cliente adianta metade e continua na mesa). Por isso o aviso é
   informativo até a soma PASSAR do saldo, que é o único caso que o servidor
   recusa. Um bloqueio antes disso transformaria o pagamento parcial em defeito. */
.parte-resumo {
    display: none;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--raio);
    background: var(--chumbo-claro);
    color: var(--tinta);
    font-size: .9rem;
}

.parte-resumo.quita   { background: var(--verde-claro);  color: var(--verde); }
.parte-resumo.parcial { background: var(--ambar-claro);  color: var(--ambar); }
.parte-resumo.excede  { background: var(--tijolo-claro); color: var(--tijolo); }

/* Contador de quantidade: os dois botões e o campo formam um bloco só, para o
   dedo não precisar de pontaria entre um e outro. O campo fica no meio porque
   é o que se lê; o `-` à esquerda e o `+` à direita seguem a ordem natural. */

.salao-contador {
    display: flex;
    align-items: stretch;
}

.salao-contador .btn {
    width: 44px;
    flex-shrink: 0;
}

.salao-contador .btn:first-child {
    border-radius: var(--raio) 0 0 var(--raio);
}

.salao-contador .btn:last-child {
    border-radius: 0 .25rem .25rem 0;
}

.salao-contador .prato-qtd {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
    font-weight: 600;
    /* Some com as setinhas do input number: elas são menores que a área de
       toque de um dedo e ficam ao lado dos botões de verdade. */
    -moz-appearance: textfield;
}

.salao-contador .prato-qtd::-webkit-outer-spin-button,
.salao-contador .prato-qtd::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* ----- Configurações em abas ------------------------------------------------
   A tela é longa e mistura assuntos que não se conversam (identidade, regras
   de reserva, dinheiro, endereço). As abas separam isso; o que sobra aqui é
   só o ritmo interno de cada painel — títulos de seção, caixas de apoio à
   direita e a ficha da conta do Mercado Pago.                                */

/* A cor e o peso das abas saíram daqui: são o padrão de `.nav-tabs` na camada
   compartilhada, no fim do arquivo. Ficou só o que é desta tela. */

.pagina-config .nav-tabs .nav-link .badge {
    font-weight: 400;
    vertical-align: middle;
}

.pagina-config .tab-content > .tab-pane {
    padding-top: .25rem;
}

/* Separador de assunto dentro do painel. Fica claro de propósito: é hierarquia
   abaixo do título da aba, não um segundo cabeçalho competindo com ele. */
.titulo-secao {
    margin: 1.25rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--borda);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #869099;
}

.tab-pane > form > .row > div > .titulo-secao:first-child,
.tab-pane > .row > div > form > .titulo-secao:first-child,
.tab-pane > .row > div > .titulo-secao:first-child {
    margin-top: 0;
}

/* ----- Regras da reserva (topo de /admin/refeicoes) -------------------------
   As regras vieram de uma aba de Configurações para o card do topo desta tela.
   Herdam o ritmo de lá (`.titulo-secao`, `.caixa-ajuda`, `.linha-switch`), e o
   que muda é só o berço: aqui a primeira coluna não é um `.tab-pane`, então o
   reset de margem acima não a alcançaria e o primeiro título nasceria afastado
   do topo do card.                                                           */
.card-regras .card-body > .row > div > .titulo-secao:first-child {
    margin-top: 0;
}

/* Em telas médias as três colunas empilham, e aí o título da coluna seguinte
   precisa do respiro que o `margin-top` do desktop dá. */
@media (max-width: 1199.98px) {
    .card-regras .card-body > .row > div + div > .titulo-secao:first-child {
        margin-top: 1.25rem;
    }

    .card-regras .caixa-ajuda {
        margin-top: 1.25rem;
    }
}

.rodape-aba {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borda);
}

/* Coluna de apoio: explica a aba sem disputar espaço com os campos. */
.caixa-ajuda {
    padding: 1rem 1.1rem;
    border: 1px solid var(--borda);
    border-left: 3px solid var(--dende);
    border-radius: var(--raio);
    background: #fbfbfc;
    font-size: .875rem;
}

.caixa-ajuda h6 {
    margin-bottom: .6rem;
    font-weight: 700;
    color: #4a5158;
}

.caixa-ajuda p:last-child { margin-bottom: 0; }

.caixa-ajuda-perigo {
    border-left-color: #dc3545;
    background: #fff8f8;
}

.lista-limpa {
    margin: 0 0 .75rem;
    padding-left: 1.1rem;
}

.lista-limpa li { margin-bottom: .4rem; }

/* Switch com a explicação embaixo, e não ao lado: o rótulo curto responde
   "o que é" e a linha de baixo responde "o que acontece se eu desligar". */
.linha-switch {
    margin-bottom: 1rem;
}

.linha-switch small {
    margin-left: 2.25rem;
    line-height: 1.3;
}

.caixa-link {
    padding: .9rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fbfbfc;
    word-break: break-all;
}

/* O "mesapronta.app/" na frente do campo é longo para uma coluna de apoio:
   encolhe a etiqueta em vez de espremer o endereço, que é o que se digita. */
.grupo-endereco .input-group-prepend .input-group-text {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .8rem;
}

/* Empilhada (abaixo de lg), a coluna de apoio vem depois dos campos e
   precisa de ar — sem isso ela encosta no botão Salvar. */
@media (max-width: 991.98px) {
    .coluna-apoio {
        margin-top: 1.5rem;
    }
}

/* Ficha da conta do Mercado Pago. */
.conta-mp {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #d4edda;
    border-radius: var(--raio);
    background: #f6fbf7;
}

.conta-mp-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #28a745;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.tabela-conta th {
    width: 40%;
    font-weight: 400;
    color: #869099;
    border-top: 0;
    padding-left: 0;
}

.tabela-conta td {
    border-top: 0;
    padding-left: 0;
}

.tabela-conta tr + tr th,
.tabela-conta tr + tr td {
    border-top: 1px solid #f1f3f5;
}

/* ----- "Quem faz o quê" (modal da tela de Usuários) -------------------------
   Cada perfil é um bloco com duas colunas: o que pode à esquerda, o que não
   pode à direita. As duas listas têm o mesmo peso visual de propósito — na
   hora de escolher o perfil de alguém, o que decide costuma ser a coluna da
   direita.                                                                   */

.perfil {
    padding: 14px 0;
    border-top: 1px solid var(--borda);
}

.perfil:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.perfil-destaque {
    margin: 6px -14px 0;
    padding: 14px;
    border-top: 0;
    border-left: 4px solid #28a745;
    background: #f6fbf7;
}

/* A faixa do garçom sangra até a borda da caixa que a contém, e o padding do
   modal (1rem, do Bootstrap) não é o do card (14px, nosso). Sem este ajuste a
   faixa verde pararia 2px antes da borda — o bastante para parecer erro. */

.modal-body > .perfil-destaque {
    margin-right: -1rem;
    margin-left: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

.perfil-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 8px;
}

.perfil-lista {
    margin: 0;
    padding-left: 22px;
    font-size: .9rem;
}

.perfil-lista li {
    margin-bottom: 2px;
}

.perfil-pode {
    list-style: none;
    padding-left: 4px;
}

.perfil-pode li::before {
    content: "\f00c";
    margin-right: 8px;
    color: #28a745;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.perfil-nao-pode {
    list-style: none;
    padding-left: 4px;
    color: #6c757d;
}

.perfil-nao-pode li::before {
    content: "\f00d";
    margin-right: 8px;
    color: #dc3545;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* O link é para ser lido e copiado, então quebra em vez de estourar a caixa —
   a URL do tenant é longa e no celular passaria da largura da tela. */

.perfil-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.perfil-link code {
    padding: 4px 8px;
    border-radius: var(--raio);
    background: #f1f3f5;
    color: #495057;
    word-break: break-all;
}

/* ---------------------------------------------------------------------------
   Pré-visualização da página de conteúdo (/plataforma/site/paginas)

   O painel não carrega o `tema.css` do site, então o bloco precisa de um
   mínimo aqui — senão a prévia mostraria títulos do mesmo tamanho do texto e
   enganaria justamente sobre o que ela existe para mostrar.
--------------------------------------------------------------------------- */
.pagina-conteudo h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.pagina-conteudo h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.pagina-conteudo > :first-child { margin-top: 0; }
.pagina-conteudo p, .pagina-conteudo li { line-height: 1.7; }

.pagina-conteudo blockquote {
    border-left: 3px solid #c8a26a;
    background: #fbf7f1;
    padding: .5rem 0 .5rem 1rem;
    margin: 0 0 1rem;
    font-size: .95rem;
}

/* ---------------------------------------------------------------------------
   Minha assinatura (/{tenant}/admin/assinatura)

   A tela responde, nesta ordem, três perguntas: em que situação a conta está,
   quanto ela custa hoje e de quem sai a cobrança. O que era uma pilha de `dl`
   virou ficha de preço — mensalidade e comissão lado a lado, no tamanho de
   quem decide dinheiro, e não de quem lê rodapé.
--------------------------------------------------------------------------- */

.plano-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
    margin-bottom: 1rem;
}

.plano-nome {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #3a3f44;
}

.plano-descricao {
    margin: 0;
    font-size: .85rem;
    color: #8a939b;
}

/* Ficha de preço. `auto-fit` em vez de colunas do grid do Bootstrap porque os
   cartões são 2 ou 3 conforme a situação da conta — com coluna fixa, o caso de
   dois deixaria um buraco do tamanho do terceiro. */
.preco-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
}

.preco-item {
    padding: .85rem 1rem;
    border: 1px solid var(--borda);
    border-radius: .3rem;
    background: #fbfbfc;
}

/* Verde só onde o número é uma boa notícia — preço zerado. Usado no plano sem
   cobrança; nos demais o cartão fica neutro, senão o verde perde o sentido. */
.preco-item.preco-zerado {
    border-color: #cfe8d8;
    background: #f6fbf7;
}

.preco-rotulo {
    display: block;
    margin-bottom: .2rem;
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #869099;
}

.preco-valor {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: #3a3f44;
    font-variant-numeric: tabular-nums;
}

.preco-valor small {
    font-size: .55em;
    font-weight: 600;
    color: #8a939b;
}

.preco-zerado .preco-valor { color: #2f7a4f; }

/* O preço de tabela riscado fica ABAIXO do valor cobrado, não ao lado: quem
   abre a tela quer ler primeiro o que paga, e só depois de onde veio o
   desconto. Ao lado, os dois números competiam. */
.preco-antes {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: #8a939b;
}

.preco-nota {
    display: block;
    margin-top: .4rem;
    font-size: .76rem;
    line-height: 1.35;
    color: #8a939b;
}

/* "O que isso quer dizer" — a explicação que faltava embaixo dos preços
   riscados. Ícone fora do fluxo do texto para as linhas de duas alturas
   continuarem alinhadas pela margem. */
.plano-explica {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.plano-explica li {
    position: relative;
    margin-bottom: .65rem;
    padding-left: 1.65rem;
    font-size: .875rem;
    line-height: 1.45;
}

.plano-explica li:last-child { margin-bottom: 0; }

.plano-explica li > .fas {
    position: absolute;
    top: .28rem;
    left: 0;
    font-size: .82rem;
    color: #2f7a4f;
}

.plano-explica li.explica-atencao > .fas { color: var(--dende); }

.economia-total {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #2f7a4f;
    font-variant-numeric: tabular-nums;
}

/* ----- Vitrine de planos ---------------------------------------------------- */

.plano-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.15rem 1.1rem;
    border: 1px solid var(--borda);
    border-radius: .35rem;
    background: #fff;
    transition: box-shadow .15s ease-in-out;
}

.plano-cartao:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .07); }

.plano-cartao.destacado {
    border-color: var(--dende);
    box-shadow: 0 2px 10px rgba(217, 131, 36, .12);
}

.plano-cartao.atual {
    border-color: #2f7a4f;
    background: #f8fcf9;
}

/* A fita sai para fora do cartão; sem o respiro no `.row` que os abriga ela
   seria cortada pelo cartão de cima. */
.plano-fita {
    position: absolute;
    top: -.62rem;
    right: .9rem;
    padding: .12rem .55rem;
    border-radius: .8rem;
    background: var(--dende);
    color: #fff;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.plano-cartao.atual .plano-fita { background: #2f7a4f; }

.plano-vitrine { margin-top: .7rem; }

.plano-cartao-nome {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #3a3f44;
}

.plano-cartao-descricao {
    margin: .15rem 0 .6rem;
    font-size: .8rem;
    line-height: 1.35;
    color: #8a939b;
    min-height: 2.1rem;
}

.plano-cartao-preco {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: #3a3f44;
    font-variant-numeric: tabular-nums;
}

.plano-cartao-preco small {
    font-size: .5em;
    font-weight: 600;
    color: #8a939b;
}

.plano-recursos {
    margin: .85rem 0 1rem;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    color: #6c757d;
}

.plano-recursos li {
    position: relative;
    margin-bottom: .4rem;
    padding-left: 1.4rem;
    line-height: 1.35;
}

.plano-recursos li > .fas {
    position: absolute;
    top: .22rem;
    left: 0;
    font-size: .75rem;
    color: #2f7a4f;
}

/* ----- Uso do plano --------------------------------------------------------- */

.uso-linha + .uso-linha { margin-top: 1rem; }

.uso-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .3rem;
    font-size: .85rem;
}

.uso-rotulo { color: #495057; }

.uso-numero {
    color: #8a939b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.uso-numero strong { color: #3a3f44; }

.uso-linha .progress {
    height: 6px;
    margin: 0;
    background: #eef0f2;
}

/* Limite ilimitado não tem barra para desenhar — a régua tracejada ocupa o
   mesmo lugar para as linhas não dançarem de altura entre si. */
.uso-sem-limite {
    height: 6px;
    border-bottom: 1px dashed #dfe3e6;
}

/* ----- Estado vazio suave ---------------------------------------------------- */

.vazio-suave {
    padding: 1.75rem 1rem;
    text-align: center;
    font-size: .85rem;
    line-height: 1.45;
    color: #8a939b;
}

.vazio-suave > .fas {
    display: block;
    margin-bottom: .55rem;
    font-size: 1.7rem;
    opacity: .3;
}

/* Data e palavra ("27/08/2026", "Sem assinatura") no lugar onde os outros
   cartões mostram dinheiro: o corpo de 1.4rem é calibrado para um valor curto e
   quebraria a linha num texto. */
.preco-valor.preco-texto { font-size: 1.15rem; }

/* ----- Mapas de visitantes (de onde acessam) ---------------------------------
   O desenho vem do `assets/js/mapa-visitantes.js`; aqui está só a aparência.
   As mesmas regras servem o mapa do Brasil e o do mundo — é o `viewBox` de
   cada geometria que dá a proporção, e por isso não há nada de altura fixa
   aqui: um mapa-múndi com altura de mapa do Brasil ficaria esmagado.

   ⚠️ A cor é UMA só — a da marca —, e a intensidade de cada área é o
   `fill-opacity` que o JS calcula. É isso que faz o mapa acompanhar a paleta
   escolhida em /plataforma/configuracoes › Aparência: uma escala de cores
   fixa aqui ficaria presa no tom de fábrica enquanto o resto da tela muda.  */

.mapa-visitantes {
    position: relative;   /* a dica é posicionada dentro dele */
    max-width: 460px;
    margin: 0 auto;
}

/* O mundo é quase três vezes mais largo que alto: apertado em 460 px, os
   países da Europa viram um borrão de um pixel. */
#mapa-dos-paises.mapa-visitantes { max-width: 100%; }

.mapa-visitantes svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mapa-visitantes .area {
    fill: var(--terra);
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linejoin: round;
    cursor: default;
    transition: fill-opacity .12s ease;
}

/* O traço de 1.6 é calibrado no viewBox de 1000 do mapa do Brasil. No mundo,
   a mesma espessura sobre países pequenos come a área inteira — a Bélgica
   viraria só borda. */
#mapa-dos-paises .area { stroke-width: .8; }

/* Área sem acesso ainda precisa se ler como área, e não como buraco no mapa:
   cinza de superfície, com a mesma borda branca das demais. */
.mapa-visitantes .area-vazia {
    fill: var(--chumbo-claro);
}

.mapa-visitantes .area:hover {
    fill-opacity: 1;
    stroke: var(--tinta-forte);
    stroke-width: 1.2;
}

/* `pointer-events: none` é o que impede a dica de disputar o ponteiro com a
   área embaixo dela — sem isso, o mapa piscaria ao mover o mouse devagar. */
.mapa-visitantes-dica {
    position: absolute;
    z-index: 3;
    display: none;
    max-width: 220px;
    padding: .35rem .6rem;
    border-radius: 6px;
    background: rgba(35, 40, 45, .94);
    color: #fff;
    font-size: .78rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
}

.mapa-visitantes-dica.visivel  { display: block; }
.mapa-visitantes-dica strong   { display: block; font-weight: 600; }
.mapa-visitantes-dica span     { opacity: .8; }

.mapa-visitantes-legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .15rem .85rem;
    margin-top: .6rem;
    font-size: .72rem;
    color: var(--tinta-fraca);
}

.mapa-visitantes-legenda .item { display: inline-flex; align-items: center; }

.mapa-visitantes-legenda .tom {
    width: 11px;
    height: 11px;
    margin-right: .3rem;
    border-radius: 2px;
    background: var(--terra);
}

.mapa-visitantes-legenda .tom-vazio {
    background: var(--chumbo-claro);
    box-shadow: inset 0 0 0 1px var(--borda);
}

/* ----- Imagens do site (/admin/aparencia) ----------------------------------
   Nove espaços parecidos numa tela só: o que os distingue é a prévia, então
   ela vem primeiro e ocupa o cartão inteiro. A proporção é fixa (16:9) porque
   o dono precisa comparar as fotos entre si — com a altura seguindo cada
   arquivo, a fileira viraria uma escada e a mais alta pareceria a mais
   importante. */

.espaco-imagem {
    height: 100%;
    margin-bottom: 1.25rem;
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    display: flex;
    flex-direction: column;
}

.espaco-previa {
    position: relative;
    margin-bottom: .75rem;
    border-radius: calc(var(--raio) - 2px);
    overflow: hidden;
    background: var(--chumbo-claro);
}

.espaco-previa img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* O espaço do logo é o único que pode não ter imagem nenhuma: ali a ausência
   é o nome escrito no topo, e a caixa diz isso em vez de mostrar um vazio. */
.espaco-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    aspect-ratio: 16 / 9;
    padding: .5rem;
    color: var(--chumbo);
    text-align: center;
    font-size: .8rem;
}

.espaco-vazio i { font-size: 1.4rem; opacity: .5; }

/* O selo responde a pergunta que traz alguém a esta tela — "esta foto já é
   minha ou ainda é a que veio com o sistema?". */
.espaco-selo {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(33, 37, 41, .78);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.espaco-selo.sua { background: var(--verde); }

.espaco-titulo { margin-bottom: .15rem; font-size: .95rem; }

.espaco-ajuda {
    margin-bottom: .6rem;
    color: var(--chumbo);
    font-size: .82rem;
    line-height: 1.35;
}

/* Empurra os botões para o pé do cartão: com textos de tamanhos diferentes,
   "Salvar" ficaria em altura diferente em cada um da fileira. */
.espaco-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
    padding-top: .25rem;
}

/* =============================================================================
   Relatórios (view/admin/relatorios/*, view/partials/relatorio_barra.php)
   =============================================================================
   Os atalhos entre relatórios ficam ACIMA do filtro de período, e não dentro
   dele: são navegação, e o card de filtro é formulário. Enfiados lá dentro,
   virariam mais quatro botões ao lado de "Aplicar" — e o dono clicaria em
   "Pratos" achando que estava filtrando. */
.atalhos-relatorio {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .75rem;
}

/* Na impressão a navegação não serve para nada — e o relatório impresso é o
   uso principal desta tela no fim do mês. */
@media print {
    .atalhos-relatorio,
    .periodos-rapidos {
        display: none !important;
    }
}

/* Atalhos de período: links de texto, deliberadamente miúdos. Como botões
   competiriam com "Aplicar", que é o que confirma o período digitado. */
.periodos-rapidos {
    margin-left: .5rem;
    font-size: .8rem;
}

.periodos-rapidos a {
    margin-left: .6rem;
    color: var(--chumbo);
    text-decoration: underline dotted;
}

.periodos-rapidos a:hover {
    color: var(--terra);
}

/* A barrinha embaixo do nome do prato no ranking. A régua é o primeiro
   colocado, não o total: proporção sobre o total daria 3% para tudo num
   cardápio de trinta pratos, e o que se quer ler é "o segundo sai metade do
   primeiro". */
.barra-ranking {
    height: 4px;
    margin-top: .3rem;
    border-radius: 2px;
    background: var(--areia, rgba(0, 0, 0, .06));
}

.barra-ranking span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--terra);
}

/* =============================================================================
   Escolha do provedor de IA (/admin/configuracoes › Inteligência artificial)
   =============================================================================
   Dois cartões lado a lado, no lugar de um <select>: são duas contas
   diferentes, em dois sites diferentes, e o selo de "chave cadastrada" precisa
   caber ao lado de cada um — num select ele não caberia, e o dono não saberia
   que a credencial do outro continua guardada. */
.opcoes-ia {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.opcao-ia {
    flex: 1 1 180px;
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--linha, rgba(0, 0, 0, .12));
    border-radius: .35rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.opcao-ia:hover {
    border-color: var(--terra);
}

.opcao-ia.ativa {
    border-color: var(--terra);
    background: var(--areia, rgba(0, 0, 0, .03));
}

/* O rádio some: quem marca é o cartão inteiro, que é alvo maior — mas ele
   continua no HTML, então teclado e leitor de tela seguem funcionando. */
.opcao-ia input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opcao-ia strong {
    display: block;
}

.opcao-ia .text-muted {
    font-size: .8rem;
}

/* =============================================================================
   Escrever com IA (view/partials/botao_ia.php)
   =============================================================================
   O botão fica encostado no rótulo do campo, no canto direito da linha — é a
   única posição em que ele não empurra nada: os seis campos que o recebem são
   de larguras diferentes, e num deles (a frase do carrossel) a coluna tem 4/12
   de largura.

   Miúdo de propósito. Ele é ajuda, não a ação da tela: quem manda ali continua
   sendo o "Salvar" do formulário, e um botão do mesmo peso disputaria a
   atenção com ele. */
.botao-ia {
    padding: .05rem .4rem;
    font-size: .72rem;
    line-height: 1.5;
    /* Sobe meio ponto para alinhar com a base do rótulo, que é maior. */
    margin-top: -.15rem;
}

.botao-ia .fas {
    margin-right: .2rem;
}

/* O textarea da sugestão dentro do SweetAlert2. O modal é estreito e o texto
   chega pronto: sem isto, uma descrição de três linhas abriria com barra de
   rolagem de duas. */
.swal2-container textarea.swal2-textarea {
    max-width: 100%;
    margin: .5rem 0 .75rem;
    font-size: .95rem;
}

/* =============================================================================
   CAMADA VISUAL COMPARTILHADA
   =============================================================================
   Daqui para baixo nada é de uma tela só: é o acabamento que vale para as 26
   telas dos dois painéis (o do restaurante e o da plataforma), que carregam
   este mesmo arquivo.

   A régua é sempre a mesma: **não mexer na marcação das views**. Tudo abaixo
   agarra o que o AdminLTE já desenha — `.card`, `.table`, `.badge`,
   `.form-control`, `.small-box` —, então uma tela nova nasce no padrão sem
   ninguém precisar lembrar de nada.
   ========================================================================== */

/* ----- Tipografia ------------------------------------------------------------
   O painel usava a "Source Sans Pro" que o AdminLTE pede e que NÃO está
   auto-hospedada aqui: o navegador caía no `sans-serif` do sistema, e o painel
   ficava com uma letra em cada máquina. As fontes do site (Roboto e Poppins) já
   estão no servidor, em `assets/delicious/fonts` — usá-las é de graça, tira a
   loteria da fonte do sistema e faz o painel e o site falarem a mesma língua.
   Os dois layouts carregam o `delicious/css/fonts.css` para isto.

   Roboto no texto (é fonte de interface: numeral estreito, legível em 13px) e
   Poppins só nos títulos — a Poppins é geométrica e larga demais para tabela.  */

body,
.wrapper {
    font-family: var(--fonte-texto);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--tinta);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    color: var(--tinta-forte);
}

/* ⚠️ `.brand-text` NÃO entra na regra acima, e já entrou: ela existe para dar a
   Poppins aos títulos, e junto ia o `color: var(--tinta-forte)` — quase-preto,
   sobre a sidebar escura. Dava 1,26:1 de contraste (o mínimo legível é 4,5:1),
   o pior número do painel inteiro, no nome da casa. A cor da marca na sidebar é
   `--sidebar-texto`, que o `Tema` calcula a partir da cor do menu. */
.brand-text {
    font-family: var(--fonte-titulo);
    color: var(--sidebar-texto);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* O fundo do AdminLTE é #f4f6f9, um cinza azulado que briga com o terra da
   casa. Este é o mesmo valor de claridade em cinza neutro. */
.content-wrapper { background-color: #f5f5f6; }

.text-muted { color: var(--tinta-suave) !important; }

/* ----- Cabeçalho da página --------------------------------------------------
   Era um `<h1 class="h4">` solto, colado no conteúdo. Ganha respiro, peso de
   título e um lugar para o subtítulo e os botões de ação que as telas passaram
   a declarar (ver `$subtitulo` e `$acoes` nos dois layouts).                  */

.content-header {
    padding: 1.25rem .5rem .35rem;
}

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.cabecalho-texto { min-width: 0; flex: 1 1 auto; }

.cabecalho-pagina h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.cabecalho-subtitulo {
    margin: .15rem 0 0;
    font-size: .87rem;
    line-height: 1.4;
    color: var(--tinta-suave);
}

/* Os botões da página ficam no cabeçalho, e não dentro do primeiro card: é
   onde o olho já está quando a tela abre, e não muda de lugar quando o card de
   cima muda. */
.cabecalho-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

/* ----- Tabelas ---------------------------------------------------------------
   O cabeçalho vira rótulo (miúdo, caixa alta, cinza) em vez de texto do mesmo
   tamanho da linha: numa tabela de 9 colunas, cabeçalho com o peso do conteúdo
   é ruído. As bordas horizontais somem, sobra uma linha por registro.         */

.card-body.p-0 > .table-responsive > .table,
.card-body.p-0 > .table {
    margin-bottom: 0;
}

.table thead th {
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-top: 0;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie);
    font-family: var(--fonte-texto);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    white-space: nowrap;
}

.table td { border-top: 1px solid var(--borda-clara); color: var(--tinta); }

.table-hover tbody tr:hover { background-color: #f8f9fa; }

/* Dinheiro e contagem alinham pelo dígito onde quer que estejam: a coluna
   `text-right` é sempre número nesta casa. */
.table td.text-right,
.table th.text-right { font-variant-numeric: tabular-nums; }

/* Linha "nenhum resultado": sem borda e sem hover — não é registro. */
.table tbody tr[data-vazio]:hover { background: transparent; }
.table tbody tr[data-vazio] td { border-top: 0; color: var(--tinta-fraca); }

/* ----- Selos ------------------------------------------------------------------
   O AdminLTE pinta o selo de cor cheia e saturada. Numa lista de 30 reservas
   isso vira um mural de confete, e o que se quer é o contrário: a situação tem
   que ser legível à distância sem sequestrar a linha inteira. Selo de fundo
   suave, texto na cor forte.

   ⚠️ Escopado ao `.content-wrapper` de propósito: o contador de chamados na
   sidebar da plataforma é `badge-danger` sobre fundo escuro e continua cheio —
   ali o vermelho é o alarme, não uma etiqueta.                                */

.content-wrapper .badge {
    padding: .3em .6em;
    border-radius: 1rem;
    font-family: var(--fonte-texto);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
}

.content-wrapper .badge-success   { background-color: var(--verde-claro)  !important; color: var(--verde)  !important; }
.content-wrapper .badge-danger    { background-color: var(--tijolo-claro) !important; color: var(--tijolo) !important; }
.content-wrapper .badge-warning   { background-color: var(--ambar-claro)  !important; color: var(--ambar)  !important; }
.content-wrapper .badge-info      { background-color: var(--azul-claro)   !important; color: var(--azul)   !important; }
.content-wrapper .badge-secondary { background-color: var(--chumbo-claro) !important; color: var(--chumbo) !important; }
.content-wrapper .badge-primary   { background-color: var(--marca-fraca)  !important; color: var(--terra)  !important; }
.content-wrapper .badge-light     { background-color: var(--borda-clara)  !important; color: var(--tinta-suave) !important; }
.content-wrapper .badge-dark      { background-color: #e2e4e6             !important; color: var(--tinta-forte) !important; }

/* ----- Botões ---------------------------------------------------------------- */

.btn {
    border-radius: .3rem;
    font-family: var(--fonte-texto);
    font-weight: 500;
}

.btn-sm { font-size: .82rem; }
.btn-xs { padding: .15rem .45rem; font-size: .74rem; border-radius: .25rem; }

/* O `btn-default` do AdminLTE é quase invisível ao lado do primário. */
.btn-default {
    background-color: #fff;
    border-color: #d5d9dd;
    color: var(--tinta);
}

.btn-default:hover { background-color: #f4f5f6; border-color: #c6ccd2; }

/* O anel de foco do Bootstrap é azul, em todo botão, inclusive nos da marca. */
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(122, 59, 29, .18); }
.btn-danger:focus  { box-shadow: 0 0 0 .2rem rgba(166, 58, 46, .22); }
.btn-success:focus { box-shadow: 0 0 0 .2rem rgba(47, 93, 63, .22); }

/* ----- Formulários ------------------------------------------------------------ */

label { font-size: .82rem; font-weight: 600; color: #495057; margin-bottom: .3rem; }

/* ⚠️ O rótulo de switch e de checkbox NÃO entra na regra acima: ali o texto é
   uma frase inteira ("Enviar e-mails aos clientes"), e em 600 a tela de
   Configurações viraria uma parede de negrito. */
.custom-control-label,
.form-check-label {
    font-size: .9rem;
    font-weight: 400;
    color: var(--tinta);
}

.form-control,
.custom-select {
    border-color: #d5d9dd;
    border-radius: .3rem;
    color: var(--tinta);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 .2rem rgba(122, 59, 29, .12);
}

.form-control::placeholder { color: #adb5bd; }
.form-control:disabled, .form-control[readonly] { background-color: #f4f5f6; }

.input-group-text {
    background-color: var(--superficie);
    border-color: #d5d9dd;
    color: var(--tinta-suave);
}

/* O Select2 nasce com 32px e fica meia cabeça mais baixo que os campos ao lado
   dele na mesma linha de filtro. */
.select2-container--bootstrap4 .select2-selection { border-color: #d5d9dd; }

/* O switch do AdminLTE fica azul quando ligado. */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--terra);
    border-color: var(--terra);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(122, 59, 29, .18);
}

/* ----- Cartões de número (small-box e info-box) ------------------------------
   As cores do Bootstrap (#28a745, #17a2b8, #ffc107) são semáforo, não paleta:
   quatro delas lado a lado no topo do painel competem entre si e não sobra
   hierarquia nenhuma. Aqui elas viram as mesmas famílias em tom fechado, que é
   o que faz o número — e não o retângulo — ser a primeira coisa que se lê.    */

.small-box {
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1.25rem;
    transition: transform .12s ease-in-out, box-shadow .12s ease-in-out;
}

.small-box:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }

.small-box > .inner { padding: 1.05rem 1.1rem; }

.small-box .inner h3 {
    font-family: var(--fonte-titulo);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: .15rem;
}

.small-box .inner p { font-size: .86rem; opacity: .92; margin-bottom: .2rem; }
.small-box .icon > i { font-size: 4.5rem; }

.small-box .small-box-footer {
    font-size: .78rem;
    padding: .45rem;
    background: rgba(0, 0, 0, .12);
    color: rgba(255, 255, 255, .9);
}

.small-box.bg-success   { background-color: var(--verde)  !important; }
.small-box.bg-primary   { background-color: var(--terra)  !important; }
.small-box.bg-info      { background-color: var(--azul)   !important; }
/* O `bg-warning` do AdminLTE é amarelo com texto ESCURO (#1f2d3d), porque o
   amarelo dele não sustenta branco. O âmbar fechado sustenta — e é preciso
   repintar o texto dos filhos, senão só a caixa muda e o número continua
   escuro em cima do fundo escuro. */
.small-box.bg-warning { background-color: var(--ambar) !important; color: #fff !important; }
.small-box.bg-warning .inner h3,
.small-box.bg-warning .inner p,
.small-box.bg-warning .inner,
.small-box.bg-warning .icon,
.small-box.bg-warning a,
.small-box.bg-warning .small-box-footer { color: #fff !important; }
.small-box.bg-danger    { background-color: var(--tijolo) !important; }
.small-box.bg-secondary { background-color: var(--chumbo) !important; }

.info-box {
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    min-height: 5rem;
}

.info-box .info-box-icon        { border-radius: var(--raio) 0 0 var(--raio); font-size: 1.5rem; }
.info-box .info-box-text        { font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tinta-fraca); }
.info-box .info-box-number      { font-family: var(--fonte-titulo); font-size: 1.4rem; font-weight: 600; color: var(--tinta-forte); }
.info-box .info-box-icon.bg-success   { background-color: var(--verde)  !important; }
.info-box .info-box-icon.bg-info      { background-color: var(--azul)   !important; }
.info-box .info-box-icon.bg-warning   { background-color: var(--ambar)  !important; }
.info-box .info-box-icon.bg-danger    { background-color: var(--tijolo) !important; }
.info-box .info-box-icon.bg-primary   { background-color: var(--terra)  !important; }
.info-box .info-box-icon.bg-secondary { background-color: var(--chumbo) !important; }

/* ----- Abas ------------------------------------------------------------------
   Vale para as quatro abas de /admin/configuracoes e para as da plataforma
   (Mercado Pago, E-mail, Tags). Aba selecionada marcada por um traço na cor da
   casa, e não por uma caixa com borda de três lados.                          */

.nav-tabs {
    border-bottom: 1px solid var(--borda);
}

.nav-tabs .nav-link {
    padding: .6rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--tinta-suave);
}

.nav-tabs .nav-link:hover { border-bottom-color: #d9dde1; color: var(--tinta-forte); }

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--terra);
    background: transparent;
    color: var(--terra);
    font-weight: 600;
}

/* ----- Paginação, alertas e modais -------------------------------------------- */

.page-link { border-color: var(--borda); color: var(--tinta); }
.page-item.active .page-link { background-color: var(--terra); border-color: var(--terra); }
.page-link:hover { background-color: var(--borda-clara); color: var(--terra-escuro); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(122, 59, 29, .18); }

/* O callout do AdminLTE é uma caixa cinza com uma barra colorida à esquerda; o
   fundo tingido é o que faz a mensagem se separar do card branco atrás. */
.callout {
    border: 1px solid var(--borda);
    border-left-width: 4px;
    border-radius: var(--raio);
    box-shadow: none;
    margin-bottom: 1.25rem;
}

.callout h5 { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; }
.callout p:last-child { margin-bottom: 0; }

.callout.callout-danger  { border-left-color: var(--tijolo); background-color: var(--tijolo-claro); }
.callout.callout-warning { border-left-color: var(--ambar);  background-color: var(--ambar-claro); }
.callout.callout-info    { border-left-color: var(--azul);   background-color: var(--azul-claro); }
.callout.callout-success { border-left-color: var(--verde);  background-color: var(--verde-claro); }

.alert { border: 0; border-radius: var(--raio); }

.modal-content { border: 0; border-radius: var(--raio); box-shadow: 0 12px 40px rgba(16, 24, 40, .18); }
.modal-header  { padding: .9rem 1.1rem; border-bottom: 1px solid var(--borda-clara); }
.modal-title   { font-family: var(--fonte-titulo); font-size: 1.02rem; font-weight: 600; }
.modal-body    { padding: 1.1rem; }
.modal-footer  { padding: .8rem 1.1rem; border-top: 1px solid var(--borda-clara); background: var(--superficie); }

/* ----- Barra superior e menu --------------------------------------------------

   A barra inteira sai das variáveis `--barra-*`, que `App\Support\Tema` monta
   conforme o estilo escolhido em /plataforma/configuracoes › Aparência (clara,
   na cor da marca, escura). Os valores de fábrica estão no `:root` do topo
   deste arquivo, então a barra continua desenhando sem tema nenhum gravado.

   ⚠️ **O texto NÃO pode voltar a ser `text-muted`.** Era assim até 14/08: o
   nome de quem está logado saía em `#6c757d` sobre branco — o menor contraste
   da tela, num elemento que aparece em todas as páginas — e, pior, o utilitário
   do Bootstrap é `!important`, então num tema de barra escura ele venceria a
   cor clara e o nome sumiria no fundo. Quem manda na cor aqui é `--barra-texto`.

   A especificidade é de propósito: `.navbar-light .navbar-nav .nav-link` do
   AdminLTE tem três classes e pinta o link de `rgba(0,0,0,.5)`. Os seletores
   abaixo têm quatro e vencem sem precisar de `!important`.                    */

.main-header.navbar {
    background-color: var(--barra-fundo) !important;
    border-bottom: 1px solid var(--barra-borda);
    box-shadow: 0 1px 2px var(--barra-sombra);
}

.main-header.navbar .navbar-nav .nav-link {
    font-size: .88rem;
    color: var(--barra-texto);
}

.main-header.navbar .navbar-nav .nav-link:hover,
.main-header.navbar .navbar-nav .nav-link:focus,
.main-header.navbar .navbar-nav .show > .nav-link {
    color: var(--barra-texto-forte);
    background-color: var(--barra-hover);
    border-radius: .3rem;
}

/* O nome de quem está logado é informação, não legenda: peso 500 e a tinta
   forte. É a única coisa que a barra afirma. */
.main-header .barra-usuario {
    color: var(--barra-texto-forte);
    font-weight: 500;
}

/* Barra colorida: o ícone do menu e o do "sair" ficavam escuros sobre fundo
   escuro, porque o AdminLTE os herda do `navbar-light` do HTML. */
.main-header.navbar .navbar-nav .nav-link > .fas,
.main-header.navbar .navbar-nav .nav-link > .far { color: inherit; }

.nav-sidebar .nav-link  { font-size: .9rem; border-radius: .3rem; margin: 0 .4rem; }
.nav-sidebar .nav-treeview .nav-link { font-size: .86rem; padding-left: 2.2rem; }
.nav-sidebar .nav-icon  { font-size: .95rem; }

/* Item de submenu selecionado: o AdminLTE não distingue o ativo dentro de um
   tópico aberto, e o dono perdia de vista em que tela estava. */
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--sidebar-veu);
    color: var(--sidebar-texto);
}

/* ----- Aparência: as paletas e a prévia --------------------------------------
   Só de /plataforma/configuracoes › Aparência. Fica FORA da camada visual
   compartilhada de propósito: nada aqui vale para outra tela.

   ⚠️ A prévia usa variáveis PRÓPRIAS (`--p-*`), e não as `--terra`/`--barra-*`
   de verdade. Se usasse as reais, mexer nos seletores de cor repintaria o
   painel inteiro por baixo do operador — inclusive a sidebar em que ele está —
   e sair da tela sem salvar deixaria a tela mentindo sobre o que está gravado.
   Quem manda na cor de verdade continua sendo o `Tema`, no servidor, e a página
   recarrega ao salvar.                                                        */

.tema-paletas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: .6rem;
}

.tema-paleta {
    display: block;
    width: 100%;
    padding: .6rem .7rem;
    text-align: left;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    cursor: pointer;
}

.tema-paleta:hover { border-color: var(--tinta-fraca); }

/* O selecionado é marcado pela borda, e não por um `checked` de rádio: são
   atalhos que preenchem os campos, não um quinto campo — depois de ajustar uma
   cor à mão, nenhuma paleta descreve mais o que está na tela. */
.tema-paleta.escolhida {
    border-color: var(--terra);
    box-shadow: 0 0 0 1px var(--terra);
}

.tema-paleta .amostras { display: flex; gap: 3px; margin-bottom: .4rem; }

.tema-paleta .amostras i {
    flex: 1;
    height: 22px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .08);
}

.tema-paleta .nome      { display: block; font-size: .84rem; font-weight: 600; color: var(--tinta-forte); }
.tema-paleta .descricao { display: block; font-size: .76rem; color: var(--tinta-suave); line-height: 1.35; }

/* O par seletor-de-cor + hexadecimal. O `input[type=color]` do navegador vem
   com moldura e respiro próprios; sem o `padding: 0` ele desenha um quadradinho
   perdido no meio de um campo grande. */
.tema-campo-cor { display: flex; gap: .5rem; align-items: center; }

.tema-campo-cor input[type="color"] {
    width: 46px;
    height: calc(2.25rem + 2px);
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    cursor: pointer;
    flex: none;
}

.tema-campo-cor input[type="text"] { font-family: monospace; text-transform: lowercase; }

.tema-previa {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    background: #f5f5f6;
    font-size: .78rem;
}

.tema-previa-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .7rem;
    background: var(--p-barra-fundo);
    color: var(--p-barra-texto);
    border-bottom: 1px solid var(--p-barra-borda);
}

.tema-previa-barra .usuario { font-weight: 500; color: var(--p-barra-texto-forte); }

.tema-previa-corpo { display: flex; min-height: 148px; }

.tema-previa-menu {
    width: 40%;
    padding: .45rem;
    background: var(--p-sidebar);
}

.tema-previa-menu span {
    display: block;
    padding: .3rem .45rem;
    margin-bottom: .2rem;
    border-radius: .25rem;
    color: var(--p-sidebar-texto-suave);
}

.tema-previa-menu span.ativo {
    background: var(--p-principal);
    color: var(--p-marca-texto);
}

.tema-previa-tela { flex: 1; padding: .7rem; }
.tema-previa-tela .titulo { font-weight: 600; color: var(--tinta-forte); margin-bottom: .45rem; }
.tema-previa-tela .ligacao { color: var(--p-principal); display: block; margin-top: .5rem; }

.tema-previa-tela .selo {
    display: inline-block;
    padding: .12rem .45rem;
    border-radius: 10rem;
    font-size: .7rem;
    background: var(--p-marca-fraca);
    color: var(--p-principal);
}

.tema-previa-tela .botao {
    display: inline-block;
    margin-left: .3rem;
    padding: .18rem .6rem;
    border-radius: .25rem;
    background: var(--p-principal);
    color: var(--p-marca-texto);
}

.tema-previa-tela .risca {
    height: 3px;
    width: 46px;
    margin-top: .6rem;
    border-radius: 2px;
    background: var(--p-destaque);
}

.tema-previa-tela .risca-apoio { background: var(--p-apoio); width: 30px; margin-top: .25rem; }

/* ----- Estado vazio, geral ---------------------------------------------------
   `.vazio-suave` nasceu na tela de assinatura e virou o padrão da casa: toda
   lista sem registro mostra o mesmo bloco, com um ícone e uma frase que diz o
   que apareceria ali — e não um "Nenhum registro" solto no meio do branco.   */

.vazio-suave a { font-weight: 500; }

/* ----- Telas estreitas -------------------------------------------------------
   Até 14/08 este arquivo não tinha uma regra de celular sequer: as duas únicas
   `@media` de largura eram de dois cards específicos. O painel *parecia*
   responsivo porque o AdminLTE guarda a sidebar sozinho abaixo de 992px e o
   grid do Bootstrap empilha as colunas — e era só isso. Tudo que não é coluna
   do grid continuava com a medida do desktop.

   Faz parte da CAMADA COMPARTILHADA de propósito: são as 26 telas dos dois
   painéis, e um ajuste de celular escrito tela a tela seria 26 lugares para
   esquecer o próximo.

   ⚠️ **Nada aqui esconde transbordamento.** Não há `overflow: hidden` no corpo
   nem no `.content-wrapper`: isso tiraria a barra de rolagem lateral e, junto,
   o acesso ao que estava passando da tela — a tabela some pela direita e
   ninguém descobre que ela tinha mais três colunas. O que transborda ganha um
   contêiner que **rola**; o resto encolhe.

   Os três degraus são os do Bootstrap 4, e cada um responde a uma pergunta:
     991.98px  o menu já saiu da frente — sobra a tela inteira para o conteúdo
     767.98px  acabou a segunda coluna: o que era lado a lado vira empilhado
     575.98px  telefone em pé — é aqui que o respiro do desktop vira desperdício
   ========================================================================== */

@media (max-width: 991.98px) {
    /* O gráfico é desenhado sobre a altura do pai (Chart.js com
       `maintainAspectRatio: false`), então ela é a única coisa que o segura.
       Sem encolher, um gráfico de 300px numa tela estreita fica com as barras
       espremidas e a legenda ocupando metade da altura. */
    .grafico-alto  { height: 260px; }
    .grafico-medio { height: 220px; }
}

@media (max-width: 767.98px) {
    /* ⚠️ O `.card-title` e o `.card-tools` do AdminLTE são os dois FLUTUANTES
       (`float: left` e `float: right`). Numa linha estreita eles não empilham
       sozinhos: encavalam — o botão "Novo usuário" sobe por cima do "8
       usuário(s)". Aqui eles viram blocos, um debaixo do outro.

       Isto NÃO transforma o `.card-header` em flex, e a diferença importa: a
       barra de abas de /admin/configuracoes vive dentro de um `.card-header`, e
       como filha de um contêiner flex a `ul` perde a largura (ver a nota da
       camada compartilhada). Mexer no float dos filhos não a alcança. */
    .card-header .card-title { float: none; display: block; }

    .card-header .card-tools {
        float: none;
        display: block;
        margin: .6rem 0 0;
    }

    /* Botão de ação do cabeçalho ocupa a linha inteira em vez de ficar
       pendurado à direita de um título que já quebrou em duas linhas. */
    .cabecalho-acoes {
        width: 100%;
        margin-left: 0;
    }

    .cabecalho-acoes .btn { flex: 1 1 auto; }

    .cabecalho-pagina h1 { font-size: 1.3rem; }

    /* A tabela rola no eixo dela, e não empurra a página. O `.table-responsive`
       é do Bootstrap; o que falta nele desde a 4.3 é o embalo do toque no
       iOS — sem isso o dedo arrasta a tabela como se fosse um mapa, sem
       inércia, e parece travada. */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    .tabela-compacta td,
    .tabela-compacta th { padding: .4rem .5rem; font-size: .84rem; }

    .resumo-rodape > div { min-width: 6rem; }
}

@media (max-width: 575.98px) {
    /* O respiro do desktop, numa tela de 360px, é o que sobra de largura para o
       conteúdo. Cada card devolve ~14px por lado. */
    .card-body   { padding: .9rem; }
    .card-header { padding: .7rem .9rem; }
    .card-footer { padding: .7rem .9rem; }

    .modal-body   { padding: .9rem; }
    .modal-header { padding: .75rem .9rem; }
    .modal-footer { padding: .7rem .9rem; }

    .content-header { padding: 1rem .5rem .25rem; }
    .cabecalho-pagina h1 { font-size: 1.2rem; }
    .cabecalho-subtitulo { font-size: .84rem; }

    /* ⚠️ Só o formulário de FILTRO, que é o `method="get"` — e o discriminador
       é esse mesmo, não uma classe nova: quem filtra manda a busca na URL, quem
       grava manda em POST. O `.form-inline` que sobra (o de acrescentar horário
       em /admin/refeicoes, dois campos de 90px e um "+") não pode virar três
       linhas de campo full-width: ali o formulário é do tamanho do que ele
       pergunta.

       As larguras fixas no `style=` das telas de auditoria (220px) são o motivo
       do `!important`: atributo vence folha, e sem isto o campo de busca ficaria
       com 220px dentro de uma tela de 360. */
    form.form-inline[method="get"] { display: block; }

    form.form-inline[method="get"] .form-control,
    form.form-inline[method="get"] .custom-select {
        width: 100% !important;
        margin-bottom: .5rem;
    }

    /* Os atalhos entre relatórios são cinco: em tamanho de desktop viram três
       fileiras e empurram o filtro para fora da primeira tela. */
    .atalhos-relatorio { gap: .3rem; }

    .atalhos-relatorio .btn {
        padding: .25rem .5rem;
        font-size: .78rem;
    }

    /* Os atalhos de período são a segunda linha do filtro, e não uma cauda da
       primeira: com o `margin-left` eles nascem desalinhados do resto. */
    .periodos-rapidos {
        display: block;
        margin-top: .5rem;
        margin-left: 0;
    }

    .periodos-rapidos a:first-child { margin-left: 0; }

    /* Aba com rótulo longo ("Inteligência artificial") em 1rem de respiro
       quebra em duas linhas dentro do próprio botão. */
    .nav-tabs .nav-link { padding: .5rem .7rem; font-size: .85rem; }

    .small-box .inner h3 { font-size: 1.6rem; }
    .small-box .icon > i { font-size: 3.5rem; }

    .metrica { padding: .8rem .85rem; gap: .7rem; }
    .metrica-icone { width: 38px; height: 38px; font-size: .95rem; }
    .metrica-valor { font-size: 1.3rem; }

    .grafico-alto  { height: 230px; }
    .grafico-medio { height: 200px; }

    /* A caixa de entrada é a única coisa na tela: o respiro de 24px em volta
       come 13% da largura de um telefone em pé. */
    .pagina-login { padding: 16px; }
    .caixa-login .topo  { padding: 24px 20px 20px; }
    .caixa-login .corpo { padding: 22px; }
}

/* ----- Impressão -------------------------------------------------------------- */

@media print {
    .main-sidebar, .main-header, .main-footer, .cabecalho-acoes, .card-tools { display: none !important; }
    .content-wrapper { margin-left: 0 !important; background: #fff !important; }
    .card { box-shadow: none !important; border-color: #ccc !important; }
}