/* =========================================================================
   Fornada - estilos principais
   ========================================================================= */

:root {
  /* Paleta */
  --cafe: #4a2c1d;          /* marrom café torrado (primária) */
  --cafe-700: #3a2216;
  --cafe-500: #6f4a35;
  --cafe-300: #a07c66;
  --creme: #faf5ec;         /* fundo do container */
  --creme-2: #f3e9d8;
  --creme-3: #e9dcc6;
  --caramelo: #c8893b;      /* destaques */
  --dourado: #d9a441;
  --caramelo-claro: #f6e5c8;
  --oliva: #5f7034;         /* indicadores positivos */
  --oliva-claro: #e7ecd4;
  --terracota: #b5533c;     /* alertas */
  --terracota-claro: #f6dfd6;
  --ambar: #a86b12;
  --ambar-claro: #fbedd2;

  --tinta: #2b1d14;         /* texto principal */
  --tinta-2: #6b5646;       /* texto secundário */
  --tinta-3: #94806f;       /* texto apagado */
  --borda: #e3d4bd;
  --borda-forte: #cdb898;
  --branco: #fffdf9;

  /* Container */
  --vidro: rgba(250, 245, 236, 0.9);
  --raio: 18px;
  --raio-sm: 10px;
  --sombra: 0 30px 80px -20px rgba(20, 10, 4, 0.55), 0 8px 24px -8px rgba(20, 10, 4, 0.35);
  --sombra-card: 0 1px 2px rgba(74, 44, 29, 0.06), 0 4px 14px -6px rgba(74, 44, 29, 0.12);

  /* Tipografia */
  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --sidebar: 236px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--fonte-texto);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta);
  overflow: hidden; /* a página não rola; só o conteúdo do container */
  background: #3b2417;
  -webkit-font-smoothing: antialiased;
}

/* Fundo fotográfico com overlay quente. Último gradiente = fallback se a imagem falhar. */
.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(160deg, rgba(36, 20, 10, 0.72) 0%, rgba(74, 40, 18, 0.5) 50%, rgba(28, 16, 8, 0.78) 100%),
    url('../assets/bg.jpg') center / cover no-repeat,
    linear-gradient(135deg, #2e1b10 0%, #6b4226 45%, #b07a45 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--cafe);
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: var(--cafe-500); }

.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--tinta-2); }
.apagado { color: var(--tinta-3); }
.ic { flex-shrink: 0; vertical-align: middle; }

/* ------------------------------------------------------------------ App */
.app {
  width: min(1280px, calc(100vw - 48px));
  height: 90vh;
  margin: 5vh auto;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--vidro);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--sombra);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Sidebar */
.sidebar {
  background: linear-gradient(180deg, rgba(74, 44, 29, 0.97), rgba(52, 30, 19, 0.98));
  color: var(--creme-2);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  gap: 18px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 14px;
  border-bottom: 1px solid rgba(243, 233, 216, 0.12);
}

.logo-marca {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--dourado), var(--caramelo));
  color: var(--cafe-700);
}

.logo-texto strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 600;
  color: var(--creme);
  line-height: 1.1;
}

.logo-texto span {
  font-size: 11.5px;
  color: rgba(243, 233, 216, 0.6);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(243, 233, 216, 0.78);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.nav a:hover { background: rgba(243, 233, 216, 0.08); color: var(--creme); }

.nav a.ativo {
  background: rgba(217, 164, 65, 0.16);
  color: var(--dourado);
  box-shadow: inset 3px 0 0 var(--dourado);
}

.nav .nav-badge {
  margin-left: auto;
  background: var(--terracota);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 7px;
}

.sidebar-rodape {
  margin-top: auto;
  font-size: 11.5px;
  color: rgba(243, 233, 216, 0.5);
  padding: 0 10px;
}

.sidebar-rodape strong { color: rgba(243, 233, 216, 0.8); font-weight: 500; }

/* Conteúdo */
.conteudo {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 34px 40px;
  scroll-behavior: smooth;
}

.conteudo::-webkit-scrollbar { width: 10px; }
.conteudo::-webkit-scrollbar-thumb { background: var(--creme-3); border-radius: 10px; border: 2px solid var(--creme); }

.pag-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.pag-cab h1 { font-size: 30px; line-height: 1.15; }
.pag-cab p { margin: 4px 0 0; color: var(--tinta-2); }
.pag-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.voltar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 6px;
}

.voltar-link:hover { color: var(--cafe); }

/* ----------------------------------------------------------- Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 500 14px var(--fonte-texto);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

.btn-primario { background: var(--cafe); color: var(--creme); }
.btn-primario:hover { background: var(--cafe-700); }
.btn-destaque { background: var(--caramelo); color: #fff; }
.btn-destaque:hover { background: #b37632; }
.btn-ghost { background: transparent; border-color: var(--borda-forte); color: var(--cafe); }
.btn-ghost:hover { background: var(--creme-2); }
.btn-perigo { background: var(--terracota); color: #fff; }
.btn-perigo:hover { background: #9c4430; }
.btn-ok { background: var(--oliva); color: #fff; }
.btn-ok:hover { background: #4e5d2a; }

.btn-icone {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--tinta-2);
  cursor: pointer;
}

.btn-icone:hover { background: var(--creme-2); color: var(--cafe); }
.btn-icone.perigo:hover { background: var(--terracota-claro); color: var(--terracota); }

/* ------------------------------------------------------------- Cards */
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--sombra-card);
}

