/* style.css - VERSÃO FINAL COM BUSCA FLUTUANTE (OVERLAY), CORREÇÃO CONTAS ANDROID E BOTÕES EMPILHADOS */

/* ====== Design tokens (Baseados no TELA DO PDV.txt) ====== */
:root {
  --bg: #0b1220; /* Fundo geral */
  --bg-2: #0f172a; /* (Mantido para compatibilidade web) */
  --surface: #1E2128; /* neutral-800 (Fundo dos cards e inputs) */
  --border: #323743; /* neutral-700 (Bordas) */
  --text: #F3F4F6;    /* neutral-200 (Texto Principal) */
  --muted: #BDC1CA;   /* neutral-400 (Texto Secundário/Placeholder) */
  
  --accent: #3b82f6;  /* Azul padrão web */
  --accent-blue: #3566E3; /* Azul do Card de Produto (APP) */
  --accent-green: #10B981; /* Verde do Botão Finalizar (APP) */
  --accent-2: #22c55e; /* Verde padrão web */
  --danger: #EF4444;  /* Vermelho do Botão Remover */
  --secondary: #6b7280; /* Cinza para botões secundários */
  
  --shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); /* Shadow Custom */
}

/* ====== Reset Global ====== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg), var(--bg-2) 40%, var(--bg));
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  overflow-x: hidden;
}

.hidden {
  display: none !important;
}

/* ====== Layout (Sidebar + Main) ====== */
#app-container {
    display: flex;
    min-height: 100vh;
}

#sidebar {
    width: 140px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-shrink: 0;
}

.sidebar-titulo {
    font-size: 1.5rem;
    color: var(--text);
    text-align: center;
    margin: 0;
    font-weight: 700;
}

#sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 400;
    padding: 10px 16px;
    cursor: pointer;
    border-left: 4px solid transparent;
    border-radius: 8px;
    width: 100%;
    text-align: left;
    transition: all 0.2s;
}

.nav-btn:hover {
    color: var(--text);
    background: var(--bg-2);
}

.nav-btn.active {
    color: var(--accent);
    background: var(--bg-2);
    border-left-color: var(--accent);
}

/* Estilo específico para o botão de Sair */
.btn-logout {
    color: var(--danger) !important;
    transition: all 0.2s;
}
.btn-logout:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ff8080 !important;
}

main {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.card {
  background: rgba(17, 24, 39, .85);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.card h2 {
  margin-top: 0;
}


/* ====== Botões ====== */
.btn {
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 14px;
  transition: all .2s;
  text-decoration: none;
  text-align: center;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:last-child {
    margin-right: 0;
}

.btn-primary {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}
.btn-primary:hover {
  background: var(--accent-blue);
  color: #FFF;
}

.btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger);
  color: var(--text);
}

.btn-success {
  border-color: var(--accent-green);
  color: var(--accent-green);
}
.btn-success:hover {
  background: var(--accent-green);
  color: var(--text);
}

.btn-secondary {
  border-color: var(--secondary);
  color: var(--secondary);
}
.btn-secondary:hover {
  background: var(--secondary);
  color: var(--text);
}

.btn-info {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-info:hover {
  background: var(--accent);
  color: var(--text);
}


.btn-small {
  padding: 6px 10px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 8px;
}

.btn:disabled {
    border-color: var(--secondary);
    color: var(--secondary);
    background: transparent;
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-full-width {
    width: 100%;
    margin-top: 1rem;
    margin-right: 0;
}


/* ====== Formulários ====== */
.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  transition: border-color .2s;
}

#input-valor-pago {
    font-size: 1.25rem;
    padding: 14px 16px;
    font-weight: 600;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--muted);
  box-shadow: 0 0 0 1px var(--muted);
}

textarea {
  resize: vertical;
}

input:disabled {
    background-color: var(--bg-2);
    color: var(--muted);
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--border);
}

/* Estilos para Formulário de Cliente */
.form-secao-titulo {
    font-size: 1.1rem;
    color: var(--accent);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-top: 24px;
    margin-bottom: 16px;
}
.form-secao-titulo:first-of-type {
    margin-top: 0px;
}

.form-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-campo label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-campo-small {
    grid-column: span 1;
}
.form-campo-large {
    grid-column: span 2;
}

.form-acoes-topo {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

.form-divisor {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}


/* ====== Formulário em Etapas (Clientes) ====== */
.form-progress-bar {
    display: flex;
    justify-content: space-between;
    margin: 1.5rem 0;
    border-bottom: 2px solid var(--border);
}

.progress-step {
    flex: 1;
    text-align: center;
    padding-bottom: 10px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.75rem;
    border-bottom: 4px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
}

.progress-step.active-step {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.form-step {
    display: none;
}

.form-step.active-step {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

.form-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ====== Listas de Itens (Produtos/Clientes) ====== */
#lista-clientes-modal,
#lista-produtos-modal,
#lista-clientes-pdv-modal {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 1rem;
}

.item-lista {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 10px;
}

.item-lista-acoes {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.item-lista-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    padding-right: 10px;
    word-break: break-word;
}

.item-lista-info .produto-lista-nome {
    font-size: 1.0rem;
    font-weight: 500;
    color: var(--text);
}

.item-lista .info-secundaria {
    font-size: 0.9rem;
    color: var(--muted);
    margin-left: 0;
}

#lista-produtos-modal .info-secundaria {
    font-size: 0.8rem;
}


/* ====== Estilos Específicos do PDV (WEB) ====== */
.pdv-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.pdv-produtos-grid {
  flex: 3;
  min-width: 300px;
}

.pdv-carrinho {
  flex: 2;
  background: var(--bg-2);
  padding: 20px;
  border-radius: 16px;
  min-width: 280px;
}

.pdv-formas-pagamento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 5px;
}

.pdv-formas-pagamento-grid .btn-pagamento {
    padding: 8px 8px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-right: 0;
}

.btn-pagamento.selected {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

#busca-produto-pdv-input {
    padding: 14px 16px !important;
    font-size: 1.1rem !important;
}


#pdv-lista-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.produto-item {
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-align: center;
  transition: all .2s;
}

.produto-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

#carrinho-itens {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

#carrinho-itens li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.remover-item {
  background-color: var(--danger);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-weight: bold;
}

.carrinho-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--border);
  font-size: 1.5rem;
  text-align: right;
}

.pdv-acoes-botoes {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
}

.pdv-acoes-botoes .btn {
    flex: 1;
    margin-right: 0;
    font-size: 1rem;
    padding: 14px;
}

.pdv-cliente-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#pdv-cliente-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#pdv-cliente-nome {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

#pdv-cliente-doc {
    font-size: 0.9rem;
    margin-left: 0;
}

.pdv-cliente-acoes {
    display: flex;
    gap: 8px;
}


/* ====== Estilos da Página Contas ====== */
.contas-saldo-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contas-saldo-box span {
    font-size: 1.1rem;
    color: var(--muted);
    font-weight: 500;
}

.contas-saldo-box strong {
    font-size: 1.75rem;
    font-weight: 700;
}
.contas-saldo-box strong.saldo-negativo {
    color: var(--danger);
}
.contas-saldo-box strong.saldo-positivo {
    color: var(--accent-2);
}


/* ESTRUTURA ORIGINAL GRID (DESKTOP) */
.contas-detalhe-grid {
    display: grid;
    grid-template-columns: 220px 1fr; 
    gap: 1.5rem; 
    margin-top: 1.5rem;
}

.contas-coluna-extrato h3,
.contas-coluna-pagamento h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    font-size: 1.1rem; 
}

#contas-lista-movimentacoes {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}

.movimentacao-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.movimentacao-item:last-child {
    border-bottom: none;
}

/* ====== Checkbox de Pagamento ====== */
.movimentacao-info {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    gap: 10px; 
    flex-grow: 1; 
}

.chk-pagar-debito {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.movimentacao-info-texto {
    display: flex;
    flex-direction: column;
}

.movimentacao-info span {
    font-size: 1rem;
    font-weight: 500;
}

.movimentacao-info span.debito {
    color: var(--danger);
    font-weight: 700;
}

.movimentacao-info span.credito {
    color: var(--accent-2);
    font-weight: 700;
}

.movimentacao-info .info-secundaria {
    font-size: 0.85rem;
}

.movimentacao-valor {
    font-size: 1.1rem;
    font-weight: 700;
}
.movimentacao-valor.debito {
    color: var(--danger);
    font-weight: 700;
}
.movimentacao-valor.credito {
    color: var(--accent-2);
    font-weight: 700;
}

.contas-coluna-pagamento .form-campo label {
    font-size: 0.8rem;
}

.contas-coluna-pagamento input[type="text"],
.contas-coluna-pagamento input[type="date"] {
    font-size: 0.9rem;
    padding: 10px 12px;
}

.contas-coluna-pagamento .btn {
    font-size: 0.9rem;
    padding: 10px 14px;
}


/* ====== Estilos da Tela de Vendas ====== */
.venda-item-header,
.venda-item {
    display: grid;
    grid-template-columns: 1.5fr 4fr 1.5fr 1.5fr 2fr;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.venda-item-header {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border);
}

.venda-item {
    background: var(--bg-2);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid transparent; 
}

.venda-item:hover {
    border-color: var(--border);
}

.venda-item.venda-item-padrao {
    background: var(--bg);
    opacity: 0.8;
}

.venda-item span {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.venda-item .venda-acoes {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    text-align: right;
    overflow: visible;
}


/* ====== Estilos de Notificação (Toast) ====== */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--accent-2);
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 1000;
  transition: opacity 0.3s, transform 0.3s;
  font-weight: 600;
}

.toast.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

.toast.error {
    background: var(--danger);
}


/* ====== Estilos dos Modais ====== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    opacity: 1;
    transition: opacity 0.2s ease-out;
    overflow-y: auto; 
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#modal-overlay {
    z-index: 2001;
}

.modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease-out;
}

.modal-overlay:not(.hidden) .modal-box {
    transform: scale(1);
    opacity: 1;
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.25rem;
}

.modal-body {
    padding: 24px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
}
.modal-body p {
    margin: 0;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-busca-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 700px;
    padding: 0;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.2s ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#modal-finalizar-venda-overlay .modal-busca-box {
    max-width: 450px;
}

#modal-finalizar-venda-overlay .modal-busca-body {
    padding: 12px 24px;
    max-height: 80vh;
    overflow-y: auto;
}

#modal-finalizar-venda-overlay .carrinho-total {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: none;
    padding-bottom: 8px;
}
#modal-finalizar-venda-overlay .carrinho-total p {
    margin-bottom: 3px !important;
}


#modal-pagamento-total-a-pagar {
    font-size: 1.6rem !important;
}
#modal-pagamento-troco {
    font-size: 1.6rem !important;
}


.modal-overlay:not(.hidden) .modal-busca-box {
    transform: scale(1);
    opacity: 1;
}

.modal-busca-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}
.modal-busca-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.25rem;
}

.modal-busca-close-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-busca-close-btn:hover {
    color: var(--text);
}

.modal-busca-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
    max-height: 70vh;
}

#modal-historico-parcela-overlay .modal-busca-body {
    padding: 0;
}


.modal-busca-filtros-grid {
    display: flex;
    gap: 10px;
    align-items: center;
}

.modal-busca-filtros-grid input[type="search"] {
    flex: 1;
}

.modal-busca-filtros-grid select {
    width: 160px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.modal-busca-botoes-grid {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 1rem;
}

.modal-busca-botoes-grid .btn {
    flex: 1;
    margin-right: 0;
}

#lista-clientes-modal p,
#lista-produtos-modal p,
#lista-clientes-pdv-modal p {
    color: var(--muted);
    text-align: center;
    padding: 1rem;
}


/* ====== Text Transform ====== */
#produto-nome,
#cliente-nome,
#cliente-rua,
#cliente-cidade,
#produto-marca,
#config-pix-nome,
#config-pix-cidade { 
    text-transform: uppercase;
}


