body { background: #f8f7f4; color: #4a3b28; font-family: 'Segoe UI', Arial, sans-serif; }
.main-card {
  width: 100%;
  max-width: min(1400px, 96vw);
  margin: 24px auto 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 38px 0 rgba(0,0,0,0.10);
  padding: 38px 22px 32px 22px;
}
@media (max-width: 400px) {
  .main-card { margin: 8px 2px; padding:14px 2px; }
}

/* Diminui o título da navbar em telas pequenas */
#mainNavbar .dashboard-title {
font-size: 1.15rem;
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 600px) {
#mainNavbar .dashboard-title {
display: none !important;  /* Esconde o título em mobile */
}
#mainNavbar .navbar-brand img {
width: 38px !important;
height: 38px !important;
margin-right: 0.5rem;
}
}



.nav-pills .nav-link {
color: #8b7d66;
background: transparent;
transition: background .18s, color .18s;
border: 0;
}
/*.nav-pills .nav-link.active, .nav-pills .nav-link:focus, .nav-pills .nav-link:hover {
background: #ffe9b5 !important;
color: #a3791d !important;
box-shadow: 0 3px 15px 0 rgba(170,130,20,0.07);
}*/

#mainNavbar .container {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap; /* Impede que quebre para baixo */
}

#navbarBrandArea, #navbarUserArea {
display: flex;
align-items: center;
flex-shrink: 0;
}

#navbarUserArea {
gap: 10px;
}

/* Footer responsivo */
.footer-app {
  background: #f4f3f1;
  border-top: 1px solid #ece8df;
  font-size: 0.99em;
  letter-spacing: .2px;
  box-shadow: 0 -2px 12px 0 rgba(100,70,20,0.03);
  margin-top: 50px;
}
.btn-whatsapp-footer {
  background: #43be4c11;
  color: #2e7d32;
  border: 1px solid #43be4c55;
  border-radius: 999px;
  transition: background 0.18s, color 0.18s;
}
.btn-whatsapp-footer:hover,
.btn-whatsapp-footer:focus {
  background: #43be4c !important;
  color: #fff !important;
  border-color: #43be4c !important;
  text-decoration: none;
}
@media (max-width: 576px) {
  .footer-app {
    font-size: 0.96em;
    padding-left: 0;
    padding-right: 0;
  }
  .footer-app .container {
    padding: 1.1rem 0.3rem;
  }
}

@media (max-width: 400px) {
.main-card { margin: 8px 2px; padding:14px 2px;}
}
@keyframes snackbarIn {
  0% { transform: translateX(-50%) translateY(80px); opacity:0; }
  70% { opacity:1; }
  100% { transform: translateX(-50%) translateY(0); opacity:1; }
}
@keyframes snackbarOut {
  0% { transform: translateX(-50%) translateY(0); opacity:1; }
  100% { transform: translateX(-50%) translateY(80px); opacity:0; }
}

#loginLogo { display:block; margin:0 auto 18px auto; border-radius: 8px; max-width:100px; width:50%; }
@media (max-width: 400px) {
  .main-card { margin: 8px 2px; padding:14px 2px;}
  #loginLogo { max-width:95vw; width:40%;}
}
.dash-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 22px;}
.dash-header .home-btn { font-size:1.3em;}
.pedido-card {
  background:#fff; border-radius: 13px;
  box-shadow: 0 2px 13px 0 rgba(210,181,131,.08);
  margin-bottom:16px; padding:16px 14px 13px 14px; position:relative;
  border-left: 6px solid #ffe5a6; transition: box-shadow 0.19s;
}
.pedido-card .pedido-actions {
display: flex;
align-items: center;
gap: 6px;
position: absolute;
right: 11px;
top: 12px;
z-index: 2;
}
.pedido-card .exportar-checkbox {
margin: 0 3px 0 0;
transform: scale(1.18);
accent-color: #c49d65; /* cor dourada, se o navegador suportar */
}