.card + .card { margin-top: 16px; }
.card-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-cab h3 { font-size: 18px; }
.card-cab .sub { font-size: 12.5px; color: var(--tinta-2); font-family: var(--fonte-texto); font-weight: 400; }

.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt { margin-top: 16px; }

/* KPI */
.kpi {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--sombra-card);
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--caramelo);
}

.kpi.pos::before { background: var(--oliva); }
.kpi.neg::before { background: var(--terracota); }
.kpi-rotulo { font-size: 12.5px; color: var(--tinta-2); display: flex; align-items: center; gap: 6px; }
.kpi-valor { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; color: var(--cafe); line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-extra { font-size: 12px; color: var(--tinta-3); margin-top: 2px; }

/* Mini indicadores (ficha / produto) */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ind { background: var(--creme-2); border-radius: 12px; padding: 10px 14px; }
.ind small { display: block; font-size: 11.5px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: 0.04em; }
.ind strong { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--cafe); font-weight: 600; }
.ind.pos strong { color: var(--oliva); }
.ind.neg strong { color: var(--terracota); }
.ind.destaque { background: var(--caramelo-claro); }

/* ------------------------------------------------------------ Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.6;
}

.badge-neutro { background: var(--creme-2); color: var(--tinta-2); }
.badge-pos { background: var(--oliva-claro); color: var(--oliva); }
.badge-neg { background: var(--terracota-claro); color: var(--terracota); }
.badge-aviso { background: var(--ambar-claro); color: var(--ambar); }
.badge-cafe { background: var(--cafe); color: var(--creme); }

/* --------------------------------------------------------- Barra de filtros */
.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.busca {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
}

.busca .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.busca input { padding-left: 36px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  border: 1px solid var(--borda);
  background: var(--branco);
  color: var(--tinta-2);
  border-radius: 999px;
  padding: 5px 12px;
  font: 500 12.5px var(--fonte-texto);
  cursor: pointer;
}

.chip:hover { border-color: var(--borda-forte); }
.chip.ativo { background: var(--cafe); border-color: var(--cafe); color: var(--creme); }

/* ---------------------------------------------------------- Formulários */
input[type=text], input[type=number], input[type=search], input:not([type]), select, textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  background: var(--branco);
  font: 14px var(--fonte-texto);
  color: var(--tinta);
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select { cursor: pointer; padding-right: 30px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--caramelo);
  box-shadow: 0 0 0 3px rgba(200, 137, 59, 0.22);
}

input[data-num] { text-align: right; font-variant-numeric: tabular-nums; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.campo .ajuda { font-size: 11.5px; color: var(--tinta-3); }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--terracota); }
.msg-erro { font-size: 12px; color: var(--terracota); font-weight: 500; }

.form-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-6 { grid-column: span 6; }
.c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; }

.com-sufixo { position: relative; }
.com-sufixo input { padding-right: 38px; }
.com-sufixo .sufixo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); font-size: 13px; pointer-events: none; }
.com-prefixo { position: relative; }
.com-prefixo input { padding-left: 34px; }
.com-prefixo .prefixo { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); font-size: 13px; pointer-events: none; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: var(--tinta);
}

.check input { width: 18px; height: 18px; accent-color: var(--cafe); }

.secao-form {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  color: var(--cafe);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.segmentado { display: inline-flex; background: var(--creme-2); border-radius: 10px; padding: 3px; gap: 2px; }
.segmentado label { cursor: pointer; }
.segmentado input { display: none; }
.segmentado span { display: block; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.segmentado input:checked + span { background: var(--branco); color: var(--cafe); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* Linhas de itens (ingredientes, extras, componentes) */
.linhas-itens { display: flex; flex-direction: column; gap: 8px; }

.linha-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 96px 110px 34px;
  gap: 8px;
  align-items: center;
  background: var(--creme);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 8px;
}

.linha-item.sem-unidade { grid-template-columns: minmax(0, 1fr) 110px 110px 34px; }
.linha-item .custo-linha { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cafe); font-size: 13.5px; }
.linha-item .custo-linha.erro { color: var(--terracota); font-weight: 500; font-size: 12px; }
.linha-item select, .linha-item input { height: 34px; }
.linhas-vazio { padding: 14px; text-align: center; color: var(--tinta-3); border: 1px dashed var(--borda-forte); border-radius: 10px; font-size: 13px; }

.resumo-form {
  margin-top: 16px;
  background: var(--caramelo-claro);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
}

.resumo-form b { font-variant-numeric: tabular-nums; color: var(--cafe); }

.aviso-caixa {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ambar-claro);
  color: #74480a;
  font-size: 13px;
  margin-top: 10px;
}

.aviso-caixa.erro { background: var(--terracota-claro); color: #8a3824; }
.aviso-caixa.info { background: var(--creme-2); color: var(--tinta-2); }

/* -------------------------------------------------------------- Tabelas */
.tabela-wrap {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 14px;
  overflow: auto;
  max-height: calc(90vh - 230px);
  box-shadow: var(--sombra-card);
}

.tabela-wrap.livre { max-height: none; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--creme-2);
  color: var(--tinta-2);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--cafe); }