/* ====== Ajustes Finos (Fonte/Espaçamento) ====== */
#tela-clientes .form-grid,
#tela-produtos .form {
  gap: 8px;
}
#tela-clientes .form-grid {
  margin-bottom: 8px;
}

#tela-clientes .form-campo {
    gap: 3px;
}

#tela-produtos .btn,
#tela-clientes .btn {
    font-size: 0.85rem;
    padding: 8px 14px;
}

#tela-produtos .form input,
#tela-produtos .form select,
#tela-clientes input[type="text"],
#tela-clientes input[type="number"],
#tela-clientes input[type="tel"],
#tela-clientes input[type="email"],
#tela-clientes input[type="date"],
#tela-clientes select,
#tela-clientes textarea {
  font-size: 0.9rem;
  padding: 9px 12px;
}

#tela-clientes .form-campo label {
    font-size: 0.8rem;
}

#tela-clientes .form-secao-titulo {
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 12px;
}

#tela-clientes .progress-step {
    font-size: 0.85rem;
    padding-bottom: 8px;
}

#tela-produtos .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
#tela-produtos .form-campo-large {
    grid-column: span 2;
}

/* ====== Ajustes Extrato Cliente ====== */
.movimentacao-item .movimentacao-acoes {
    display: flex;
    align-items: center; 
    gap: 8px; 
    flex-wrap: nowrap; 
}

.movimentacao-item .movimentacao-acoes .movimentacao-valor {
    margin-left: auto; 
    white-space: nowrap; 
    min-width: 100px; 
    text-align: right;
}

.venda-item-header span:last-child {
    text-align: right;
}


/* ====== Bloco de Vendas (Extrato) ====== */
.bloco-venda {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden; 
}

.bloco-venda-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg); 
}

.bloco-venda-titulo .info-secundaria {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--muted);
    margin-left: 8px;
}

.bloco-venda .movimentacao-item {
    padding-left: 16px;
    padding-right: 16px;
}

.btn-historico {
  border-color: var(--secondary);
  color: var(--secondary);
  padding-left: 8px;
  padding-right: 8px;
}
.btn-historico:hover {
  background: var(--secondary);
  color: var(--text);
}

#lista-historico-parcela {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
}

.historico-pagamento-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}
.historico-pagamento-item:last-child {
    border-bottom: none;
}

.historico-pagamento-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.historico-pagamento-item-info span {
    font-size: 0.95rem;
    color: var(--muted);
}

.historico-pagamento-item-info strong {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-2); /* Verde */
}

.btn-excluir-recibo {
    background-color: var(--danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    margin-left: 10px;
}


/* ====== NOVO: Grid de Pagamento na Tela Contas ====== */
.contas-pagamento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    gap: 8px;
}

.btn-pagamento-contas {
    padding: 8px; 
    font-weight: 700;
    font-size: 0.9rem;
    margin-right: 0;
    border: 1px solid var(--secondary);
    color: var(--secondary);
    background: transparent;
}
.btn-pagamento-contas:hover {
    background: var(--secondary);
    color: var(--text);
}

.btn-pagamento-contas.selected {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

/* ====== NOVO: Estilos do Modal PIX ====== */
#pix-qrcode-container {
    width: 256px;
    height: 256px;
    background: #ffffff; /* Fundo branco para o QR Code */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

#pix-qrcode-container canvas,
#pix-qrcode-container img {
    width: 100% !important;
    height: 100% !important;
}

#tela-configuracoes .form-grid {
    max-width: 800px;
}
#tela-configuracoes .form-campo-large {
    grid-column: span 2;
}

/* ========================================= */
/* ====== NOVOS ESTILOS: RELATÓRIOS ====== */
/* ========================================= */

.relatorios-toolbar {
    display: flex;
    gap: 15px;
    background: var(--bg-2);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    flex-wrap: wrap; /* Permitir quebra em telas pequenas */
}

#busca-relatorio-input {
    background: var(--bg);
    border: 1px solid var(--border);
}

.relatorios-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.card-relatorio {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente */
    text-align: center;  /* Centraliza texto */
    min-height: 180px;
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent; /* Garante borda em todos */
}

.card-relatorio:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); /* Efeito Glow */
    transform: translateY(-4px);
}

.card-relatorio-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    margin-top: 10px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 50%;
    border: 1px solid var(--border);
}

.relatorio-id {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--bg);
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--muted);
    border: 1px solid var(--border);
}

.card-relatorio h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase; /* Estilo PDV */
    color: var(--text);
}

.card-relatorio p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
    flex: 1;
    margin-bottom: 15px;
}