.pedido-card:hover { box-shadow:0 4px 16px 0 rgba(183,156,105,0.13);}
.pedido-status {
  position:absolute; left:-6px; top:14px; border-radius:0 13px 13px 0; font-size:0.99em; font-weight:700;
  padding:3px 12px 3px 9px; color:#fff; min-width:94px; display:flex; align-items:center; gap:5px;
}
.st-pendente { background: #ffa000; }
.st-aprovado { background: #42a5f5; }
.st-concluido { background: #43be4c; }
.st-pagamento { background: #7d5cff; }
.pedido-actions { position: absolute; right:11px; top:12px; display:flex; gap:7px;}
.pedido-actions .btn { font-size:1.02em; padding:2px 8px; border-radius:6px; }
.btn-refazer { background: #fffbe5; color: #ad903f; border: 1px solid #f3e3ad;}
.btn-editar { background: #eef6fd; color: #356797; border: 1px solid #b3c9df;}
.btn-cancelar { background: #faeaea; color: #c0353e; border: 1px solid #eeb5b9;}
.pedido-num { font-weight:700; font-size:1.09em; color:#ad903f;}
.pedido-itens { font-size:0.97em; color:#897846;}
.pedido-data { font-size:0.93em; color:#baa97c;}
.detalhes-pedido { display: none; background:#f5efe4; border-radius:7px; margin-top:10px; padding:9px 7px; border-left:4px solid #ad903f; font-size:1.03em;}
.pedido-tabela { width:100%; margin-top:6px;}
.pedido-tabela th, .pedido-tabela td { padding:4px 6px;}
.pedido-tabela th { background:#c49d65; color:#fff; border-radius: 2px;}
#paginacao {text-align:center; margin-top:20px;}
.page-btn { margin:0 5px; background:#c49d65; color:#fff; border:none; padding:5px 13px; border-radius:5px; font-size:1em; font-weight:600;}
.page-btn:disabled { background:#e8dac0; color:#a5a19b;}
/* FORMULARIO PEDIDO */
.pedido-topbar { display:flex; justify-content:space-between; align-items:center; gap: 8px; margin-bottom: 15px; border-bottom: 1px solid #f0e5d1; padding-bottom: 7px;}
.pedido-topbar .center { flex:1; display:flex; justify-content:center; }
.pedido-topbar .home-btn { font-size:1.21em; }
.tipo-pedido-card { background: #f9f6ed; border-radius: 11px; padding: 13px 12px 7px 12px; margin-bottom:12px; }
.grupo-card { border-radius: 1.05rem !important; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06); margin-bottom: 18px; border: none; background: #fcfaf6;}
.grupo-title { font-size: 1.11rem; font-weight: 700; color: #c49d65; margin-bottom: 10px; letter-spacing: 0.4px; display: flex; align-items: center; gap: 6px;}
.doce-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f3eee3;}
.doce-item:last-child { border-bottom: none; }
.doce-nome { font-size: 0.98rem; flex:1; }
.item-controls { display: flex; align-items: center; gap: 2px; }

.qtd-label { font-size: 1.12rem; min-width: 23px; text-align: center; color: #604126; font-weight: 600; }
.quantidade-caixas-wrap-final {margin: 10px 0 10px 0;}
.quantidade-caixas-label {font-weight:600; color:#604126; margin-right:9px;}
.caixa-controls .btn {width:28px;height:28px;}
.btn-main { background:#c49d65; border:none; color:#fff; font-weight:600; font-size:1.01em; border-radius:8px; padding:10px 0; width:100%; }
.btn-main:disabled, .btn-main[disabled] { background: #eadcbf !important; color:#a49d65 !important; }
.btn-main:hover:not(:disabled) { background:#ad8e54; color:#fff; }
.badge-total { background: #fffbe2; color: #c49d65; border-radius: 8px; font-weight:600; font-size: 1.03em; padding: 2px 11px;}
.valor-total { color:#604126; font-size:1.07em; font-weight: 600;}

.pedido-minimo-hint {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #eadbb8;
  background: #fffaf0;
  color: #7a5a25;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(141,108,38,0.08);
}
.pedido-minimo-hint.is-visible { display: flex; }
.pedido-minimo-hint.is-warning {
  background: #fff8e7;
  border-color: #f3deb0;
  color: #8a6414;
}
.pedido-minimo-hint.is-success {
  background: #eefaf1;
  border-color: #bfe3c6;
  color: #1f7a39;
}
.pedido-minimo-hint.is-muted {
  background: #f7f4ed;
  border-color: #e7dcc7;
  color: #6c5a3d;
}
.pedido-minimo-hint i {
  font-size: 1rem;
  flex: 0 0 auto;
}

.btn.is-busy {
  pointer-events: none;
  opacity: 0.86;
}

#modalSistema .modal-content {
  border-radius: 16px;
  border: 1px solid #f0e0b5;
  box-shadow: 0 14px 45px rgba(0,0,0,0.20);
}
#modalSistema .modal-header {
  border-bottom: 1px solid #f3e6c8;
}
#modalSistema .modal-body {
  background: #fdf8ee;
}
#modalSistema .modal-footer {
  border-top: 1px solid #f3e6c8;
}
.dgx-modal-message {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3f3424;
}

.alert { font-size: 0.98em; }

/* Modal de confirmação do pedido 
#resumoModal .modal-dialog {
  max-width: 540px;              /* deixa o modal mais estreito e elegante 
}

#resumoModal .modal-content {
  border-radius: 16px;
  border: 1px solid #f0e0b5;
  box-shadow: 0 14px 45px rgba(0,0,0,0.20);
}

#resumoModal .modal-header {
  border-bottom: 1px solid #f3e6c8;
  padding: 12px 18px;
}

#resumoModal .modal-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #5a452b;
}

.resumo-modal-body {
  background: #fdf8ee;
  padding: 14px 20px 16px 20px;
}

.resumo-pre {
  white-space: pre-wrap;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3f3424;
  margin: 0;
}

#resumoModal .modal-footer {
  border-top: 1px solid #f3e6c8;
  padding: 10px 16px 12px 16px;
}
*/

.disabled-section { opacity: 0.42; pointer-events: none; }
/* Oculta form por padrão */
#formPedido { display: block;}

@keyframes snackbarOut {
0% { transform: translateX(-50%) translateY(0); opacity:1; }
100% { transform: translateX(-50%) translateY(80px); opacity:0; }
}
#avisoCaixaCheia {
display: none;
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
background: #5fa5f6;         /* azul alerta */
color: #fff;                 /* branco para contraste */
width: 60%;
max-width: 500px;
padding: 30px 25px;
border-radius: 16px;
box-shadow: 0 6px 32px 0 rgba(0,0,0,0.18);
font-size: 1.14em;
font-weight: 600;
z-index: 99999;
letter-spacing: .1px;
text-align: center;
animation: none;
padding: 15px 16px;    /* Reduziu o espaçamento interno */
font-size: 1em;
}

#avisoCaixaCheia i {
font-size: 2.5em;
color: #ffe082; /* amarelo/dourado para o ícone ficar destacado no azul */
display: block;
margin-bottom: 6px;
}

#loaderCentral {
display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; 
background:rgba(255,255,255,0.74); z-index:12000; 
align-items:center; justify-content:center;
transition: 0.2s opacity;
}

/* Abas estilo*/

/* Força o display correto SEMPRE */
#mainTabs {
display: flex !important;
flex-wrap: wrap !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 14px !important;
box-shadow: 0 2px 12px 0 rgba(170,130,20,0.06);
background: #fff !important;
}

/* Cada nav-item ocupa 25% da largura no desktop, 50% no mobile */
#mainTabs .nav-item {
flex: 0 0 25%;
max-width: 25%;
min-width: 0;
box-sizing: border-box;
padding: 0 !important;
margin: 0 !important;
}

/* NAV-LINK — visual de aba/tab refinada */
#mainTabs .nav-link {
width: 100%;
font-weight: 600;
font-size: 1.13em;
text-align: center;
padding: 14px 0 11px 0 !important;
margin: 0 !important;
border: none;
border-radius: 16px !important;
transition: background 0.2s, color 0.2s;
}
/* CORES DAS ABAS PERSONALIZADAS (sobrescrevendo bootstrap) */

/* HOME - azul */
#tab-dashboard {
background: #d6ebff !important;
color: #39a1fc !important;
}
#tab-dashboard.active {
background: #055da5 !important;
color: #ffffff !important;
}

/* PEDIDOS - lilás */
#tab-pedidos {
background: #f1e4fb !important;
color: #9863c3 !important;
}
#tab-pedidos.active {
background: #812ed5 !important;
color: #ffffff !important;
}

/* NOVO - verde */
#tab-novo {
background: #e2f7e2 !important;
color: #0e7f14 !important;
}
#tab-novo.active {
background: #43a047 !important;
color: #ffffff !important;
}

/* FINANCEIRO - amarelo */
#tab-financeiro {
background: #e5c860 !important;
color: #fff4cc !important;
}
#tab-financeiro.active {
background: #f3b415 !important;
color: #5c4400 !important;
}


/* Animação ao clicar */
#mainTabs .nav-link:active {
transform: scale(0.97);
}

/* fim do css tabs*/

/*#mainTabs .nav-link:active {
background: #faefc4 !important;
color: #a3791d !important;
transform: scale(0.98);
transition: transform 0.07s;
}*/

#mainTabs .nav-link i {
font-size: 1.32em !important;
margin-right: 7px !important;
vertical-align: -2px !important;
}

/* MOBILE: Duas abas por linha, sempre! */
@media (max-width: 600px) {
#mainTabs .nav-item {
flex: 0 0 50% !important;
max-width: 50% !important;
}
#mainTabs .nav-link {
font-size: 1.14em !important;
min-width: 100% !important;
padding: 16px 0 14px 0 !important;
border-radius: 0 !important;
border-bottom: 2px solid transparent !important;
border-right: 1px solid #f6ead1 !important;
border-left: 1px solid #f6ead1 !important;
}
/* Remove borda lateral esquerda da primeira coluna */
#mainTabs .nav-item:nth-child(odd) .nav-link {
border-left: none !important;
}
/* Remove borda lateral direita da segunda coluna */
#mainTabs .nav-item:nth-child(even) .nav-link {
border-right: none !important;
}
}