th .seta { opacity: 0.7; margin-left: 3px; }

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--creme-3);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(243, 233, 216, 0.45); }
tr.clicavel { cursor: pointer; }
tr.inativo td { opacity: 0.55; }
td .nome { font-weight: 600; color: var(--tinta); }
td .sub { font-size: 12px; color: var(--tinta-3); }
td.acoes { white-space: nowrap; text-align: right; width: 1%; }
tfoot td { font-weight: 700; background: var(--creme); border-top: 1px solid var(--borda); position: sticky; bottom: 0; }

.pos-txt { color: var(--oliva); font-weight: 600; }
.neg-txt { color: var(--terracota); font-weight: 600; }

/* --------------------------------------------------------- Barras (chart) */
.barras { display: flex; flex-direction: column; gap: 7px; }
.barra-linha {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr 74px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  position: relative;
  border-radius: 6px;
  padding: 2px 4px;
  outline: none;
}

.barras.compacto .barra-linha { grid-template-columns: minmax(90px, 34%) 1fr 64px; font-size: 12.5px; }
.barra-linha:hover, .barra-linha:focus-visible { background: var(--creme-2); }
.barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.barra-trilho { position: relative; height: 16px; }
.barra { position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0; min-width: 2px; }
.barra.neg { border-radius: 4px 0 0 4px; }
.barra-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--borda-forte); }
.barra-cafe { background: var(--cafe-500); }
.barra-caramelo { background: var(--caramelo); }
.barra-pos { background: var(--oliva); }
.barra-neg { background: var(--terracota); }
.barra-valor { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-2); font-weight: 500; }

.barra-linha[data-dica]:not([data-dica=""]):hover::after,
.barra-linha[data-dica]:not([data-dica=""]):focus-visible::after {
  content: attr(data-dica);
  position: absolute;
  left: 40%;
  bottom: calc(100% + 4px);
  background: var(--tinta);
  color: var(--creme);
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* Barra empilhada do simulador (composição do preço, 3 categorias) */
.composicao { display: flex; height: 34px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--creme-2); }
.composicao > div { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; transition: flex-basis 0.2s; }
.comp-custo { background: var(--cafe-500); }
.comp-var { background: var(--caramelo); }
.comp-margem { background: var(--oliva); }
.comp-margem.neg { background: var(--terracota); }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ------------------------------------------------------------ Simulador */
.slider-bloco { margin-bottom: 18px; }
.slider-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.slider-topo label { font-weight: 600; color: var(--tinta-2); font-size: 13px; }
.slider-topo .campo-mini { width: 130px; }

input[type=range] {
  width: 100%;
  accent-color: var(--cafe);
  height: 6px;
  cursor: pointer;
}

.lucro-destaque {
  text-align: center;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cafe), var(--cafe-500));
  color: var(--creme);
}

.lucro-destaque small { display: block; opacity: 0.75; font-size: 12.5px; }
.lucro-destaque strong { font-family: var(--fonte-titulo); font-size: 38px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lucro-destaque.neg { background: linear-gradient(135deg, #8a3824, var(--terracota)); }

/* ---------------------------------------------------------------- Alertas */
.lista-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-alertas li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--creme);
  border: 1px solid var(--borda);
  font-size: 13px;
}

.lista-alertas li .ic { color: var(--terracota); }
.lista-alertas li.aviso .ic { color: var(--ambar); }
.lista-alertas li a { margin-left: auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------ Vazio */
.vazio { text-align: center; padding: 40px 20px; color: var(--tinta-2); }
.vazio h3 { font-size: 20px; margin-top: 8px; }
.vazio p { max-width: 420px; margin: 6px auto 16px; }
.vazio-ilustra { position: relative; width: 160px; height: 120px; margin: 0 auto; }
.vazio-ilustra svg { width: 100%; height: 100%; }
.vazio-icone { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); color: var(--cafe-500); }

/* ------------------------------------------------------------------ Modal */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(30, 18, 10, 0.5);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.18s;
}

.modal-fundo.show { opacity: 1; }

.modal {
  background: var(--creme);
  border-radius: 16px;
  box-shadow: var(--sombra);
  width: 100%;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  transform: translateY(10px) scale(0.99);
  transition: transform 0.18s;
}

.modal-fundo.show .modal { transform: none; }
.modal-sm { max-width: 440px; }
.modal-md { max-width: 620px; }
.modal-lg { max-width: 860px; }
.modal-xl { max-width: 1060px; }

.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; border-bottom: 1px solid var(--borda); }
.modal-cab h2 { font-size: 21px; }
.modal-corpo { padding: 18px 22px; overflow-y: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--borda); flex-wrap: wrap; }

.confirmacao { display: flex; gap: 14px; align-items: flex-start; }
.confirm-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.confirm-ic.perigo { background: var(--terracota-claro); color: var(--terracota); }
.confirmacao ul { margin: 8px 0 0; padding-left: 18px; }

/* ------------------------------------------------------------------ Toast */
.toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 400px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--tinta);
  color: var(--creme);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
}