.tag-categoria {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: auto; /* Empurra para baixo */
}
.tag-categoria.financeiro { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.tag-categoria.clientes { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
.tag-categoria.estoque { color: #10b981; background: rgba(16, 185, 129, 0.1); }


.relatorio-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.relatorio-resumo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.card-resumo {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}
.card-resumo span { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 5px; }
.card-resumo strong { display: block; font-size: 1.5rem; color: var(--text); }

.card-resumo.danger strong { color: var(--danger); }
.card-resumo.success strong { color: var(--accent-2); }
.card-resumo.warning strong { color: #f59e0b; }

.tabela-relatorio {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabela-relatorio th {
    text-align: left;
    padding: 12px;
    background: var(--bg);
    color: var(--muted);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}

.tabela-relatorio td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.tabela-relatorio tr:last-child td { border-bottom: none; }
.tabela-relatorio .text-right { text-align: right; }

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}
.badge-danger { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }

@media print {
    #sidebar, .relatorios-toolbar, #btn-voltar-relatorios, .relatorio-actions-footer { display: none !important; }
    main { padding: 0; margin: 0; height: auto; overflow: visible; }
    .card { border: none; box-shadow: none; background: white; color: black; }
    body { background: white; color: black; }
    .tabela-relatorio th { color: black; border-bottom: 1px solid #000; }
    .tabela-relatorio td { color: black; border-bottom: 1px solid #ddd; }
    
    #modal-criar-relatorio-overlay { display: none !important; }
    #area-impressao {
        display: block;
        width: 100%;
        font-family: monospace;
    }
    .hidden-print {
        display: none !important;
    }
}

#total-relatorios-badge {
    background: var(--bg);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    border: 1px solid var(--border);
}

#novo-rel-filtro-operador, #novo-rel-filtro-campo {
    font-size: 0.9rem;
    padding: 10px;
}

.relatorio-actions-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

#modal-criar-relatorio-overlay .modal-busca-box {
    max-height: 90vh; /* Altura máxima de 90% da tela */
    display: flex;
    flex-direction: column;
}

#modal-criar-relatorio-overlay .modal-busca-body {
    overflow-y: auto !important; /* IMPORTANTE: Força o scroll vertical */
    flex: 1; /* Ocupa o espaço restante */
    padding-bottom: 20px;
}

#modal-criar-relatorio-overlay h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--accent);
}

.flags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    margin-top: 5px;
}

.flag-item {
    position: relative;
}

.flag-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.flag-label {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.flag-label:hover {
    border-color: var(--accent);
    color: var(--text);
}

.flag-item input[type="checkbox"]:checked + .flag-label {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

@media print {
    body * {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }
    
    #area-impressao, #area-impressao * {
        visibility: visible;
        height: auto;
        overflow: visible;
    }

    #area-impressao {
        position: absolute;
        left: 0;
        top: 0;
        width: 58mm; /* Largura padrão térmica (ajustável para 72mm/80mm) */
        padding: 0;
        margin: 0;
        background: white;
        color: black;
        font-family: 'Courier New', Courier, monospace; /* Fonte monoespaçada */
        font-size: 12px; /* Tamanho legível */
        line-height: 1.2;
    }
    
    .cupom-wrapper {
        padding: 5px 0;
    }

    .cupom-header {
        text-align: center;
        border-bottom: 1px dashed #000;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    
    .cupom-header h2 {
        font-size: 14px;
        margin: 0;
        font-weight: bold;
    }
    
    .cupom-info {
        font-size: 10px;
        margin-bottom: 5px;
    }

    .cupom-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 5px;
    }
    
    .cupom-table th {
        text-align: left;
        font-size: 10px;
        border-bottom: 1px dashed #000;
    }
    
    .cupom-table td {
        font-size: 11px;
        vertical-align: top;
        padding: 2px 0;
    }

    .cupom-total {
        border-top: 1px dashed #000;
        padding-top: 5px;
        margin-top: 5px;
        font-weight: bold;
        font-size: 13px;
        text-align: right;
    }

    .cupom-footer {
        margin-top: 10px;
        text-align: center;
        font-size: 10px;
        border-top: 1px dashed #000;
        padding-top: 5px;
    }
    
    .no-print {
        display: none !important;
    }
}

.login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.login-box {
  background: var(--surface);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-box h1 {
  color: var(--accent);
  margin-bottom: 10px;
  margin-top: 0;
}

.login-box p {
  color: var(--muted);
  margin-bottom: 30px;
}

/* ========================================================== */
/* ====== MODO MISTO (MEDIA QUERY PARA CELULAR WEB) ========= */
/* ========================================================== */
@media (max-width: 768px) {
    /* 1. O container principal trava na altura da tela */
    #app-container {
        flex-direction: column-reverse; /* Sidebar vira menu inferior/superior */
        height: 100vh;
        overflow: hidden; /* IMPEDE rolagem na página inteira */
    }

    main {
        padding: 10px;
        height: calc(100vh - 60px); /* Desconta tamanho do menu se houver */
        overflow: hidden; /* A main não rola, quem rola são os filhos */
        display: flex;
        flex-direction: column;
    }

    #tela-pdv {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: 0; /* Remove padding extra do card */
    }

    .pdv-container {
        flex: 1; /* Ocupa todo o espaço disponível */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Segredo para o filho rolar dentro */
        gap: 10px;
    }

    /* 2. Lista de Resultados da Busca (Reduzida no mobile) */
    .pdv-produtos-grid {
        flex: 0 0 auto; /* Altura automática baseada no conteúdo */
        max-height: 25vh; /* Ocupa no MÁXIMO 25% da tela */
        overflow-y: auto;
        margin-bottom: 5px;
        border-bottom: 1px solid var(--border);
    }
    
    /* Grid menor para caber mais produtos na busca */
    #pdv-lista-produtos {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    /* 3. A Comanda (Onde está o problema) */
    .pdv-carrinho {
        flex: 1; /* O SEGREDO: Cresce para ocupar TODO o espaço que sobrar */
        display: flex;
        flex-direction: column;
        min-height: 0; /* Correção para flexbox aninhado */
        overflow: hidden; /* Impede vazar para fora */
        padding: 10px;
    }

    /* Título e Inputs da Comanda (Ficam fixos no topo da comanda) */
    .pdv-carrinho h3, 
    .pdv-carrinho .form-campo, 
    .pdv-cliente-box {
        flex-shrink: 0; /* Não deixamos encolher */
    }

    /* 4. A LISTA de itens (A única coisa que deve rolar) */
    #carrinho-itens {
        flex: 1; /* Ocupa o espaço entre o cliente e o total */
        overflow-y: auto; /* Barra de rolagem SÓ AQUI */
        max-height: none; /* Remove limite fixo de desktop */
        min-height: 0;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border);
    }

    /* 5. Rodapé (Total + Botões) - TRAVADO EMBAIXO */
    .carrinho-total, 
    .pdv-acoes-botoes {
        flex-shrink: 0; /* Impede que sejam esmagados */
        margin-top: 0;
    }
    
    /* Garante que os botões tenham tamanho clicável */
    .pdv-acoes-botoes .btn {
        padding: 12px;
    }
}