#mainTabs.nav-justified .nav-link,
#mainTabs.nav-pills .nav-link {
flex-grow: unset !important;
}

/*Abas Coloridas e corrigidas*/
#mainTabs {
display: flex !important;
flex-wrap: wrap !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 20px 20px 0 0 !important;
box-shadow: 0 2px 12px 0 rgba(170,130,20,0.06);
background: #fff !important;
margin-bottom: 2rem !important;
border-bottom: 2px solid #f3f0e7;
}

/* HOME */
#tab-dashboard {
background: #fcf7ef !important;
color: #a3791d !important;
}
#tab-dashboard.active {
background: #f7e3bc !important;
color: #6c4911 !important;
font-weight: 700;
}

/* PEDIDOS */
#tab-pedidos {
background: #e8f0fd !important;
color: #3176bb !important;
}
#tab-pedidos.active {
background: #bddfff !important;
color: #054372 !important;
font-weight: 700;
}

/* NOVO */
#tab-novo {
background: #e5faed !important;
color: #209a5a !important;
}
#tab-novo.active {
background: #aee7c9 !important;
color: #117f3e !important;
font-weight: 700;
}

/* FINANCEIRO */
#tab-financeiro {
background: #fff6de !important;
color: #b68618 !important;
}
#tab-financeiro.active {
background: #ffe091 !important;
color: #a17808 !important;
font-weight: 700;
}

