/* ========== RESET CSS ========== */
* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	cursor:default;
	font-family:"Helvetica";
	text-decoration:none;
}
*:focus {
    outline:none;
}
body {
    position:relative;
    display:flex;
    flex-direction:column;
    touch-action: pan-x pan-y;
}

/* ===== Estrutura principal ===== */
.indexMain {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative; /* base para posicionar conteúdo absoluto entre topo e rodapé */
    height: 100vh; /* garante altura exata do viewport */
    overflow: hidden; /* evita scroll global; rolagem fica na coluna direita */
    /* Variáveis de altura dinâmicas */
    --indexMainTopoH: 50px;
    --indexMainRodapeH: 32px;
}

/* ===== Topo ===== */
.indexMainTopo {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    background-color: #F00;
}

.indexMainBtnMenu {
    appearance: none; /* era button; agora é div, mantido sem impacto */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    height: 32px;
    width: 32px;
    cursor: pointer; /* sobrepõe o reset */
}

/* ===== Conteúdo duas colunas ===== */
.indexMainConteudo {
    display: flex;
    flex: 1; /* ocupa o espaço entre topo e rodapé */
    position: relative; /* base para overlays internos */
}

.indexMainConteudoMenuEsquerda {
    width: 240px;
    flex-shrink: 0;
    height: 100%;
}

.indexMainConteudoDireita {
    flex: 1;
    min-width: 0; /* previne overflow em layouts flex */
    height: 100%;
    min-height: 0; /* permite scroll interno sem criar espaço em branco */
    max-height: 100%;
    overflow: auto; /* se conteúdo exceder, mostra barra de rolagem */
    position: relative; /* base para overlays internos */
}

/* ===== Backdrop de menu (overlay) ===== */
.indexMainMenuOverlayBackdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.3);
    display: none;
    z-index: 900;
}
.indexMain.indexMainMenuOpen .indexMainMenuOverlayBackdrop {
    display: block;
}

/* ===== Menu esquerdo ===== */
.indexMainConteudoMenuEsquerdaLogo {
    height: 72px;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: contain;
}

.indexMainConteudoMenuEsquerdaMenus {
    display: flex;
    flex-direction: column;
}

.indexMainConteudoMenuEsquerdaMenu {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
}
.indexMainConteudoMenuEsquerdaMenu:hover {
    background-color: rgba(0,0,0,0.06);
}

.indexMainConteudoMenuEsquerdaMenuActive {
    background-color: rgba(0,0,0,0.10);
}

/* ===== Página Mesas (mobile-first) ===== */
.indexMainPaginaMesas {
    display: flex;
    flex-direction: column;
    height: 100%; /* ocupa a área útil dentro do conteúdo */
}
.indexMainPaginaMesasHeader {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: #f7f7f7;
}
.indexMainPaginaMesasMapa {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    grid-auto-flow: row dense;
    gap: 12px;
    padding: 12px;
    align-content: start;
    justify-content: start;
}
.indexMainPaginaMesasMesaItem {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: #eaeaea;
    border-radius: 10px;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
    position: relative; /* permite rótulos sobre a mesa */
}
.indexMainPaginaMesasMesaItem:active {
    background-color: #d5d5d5;
}
/* Cores por status da mesa */
.indexMainPaginaMesasMesaLivre {
    background-color: #28a745;
    color: #fff;
}
.indexMainPaginaMesasMesaAtribuida {
    background-color: #007bff;
    color: #fff;
}
.indexMainPaginaMesasMesaEmAtendimento {
    background-color: #fd7e14;
    color: #fff;
}
.indexMainPaginaMesasMesaPreparando {
    background-color: #6f42c1;
    color: #fff;
}
/* Novo status: consumindo (pedido entregue à mesa) */
.indexMainPaginaMesasMesaConsumindo {
    background-color: #136f63; /* teal mais escuro para maior contraste */
    color: #fff;
}

/* Barra de legenda e quadro */
.indexMainPaginaMesasLegendaBar {
    display: none; /* ocultar barra de legenda superior */
    align-items: center;
    gap: 8px;
    margin: 10px 0 0 0;
}
.indexMainPaginaMesasLegendaToggle {
    width: 36px;
    height: 28px;
    border-radius: 6px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    cursor: pointer;
    position: relative;
}
.indexMainPaginaMesasLegendaToggle::before {
    content: '';
    position: absolute;
    left: 6px; right: 6px; top: 6px; bottom: 6px;
    border-radius: 999px 999px 0 0;
    border: 2px solid #666;
    border-bottom: none;
}
.indexMainPaginaMesasLegendaToggle::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    left: 50%; top: 50%; transform: translate(-50%, -20%);
    border-radius: 50%;
    background-color: #666;
}
.indexMainPaginaMesasLegendaQuadro {
    display: none; /* ocultar quadro de legenda superior */
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 0;
}
.indexMainPaginaMesasLegendaItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasLegendaSwatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.12);
}
.indexMainPaginaMesasLegendaLabel {
    font-size: 14px;
    color: #333;
}

/* Rótulo sobre cada mesa quando a legenda inline está ativa */
.indexMainPaginaMesasMesaLegendaTag { /* legado: não utilizado, preservado caso haja referência */
    display: none;
}
.indexMainPaginaMesasMesaLegendaStatus { display: none; }
.indexMainPaginaMesasMesaLegendaInfo { display: none; }
.indexMainPaginaMesasMesaLegendaTempo,
.indexMainPaginaMesasMesaLegendaItens {
    display: inline-block;
}

/* Novos badges compactos */
.indexMainPaginaMesasMesaBadgeStatus {
    position: absolute;
    top: 6px; left: 6px; right: 6px; /* ocupar toda a largura do card */
    display: block;
    text-align: center; /* centralizado */
    background-color: rgba(0,0,0,0.30);
    color: #fff;
    font-size: 11px;
    line-height: 1.15;
    padding: 4px 6px;
    border-radius: 4px;
    pointer-events: none;
    white-space: normal; /* permite quebrar para evitar corte */
}
.indexMainPaginaMesasMesaTempoBadge {
    position: absolute;
    left: 50%; bottom: 6px; transform: translateX(-50%);
    background-color: rgba(0,0,0,0.30);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap; /* relógio sempre em uma linha */
}

/* Overlay de detalhe da mesa */
.indexMainPaginaMesasDetalheOverlay {
    position: absolute; /* cobre apenas a coluna de conteúdo, preservando o topo vermelho */
    inset: 0;
    background-color: rgba(0,0,0,0.35);
    display: none;
    z-index: 1000;
    overflow: auto; /* se o painel for maior, permite rolagem */
}
.indexMainPaginaMesasDetalheOverlayActive {
    display: block; /* painel preencherá toda a área */
}
.indexMainPaginaMesasDetalhe {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
}
.indexMainPaginaMesasDetalheHeader {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* evita quebra inesperada */
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.indexMainPaginaMesasDetalheHeaderActions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasDetalheHeaderBtn {
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasDetalheHeaderBtn:hover {
    background-color: #e8e8e8;
}
.indexMainPaginaMesasDetalheHeaderBtnHidden {
    display: none;
}
.indexMainPaginaMesasDetalheTitulo {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* não deixa quebrar */
}
.indexMainPaginaMesasDetalheFechar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: #f0f0f0;
    cursor: pointer;
}
.indexMainPaginaMesasDetalheConteudo {
    padding: 12px;
    color: #333;
    flex: 1;
    overflow: auto;
    min-height: 0; /* permite o scroll interno sem estourar o flex */
}

/* Formulário inline: mover cliente de mesa */
.indexMainPaginaMesasMoverContainer {
    margin: 8px 0 12px 0;
    padding: 10px;
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
    background: #fcfcfc;
}
.indexMainPaginaMesasMoverTitulo {
    font-weight: 600;
    margin-bottom: 8px;
}
.indexMainPaginaMesasMoverForm {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-gap: 8px;
    align-items: center;
}
.indexMainPaginaMesasMoverLabel { color: #555; }
.indexMainPaginaMesasMoverInput {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 120px;
}
.indexMainPaginaMesasMoverAcoes { display: flex; gap: 8px; }
.indexMainPaginaMesasMoverSalvar,
.indexMainPaginaMesasMoverCancelar {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f9f9f9;
    cursor: pointer;
}
.indexMainPaginaMesasMoverSalvar { background-color: #eef8ff; border-color: #cfe7ff; }
.indexMainPaginaMesasMoverStatus { margin-top: 6px; color: #333; }

/* Info de ocupação da mesa (tempo desde abertura) */
.indexMainPaginaMesasOcupacaoInfo {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Cardápio dentro do detalhe da mesa ===== */
.indexMainPaginaMesasCardapioContainer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.indexMainPaginaMesasCardapioEscolha {
    display: flex;
    gap: 12px;
}
.indexMainPaginaMesasCardapioEscolhaItem {
    flex: 1;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasCardapioEscolhaItem:hover {
    background-color: #efefef;
}
.indexMainPaginaMesasCardapioIntro {
    font-size: 12px;
    color: #666;
}
.indexMainPaginaMesasCardapioGrupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background-color: #fafafa;
}
.indexMainPaginaMesasCardapioGrupoTitulo {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasCardapioGrupoRegra {
    font-size: 12px;
    color: #777;
}
.indexMainPaginaMesasCardapioOpcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}
.indexMainPaginaMesasCardapioOpcaoNome {
    font-size: 14px;
    color: #333;
}
.indexMainPaginaMesasCardapioOpcaoControles {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasCardapioOpcaoMenos,
.indexMainPaginaMesasCardapioOpcaoMais {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    background-color: #f0f0f0;
    cursor: pointer;
    user-select: none;
}
.indexMainPaginaMesasCardapioOpcaoValor {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}
.indexMainPaginaMesasCardapioAvisoGrupo {
    font-size: 12px;
    color: #666;
}

/* Ações: adicionar ao pedido */
.indexMainPaginaMesasCardapioAcoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.indexMainPaginaMesasCardapioBtnAdicionar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #0057D9;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}
.indexMainPaginaMesasCardapioBtnAdicionar:hover {
    background-color: #004CC3;
}
.indexMainPaginaMesasCardapioBtnAdicionarBusy {
    opacity: 0.6;
    pointer-events: none;
}
.indexMainPaginaMesasCardapioStatus {
    min-height: 20px;
    display: flex;
    align-items: center;
    color: #555;
}

/* Carrinho da mesa */
.indexMainPaginaMesasCarrinhoVazio,
.indexMainPaginaMesasCarrinhoErro {
    font-size: 13px;
    color: #666;
}
/* Ações do carrinho */
.indexMainPaginaMesasCarrinhoAcoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px 0;
}
.indexMainPaginaMesasCarrinhoEnviar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #28a745;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}
.indexMainPaginaMesasCarrinhoEnviar:hover {
    background-color: #218838;
}
.indexMainPaginaMesasCarrinhoEnviarDisabled {
    opacity: 0.6;
    pointer-events: none;
}
.indexMainPaginaMesasCarrinhoStatus {
    min-height: 20px;
    display: flex;
    align-items: center;
    color: #555;
}
/* Preparo da mesa (visualização e ação de entrega) */
.indexMainPaginaMesasPreparoCliente {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px 0;
}
.indexMainPaginaMesasPreparoClienteNome {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasPreparoAcoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px 0;
}
.indexMainPaginaMesasPreparoEntregar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #17a2b8; /* info */
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}
.indexMainPaginaMesasPreparoEntregar:hover {
    background-color: #138496;
}
.indexMainPaginaMesasPreparoEntregarDisabled {
    opacity: 0.5;
    pointer-events: none;
}
.indexMainPaginaMesasPreparoStatus {
    min-height: 20px;
    display: flex;
    align-items: center;
    color: #555;
}
.indexMainPaginaMesasPreparoVazio,
.indexMainPaginaMesasPreparoErro {
    font-size: 13px;
    color: #666;
}
/* Fechamento da mesa */
.indexMainPaginaMesasFechamentoContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.indexMainPaginaMesasFechamentoTitulo {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasFechamentoStatus {
    min-height: 20px;
    display: flex;
    align-items: center;
    color: #555;
}
.indexMainPaginaMesasFechamentoLista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.indexMainPaginaMesasFechamentoItem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background-color: #fafafa;
}
.indexMainPaginaMesasFechamentoItemTitulo {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasFechamentoItemPreco {
    font-size: 12px;
    color: #555;
}
.indexMainPaginaMesasFechamentoItemOpcoes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.indexMainPaginaMesasFechamentoItemOpcao {
    font-size: 12px;
    color: #555;
}
.indexMainPaginaMesasFechamentoTotal {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasFechamentoForm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background-color: #fafafa;
}
.indexMainPaginaMesasFechamentoLabel {
    font-size: 12px;
    color: #777;
}
.indexMainPaginaMesasFechamentoFormaWrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasFechamentoForma {
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #f2f2f2;
    cursor: pointer;
}
.indexMainPaginaMesasFechamentoForma:hover {
    background-color: #e7e7e7;
}
.indexMainPaginaMesasFechamentoFormaActive {
    background-color: #0057D9;
    color: #fff;
}
.indexMainPaginaMesasFechamentoPagoWrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasFechamentoPagoInput {
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
}
.indexMainPaginaMesasFechamentoTroco {
    font-size: 12px;
    color: #666;
}
.indexMainPaginaMesasFechamentoAcoes {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasFechamentoConfirmar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #28a745;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}
.indexMainPaginaMesasFechamentoConfirmar:hover {
    background-color: #218838;
}
.indexMainPaginaMesasFechamentoVoltar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #f2f2f2;
    cursor: pointer;
}
.indexMainPaginaMesasFechamentoVoltar:hover {
    background-color: #e7e7e7;
}
/* Nome do cliente no carrinho */
.indexMainPaginaMesasCarrinhoCliente {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px 0;
}
.indexMainPaginaMesasCarrinhoClienteNome {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasCarrinhoClienteEditar {
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #f2f2f2;
    cursor: pointer;
}
.indexMainPaginaMesasCarrinhoClienteEditar:hover {
    background-color: #e7e7e7;
}
/* Form de edição de cliente no carrinho */
.indexMainPaginaMesasCarrinhoClienteForm {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasCarrinhoClienteSalvar {
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #0057D9;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}
.indexMainPaginaMesasCarrinhoClienteSalvar:hover {
    background-color: #004CC3;
}
.indexMainPaginaMesasCarrinhoClienteCancelar {
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #f2f2f2;
    cursor: pointer;
}
.indexMainPaginaMesasCarrinhoClienteCancelar:hover {
    background-color: #e7e7e7;
}
.indexMainPaginaMesasCarrinhoItem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background-color: #fafafa;
}
.indexMainPaginaMesasCarrinhoItemTitulo {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasCarrinhoItemPreco {
    font-size: 12px;
    color: #555;
}
.indexMainPaginaMesasCarrinhoItemOpcoes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.indexMainPaginaMesasCarrinhoItemOpcao {
    font-size: 12px;
    color: #555;
}
/* Subtotal do carrinho */
.indexMainPaginaMesasCarrinhoTotal {
    font-weight: 600;
    color: #222;
}

/* Remover item no carrinho */
.indexMainPaginaMesasCarrinhoItemRemover {
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #dc3545; /* danger */
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    align-self: flex-start;
}
.indexMainPaginaMesasCarrinhoItemRemover:hover {
    background-color: #c82333;
}

/* Remover item no preparo (cozinha) */
.indexMainPaginaMesasPreparoItemRemover {
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #dc3545; /* danger */
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    align-self: flex-start;
}
.indexMainPaginaMesasPreparoItemRemover:hover {
    background-color: #c82333;
}

/* Bloco do cliente (primeiro passo) */
.indexMainPaginaMesasClienteContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.indexMainPaginaMesasClienteTitulo {
    font-weight: 600;
    color: #222;
}
.indexMainPaginaMesasClienteForm {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaMesasClienteInput {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
}
.indexMainPaginaMesasClienteSalvar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #0057D9;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}
.indexMainPaginaMesasClienteSalvar:hover {
    background-color: #004CC3;
}
.indexMainPaginaMesasClienteHint {
    font-size: 12px;
    color: #666;
}
.indexMainPaginaMesasClienteErro {
    color: #c00;
}

/* ===== Rodapé geral ===== */
.indexMainRodape {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
    background-color: #f7f7f7;
    color: #555;
}

/* Media queries migradas para css/media.css */

/* ===== Debug: linhas das divs ===== */
.indexMainDebug div {
    outline: 1px dashed rgba(0, 140, 255, 0.6);
}

/* ===== Página Admin ===== */
.indexMainPaginaAdmin {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.indexMainPaginaAdminHeader {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: #f7f7f7;
}
.indexMainPaginaAdminConteudo {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.indexMainPaginaAdminQtdMesas {}
.indexMainPaginaAdminQtdMesasTitulo {
    height: 32px;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.indexMainPaginaAdminQtdMesasControles {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaAdminQtdMesasMenos,
.indexMainPaginaAdminQtdMesasMais {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: #eaeaea;
    cursor: pointer;
}
.indexMainPaginaAdminQtdMesasValor {
    min-width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 6px;
    background-color: #f7f7f7;
}
.indexMainPaginaAdminQtdMesasSalvar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #F00;
    color: #fff;
    cursor: pointer;
}
.indexMainPaginaAdminQtdMesasAviso {
    min-height: 20px;
    display: flex;
    align-items: center;
    color: #555;
}
.indexMainPaginaAdminLimpezaPedidos {}
.indexMainPaginaAdminLimpezaPedidosTitulo {
    height: 32px;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.indexMainPaginaAdminLimpezaPedidosControles {
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexMainPaginaAdminLimpezaPedidosResetToggle {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #eaeaea;
    cursor: pointer;
}
.indexMainPaginaAdminLimpezaPedidosExecutar {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #F00;
    color: #fff;
    cursor: pointer;
}
.indexMainPaginaAdminLimpezaPedidosAviso {
    min-height: 20px;
    display: flex;
    align-items: center;
    color: #555;
}
.indexMainPaginaAdminRodape {
    height: 24px;
}

/* ===== Página Admin: Relatório Diário ===== */
.indexMainPaginaAdminRelatorioDiario {}
.indexMainPaginaAdminRelatorioDiarioTitulo {
    height: 32px;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.indexMainPaginaAdminRelatorioDiarioHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.indexMainPaginaAdminRelatorioDiarioAnterior,
.indexMainPaginaAdminRelatorioDiarioProximo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: #eaeaea;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.indexMainPaginaAdminRelatorioDiarioAnterior::before { content: '◀'; }
.indexMainPaginaAdminRelatorioDiarioProximo::before { content: '▶'; }
.indexMainPaginaAdminRelatorioDiarioProximoDisabled {
    background-color: #eeeeee;
    color: #999;
    cursor: default;
}
.indexMainPaginaAdminRelatorioDiarioData {
    min-width: 120px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 6px;
    background-color: #f7f7f7;
    font-weight: 600;
}
.indexMainPaginaAdminRelatorioDiarioAviso {
    min-height: 20px;
    display: flex;
    align-items: center;
    color: #555;
}
.indexMainPaginaAdminRelatorioDiarioConteudo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.indexMainPaginaAdminRelatorioDiarioLoading { color: #555; }

.indexMainPaginaAdminRelatorioDiarioResumo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background-color: #fff;
}
.indexMainPaginaAdminRelatorioDiarioResumoItem {
    padding: 6px 8px;
    border-radius: 6px;
    background-color: #f7f7f7;
}
.indexMainPaginaAdminRelatorioDiarioSubtitulo {
    font-weight: 600;
    margin: 4px 0 8px 0;
}
.indexMainPaginaAdminRelatorioDiarioFormas,
.indexMainPaginaAdminRelatorioDiarioPagamentos,
.indexMainPaginaAdminRelatorioDiarioItens {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background-color: #fff;
    padding: 12px;
}
.indexMainPaginaAdminRelatorioDiarioLinha {
    min-height: 28px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f7f7f7;
    margin-bottom: 6px;
}

/* ===== Página API (docs) ===== */
.indexMainPaginaApi {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.indexMainPaginaApiDocHeader {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 16px 8px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background-color: #f9f9f9;
}
.indexMainPaginaApiDocTitulo {
    font-size: 22px;
    font-weight: 700;
}
.indexMainPaginaApiDocIntro {
    color: #555;
}
.indexMainPaginaApiDocLayout {
    display: flex;
    gap: 16px;
    padding: 16px;
}
.indexMainPaginaApiDocNav {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 12px;
    height: max-content;
}
.indexMainPaginaApiDocNavItem {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    background-color: #f2f2f2;
    cursor: pointer;
}
.indexMainPaginaApiDocNavItem:hover {
    background-color: #e7e7e7;
}
.indexMainPaginaApiDocNavItemActive {
    background-color: #dcdcdc;
    font-weight: 600;
}
.indexMainPaginaApiDocContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.indexMainPaginaApiCard {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding: 16px;
    display: none; /* escondido por padrão: o JS mostra o ativo */
}
.indexMainPaginaApiCardActive {
    display: block;
}
.indexMainPaginaApiEndpointHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.indexMainPaginaApiEndpointPath {
    font-weight: 700;
}
.indexMainPaginaApiMethodBadge {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #0057D9;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.indexMainPaginaApiEndpointDesc {
    color: #333;
    margin-bottom: 12px;
}
.indexMainPaginaApiCodeBlock {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
    margin-bottom: 12px;
}
.indexMainPaginaApiCodeTitle {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-weight: 600;
}
.indexMainPaginaApiCopyBtn {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
    padding: 4px 10px;
    border-radius: 6px;
    background-color: #f2f2f2;
    cursor: pointer;
}
.indexMainPaginaApiCopyBtn:hover {
    background-color: #e7e7e7;
}
.indexMainPaginaApiCode {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 8px;
    background-color: #f8f8f8;
    padding: 12px;
    white-space: pre;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    overflow: auto;
}
.indexMainPaginaApiEndpointNotas {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.indexMainPaginaApiEndpointNota {
    color: #555;
}