/* ========================================================== */
/* ====== MODO APP NATIVO (LAYOUT DEFINITIVO & DESIGN SYSTEM) */
/* ========================================================== */

/* 1. Limpeza da Interface */
body.modo-app-nativo #nav-produtos,
body.modo-app-nativo #nav-precos,
body.modo-app-nativo #nav-clientes,
body.modo-app-nativo #nav-contas,
body.modo-app-nativo #nav-vendas,
body.modo-app-nativo #nav-relatorios,
body.modo-app-nativo #nav-configuracoes,
body.modo-app-nativo .sidebar-titulo, 
body.modo-app-nativo .btn-logout,
body.modo-app-nativo #sidebar,
body.modo-app-nativo #nav-pdv {
    display: none !important;
}

body.modo-app-nativo #app-container {
    flex-direction: column-reverse !important;
    height: 100vh;
    overflow: hidden;
    background: var(--bg); /* Garante fundo correto */
}

body.modo-app-nativo main {
    padding: 15px !important;
    margin: 0 !important;
    height: 100vh !important;
    overflow: hidden; 
    max-width: 100%;
}

/* 2. Container Principal Flexível */
body.modo-app-nativo #tela-pdv.card {
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    background: transparent;
}
/* ====== MODO APP NATIVO
/* --- AQUI ESTÁ A CORREÇÃO PRINCIPAL (OVERLAY + BOTÃO FECHAR) --- */

/* 1. Container Principal (O Pai) */
body.modo-app-nativo .pdv-container {
    position: relative !important; /* CRUCIAL: Define o limite para o filho flutuar */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
}

/* 2. A Caixa de Busca (O Menu Flutuante) */
body.modo-app-nativo .pdv-produtos-grid {
    position: absolute !important; /* FLUTUA por cima da comanda */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Garante que fique na frente de tudo */
    
    background: var(--bg); /* Fundo sólido */
    border-bottom: 2px solid var(--accent); /* Borda azul bonita */
    box-shadow: 0 10px 40px rgba(0,0,0,0.9); /* Sombra forte */
    
    max-height: 60vh; /* Ocupa até 60% da tela */
    min-height: 0 !important;
    
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 0 0 16px 16px; /* Arredonda só embaixo */
}

/* 3. Esconde a caixa se não tiver itens (O "X" limpa a lista, o CSS esconde a caixa) */
body.modo-app-nativo .pdv-produtos-grid:not(:has(.produto-item)) {
    display: none !important;
}

/* 4. Cabeçalho da Busca (Onde fica o Título e o Botão X) */
body.modo-app-nativo .pdv-busca-header {
    display: flex;
    justify-content: space-between; /* Título na esq, Botão na dir */
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border); /* Linha fina separando da lista */
    flex-shrink: 0; /* Impede que o cabeçalho encolha */
}

/* Título Ajustado */
body.modo-app-nativo #pdv-produtos-grid-titulo {
    font-size: 13px;
    font-weight: 700;
    margin: 0 !important;
    color: var(--accent);
    text-transform: uppercase;
}

/* 5. Estilo do Botão Fechar (X) */
body.modo-app-nativo .btn-fechar-busca {
    background: rgba(239, 68, 68, 0.1); /* Fundo vermelho bem clarinho */
    border: 1px solid var(--danger);
    color: var(--danger); /* Texto Vermelho */
    
    width: 28px;
    height: 28px;
    border-radius: 50%; /* Faz ficar redondo */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    transition: all 0.2s;
}

body.modo-app-nativo .btn-fechar-busca:active {
    background: var(--danger);
    color: white;
}

/* 6. Ajuste da Lista de Produtos (para rolar DENTRO da caixa flutuante) */
body.modo-app-nativo #pdv-lista-produtos {
    overflow-y: auto; /* Barra de rolagem só aqui */
    flex: 1; /* Ocupa o resto do espaço da caixa */
    padding-right: 5px;
    
    /* Garante estilo de lista vertical */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* --- FIM DA CORREÇÃO (O RESTO ABAIXO PODE MANTER IGUAL) --- */


/* 4. Área da Comanda (BAIXO) - Ocupa todo o fundo */
body.modo-app-nativo .pdv-carrinho {
    flex: 1; /* Ocupa todo o RESTO do espaço */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* IMPORTANTE: Impede o container de crescer além da tela */
    max-height: 100%;
    
    background: var(--surface); /* #1E2128 */
    border-radius: 16px;
    border: none;
    box-shadow: var(--shadow);
    padding: 8px !important; /* Padding reduzido */
}

/* Título Comanda */
body.modo-app-nativo .pdv-carrinho h3 {
    font-size: 18px !important; /* Levemente menor */
    font-weight: 700;
    color: var(--text);
    margin: 0 0 5px 0 !important; /* REDUZIDO DE 15PX PARA 5PX */
}

/* Inputs da Comanda (Data e Cliente) */
body.modo-app-nativo .form-campo {
    margin-bottom: 6px !important; /* REDUZIDO DE 12PX PARA 6PX */
}
body.modo-app-nativo .form-campo label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 2px; /* Menor margem do label */
}

/* Box do Cliente selecionado */
body.modo-app-nativo .pdv-cliente-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px !important; /* Padding compacto */
    margin-bottom: 4px !important;
    min-height: auto;
}

/* CORREÇÃO AQUI: Ajustes de fonte no nome do cliente */
body.modo-app-nativo #pdv-cliente-info {
    font-size: 0.9rem;
    line-height: 1.2;
}

body.modo-app-nativo #pdv-cliente-nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 200px; /* Limite visual */
}