#mainTabs .nav-link {
border-radius: 18px 18px 0 0 !important;
border: none;
font-weight: 600;
font-size: 1.15em;
margin: 0 2px !important;
padding: 14px 0 11px 0 !important;
border-bottom: 2px solid #e8dac0 !important;
transition: all 0.19s;
box-shadow: none;
position: relative;
z-index: 1;
opacity: 1;
}

#mainTabs .nav-link.active, 
#mainTabs .nav-link:focus, 
#mainTabs .nav-link:active {
border-bottom: 2px solid #fff !important;
box-shadow: 0 4px 12px 0 rgba(183,156,105,0.07);
z-index: 2;
opacity: 1;
}

#mainTabs .nav-link:not(.active):hover {
filter: brightness(0.98) contrast(1.08);
opacity: 0.95;
}

#mainTabs .nav-link i {
font-size: 1.26em !important;
margin-right: 7px !important;
vertical-align: -2px !important;
}

/* Bordas entre abas */
#mainTabs .nav-link {
border-right: 1px solid #ede2c8;
}
#mainTabs .nav-item:first-child .nav-link {
border-left: 1px solid #ede2c8;
}

/* Mobile: duas abas por linha */
@media (max-width: 700px) {
#mainTabs {
border-radius: 14px !important;
flex-wrap: wrap !important;
}
#mainTabs .nav-item {
flex: 0 0 50% !important;
max-width: 50% !important;
}
#mainTabs .nav-link {
border-radius: 14px 14px 0 0 !important;
font-size: 1.07em !important;
min-width: 100% !important;
margin-bottom: 2px !important;
padding: 12px 0 10px 0 !important;
}
}



