/* Mega 20 — Design system compartilhado entre todos os módulos
   (Ponto, Contas a Pagar, PDV). Mantenha esse arquivo como fonte
   única de cores/tipografia pra tudo ficar visualmente consistente. */

:root{
  --paper: #EFEAD8;
  --paper-dark: #E4DEC8;
  --ink: #1F3A2E;
  --ink-soft: #4A5E52;
  --rule: #C9C0A2;
  --rust: #A23B2E;
  --rust-soft: #E8D3CC;
  --gold: #B9862F;
  --gold-soft: #F0E2C0;
  --green-soft: #DCE6D9;
  --white: #FBF9F2;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height:1.45;
}

h1,h2,h3{
  font-family: Georgia, 'Source Serif Pro', serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.2px;
}

a{ color: var(--ink); }

button{
  font-family: inherit;
  font-size: 0.88rem;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  cursor:pointer;
}
button.secondary{
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--rule);
}
button.rust{ background: var(--rust); border-color: var(--rust); }
button:hover{ opacity: 0.88; }
button:disabled{ opacity:0.5; cursor:not-allowed; }

input, select, textarea{
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus, button:focus{
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.field{ margin-bottom: 14px; }
.field label{ display:block; font-size:0.78rem; color: var(--ink-soft); margin-bottom:4px; }
.field input, .field select{ width:100%; }

.msg{ font-size:0.85rem; padding: 8px 10px; border:1px solid var(--rule); margin-top:10px; display:none; }
.msg.erro{ display:block; background: var(--rust-soft); border-color: var(--rust); color:#5c1f16; }
.msg.ok{ display:block; background: var(--green-soft); border-color: var(--ink); }

/* ---- Backoffice: shell com menu lateral por categorias ---- */
.bo-shell{ display:flex; align-items:flex-start; min-height: calc(100vh - 61px); }
.bo-sidebar{
  width: 230px; flex-shrink:0; background: var(--white); border-right: 1px solid var(--rule);
  padding: 22px 0; position: sticky; top: 61px; align-self: flex-start; height: calc(100vh - 61px); overflow-y:auto;
}
.bo-categoria{ margin-bottom: 18px; }
.bo-categoria-nome{
  font-size:0.72rem; text-transform: uppercase; letter-spacing:0.6px; color: var(--ink-soft);
  padding: 0 22px; margin-bottom: 6px;
}
.bo-item{
  display:block; padding: 8px 22px; font-size:0.88rem; text-decoration:none; color: var(--ink);
  border-left: 3px solid transparent;
}
.bo-item:hover{ background: var(--paper-dark); }
.bo-item.ativo{ border-left-color: var(--gold); background: var(--gold-soft); font-weight:600; }
.bo-content{ flex:1; min-width:0; padding: 28px 32px 60px; max-width: 980px; }
.bo-content h1{ font-size:1.3rem; margin-bottom: 4px; }
.bo-content .sub{ font-size:0.85rem; color: var(--ink-soft); margin-bottom: 24px; }

.bo-painel{ background: var(--white); border: 1px solid var(--rule); padding: 22px 24px; margin-bottom:20px; }
.bo-painel h2{ font-size:1.02rem; margin-bottom: 16px; }
.bo-formgrid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin-bottom: 16px; }
.bo-linha{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 12px;
  border: 1px solid var(--rule); background: var(--white); margin-bottom: 6px; font-size: 0.9rem; flex-wrap:wrap;
}
.bo-linha .tag{ font-size:0.72rem; color: var(--ink-soft); margin-left:8px; }
.bo-vazio{ text-align:center; padding:20px; color: var(--ink-soft); font-size:0.85rem; }
.bo-hdr-topo{
  background: var(--ink); color: var(--white); padding: 14px 24px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:10px; border-bottom: 3px solid var(--gold);
}
.bo-hdr-topo .esq{ display:flex; align-items:baseline; gap:14px; }
.bo-hdr-topo a.voltar{ color: var(--white); opacity:0.75; text-decoration:none; font-size:0.85rem; }
.bo-hdr-topo a.voltar:hover{ opacity:1; }
.bo-hdr-topo h1{ font-size:1.15rem; }
.bo-hdr-topo .dir{ display:flex; align-items:center; gap:12px; font-size:0.8rem; }
.bo-hdr-topo button{ background: var(--white); color: var(--ink); border-color: var(--white); padding:7px 14px; font-size:0.8rem; }
@media (max-width: 820px){
  .bo-shell{ flex-direction:column; }
  .bo-sidebar{ width:100%; position:static; height:auto; border-right:none; border-bottom:1px solid var(--rule); }
}