/* 5. Lista de Itens (Scrollavel) - OCUPA O ESPAÇO CENTRAL */
body.modo-app-nativo #carrinho-itens {
    flex: 1; /* Ocupa 100% do espaço restante */
    overflow-y: auto; /* Ativa rolagem */
    min-height: 0; /* CRUCIAL: Permite que o flex encolha */
    margin: 5px 0 !important; /* Margem reduzida */
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-right: 5px; /* Espaço para scrollbar */
    padding-bottom: 5px;
}

/* ITEM DA COMANDA (Alinhamento corrigido) */
body.modo-app-nativo #carrinho-itens li {
    display: grid !important; /* Muda de flex para grid para alinhar colunas */
    grid-template-columns: 1fr auto auto; /* Nome (livre) | Preço (auto) | Botão (auto) */
    align-items: center;
    gap: 10px; /* Espaço consistente entre os elementos */
    
    padding: 8px 0; /* Padding menor no item */
    font-size: 12px;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Nome do Produto (Esquerda) */
body.modo-app-nativo #carrinho-itens li div:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Isso garante que o texto longo seja cortado com "..." e não empurre o resto */
}

/* Preço (Meio/Direita) */
body.modo-app-nativo #carrinho-itens li div:nth-child(2) {
    text-align: right;
    font-weight: 600;
    white-space: nowrap; /* Preço nunca quebra linha */
}

/* Botão Remover (Direita Fixa) */
body.modo-app-nativo .remover-item {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--danger); /* #EF4444 */
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-left: 0 !important; /* Remove margem antiga */
    flex-shrink: 0; /* Impede o botão de amassar */
}

/* 6. Rodapé da Comanda (Total + Botões) */
body.modo-app-nativo .carrinho-total {
    flex-shrink: 0; /* CORREÇÃO AQUI: Impede que suma */
    margin-top: 0;
    padding-top: 5px;
    font-size: 18px; 
    font-weight: 700;
    border: none;
    text-align: right;
    margin-bottom: 5px;
    color: var(--text);
}

body.modo-app-nativo .pdv-acoes-botoes {
    flex-shrink: 0; /* CORREÇÃO AQUI: Impede esmagamento */
    margin-top: auto;
    gap: 12px;
    display: flex;
    padding-top: 5px;
}

/* Botões do Rodapé (Estilos Específicos do TXT) */

/* Botão Finalizar (Verde Outline) */
body.modo-app-nativo #finalizar-venda {
    flex: 1;
    height: 40px;
    border: 1px solid var(--accent-green); /* #10B981 */
    color: var(--accent-green);
    background: transparent;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    text-transform: none; /* O txt não usa uppercase */
}
body.modo-app-nativo #finalizar-venda:hover,
body.modo-app-nativo #finalizar-venda:active {
    background: rgba(16, 185, 129, 0.1);
}

/* Botão Fiado (Cinza Outline) */
body.modo-app-nativo #btn-lancar-fiado {
    flex: 1;
    height: 40px;
    border: 1px solid var(--muted); /* #BDC1CA */
    color: var(--muted);
    background: transparent;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
}
body.modo-app-nativo #btn-lancar-fiado:hover,
body.modo-app-nativo #btn-lancar-fiado:active {
    background: rgba(189, 193, 202, 0.1);
}

/* Barra de Rolagem Customizada para Android (Para ficar visível) */
body.modo-app-nativo ::-webkit-scrollbar {
    width: 4px;
}
body.modo-app-nativo ::-webkit-scrollbar-track {
    background: transparent;
}
body.modo-app-nativo ::-webkit-scrollbar-thumb {
    background: #323743; /* Visível */
    border-radius: 4px;
}

/* Ajustes gerais de inputs mobile */
body.modo-app-nativo .login-box { width: 90%; max-width: 400px; margin: auto; }
body.modo-app-nativo .form-grid { grid-template-columns: 1fr !important; }
body.modo-app-nativo .form-campo-large { grid-column: span 1 !important; }

/* ========================================================== */
/* ====== RESPONSIVIDADE AVANÇADA (ADAPTAÇÃO DE TELAS) ====== */
/* ========================================================== */

/* 1. CELULARES PEQUENOS (Ex: iPhone SE, Androids antigos) */
/* Se a altura da tela for menor que 750px (Ajuste de segurança) */
@media (max-height: 750px) {
    
    /* Diminui a fonte geral para caber mais coisas */
    body.modo-app-nativo {
        font-size: 12px;
    }

    /* Reduz a altura da busca para dar prioridade à lista */
    body.modo-app-nativo .pdv-produtos-grid {
        max-height: 45vh; /* Menos espaço para a busca flutuante */
    }

    /* Compacta botões e inputs */
    body.modo-app-nativo .btn {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    body.modo-app-nativo #busca-produto-pdv-input {
        height: 35px;
        font-size: 13px;
    }

    /* Reduz tamanho dos itens da lista de produtos */
    body.modo-app-nativo .produto-item {
        padding: 6px 10px !important;
        min-height: auto !important;
    }
    
    /* Compacta linhas da comanda */
    body.modo-app-nativo #carrinho-itens li {
        padding: 5px 0;
    }
}

/* 2. CELULARES GRANDES / TABLETS (Ex: S23 Ultra, Tablets) */
/* Se a largura da tela for maior que 600px */
@media (min-width: 600px) {

    /* Aumenta a fonte para não ficar minúsculo no tablet */
    body.modo-app-nativo {
        font-size: 16px;
    }

    /* Botões maiores para facilitar o toque */
    body.modo-app-nativo .btn {
        padding: 15px 24px;
        font-size: 16px;
    }

    /* Inputs mais altos */
    body.modo-app-nativo input, 
    body.modo-app-nativo select {
        padding: 15px;
        font-size: 16px;
    }

    /* Na lista de busca, cabe mais colunas no tablet */
    body.modo-app-nativo #pdv-lista-produtos {
        gap: 15px !important;
    }
}

/* ================================================================= */
/* ====== LAYOUT MOBILE / ANDROID PROFISSIONAL (FORÇADO 100%) ======== */
/* ================================================================= */