#btnUltimos2Dias i, #btnUltimos7Dias i {
font-size: 1.2em;
color: #1976d2;
}
#btnUltimos2Dias:hover i, #btnUltimos7Dias:hover i {
color: #fff;
}

.btn-filtro-neutral {
background: #f4f4f4 !important;
color: #585858 !important;
border: 1px solid #d0d0d0 !important;
border-radius: 8px !important;
font-weight: 600;
box-shadow: 0 2px 8px 0 rgba(110,110,110,0.05);
transition: background 0.17s, color 0.17s, box-shadow 0.18s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45em;
}
.btn-filtro-neutral i {
font-size: 1.16em;
}
.btn-filtro-neutral:hover, .btn-filtro-neutral:focus {
background: #e0e0e0 !important;
color: #111 !important;
border-color: #b0b0b0 !important;
box-shadow: 0 4px 14px 0 rgba(110,110,110,0.13);
}

/* Garante que o filtro do dashboard ocupa toda largura dos cards e tem espaço entre eles */
#dashboardFiltroPeriodo {
width: 100%;
max-width: 100%;
margin: 22px 0 10px 0; /* Espaço acima e abaixo */
box-sizing: border-box;
padding: 0;
}

#dashboardFiltroPeriodo form {
width: 100%;
margin: 0;
}

@media (max-width: 700px) {
#dashboardFiltroPeriodo {
padding: 0 2px;
}
#dashboardFiltroPeriodo form {
padding-left: 0;
padding-right: 0;
}
}


/* Ajustes para botões de quantidade na seleção de doces (mobile e desktop) */
.item-controls .btn {
  width: 40px;
  height: 40px;
  font-size: 1.25em;
  padding: 0;
  margin-right: 7px; /* margem à direita do botão de + */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px 0 rgba(195,155,50,0.05);
  background: #f6f5f2 !important;
  border: 1.3px solid #f3e5c0 !important;
  transition: background 0.16s, border 0.18s, box-shadow 0.17s;

  /* ESSENCIAIS pra deixar o toque rápido no mobile */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.item-controls .btn:last-child {
  margin-right: 0 !important;
}

.item-controls .btn:active {
  background: #fff8e4 !important;
  border-color: #d6be92 !important;
}


.qtd-label {
font-size: 1.21rem;
min-width: 28px;
text-align: center;
color: #6d4e25;
font-weight: 700;
margin: 0 8px 0 8px;
letter-spacing: 0.4px;
}

@media (max-width: 700px) {
  .item-controls .btn {
    width: 46px;
    height: 46px;
    font-size: 1.36em;
    margin-right: 10px;
  }
  .qtd-label {
    font-size: 1.32rem;
    min-width: 30px;
    margin: 0 8px;
  }
  .doce-item {
    padding-right: 8px !important;
  }
}


.financeiro-resumo-card {
  border: 1.5px solid #ffe6b6;
  background: #fff9ee !important;
}
#listaFinanceiroPedidos .list-group-item {
  border: none;
  border-bottom: 1px solid #f4e5c2;
  background: #fff;
  padding: 13px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.17s;
}
#listaFinanceiroPedidos .list-group-item:last-child { border-bottom: none; }
.financeiro-status-badge {
  font-size: .93em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 7px;
  margin-right: 8px;
}
.st-futuro { background: #fff3cd; color: #b88506; }
.st-aprovado { background: #e3f2fd; color: #1976d2; }
.st-concluido { background: #e5f6e5; color: #138442; }
.list-btn-detalhes { font-size: .98em; }


#modalDetalhesFinanceiro .modal-content {
  border-radius: 1.4em;
  box-shadow: 0 2px 16px 0 rgba(184,134,11,0.09);
}

#btnRelatorioCompleto, #btnRelatorioSimplificado {
  min-width: 45px;
  white-space: nowrap;
  font-weight: 600;
}
#btnRelatorioCompleto i, #btnRelatorioSimplificado i {
  font-size: 1.15em;
}
@media (max-width: 700px) {
  #filtroFinanceiroForm .col-12.d-flex {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  #filtroFinanceiroForm .col-12.d-flex > button {
    flex: 1 1 48%;
    min-width: 120px;
  }
}