.toast.show { opacity: 1; transform: none; }
.toast-ok .ic { color: #b7c98a; }
.toast-erro { background: #7d3222; }
.toast-info .ic { color: var(--dourado); }

/* ---------------------------------------------------------- Ficha técnica */
.ficha-cab-impressao { display: none; }
.ficha-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--tinta-2); font-size: 13px; margin-top: 6px; }
.ficha-meta span { display: inline-flex; align-items: center; gap: 5px; }
.texto-livre { white-space: pre-wrap; margin: 0; color: var(--tinta); }

/* Config */
.logo-preview { width: 64px; height: 64px; border-radius: 12px; border: 1px dashed var(--borda-forte); display: grid; place-items: center; overflow: hidden; background: var(--creme); color: var(--tinta-3); }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.zona-perigo { border-color: var(--terracota-claro); }
.lista-acoes { display: flex; flex-direction: column; gap: 10px; }
.acao-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--borda); flex-wrap: wrap; }
.acao-linha:last-child { border-bottom: none; }
.acao-linha p { margin: 2px 0 0; font-size: 12.5px; color: var(--tinta-2); }

/* Topo mobile */
.topo-mobile { display: none; }

/* ============================================================ Responsivo */
@media (max-width: 1100px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body { overflow: hidden; }

  .app {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .topo-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cafe);
    color: var(--creme);
    font-family: var(--fonte-titulo);
    font-size: 19px;
  }

  .topo-mobile .logo-marca { width: 32px; height: 32px; border-radius: 9px; }

  /* menu lateral vira barra inferior */
  .sidebar {
    order: 3;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    gap: 0;
  }

  .sidebar .logo, .sidebar-rodape { display: none; }

  .nav { flex-direction: row; justify-content: space-around; gap: 0; }

  .nav a {
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    font-size: 10.5px;
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .nav a span.rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .nav a.ativo { box-shadow: inset 0 -2px 0 var(--dourado); }
  .nav .nav-badge { position: absolute; margin: 0 0 0 18px; font-size: 9.5px; padding: 0 5px; }
  .nav a { position: relative; }

  .conteudo { padding: 18px 16px 28px; }
  .pag-cab h1 { font-size: 24px; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .grade-4.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-valor { font-size: 24px; }
  .form-grade > [class^="c-"], .form-grade > [class*=" c-"] { grid-column: span 12; }
  .tabela-wrap { max-height: none; }

  .linha-item, .linha-item.sem-unidade { grid-template-columns: 1fr 1fr 34px; }
  .linha-item > :first-child { grid-column: 1 / -1; }
  .linha-item .custo-linha { grid-column: 1 / 3; text-align: left; }

  .modal-fundo { padding: 0; align-items: end; }
  .modal { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .toasts { left: 12px; right: 12px; bottom: 76px; }
  .toast { min-width: 0; max-width: none; }
  .esconde-mobile { display: none !important; }
  .barra-linha { grid-template-columns: minmax(90px, 40%) 1fr 60px; }
}

[hidden] { display: none !important; }
.busca input[type=search] { padding-left: 36px; }
td:first-child:has(.nome) { min-width: 200px; }
.nowrap { white-space: nowrap; }
.indicadores.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { td:first-child:has(.nome) { min-width: 150px; } .indicadores.tres { grid-template-columns: 1fr 1fr; } }
.modal-fundo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.modal { min-width: 0; }
.secao-form { flex-wrap: wrap; gap: 8px; }
.segmentado span { font-family: var(--fonte-texto); }

/* =========================================================================
   Módulo Encomendas
   ========================================================================= */
:root {
  /* cores por status (fundo / texto / cor sólida) */
  --st-orc-bg: #ebe7f3;  --st-orc-fg: #5d4f86;  --st-orc: #8273b0;
  --st-conf-bg: var(--ambar-claro); --st-conf-fg: var(--ambar); --st-conf: var(--caramelo);
  --st-prod-bg: #e3ecf3; --st-prod-fg: #3b6283; --st-prod: #4f7ea6;
  --st-pronta-bg: var(--oliva-claro); --st-pronta-fg: var(--oliva); --st-pronta: var(--oliva);
  --st-ent-bg: #ece6df;  --st-ent-fg: #6b5646;  --st-ent: var(--cafe-300);
  --st-canc-bg: var(--terracota-claro); --st-canc-fg: var(--terracota); --st-canc: var(--terracota);
}

input[type=date], input[type=time], input[type=email], input[type=tel], input[type=password] {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--borda-forte); border-radius: 9px;
  background: var(--branco); font: 14px var(--fonte-texto); color: var(--tinta);
}
input:disabled { background: var(--creme-2); color: var(--tinta-2); }
.c-2 { grid-column: span 2; }

/* Status */
.badge.st-orcamento { background: var(--st-orc-bg); color: var(--st-orc-fg); }
.badge.st-confirmada { background: var(--st-conf-bg); color: var(--st-conf-fg); }
.badge.st-producao { background: var(--st-prod-bg); color: var(--st-prod-fg); }
.badge.st-pronta { background: var(--st-pronta-bg); color: var(--st-pronta-fg); }
.badge.st-entregue { background: var(--st-ent-bg); color: var(--st-ent-fg); }
.badge.st-cancelada { background: var(--st-canc-bg); color: var(--st-canc-fg); text-decoration: line-through; }
.legenda i.st-orcamento { background: var(--st-orc); } .legenda i.st-confirmada { background: var(--st-conf); }
.legenda i.st-producao { background: var(--st-prod); } .legenda i.st-pronta { background: var(--st-pronta); }
.legenda i.st-entregue { background: var(--st-ent); } .legenda i.st-cancelada { background: var(--st-canc); }
h1 .badge { font-family: var(--fonte-texto); vertical-align: middle; font-size: 12px; }
a.btn { text-decoration: none; }
.obs-cli { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; color: var(--terracota) !important; }

/* Menu agrupado */
.nav-grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(243, 233, 216, 0.4); padding: 12px 12px 2px; min-height: 8px; }
.sidebar { overflow-y: auto; }

/* Abas (painel e configurações) */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; flex-wrap: wrap; }
.abas a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; text-decoration: none; color: var(--tinta-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--cafe); }
.abas a.ativo { color: var(--cafe); border-bottom-color: var(--caramelo); }

/* Destaques (hoje, amanhã, atrasadas) */
.destaques { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-destaque { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--branco); border: 1px solid var(--borda); color: var(--tinta-2); text-decoration: none; font-size: 13px; }
.chip-destaque b { color: var(--cafe); font-size: 15px; }
.chip-destaque.tem { border-color: var(--caramelo); background: var(--caramelo-claro); }
.chip-destaque.alerta { border-color: var(--terracota); background: var(--terracota-claro); color: var(--terracota); }
.chip-destaque.alerta b { color: var(--terracota); }
.chip-destaque.aviso { border-color: var(--ambar); background: var(--ambar-claro); }
.kpi-botao { text-align: left; font: inherit; cursor: pointer; width: 100%; }
.kpi-botao:hover { border-color: var(--borda-forte); }
.kpi.destaque-hoje::before { background: var(--caramelo); }

/* Lembretes */
.card-lembretes { border-color: var(--ambar); background: linear-gradient(0deg, var(--branco), var(--ambar-claro)); }
.card-lembretes h3 { display: flex; align-items: center; gap: 8px; }
.lista-alertas li .btn { margin-left: auto; }
.lista-alertas li.aviso .ic { color: var(--ambar); }

/* Formulário de encomenda */
.linha-campo { display: flex; gap: 8px; }
.linha-campo input { flex: 1; min-width: 0; }
.linha-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cli-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); background: var(--creme-2); border-radius: 10px; padding: 8px 12px; }
.preco-unit { text-align: right; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.item-pers { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: var(--caramelo-claro); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; }
.item-pers-info .sub { font-size: 12px; color: var(--tinta-2); }
.item-pers-preco { font-weight: 700; color: var(--cafe); font-variant-numeric: tabular-nums; }
.item-pers-foto { width: 56px; height: 56px; border-radius: 9px; background: var(--branco); border: 1px solid var(--borda); display: grid; place-items: center; overflow: hidden; color: var(--cafe-300); flex-shrink: 0; }
.item-pers-foto img { width: 100%; height: 100%; object-fit: cover; }
.item-pers-foto.grande { width: 84px; height: 84px; }
.item-det { display: flex; gap: 12px; align-items: flex-start; }
.item-det .sub { font-size: 12.5px; color: var(--tinta-2); }
.foto-ref { display: flex; flex-direction: column; gap: 6px; }
.foto-ref img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 9px; border: 1px solid var(--borda); }
.foto-acoes { display: flex; gap: 6px; }

/* Capacidade */
.capacidade { height: 6px; background: var(--creme-3); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.capacidade span { display: block; height: 100%; background: var(--oliva); border-radius: 99px; }
.capacidade span.quase { background: var(--caramelo); }
.capacidade span.estourou { background: var(--terracota); }
.capacidade.mini { height: 4px; margin-top: auto; }

/* Detalhe da encomenda */
.grade-enc { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; }
.fluxo { display: flex; gap: 4px; flex-wrap: wrap; }
.fluxo-passo { flex: 1 1 110px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--creme); color: var(--tinta-3); font-size: 13px; font-weight: 500; }
.fluxo-bola { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--creme-3); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.fluxo-passo.feito { color: var(--oliva); }
.fluxo-passo.feito .fluxo-bola { background: var(--oliva); color: #fff; }
.fluxo-passo.atual { background: var(--cafe); color: var(--creme); }
.fluxo-passo.atual .fluxo-bola { background: var(--dourado); color: var(--cafe-700); }
.totais-enc { margin: 12px 0 0 auto; max-width: 420px; font-size: 13.5px; }
.totais-enc > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.totais-enc .total { border-top: 2px solid var(--cafe); margin-top: 4px; padding-top: 6px; font-size: 17px; color: var(--cafe); }
.totais-enc .apagado { font-size: 12.5px; }
.grade-enc .indicadores.tres .ind { padding: 8px 10px; }
.grade-enc .indicadores.tres .ind strong { font-size: 15.5px; }
.dados-lista { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.dados-lista dt { color: var(--tinta-2); font-weight: 600; font-size: 12.5px; }
.dados-lista dd { margin: 0; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--creme-3); display: flex; flex-direction: column; gap: 10px; }
.linha-tempo li { position: relative; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.linha-tempo li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--caramelo); border: 2px solid var(--branco); }
.lt-data { font-size: 11.5px; color: var(--tinta-3); }
.lt-obs { color: var(--tinta-2); font-size: 12.5px; }
.lista-pag { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-pag li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--creme); border: 1px solid var(--borda); border-radius: 10px; font-size: 13px; }
.lista-pag .sub { font-size: 12px; color: var(--tinta-3); }
.resumo-itens { font-size: 12.5px; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; }

/* Agenda */
.ag-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-titulo { font-size: 20px; }
.ag-semana-cab, .ag-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-semana-cab span { text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-3); padding: 4px 0; }
.ag-dia { min-height: 104px; background: var(--creme); border: 1px solid var(--borda); border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.ag-dia:hover, .ag-dia:focus-visible { border-color: var(--caramelo); outline: none; }
.ag-dia.fora { opacity: 0.45; }
.ag-dia.passado { background: var(--creme-2); }
.ag-dia.hoje { border: 2px solid var(--caramelo); background: var(--branco); }
.ag-dia-num { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; color: var(--tinta-2); }
.ag-cont { background: var(--cafe); color: var(--creme); font-size: 10.5px; border-radius: 99px; padding: 0 6px; }
.ag-pilula { display: block; font-size: 11.5px; padding: 1px 6px; border-radius: 5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.ag-pilula.st-orcamento { background: var(--st-orc-bg); color: var(--st-orc-fg); border-color: var(--st-orc); }
.ag-pilula.st-confirmada { background: var(--st-conf-bg); color: var(--st-conf-fg); border-color: var(--st-conf); }
.ag-pilula.st-producao { background: var(--st-prod-bg); color: var(--st-prod-fg); border-color: var(--st-prod); }
.ag-pilula.st-pronta { background: var(--st-pronta-bg); color: var(--st-pronta-fg); border-color: var(--st-pronta); }
.ag-pilula.st-entregue { background: var(--st-ent-bg); color: var(--st-ent-fg); border-color: var(--st-ent); }
.ag-pilula.st-cancelada { background: var(--st-canc-bg); color: var(--st-canc-fg); border-color: var(--st-canc); text-decoration: line-through; }
.ag-pilula.atrasada, .ag-cartao.atrasada { box-shadow: 0 0 0 2px var(--terracota); }
.ag-mais { font-size: 11px; color: var(--tinta-3); padding-left: 4px; }
.ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ag-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-col-cab { background: var(--creme-2); border-radius: 10px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; }
.ag-col-cab .sub { font-size: 11.5px; color: var(--tinta-3); }
.ag-col.hoje .ag-col-cab { background: var(--cafe); color: var(--creme); }
.ag-col.hoje .ag-col-cab .sub { color: var(--creme-3); }
.ag-vazio { font-size: 12px; color: var(--tinta-3); text-align: center; padding: 10px 0; border: 1px dashed var(--borda); border-radius: 10px; }
.ag-cartao { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--borda-forte); text-decoration: none; color: var(--tinta); font-size: 12.5px; min-width: 0; }
.ag-cartao:hover { border-color: var(--caramelo); }
.ag-cartao .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cartao .sub { font-size: 11.5px; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-cartao-topo { display: flex; gap: 6px; align-items: center; color: var(--tinta-2); }
.ag-cartao-rodape { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; }
.st-borda-orcamento { border-left-color: var(--st-orc); } .st-borda-confirmada { border-left-color: var(--st-conf); }
.st-borda-producao { border-left-color: var(--st-prod); } .st-borda-pronta { border-left-color: var(--st-pronta); }
.st-borda-entregue { border-left-color: var(--st-ent); } .st-borda-cancelada { border-left-color: var(--st-canc); opacity: 0.7; }
.ag-lista-bloco { margin-bottom: 18px; }
.ag-lista-bloco h3 { font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.ag-lista-bloco h3 .sub { font-family: var(--fonte-texto); font-size: 12.5px; color: var(--tinta-3); font-weight: 400; }
.ag-lista-dia { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ag-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* Produção */
.filtro-data { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); }
.filtro-data input { width: 150px; }
.pers-prod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.pers-prod:last-child { border-bottom: none; }
.pers-prod-info .sub { font-size: 12.5px; color: var(--tinta-2); }
.pers-prod-foto { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); }
.check-prod input, .check-item input { width: 18px; height: 18px; accent-color: var(--oliva); }
.comp-lista { margin: 4px 0; padding-left: 16px; font-size: 13px; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.check-enc { background: var(--creme); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.check-enc-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; padding-bottom: 6px; border-bottom: 1px dashed var(--borda); }
.check-item { font-size: 13px; font-weight: 400; align-items: flex-start; }
.check-item input:checked + span { text-decoration: line-through; color: var(--tinta-3); }

/* Gráfico de colunas (painel de encomendas) */
.colunas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 220px; align-items: stretch; }
.coluna { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; outline: none; border-radius: 6px; padding: 2px; }
.coluna:hover, .coluna:focus-visible { background: var(--creme-2); }
.coluna-valor { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.coluna-trilho { flex: 1; width: 100%; max-width: 44px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--borda-forte); }
.coluna-barra { width: 100%; background: var(--cafe-500); border-radius: 4px 4px 0 0; }
.coluna-barra.destaque { background: var(--caramelo); }
.coluna-rotulo { font-size: 11.5px; color: var(--tinta-2); white-space: nowrap; }
.coluna[data-dica]:not([data-dica=""]):hover::after, .coluna[data-dica]:not([data-dica=""]):focus-visible::after {
  content: attr(data-dica); position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: var(--creme); font-size: 12px; padding: 5px 9px; border-radius: 7px; white-space: nowrap; z-index: 5; pointer-events: none;
}

/* Configurações de encomendas */
.linha-cat { display: grid; grid-template-columns: minmax(0, 1fr) 120px 100px 34px; gap: 8px; align-items: center; }
.linha-cat.cab { font-size: 11.5px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.linha-cat input { height: 34px; }
.grade-msg { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.modelo textarea { min-height: 120px; }
.modelo-nome { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; color: var(--cafe); border-color: transparent; background: transparent; padding-left: 0; max-width: 340px; }
.modelo-nome:hover { border-color: var(--borda); padding-left: 10px; }
.sticky { position: sticky; top: 0; }
.variaveis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tinta-2); }
.variaveis li { display: flex; align-items: center; gap: 8px; }
.variaveis .chip { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 2px 8px; }
.bolha-whats { background: #dcf8c6; color: #111; border-radius: 10px 10px 10px 2px; padding: 10px 12px; font-size: 13.5px; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); max-height: 340px; overflow: auto; }

@media (max-width: 1100px) {
  .grade-enc, .grade-msg { grid-template-columns: 1fr; }
  .ag-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* o menu inferior rola na horizontal sem alargar a página */
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .conteudo { min-width: 0; }
  .nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 68px; }
  .nav-grupo { display: none; }
  .sidebar { overflow: visible; }
  .ag-dia { min-height: 62px; }
  .ag-pilula { display: none; }
  .ag-semana { grid-template-columns: 1fr; }
  .colunas { height: 180px; gap: 4px; }
  .item-pers { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .item-pers > :last-child { grid-column: 1 / -1; text-align: right; }
  .linha-cat { grid-template-columns: minmax(0, 1fr) 100px 34px; }
  .linha-cat > :nth-child(3) { display: none; }
  .dados-lista { grid-template-columns: 90px 1fr; }
  .pers-prod { grid-template-columns: auto minmax(0, 1fr); }
  .pers-prod-foto { grid-column: 2; }
  .linha-campo { flex-wrap: wrap; }
}

/* ================================================================ Login */
body.deslogado .app { display: none; }
.tela-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.tela-login[hidden] { display: none; }
.login-card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
}
.login-card h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 22px; color: var(--cafe); }
.login-marca { display: flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-size: 20px; color: var(--cafe); }
.login-marca .logo-marca { width: 36px; height: 36px; border-radius: 10px; }
.login-erro { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--terracota); }
.login-card .btn { width: 100%; justify-content: center; }

.btn-sair {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(243, 233, 216, 0.75);
  text-decoration: underline;
  cursor: pointer;
}
.btn-sair:hover { color: var(--creme); }
.nav-mais { display: none !important; }

/* ===================================================== Celular (compacto) */
@media (max-width: 860px) {
  /* barra do topo */
  .topo-mobile {
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    font-size: 18px;
  }
  .topo-mobile .logo-marca { width: 28px; height: 28px; border-radius: 8px; }

  /* barra inferior: 4 telas principais + "Mais" */
  .nav a:not(.principal) { display: none; }
  .nav a.nav-mais { display: flex !important; }
  .nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav a {
    gap: 3px; padding: 6px 0 4px; border-radius: 0;
    font-size: 10.5px; letter-spacing: 0; background: none; box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav a:hover { background: none; }
  .nav a .ic { box-sizing: content-box; padding: 4px 16px; border-radius: 999px; transition: background 0.2s; }
  .nav a.ativo, .nav a.ativo-mobile { background: none; box-shadow: none; color: var(--dourado); }
  .nav a.ativo .ic, .nav a.ativo-mobile .ic { background: rgba(217, 164, 65, 0.2); }
  .nav .nav-badge { top: 1px; left: calc(50% + 8px); margin: 0; }

  /* conteúdo mais compacto */
  .conteudo { padding: 14px 14px 24px; }
  .pag-cab { margin-bottom: 14px; gap: 10px; }
  .pag-cab > div:first-child { min-width: 0; }
  .pag-cab h1 { font-size: 22px; }
  .pag-cab h1.igual-topo { display: none; }
  .pag-cab:has(> div:only-child > h1.igual-topo:only-child) { display: none; }
  .pag-cab p { margin: 0; font-size: 13px; line-height: 1.45; }
  .pag-cab .pag-acoes { width: 100%; flex-wrap: nowrap; }
  .pag-cab .pag-acoes > .btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 10px; font-size: 13.5px; justify-content: center; white-space: nowrap; }

  .grade { gap: 10px; }
  .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); }
  .grade > * { min-width: 0; }

  /* produção: período em duas colunas */
  .filtro-data { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filtro-data input { width: auto; flex: 1; min-width: 0; padding: 0 8px; }

  /* agenda: título em cima, navegação e modo na mesma linha */
  .ag-barra { gap: 10px 6px; flex-wrap: wrap; }
  .ag-barra .ag-titulo { order: -1; width: 100%; font-size: 18px; }
  .ag-barra .pag-acoes { flex-wrap: nowrap; gap: 4px; }
  .ag-barra .pag-acoes .btn-sm { padding: 0 10px; }
  .ag-barra .chips { gap: 4px; }
  .ag-barra .chip { padding: 6px 10px; font-size: 12.5px; }
  .card { padding: 14px; border-radius: 12px; }
  .card + .card { margin-top: 12px; }
  .kpi { padding: 12px 14px; border-radius: 12px; }
  .kpi-rotulo { font-size: 12px; }
  .kpi-valor { font-size: 22px; }
  .kpi-extra { font-size: 11.5px; }

  /* filtros e atalhos numa linha só, rolando para o lado */
  .chips, .destaques { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .chips::-webkit-scrollbar, .destaques::-webkit-scrollbar { display: none; }
  .chip, .chip-destaque { flex: 0 0 auto; white-space: nowrap; }
  .chip { padding: 7px 14px; font-size: 13px; }
  .chip-destaque { padding: 7px 12px; }
  .filtros { gap: 8px; margin-bottom: 12px; }
  .filtros > * { max-width: 100%; }
  .busca { flex-basis: 100%; max-width: none; }
  .abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
  .abas::-webkit-scrollbar { display: none; }
  .abas a { white-space: nowrap; padding: 9px 10px; }

  /* painel "Mais" */
  .modal-menu .modal-rodape { display: none; }
  .modal-menu .modal-corpo { padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); }
}

.menu-mais { display: flex; flex-direction: column; gap: 2px; }
.menu-mais-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); padding: 12px 10px 4px; }
.menu-mais-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; font: 500 15px var(--fonte-texto); color: var(--tinta);
  text-decoration: none; text-align: left; cursor: pointer;
}
.menu-mais-item .ic { color: var(--cafe-500); }
.menu-mais-item:hover, .menu-mais-item:active { background: var(--creme-2); }
.menu-mais-item.ativo { background: var(--caramelo-claro); color: var(--cafe); }
.menu-mais-item .nav-badge { margin-left: auto; background: var(--terracota); color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; }
.menu-mais-sair { margin-top: 8px; border-top: 1px solid var(--borda); border-radius: 0 0 10px 10px; color: var(--terracota); }
.menu-mais-sair .ic { color: var(--terracota); }
@media (min-width: 861px) { .sidebar { overflow-y: auto; } }

/* ======================================================= Boas-vindas (painel vazio) */
.boas-vindas {
  position: relative;
  overflow: hidden;
  padding: 32px 32px 28px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(217, 164, 65, 0.28) 0%, rgba(217, 164, 65, 0) 55%),
    linear-gradient(150deg, var(--cafe-700) 0%, var(--cafe) 55%, #5b3825 100%);
  color: var(--creme);
  box-shadow: 0 18px 40px -22px rgba(42, 22, 12, 0.7);
}
.boas-vindas-marca {
  position: absolute;
  right: -18px;
  bottom: -26px;
  color: var(--dourado);
  opacity: 0.12;
  transform: rotate(-12deg);
  pointer-events: none;
}
.boas-vindas-rotulo {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dourado);
}
.boas-vindas h2 {
  margin: 8px 0 8px;
  max-width: 16ch;
  font-family: var(--fonte-titulo);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.12;
  color: var(--creme);
}
.boas-vindas p { position: relative; max-width: 44ch; margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: rgba(243, 233, 216, 0.78); }
.boas-vindas-acoes { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.boas-vindas-acoes .btn { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-claro { background: rgba(243, 233, 216, 0.08); border-color: rgba(243, 233, 216, 0.3); color: var(--creme); }
.btn-claro:hover { background: rgba(243, 233, 216, 0.16); }

.passos { margin-top: 16px; padding: 8px; }
.passos-titulo { padding: 12px 12px 6px; font-size: 17px; }
.passo {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 12px;
  color: var(--tinta);
  text-decoration: none;
  transition: background 0.15s;
}
.passo + .passo { position: relative; }
.passo + .passo::before { content: ''; position: absolute; top: 0; left: 70px; right: 12px; border-top: 1px solid var(--borda); }
.passo:hover { background: var(--creme-2); }
.passo-icone {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--caramelo-claro);
  color: var(--cafe);
}
.passo-icone b {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--branco);
  background: var(--cafe);
  color: var(--creme);
  font-size: 10.5px;
  font-weight: 700;
}
.passo-texto strong { display: block; font-size: 15px; font-weight: 600; }
.passo-texto span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.passo-seta { color: var(--tinta-3); transform: rotate(180deg); display: grid; }

@media (max-width: 860px) {
  .boas-vindas { padding: 24px 20px 20px; border-radius: 16px; }
  .boas-vindas h2 { font-size: 25px; }
  .boas-vindas p { font-size: 14px; margin-bottom: 18px; }
  .boas-vindas-acoes { flex-direction: column; }
  .boas-vindas-acoes .btn { width: 100%; justify-content: center; }
  .boas-vindas-marca { right: -28px; bottom: auto; top: -20px; }
  .passos { margin-top: 12px; padding: 4px; }
  .passo { gap: 12px; padding: 12px 10px; }
  .passo + .passo::before { left: 66px; right: 10px; }
}