/* Se a tela for menor que 1000px (Qualquer Celular ou Tablet Vertical) */
@media (max-width: 1000px) {

    /* 1. Ocultar Brutalmente o Menu Lateral e Itens de PC */
    #sidebar, 
    .web-only,
    .sidebar-titulo,
    #nav-logout,
    .nav-btn {
        display: none !important;
    }

    /* 2. Resetar o Container Principal para Coluna */
    #app-container {
        flex-direction: column !important;
        padding-top: 60px !important; /* Espaço pro menu do topo */
        height: 100vh !important;
        overflow: hidden !important;
        background-color: var(--bg) !important;
    }

    /* Resetar a Main */
    main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* 3. MENU SUPERIOR FIXO (Aparece Sempre no Mobile) */
    #mobile-top-nav {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: #1a1d2d;
        z-index: 99999; /* Acima de tudo */
        padding: 0;
        align-items: stretch;
        border-bottom: 1px solid #2e3248;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .mobile-tab {
        flex: 1;
        background: transparent;
        border: none;
        color: #8b9bb4;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-tab.active {
        color: #3b82f6; /* Azul */
        border-bottom-color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
    }

    /* 4. TELA PDV (Estilo App) */
    #tela-pdv.card {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 10px !important;
        height: 100% !important;
        display: flex;
        flex-direction: column;
    }

    /* Esconde título redundante se houver */
    .mobile-only-title { display: none !important; }

    /* Input de Busca Escuro */
    .pdv-search-wrapper input {
        background: #111827 !important;
        border: 1px solid #374151 !important;
        color: #fff !important;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* Comanda em Tela Cheia */
    .pdv-container-flex {
        flex-direction: column !important;
        height: 100% !important;
        gap: 0 !important;
    }

    .pdv-carrinho {
        width: 100% !important;
        flex: 1 !important; /* Ocupa todo espaço */
        background: #1a1d2d !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 10px !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Lista de Itens com Scroll */
    #carrinho-itens {
        flex: 1;
        overflow-y: auto;
        border-top: 1px solid #374151;
        border-bottom: 1px solid #374151;
        margin: 10px 0;
    }

    /* Ajuste Rodapé */
    .pdv-footer-actions {
        margin-top: auto;
    }
    .carrinho-total {
        color: #fff;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    /* 5. BUSCA FLUTUANTE (OVERLAY) */
    #mobile-search-overlay {
        position: fixed;
        top: 120px;
        left: 10px;
        right: 10px;
        background: #1E2128;
        border: 1px solid #3b82f6;
        z-index: 100000;
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.9);
        display: flex;
        flex-direction: column;
        max-height: 50vh;
    }

    .item-mobile-search {
        padding: 15px;
        border-bottom: 1px solid #374151;
        color: white;
        font-size: 1rem;
        display: flex;
        justify-content: space-between;
    }
}

/* ================================================================= */
/* ===  CORREÇÃO DE LAYOUT: TELA CONTAS (ANDROID/MOBILE)  ========== */
/* ================================================================= */

