@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --cor-fundo: #F6F4EF;
  --cor-superficie: #FFFFFF;
  --cor-texto: #1C1B19;
  --cor-texto-suave: #726c60;
  --cor-accent: #B23A2E;
  --cor-accent-suave: #B23A2E14;
  --cor-linha: #e4dfd2;
  --cor-novo: #B23A2E;
  --cor-producao: #A2740A;
  --cor-pronto: #2B5FA8;
  --cor-entregue: #2E7D4F;
  --cor-cancelado: #8a8377;
  --raio: 12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family:'Public Sans', sans-serif;
  min-height:100vh;
}

/* ---- login ---- */
.tela-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.tela-login[hidden]{ display:none; }
.tela-carregando{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
.tela-carregando[hidden]{ display:none; }
.login-card{
  background:#fff; border:1px solid var(--cor-linha); border-radius: 16px;
  padding: 28px 24px; width:100%; max-width: 340px;
}
.login-card__logo{ width: 30px; height: auto; margin-bottom: 14px; }
.login-card h1{
  font-family:'Fraunces', serif; font-size:22px; margin:0 0 4px;
}
.login-card p{ color:var(--cor-texto-suave); font-size:13.5px; margin:0 0 20px; }
.login-erro{ color:#a33; font-size:13px; margin-top:10px; }

/* ---- shell ---- */
.shell[hidden]{ display:none; }
.topo{
  background:#fff; border-bottom:1px solid var(--cor-linha);
  padding: 14px 18px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:5;
}
.topo__marca{ display:flex; align-items:center; gap:10px; }
.topo__logo{
  width:32px;height:32px;border-radius:50%; background:var(--cor-accent-suave); color:var(--cor-accent);
  display:flex;align-items:center;justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:14px;
}
.topo__nome{ font-family:'Fraunces', serif; font-weight:600; font-size:16px; }
.botao-sair{ background:none; border:none; color:var(--cor-texto-suave); font-size:13px; cursor:pointer; }

.abas{ display:flex; gap:4px; padding: 10px 14px 0; background:#fff; border-bottom:1px solid var(--cor-linha); overflow-x:auto; }
.aba{
  border:none; background:none; padding:10px 14px; font-size:13.5px; font-weight:600;
  color:var(--cor-texto-suave); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
}
.aba.ativa{ color:var(--cor-accent); border-color:var(--cor-accent); }

.pagina{ padding: 16px; max-width: 720px; margin:0 auto; }
.pagina[hidden]{ display:none; }

.campo{ margin-bottom:12px; }
.campo label{ display:block; font-size:12.5px; font-weight:600; color:var(--cor-texto-suave); margin-bottom:5px; }
.campo input, .campo select, .campo textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--cor-linha);
  font-family:'Public Sans', sans-serif; font-size:14.5px; background:#fff;
}
.botao{
  border:none; background:var(--cor-accent); color:#fff; font-weight:600; font-size:14px;
  padding:11px 18px; border-radius:10px; cursor:pointer;
}
.botao.secundario{ background:#fff; color:var(--cor-texto); border:1px solid var(--cor-linha); }
.botao:disabled{ opacity:0.5; cursor:default; }

/* ---- pedidos ---- */
.filtro-status{ display:flex; gap:6px; overflow-x:auto; margin-bottom:14px; }
.filtro-status button{
  flex:0 0 auto; border:1px solid var(--cor-linha); background:#fff; border-radius:999px;
  padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--cor-texto-suave); cursor:pointer;
}
.filtro-status button.ativo{ background:var(--cor-texto); color:#fff; border-color:var(--cor-texto); }

.cartao-pedido{
  background:#fff; border:1px solid var(--cor-linha); border-radius:var(--raio);
  padding:14px; margin-bottom:10px;
}
.cartao-pedido__topo{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.cartao-pedido__cliente{ font-weight:600; font-size:14.5px; }
.cartao-pedido__hora{ font-size:12px; color:var(--cor-texto-suave); }
.cartao-pedido__total{ font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:15px; }

.selo{
  display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; color:#fff;
  text-transform:uppercase; letter-spacing:0.02em;
}
.selo-novo{ background:var(--cor-novo); }
.selo-producao{ background:var(--cor-producao); }
.selo-pronto{ background:var(--cor-pronto); }
.selo-entregue{ background:var(--cor-entregue); }
.selo-cancelado{ background:var(--cor-cancelado); }

.cartao-pedido__acoes{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.cartao-pedido__acoes button{
  font-size:12.5px; font-weight:600; border:1px solid var(--cor-linha); background:#fff;
  border-radius:8px; padding:7px 11px; cursor:pointer;
}

/* ---- crediário ---- */
.linha-conta{
  background:#fff; border:1px solid var(--cor-linha); border-radius:var(--raio);
  padding:14px; margin-bottom:10px;
}
.linha-conta__topo{ display:flex; justify-content:space-between; align-items:center; }
.linha-conta__cliente{ font-weight:600; font-size:14.5px; }
.linha-conta__valores{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--cor-texto-suave); margin-top:4px; }

/* ---- faturamento ---- */
.cartoes-resumo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.cartao-resumo{ background:#fff; border:1px solid var(--cor-linha); border-radius:var(--raio); padding:14px; }
.cartao-resumo__label{ font-size:12px; color:var(--cor-texto-suave); margin-bottom:6px; }
.cartao-resumo__valor{ font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:19px; }

.vazio{ text-align:center; color:var(--cor-texto-suave); padding:30px 10px; font-size:14px; }

/* ---- modal genérico ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:40; background:rgba(28,27,25,0.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-overlay[hidden]{ display:none; }
.modal-card{
  background:#fff; width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  border-radius:20px 20px 0 0; padding:20px 18px 24px;
  animation: modal-subir 0.2s ease;
}
@media (min-width:560px){
  .modal-overlay{ align-items:center; }
  .modal-card{ border-radius:16px; }
}
@keyframes modal-subir{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.modal-topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.modal-titulo{ font-family:'Fraunces', serif; font-weight:600; font-size:19px; }
.modal-fechar{ background:none; border:none; cursor:pointer; color:var(--cor-texto-suave); display:flex; align-items:center; justify-content:center; padding:4px; }
.modal-texto{ font-size:14px; color:var(--cor-texto-suave); line-height:1.5; margin-bottom:16px; }
.modal-acoes{ display:flex; gap:10px; margin-top:18px; }
.modal-acoes .botao{ flex:1; }
.modal-destaque{
  background:var(--cor-fundo); border-radius:10px; padding:10px 12px; margin-bottom:14px;
  font-size:13.5px;
}
.modal-destaque strong{ font-family:'IBM Plex Mono', monospace; }

/* ---- produtos ---- */
.item-produto{
  background:#fff; border:1px solid var(--cor-linha); border-radius:var(--raio);
  padding:12px; margin-bottom:10px; display:flex; gap:12px; align-items:center; cursor:pointer;
}
.item-produto__foto{ width:52px;height:52px;border-radius:8px;object-fit:cover; background:var(--cor-linha); flex:0 0 auto; }
.item-produto__foto-vazia{
  width:52px;height:52px;border-radius:8px; background:var(--cor-accent-suave); color:var(--cor-accent);
  display:flex;align-items:center;justify-content:center; font-weight:700; flex:0 0 auto;
}
.item-produto__corpo{ flex:1; min-width:0; }
.item-produto__nome{ font-weight:600; font-size:14.5px; }
.item-produto__meta{ font-size:12.5px; color:var(--cor-texto-suave); margin-top:2px; }
.item-produto__preco{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:14px; }
.item-produto.inativo{ opacity:0.5; }

.upload-foto{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.upload-foto__preview{ width:64px;height:64px;border-radius:10px;object-fit:cover; background:var(--cor-fundo); flex:0 0 auto; }

.lista-sabores{ margin-top:6px; }
.linha-sabor{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.linha-sabor input{ flex:1; }
.linha-sabor input:last-of-type{ max-width:90px; }
.linha-sabor button{ background:none; border:none; color:#a33; cursor:pointer; padding:4px 8px; display:flex; align-items:center; }

/* ---- gráficos ---- */
.grafico-caixa{
  background:#fff; border:1px solid var(--cor-linha); border-radius:var(--raio);
  padding:14px; margin-bottom:16px;
}
.grafico-caixa__titulo{ font-size:13px; font-weight:600; color:var(--cor-texto-suave); margin-bottom:10px; }
.grafico-caixa__wrap{ position:relative; height:240px; }

/* ---- dropzone ---- */
.dropzone{
  border:2px dashed var(--cor-linha); border-radius:12px; padding:16px;
  text-align:center; cursor:pointer; transition:border-color 0.15s;
}
.dropzone.sobre{ border-color:var(--cor-accent); background:var(--cor-accent-suave); }
.dropzone__placeholder{ color:var(--cor-texto-suave); font-size:13px; }
.dropzone__icone{ display:flex; justify-content:center; margin-bottom:6px; color:var(--cor-texto-suave); }
.dropzone__preview{ max-width:100%; max-height:140px; border-radius:8px; object-fit:cover; }

/* ---- configurações ---- */
.config-linha{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.config-linha input[type="color"]{ width:48px; height:40px; border:1px solid var(--cor-linha); border-radius:8px; padding:2px; background:#fff; }

/* ---- faturamento: cor semântica nos valores ---- */
.valor-positivo{ color:var(--cor-entregue); }
.valor-alerta{ color:var(--cor-producao); }

/* ---- metas ---- */
.meta-item{ background:#fff; border:1px solid var(--cor-linha); border-radius:var(--raio); padding:14px; margin-bottom:10px; }
.meta-item__topo{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; margin-bottom:8px; }
.meta-item__valores{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--cor-texto-suave); margin-bottom:8px; }
.meta-barra{ background:var(--cor-linha); border-radius:999px; height:8px; overflow:hidden; }
.meta-barra__fill{ background:var(--cor-accent); height:100%; border-radius:999px; }
.meta-barra__fill.atingida{ background:var(--cor-entregue); }

/* ---- forma de pagamento ---- */
.breakdown-pagamento{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; margin-top:10px; }
.breakdown-pagamento__linha{ display:flex; justify-content:space-between; }
.breakdown-pagamento__linha span:last-child{ font-family:'IBM Plex Mono', monospace; font-weight:600; }

/* ---- estado de carregamento (troca de aba/filtro) ---- */
.carregando{ text-align:center; color:var(--cor-texto-suave); padding:30px 10px; font-size:14px; }
.carregando::after{
  content:''; display:inline-block; width:14px; height:14px; margin-left:8px;
  border:2px solid var(--cor-linha); border-top-color:var(--cor-accent); border-radius:50%;
  vertical-align:middle; animation:girar 0.6s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }