/* =========================================================
   PAINEL DO CARLOS — administração
   ========================================================= */

/* ---------- tela de login ---------- */

.tela-login {
  min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
}
.login-carta {
  width: min(380px, 100%); padding: 2rem 1.8rem; text-align: center;
}
.login-carta img { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto .8rem; }
.login-carta h1 { font-size: 1.7rem; margin-bottom: .2rem; }
.login-carta .sub { color: var(--marrom-suave); font-size: .92rem; margin-bottom: 1.4rem; }
.login-carta form { display: grid; gap: .9rem; text-align: left; }
.login-erro { color: var(--vermelho); font-weight: 600; font-size: .9rem; margin: 0; display: none; }
.login-voltar { display: inline-block; margin-top: 1.2rem; font-size: .85rem; color: var(--marrom-suave); }

/* ---------- casca do painel ---------- */

.topo-admin {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 251, 240, 0.95); backdrop-filter: blur(6px);
  border-bottom: 2px dashed var(--linha);
}
.topo-admin-conteudo { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; }
.topo-admin img { width: 42px; height: 42px; border-radius: 50%; }
.topo-admin strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.05rem; margin-right: auto; }
.topo-admin .acoes-topo { display: flex; gap: .5rem; align-items: center; }

.abas {
  display: flex; gap: .45rem; overflow-x: auto; padding: .8rem 0 .2rem;
  scrollbar-width: thin;
}
.aba {
  flex-shrink: 0; border: 2px solid var(--linha); background: var(--nata);
  color: var(--marrom); font: 700 .92rem var(--fonte-texto);
  padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
  transition: background-color .15s ease;
}
.aba:hover { background: var(--milho-claro); }
.aba.ativa { background: var(--marrom); border-color: var(--marrom); color: var(--creme); }

.painel { padding: 1.3rem 0 3.5rem; }
.painel h2 { font-size: 1.5rem; margin-bottom: 1rem; }

/* ---------- barra de ferramentas / filtros ---------- */

.ferramentas {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin-bottom: 1.1rem;
}
.ferramentas .busca { flex: 1; min-width: 200px; max-width: 320px; }
.ferramentas .busca input {
  width: 100%; font: inherit; color: var(--marrom);
  background: var(--papel); border: 2px solid var(--linha);
  border-radius: 999px; padding: .5rem 1rem;
}
.ferramentas .busca input:focus { outline: none; border-color: var(--crosta); }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  border: 1.5px solid var(--linha); background: var(--papel); color: var(--marrom-suave);
  font: 600 .82rem var(--fonte-texto); padding: .32rem .75rem; border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: var(--crosta); color: var(--marrom); }
.chip.ativo { background: var(--milho-claro); border-color: var(--crosta); color: var(--marrom); }

.periodo-personalizado { display: none; gap: .5rem; align-items: center; flex-wrap: wrap; }
.periodo-personalizado.aberto { display: flex; }
.periodo-personalizado input {
  font: inherit; color: var(--marrom); background: var(--papel);
  border: 2px solid var(--linha); border-radius: 10px; padding: .35rem .6rem;
}

/* ---------- resumo (dashboard) ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.tile { padding: 1rem 1.15rem; }
.tile-rotulo { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marrom-suave); }
.tile-valor { font-family: var(--fonte-titulo); font-size: 1.75rem; line-height: 1.2; margin-top: .15rem; }
.tile-extra { font-size: .8rem; color: var(--marrom-suave); }

.grafico-carta { padding: 1.15rem 1.25rem 1rem; position: relative; margin-bottom: 1.2rem; }
.grafico-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.grafico-cabeca h3 { margin: 0; font-size: 1.15rem; }
.grafico-cabeca span { font-size: .82rem; color: var(--marrom-suave); }
.grafico-svg { width: 100%; height: auto; display: block; }

.barra { fill: var(--crosta); cursor: pointer; }
.barra:hover, .barra.focada { fill: var(--crosta-escura); }
.grafico-vazio { text-align: center; color: var(--marrom-suave); padding: 2.4rem 1rem; margin: 0; }

.tooltip-grafico {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--marrom); color: var(--creme);
  border-radius: 8px; padding: .35rem .65rem; font-size: .82rem; line-height: 1.35;
  transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap;
  opacity: 0; transition: opacity .12s ease;
  box-shadow: 0 6px 16px -6px rgba(60, 35, 10, 0.5);
}
.tooltip-grafico.ativa { opacity: 1; }
.tooltip-grafico strong { color: #fff; }

/* ---------- tabelas e listas ---------- */

.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--marrom-suave); padding: .45rem .55rem;
}
.tabela td { padding: .6rem .55rem; border-top: 1.5px dashed var(--linha); font-size: .93rem; vertical-align: top; }
.tabela td.num { text-align: right; font-weight: 700; white-space: nowrap; }

.carta-tabela { padding: 1.15rem 1.25rem; }
.carta-tabela h3 { margin: 0 0 .6rem; font-size: 1.15rem; }

.lista { display: grid; gap: .8rem; }
.item-lista {
  padding: .95rem 1.1rem; display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center;
}
.item-lista .info strong { font-size: 1.02rem; }
.item-lista .meta { font-size: .84rem; color: var(--marrom-suave); margin: .1rem 0 .3rem; }
.item-lista .selos { display: flex; gap: .35rem; flex-wrap: wrap; }
.item-lista .lado { text-align: right; display: grid; gap: .45rem; justify-items: end; }
.item-lista .valor { font-family: var(--fonte-titulo); font-size: 1.25rem; color: var(--crosta); white-space: nowrap; }
.item-lista .acoes { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

.vazio {
  text-align: center; color: var(--marrom-suave);
  border: 2px dashed var(--linha); border-radius: var(--raio);
  padding: 2.2rem 1rem;
}

/* ---------- produtos ---------- */

.produtos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1rem; }
.produto-adm { overflow: hidden; display: flex; flex-direction: column; }
.produto-adm img { width: 100%; height: 150px; object-fit: cover; background: var(--creme); }
.produto-adm .corpo { padding: .85rem 1rem 1rem; display: grid; gap: .5rem; flex: 1; }
.produto-adm h3 { margin: 0; font-size: 1.15rem; }
.produto-adm .preco { font-weight: 700; color: var(--crosta); }
.produto-adm .desativado-aviso { font-size: .78rem; color: var(--marrom-suave); }
.produto-adm.inativo img { filter: grayscale(.9) opacity(.6); }

.interruptor { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .88rem; font-weight: 600; }
.interruptor input {
  appearance: none; width: 42px; height: 23px; border-radius: 999px;
  background: var(--linha); position: relative; cursor: pointer; margin: 0;
  transition: background-color .15s ease;
}
.interruptor input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--nata); transition: left .15s ease;
  box-shadow: 0 1px 3px rgba(60, 35, 10, 0.4);
}
.interruptor input:checked { background: var(--verde-folha); }
.interruptor input:checked::after { left: 22px; }

.foto-previa { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 2px solid var(--linha); background: var(--creme); }

/* ---------- itens do pedido (diálogo) ---------- */

.item-linha { display: grid; grid-template-columns: 1fr 72px auto auto; gap: .5rem; align-items: center; }
.item-linha select, .item-linha input {
  font: inherit; color: var(--marrom); background: var(--papel);
  border: 2px solid var(--linha); border-radius: var(--raio-campo); padding: .5rem .6rem;
  min-width: 0;
}
.item-linha .subtotal { font-weight: 700; min-width: 76px; text-align: right; font-size: .93rem; }

.total-pedido {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 2px dashed var(--linha); padding-top: .7rem;
  font-weight: 800; font-size: 1.15rem;
}

/* ---------- ajustes ---------- */

.ajustes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; align-items: start; }
.ajuste-carta { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: .8rem; }
.ajuste-carta h3 { margin: 0; font-size: 1.15rem; }
.ajuste-carta p { margin: 0; font-size: .9rem; color: var(--marrom-suave); }

.nota-caixa {
  background: #FBF0D2; border: 1.5px solid #E9CF8B; border-radius: 12px;
  padding: .75rem 1rem; font-size: .88rem; margin-bottom: 1.1rem;
}

.msg-ok { color: #1E6B2E; font-weight: 600; font-size: .9rem; margin: 0; display: none; }
.msg-erro { color: var(--vermelho); font-weight: 600; font-size: .9rem; margin: 0; display: none; }

/* ---------- aviso flutuante ---------- */

.toast {
  position: fixed; bottom: 1.3rem; left: 50%; transform: translate(-50%, 10px);
  background: var(--marrom); color: var(--creme);
  padding: .7rem 1.3rem; border-radius: 12px; font-weight: 600; font-size: .95rem;
  box-shadow: 0 12px 30px -8px rgba(60, 35, 10, 0.55);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  z-index: 90; max-width: calc(100% - 2rem); text-align: center;
}
.toast.mostrar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsivo ---------- */

@media (max-width: 640px) {
  .item-lista { grid-template-columns: 1fr; }
  .item-lista .lado { text-align: left; justify-items: start; }
  .item-lista .acoes { justify-content: flex-start; }
  .item-linha { grid-template-columns: 1fr 64px auto auto; }
  .topo-admin strong { font-size: .92rem; }
}