/* Regras aplicadas APENAS quando a tela for menor que 1000px (Celular/Tablet) */
@media (max-width: 1000px) {
    
    /* 1. DESTRÓI O GRID: Transforma a área de contas em bloco simples */
    .contas-detalhe-grid {
        display: block !important; 
        grid-template-columns: none !important;
        margin-top: 10px;
        position: relative;
        height: auto; /* Permite que o extrato cresça */
    }

    /* 2. EXTRATO FULL SCREEN: Ocupa toda a largura disponível */
    .contas-coluna-extrato {
        width: 100% !important;
        display: block !important;
        margin-top: 20px;
        
        /* CORREÇÃO AQUI: Espaço extra no final para o botão não cobrir nada */
        padding-bottom: 120px !important; 
    }

    /* 3. PAGAMENTO VIROU POPUP (BOTTOM SHEET) */
    .contas-coluna-pagamento {
        position: fixed !important;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #1E2128; /* Cor de fundo */
        z-index: 99999; /* Fica acima de tudo */
        padding: 20px;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 30px rgba(0,0,0,0.8);
        border-top: 1px solid #3b82f6; 
        
        transform: translateY(110%); 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    .contas-coluna-pagamento.popup-ativo {
        transform: translateY(0) !important;
    }

    /* 4. BOTÃO FLUTUANTE (FAB) - VERDE */
    #btn-mobile-abrir-pagamento {
        display: flex !important;
        position: fixed;
        bottom: 20px; /* Distância do fundo */
        right: 20px;
        left: 20px;
        height: 56px;
        background: #10B981;
        color: white;
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.1rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.6); /* Sombra mais forte para destacar */
        z-index: 9990; 
        border: none;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* 5. HEADER DO POPUP */
    .mobile-sheet-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #323743;
        padding-bottom: 10px;
    }
    .mobile-sheet-header h3 { margin: 0; color: #F3F4F6; font-size: 1.2rem; }
    .mobile-sheet-header button { 
        background: none; border: none; color: #BDC1CA; font-size: 2rem; padding: 0 10px;
    }

    .web-only-title { display: none !important; }

    /* 6. CORREÇÃO VISUAL DO EXTRATO (Atualizado) */
    .venda-item-header { display: none !important; }

    .venda-item {
        display: grid !important;
        grid-template-columns: 1fr auto !important; /* Texto esquerda | Botões direita */
        gap: 10px;
        padding: 12px;
        background: var(--bg-2, #0f172a);
        border: 1px solid var(--border, #323743);
        margin-bottom: 8px;
        border-radius: 8px;
        align-items: center; /* Centraliza verticalmente */
    }

    /* Configuração dos Textos (Coluna 1) */
    .venda-item span {
        grid-column: 1; /* Força ficar na esquerda */
        width: 100%;
        white-space: normal !important; /* Permite quebra de linha */
        font-size: 0.9rem;
        line-height: 1.4;
        display: block; /* Garante que fiquem um abaixo do outro visualmente se forem spans soltos */
    }

    /* Destaque para o Título/Descrição (Geralmente o 2º span) */
    .venda-item span:nth-of-type(2) {
        font-weight: 700;
        font-size: 1rem;
        color: var(--text);
        margin-bottom: 4px;
    }

    /* Configuração dos Botões (Coluna 2 - Empilhados) */
    .venda-item .venda-acoes {
        grid-column: 2; /* Fica na direita */
        grid-row: 1 / 99; /* Ocupa toda altura lateral */
        width: auto !important; /* Largura automática ajustada ao conteúdo */
        display: flex !important;
        flex-direction: column !important; /* UM EM CIMA DO OUTRO */
        gap: 8px !important;
        justify-content: center;
        align-items: flex-end; /* Alinha a direita */
        margin: 0 !important;
        border: none !important;
        padding: 0 !important;
    }

    .venda-item .venda-acoes .btn {
        width: 100%; /* Botões com mesma largura */
        min-width: 80px; /* Largura mínima para ler */
        margin: 0 !important;
    }


    /* 7. FUNDO ESCURO */
    .overlay-backdrop {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.7); z-index: 99990;
        display: none;
    }
    .overlay-backdrop.visible { display: block; }
}

/* Desktop: Esconde coisas mobile */
@media (min-width: 1001px) {
    #btn-mobile-abrir-pagamento, .mobile-sheet-header { display: none !important; }
}

/* ================================================================= */
/* ===  CORREÇÃO FINAL: CONTAS MOBILE (LAYOUT COMPACTO + ROLAGEM) == */
/* ================================================================= */

/* Aplica somente em telas menores que 1000px (Celulares/Tablets) */
@media (max-width: 1000px) {

    /* 1. COMPACTAR O CABEÇALHO (Ganhar espaço no topo) */
    
    /* Container do detalhe ocupa a tela toda e não rola a página, só a lista */
    #contas-visao-detalhe {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden; 
    }

    /* Nome do Cliente menor e com menos margem */
    #contas-detalhe-nome-cliente {
        font-size: 1rem !important; /* Fonte reduzida */
        margin: 5px 0 2px 0 !important; /* Margens apertadas */
        line-height: 1.2;
    }

    /* Caixa de Saldo mais compacta */
    .contas-saldo-box {
        padding: 8px 12px !important; /* Box mais fina */
        margin: 0 0 10px 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .contas-saldo-box span { 
        font-size: 0.9rem !important; 
    }
    
    .contas-saldo-box strong { 
        font-size: 1.3rem !important; /* Valor menor */
    }

    /* Ajuste nos botões de voltar e divisores */
    #btn-voltar-lista-contas { 
        padding: 4px 10px; 
        font-size: 0.8rem; 
        margin-bottom: 5px; 
        align-self: flex-start;
    }
    .form-divisor { 
        margin: 5px 0 !important; 
        display: none !important; /* Remove linha divisória pra ganhar espaço */
    }

    /* 2. ESTRUTURA DO EXTRATO (Ocupar espaço restante) */
    
    /* Remove o grid e usa flexbox para ocupar altura total */
    .contas-detalhe-grid {
        display: flex !important;
        flex-direction: column;
        flex: 1; /* Cresce para preencher a tela */
        margin-top: 0 !important;
        overflow: hidden; /* Importante para o scroll funcionar dentro */
        height: 100%;
    }

    .contas-coluna-extrato {
        display: flex !important;
        flex-direction: column;
        height: 100% !important;
        width: 100% !important;
        overflow: hidden;
    }

    /* Esconde título "Extrato" para limpar a tela */
    .contas-coluna-extrato h3 { display: none !important; }

    /* 3. A SOLUÇÃO DA ROLAGEM E DO BOTÃO (O PULO DO GATO) */
    /* Aplicamos o padding no container que ROLA, não no pai */
    #contas-lista-movimentacoes {
        flex: 1; /* Ocupa todo espaço disponível */
        overflow-y: auto; /* Rolagem ativada */
        padding-right: 5px;
        
        /* ESPAÇO GIGANTE NO FINAL: Isso faz o último item subir acima do botão */
        padding-bottom: 150px !important; 
    }

    /* 4. BOTÃO FLUTUANTE (Fixo no rodapé) */
    #btn-mobile-abrir-pagamento {
        display: flex !important;
        position: fixed;
        bottom: 20px;
        right: 20px;
        left: 20px;
        height: 50px; /* Um pouco mais baixo */
        background: var(--accent-green, #10B981);
        color: white;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1rem;
        box-shadow: 0 5px 20px rgba(0,0,0,0.5);
        z-index: 9995; /* Bem acima */
        border: none;
        text-transform: uppercase;
    }

    /* 5. POPUP DE PAGAMENTO (Fica escondido até clicar) */
    .contas-coluna-pagamento {
        position: fixed !important;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--surface, #1E2128);
        z-index: 99999;
        padding: 20px;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
        border-top: 1px solid var(--accent, #3b82f6);
        
        transform: translateY(110%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* Classe ativada pelo JS */
    .contas-coluna-pagamento.popup-ativo {
        transform: translateY(0) !important;
    }

    /* Cabeçalho do Popup Mobile */
    .mobile-sheet-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border, #323743);
        padding-bottom: 10px;
    }
    .mobile-sheet-header h3 { margin: 0; font-size: 1.1rem; color: var(--text); }
    .mobile-sheet-header button { background: none; border: none; font-size: 2rem; color: var(--muted); padding: 0 10px; }
    
    .web-only-title { display: none !important; }

    /* Fundo Escuro */
    .overlay-backdrop {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.7); z-index: 99990;
        display: none;
    }
    .overlay-backdrop.visible { display: block; }
}

/* Garante que o botão FAB suma no Desktop */
@media (min-width: 1001px) {
    #btn-mobile-abrir-pagamento, .mobile-sheet-header { display: none !important; }
}