.financeiro-resumo-card {
  border: 1px solid #ffe6b6;
  background: #fffef5;
  padding: 10px 5px;
  font-size: .98em;
  gap: 0 !important;
  justify-content: space-between !important;
}
.financeiro-resumo-card > div {
  min-width: 100px;
  padding: 3px 2px;
  flex: 1 1 33%;
  text-align: center;
}
@media (max-width: 600px) {
  .financeiro-resumo-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .financeiro-resumo-card > div {
    padding: 7px 0 3px 0;
    min-width: 90px;
  }
}



.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.table-responsive table {
  min-width: 620px; /* ou 100%, conforme preferir */
}

#listaFinanceiroPedidos .d-flex.justify-content-end {
  flex-wrap: wrap;
}
#listaFinanceiroPedidos .btn {
  min-width: 120px;
}
/* Cards dashboard - estilo base e hover */
.card-dashboard-click {
  transition: box-shadow 0.23s cubic-bezier(.35,1.3,.6,1), transform 0.18s;
  cursor: pointer;
  box-shadow: 0 1.5px 7px 0 rgba(128,110,59,0.06), 0 0.5px 2px 0 rgba(0,0,0,0.02);
  border: none !important;
}
.card-dashboard-click:hover, .card-dashboard-click:focus {
  box-shadow: 0 6px 24px 2px rgba(44,42,30,0.12), 0 1.5px 5px 0 rgba(175,147,70,0.10);
  background: #fdf8ec;
  transform: translateY(-2px) scale(1.025);
  outline: 0;
}

.card-dashboard-click .text-success {
  filter: drop-shadow(0 0 4px #b1eeae77);
}

.card-dashboard-click .text-primary {
  filter: drop-shadow(0 0 4px #b4d9fdcc);
}

.card-dashboard-click .text-warning {
  filter: drop-shadow(0 0 4px #ffeb9977);
}

.card-dashboard-click .text-danger {
  filter: drop-shadow(0 0 4px #ffb3b377);
}


.financeiro-resumo-card {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: stretch;
  text-align: center;
  padding: 6px 2px !important;
  border-radius: 18px;
  box-shadow: 0 1.5px 7px 0 rgba(128,110,59,0.06), 0 0.5px 2px 0 rgba(0,0,0,0.02);
  background: #fffef5;
  margin-bottom: 12px;
}

.financeiro-resumo-card > div {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 2px;
  border-right: 1px solid #eee3c3;
}

.financeiro-resumo-card > div:last-child {
  border-right: none;
}

.financeiro-resumo-card .fw-semibold {
  font-size: 0.98em;
  letter-spacing: 0.01em;
}

.financeiro-resumo-card .fs-5 {
  font-size: 1.14em !important;
}

@media (max-width: 600px) {
  .financeiro-resumo-card {
    flex-direction: row !important;
    gap: 0;
    padding: 2px 0 !important;
    font-size: 0.96em;
  }
  .financeiro-resumo-card > div {
    padding: 3px 1px;
    font-size: 0.96em;
  }
}
.financeiro-resumo-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 2px;
  background: #fffef5;
  border-radius: 1.3em;
  box-shadow: 0 1.5px 7px 0 rgba(128,110,59,0.06), 0 0.5px 2px 0 rgba(0,0,0,0.02);
}
.financeiro-resumo-card > div {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 0 3px 0;
  border-right: 1px solid #f2e6be;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.financeiro-resumo-card > div:last-child {
  border-right: none;
}
.legenda-fin {
  font-size: .96em;
  margin-top: 1px;
  letter-spacing: 0.01em;
}
.financeiro-resumo-card .badge {
  border-radius: 11px;
  background: #f6fcf7;
  color: #21a14a !important;
  border: 1.1px solid #72e698;
  font-weight: 600;
}
@media (max-width: 600px) {
  .financeiro-resumo-card {
    padding: 0 0px !important;
    font-size: .97em;
  }
  .financeiro-resumo-card > div {
    padding: 3px 0 2px 0;
    border-right: 1px solid #f5e6be;
  }
}
.spin {
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.list-group-item {
  border-radius: 10px !important;
  margin-bottom: 6px;
  border: 1px solid #f3e9d5;
  background: #fffefb;
  box-shadow: 0 1.5px 6px 0 rgba(128,110,59,0.05);
}
.financeiro-status-badge {
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: .99em;
}


.agendamento-bloco {
  background: #fff7e3;
  border: 1.5px solid #e4c798;
  border-radius: 13px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px #ffe6bc42;
  transition: background 0.2s;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 28px;
  margin-left: 14px;
  margin-right: 8px;
  vertical-align: middle;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider-toggle {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffd57e;
  transition: .4s;
  border-radius: 16px;
}
.slider-toggle:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 6px #b1994d22;
}
.toggle-switch input:checked + .slider-toggle {
  background-color: #b5da7a;
}
.toggle-switch input:checked + .slider-toggle:before {
  transform: translateX(28px);
}
.periodo-label {
  font-weight: 500;
  color: #b29c7c;
  font-size: 1em;
  margin-right: 7px;
}

.agendado-badge {
  font-size: 1em;
  background: #fff3cd !important;
  color: #a67c00 !important;
  border: 1.5px solid #ffe69c;
  border-radius: 8px;
  font-weight: bold;
  padding: 6px 12px;
  box-shadow: 0 2px 6px #fff6d0cc;
}

.agendamento-alerta {
  border: 1.7px solid #ffe69c;
  background: #fffbe6;
  color: #9f7a04;
  font-weight: bold;
  border-radius: 8px;
  font-size: 1.1em;
  box-shadow: 0 2px 8px #ffe3a133;
}

/* ===============================================
   Ajustes Mobile (preserva suas classes existentes)
   - Gutters laterais seguros (14-16px)
   - Inputs >=16px para evitar auto-zoom iOS
   - Containers com respiro sem colar nas bordas
   =============================================== */

:root {
  --dge-pad-inline: 16px;
}

html, body {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}

input, select, textarea, button {
  font-size: 16px; /* evita auto-zoom do iOS ao focar */
}

@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    body {
      padding-left: max(var(--dge-pad-inline), env(safe-area-inset-left));
      padding-right: max(var(--dge-pad-inline), env(safe-area-inset-right));
    }
  }
}

/* Em telas pequenas, forçamos algum respiro nos blocos mais comuns */

@media (max-width: 768px) {
  body {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .container,
  .container-fluid,
  .content,
  .wrapper,
  .main-card,
  .card,
  .section,
  .tab-content {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }

  .row { margin-left: 0; margin-right: 0; }
  .col, [class*="col-"] { padding-left: 6px; padding-right: 6px; }
}


/* Evita que cartões/listas encostem na lateral */
@media (max-width: 768px) {
  .row { margin-left: 0; margin-right: 0; }
  .col, [class*="col-"] { padding-left: 2px; padding-right: 2px; }
}

/* Tornar botões e toques mais confortáveis em mobile */
@media (max-width: 768px) {
  .btn { min-height: 40px; }
  .form-control, .form-select { min-height: 40px; }
}


/* DGX Cards: stack status -> agendamento -> nome (sem overlap) */
.pedido-card .pedido-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.pedido-card .pedido-actions{display:inline-flex;gap:.35rem;flex-shrink:0;white-space:nowrap}
.pedido-card .status-line{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pedido-card .nome-cliente{font-weight:800;color:#2b261f;line-height:1.15;margin-top:.35rem}
.pedido-card .agendado-row{display:flex;justify-content:flex-end;margin-top:.25rem}
.pedido-card .agendado-badge{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff8e1;border:1px solid #ffe0a3;color:#8a6d3b}
@media (max-width:420px){
  .pedido-card .pedido-header{flex-direction:column;align-items:stretch}
  .pedido-card .pedido-actions{align-self:flex-end}
  .pedido-card .agendado-row{justify-content:flex-start}
}

financeiro-status-badge{ white-space:nowrap; display:inline-flex; align-items:center; gap:.25rem; }

  /* Área de ações do card pode quebrar linha sem bagunça */
  #listaFinanceiro .d-flex.gap-2{ flex-wrap:wrap; }

  /* Botão “Informar Pagamento” menor no mobile */
  .btn-informar{ font-weight:600; }
  @media (max-width: 480px){
    .btn-informar{
      font-size:.86rem;
      padding:.35rem .55rem;
      line-height:1.1;
    }
    /* dá uma apertadinha geral no espaçamento das ações */
    #listaFinanceiro .d-flex.gap-2{ gap:.35rem !important; }
  }

  /* Versão curtinha do texto no miudinho (opcional) */
  .btn-informar .label-short{ display:none; }
  @media (max-width: 360px){
    .btn-informar .label-full{ display:none; }
    .btn-informar .label-short{ display:inline; }
  }

  /* Modal de detalhes do produto acima dos outros modais */
#modalProduto.modal {
  z-index: 2100;
}
/* Botão do nome do doce (abre foto + descrição) */
.doce-nome-btn {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font-size: 0.98rem;
  color: #604126;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
}

.doce-nome-btn:focus {
  outline: none;
}

/* Ícone ao lado do nome */
.doce-nome-icon {
  font-size: 0.9rem;
  color: #c89b3a; /* douradinho suave, combina com os badges de preço */
  flex-shrink: 0;
}


/* Loader de imagem dentro do modal de detalhes do doce */
.doce-img-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

/* Modal de confirmação do pedido */
#resumoModal .modal-dialog {
  max-width: 540px;
}

#resumoModal .modal-content {
  border-radius: 16px;
  border: 1px solid #f0e0b5;
  box-shadow: 0 14px 45px rgba(0,0,0,0.20);
}

#resumoModal .modal-header {
  border-bottom: 1px solid #f3e6c8;
  padding: 12px 18px;
}

#resumoModal .modal-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #5a452b;
}

.resumo-modal-body {
  background: #fdf8ee;
  padding: 14px 20px 16px 20px;
}

/* Container do conteúdo do resumo */
.resumo-pre {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3f3424;
}

/* Cabeçalho do resumo */
.resumo-header {
  margin-bottom: 8px;
}
.resumo-header > div {
  margin-bottom: 2px;
}

/* Título da lista de doces */
.resumo-doces-titulo {
  margin: 6px 0 4px 0;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Tabelinha de doces */
.resumo-tabela {
  border: 1px solid #f3e6c8;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.resumo-tabela-head,
.resumo-tabela-row {
  display: flex;
  align-items: center;
  padding: 6px 10px;
}

.resumo-tabela-head {
  background: #f9f3dd;
  font-weight: 600;
  font-size: 0.9rem;
}

.resumo-tabela-row:nth-child(odd) {
  background: #fdf8ee;
}

.resumo-col-qtd {
  width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}

.resumo-col-nome {
  flex: 1;
}

/* Observação sobre caixas */
.resumo-info-extra {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #5a452b;
}

/* Bloco de agendamento */
.resumo-agendamento {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #fff7da;
  border: 1px solid #ffe1a8;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
}
.resumo-agendamento i {
  color: #d29b2b;
  margin-top: 2px;
}

/* Observação do cliente */
.resumo-obs-cliente {
  margin-top: 10px;
  font-size: 0.9rem;
}


/* ===== Categorias no pedido do cliente ===== */
.pedido-config-card {
  background: linear-gradient(180deg, #fffdf8 0%, #fbf6ea 100%);
  border: 1px solid #f0e1be;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 18px rgba(146, 109, 31, 0.06);
}

.pedido-config-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
  align-items: start;
}

.tipo-pedido-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 46px;
}

.tipo-pedido-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #eadbb4;
  color: #6d5531;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}

.tipo-pedido-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.tipo-pedido-chip.is-active {
  background: #fff4d6;
  border-color: #c49d65;
  color: #7a5420;
  box-shadow: 0 4px 16px rgba(196, 157, 101, 0.16);
}

.categoria-rules-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.categoria-rule-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #eadfc2;
  color: #70552d;
  font-size: .92rem;
  line-height: 1.2;
}

.categoria-rule-pill.highlight {
  background: #fff6dd;
  border-color: #e6c16d;
}

.categoria-extra-note {
  margin-top: 10px;
  color: #8c6f42;
  font-size: .92rem;
}

.categoria-grupo-card .accordion-button {
  gap: 8px;
}

.grupo-preco-badge {
  white-space: nowrap;
  margin-left: auto;
}

@media (max-width: 768px) {
  .pedido-config-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pedido-config-card {
    padding: 12px;
  }

  .tipo-pedido-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .tipo-pedido-chip {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    text-align: center;
  }

  .categoria-rules-info {
    gap: 6px;
  }

  .categoria-rule-pill {
    width: 100%;
    justify-content: flex-start;
    border-radius: 14px;
  }
}

@media (max-width: 420px) {
  .tipo-pedido-options {
    grid-template-columns: 1fr;
  }
}