/* =========================================================
   Backoffice Black Home Design
   ========================================================= */
:root {
  --preto: #000;
  --grafite: #1d1d1b;
  --texto: #2b2a28;
  --muted: #6d6c68;
  --linha: #e2e1dc;
  --linha-forte: #cfcec8;
  --fundo: #f5f5f3;
  --pedra: #efeeeb;
  --branco: #fff;
  --nogueira: #6b4a32;
  --nogueira-escuro: #52371f;
  --musgo: #3f5b45;
  --musgo-fundo: #e7efe8;
  --erro: #a3322a;
  --erro-fundo: #f8ebe9;
  --aviso: #8a6412;
  --aviso-fundo: #f7f0de;
  --serif: "Bodoni Moda", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --r: 6px;
  --lateral: 248px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); font-size: .94rem; line-height: 1.5; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
a { color: var(--nogueira); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--nogueira); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.lateral { background: var(--preto); color: #bdbdb8; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.25rem .75rem 2rem; }
.marca { display: flex; align-items: flex-end; gap: .6rem; padding: 0 .6rem 1.25rem; border-bottom: 1px solid #222; text-decoration: none; }
.marca img { height: 34px; width: auto; }
.marca span { color: #8a8a85; font-size: .75rem; padding-bottom: 2px; }
.lateral nav { display: grid; gap: 1px; margin-top: .75rem; }
.lateral .grupo { font-size: .72rem; color: #6f6f6a; margin: 1.1rem .6rem .35rem; font-weight: 600; }
.lateral nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: var(--r); color: #d8d8d3; text-decoration: none; }
.lateral nav a i { width: 18px; text-align: center; color: #8a8a85; font-size: .9rem; }
.lateral nav a:hover { background: #151515; color: var(--branco); }
.lateral nav a[aria-current="page"] { background: #1f1f1f; color: var(--branco); }
.lateral nav a[aria-current="page"] i { color: #c8a27a; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .7rem 2rem; background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20; }
.topo-usuario { display: flex; align-items: center; gap: 1rem; }
.topo-usuario form { margin: 0; }
.usuario { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--texto); }
.usuario img, .usuario .avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.usuario .avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--grafite); color: var(--branco); font-weight: 700; }
.usuario strong { display: block; font-size: .88rem; line-height: 1.2; }
.usuario small { display: block; color: var(--muted); font-size: .76rem; }
.menu-botao { display: none; margin-right: auto; background: none; border: 1px solid var(--linha); border-radius: var(--r); width: 40px; height: 36px; cursor: pointer; }
.conteudo { padding: 1.75rem 2rem 4rem; max-width: 1400px; width: 100%; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .lateral.aberta { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .menu-botao { display: inline-flex; align-items: center; justify-content: center; }
  .topo { padding: .6rem 1rem; }
  .usuario span { display: none; }
  .conteudo { padding: 1.25rem 1rem 3rem; }
}

/* ---------- Cabeçalho de página ---------- */
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cabeca h1 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; margin: 0; color: var(--grafite); line-height: 1.15; }
.cabeca p { margin: .3rem 0 0; color: var(--muted); }
.cabeca-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.voltar { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted); text-decoration: none; margin-bottom: .4rem; }
.voltar:hover { color: var(--grafite); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem 1rem; border-radius: var(--r); border: 1px solid transparent; font-weight: 600; font-size: .88rem; text-decoration: none; cursor: pointer; white-space: nowrap; background: none; }
.btn-escuro { background: var(--grafite); color: var(--branco); }
.btn-escuro:hover { background: var(--preto); }
.btn-madeira { background: var(--nogueira); color: var(--branco); }
.btn-madeira:hover { background: var(--nogueira-escuro); }
.btn-contorno { border-color: var(--linha-forte); color: var(--texto); background: var(--branco); }
.btn-contorno:hover { border-color: var(--grafite); }
.btn-perigo { background: var(--erro); color: var(--branco); }
.btn-fantasma { color: var(--muted); padding: .45rem .6rem; }
.btn-fantasma:hover { color: var(--grafite); background: var(--pedra); }
.btn-pequeno { padding: .35rem .65rem; font-size: .8rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.icone-acao { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r); border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: none; }
.icone-acao:hover { background: var(--pedra); color: var(--grafite); }
.icone-acao.perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.icone-acao.sucesso:hover { background: var(--musgo-fundo); color: var(--musgo); }
.acoes { display: flex; gap: .15rem; justify-content: flex-end; align-items: center; }
.acoes form { margin: 0; display: inline; }

/* ---------- Cartões ---------- */
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.cartao > h2 { font-size: 1rem; margin: 0 0 1rem; color: var(--grafite); }
.cartao > h2 small { font-weight: 400; color: var(--muted); margin-left: .35rem; }
.cartao-sem-padding { padding: 0; overflow-x: auto; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.grade-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .grade-2, .grade-lateral { grid-template-columns: 1fr; } }

.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.indicador { background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem 1.2rem; }
.indicador span { display: block; color: var(--muted); font-size: .8rem; }
.indicador strong { display: block; font-size: 1.45rem; color: var(--grafite); font-variant-numeric: tabular-nums; margin-top: .15rem; }
@media (max-width: 900px) { .indicadores { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Formulários ---------- */
.form-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .9rem 1rem; }
.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; } .c-2 { grid-column: span 2; }
@media (max-width: 760px) { .form-grade > * { grid-column: span 12 !important; } }
.campo label, .campo .rotulo { display: block; font-size: .8rem; font-weight: 600; color: var(--grafite); margin-bottom: .3rem; }
.campo .ajuda { display: block; font-size: .76rem; color: var(--muted); margin-top: .3rem; }
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo input[type=date],
.campo input[type=number], .campo input[type=search], .campo input[type=url], .campo input:not([type]),
.campo select, .campo textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--linha-forte); border-radius: var(--r); background: var(--branco);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--nogueira); box-shadow: 0 0 0 3px rgba(107,74,50,.14); }
.campo input[readonly] { background: var(--pedra); color: var(--muted); }
.campo select[multiple] { min-height: 220px; }
.checagem { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); cursor: pointer; }
.checagem input { margin-top: .2rem; accent-color: var(--nogueira); }
.checagem strong { display: block; font-size: .86rem; }
.checagem small { color: var(--muted); font-size: .78rem; }
.cor-campo { display: flex; gap: .5rem; }
.cor-campo input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--linha-forte); border-radius: var(--r); background: var(--branco); }
.rodape-form { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.filtros { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.filtros .campo { min-width: 160px; }
.filtros .campo-largo { flex: 1; min-width: 220px; }
.previa-img { margin-top: .5rem; display: flex; gap: .75rem; align-items: center; }
.previa-img img { max-height: 90px; border-radius: var(--r); border: 1px solid var(--linha); background: var(--pedra); }
.lista-checks { max-height: 260px; overflow: auto; border: 1px solid var(--linha-forte); border-radius: var(--r); padding: .4rem; background: var(--branco); }
.lista-checks label { display: flex; gap: .5rem; align-items: center; padding: .3rem .4rem; border-radius: 4px; font-weight: 400; font-size: .86rem; cursor: pointer; margin: 0; }
.lista-checks label:hover { background: var(--pedra); }
.lista-checks input { accent-color: var(--nogueira); }
.busca-lista { margin-bottom: .4rem; }

/* ---------- Tabelas ---------- */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tabela th { text-align: left; font-size: .74rem; font-weight: 600; color: var(--muted); padding: .7rem .9rem; border-bottom: 1px solid var(--linha); background: #fafaf8; white-space: nowrap; }
.tabela td { padding: .6rem .9rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #fcfcfa; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .centro { text-align: center; }
.tabela .fixo { white-space: nowrap; }
.tabela .miniatura { width: 64px; height: 64px; object-fit: contain; background: var(--pedra); border-radius: var(--r); display: block; }
.tabela .nome-produto strong { display: block; color: var(--grafite); }
.tabela .nome-produto small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 380px; }
.tabela .texto-longo { max-width: 420px; white-space: pre-wrap; word-break: break-word; }
.tabela tr.inativo td { color: var(--muted); }
.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }
.amostra-cor { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; }

.selo { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--pedra); color: var(--muted); white-space: nowrap; }
.selo-ok, .selo-PAGO, .selo-online { background: var(--musgo-fundo); color: var(--musgo); }
.selo-aviso, .selo-PENDENTE { background: var(--aviso-fundo); color: var(--aviso); }
.selo-erro, .selo-CANCELADO, .selo-ESTORNADO, .selo-vendido { background: var(--erro-fundo); color: var(--erro); }
.selo-EXPIRADO { background: #ececea; color: #55554f; }

.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid var(--linha); font-size: .84rem; color: var(--muted); }
.paginacao nav { display: flex; gap: .3rem; }
.paginacao a, .paginacao span.atual { min-width: 34px; height: 32px; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); border: 1px solid var(--linha); text-decoration: none; color: var(--texto); background: var(--branco); }
.paginacao span.atual { background: var(--grafite); color: var(--branco); border-color: var(--grafite); }

/* ---------- Fotos ---------- */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.foto { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: var(--branco); }
.foto-img { aspect-ratio: 1; background: var(--pedra); display: flex; align-items: center; justify-content: center; padding: 8px; position: relative; }
.foto-img img { max-height: 100%; object-fit: contain; }
.foto-img .selo { position: absolute; top: 8px; left: 8px; }
.foto-rodape { display: flex; justify-content: space-between; align-items: center; padding: .4rem .5rem; }
.foto-rodape small { color: var(--muted); font-size: .74rem; padding-left: .3rem; }
.soltar { border: 2px dashed var(--linha-forte); border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--muted); background: #fafaf8; cursor: pointer; display: block; }
.soltar.sobre { border-color: var(--nogueira); background: #f6f0ea; }
.soltar input { display: none; }
.soltar strong { color: var(--grafite); }

/* ---------- Alertas ---------- */
.alerta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .8rem 1rem; border-radius: var(--r); margin-bottom: 1.25rem; font-size: .9rem; }
.alerta-ok { background: var(--musgo-fundo); color: var(--musgo); }
.alerta-erro { background: var(--erro-fundo); color: var(--erro); }
.alerta-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.alerta-fechar { background: none; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; color: inherit; opacity: .7; }

/* ---------- Diálogo de confirmação ---------- */
dialog.confirmar { border: 0; border-radius: 10px; padding: 1.5rem; width: min(420px, calc(100% - 2rem)); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.confirmar::backdrop { background: rgba(0,0,0,.45); }
dialog.confirmar p { margin: 0 0 1.25rem; font-size: .95rem; }
.acoes-dialogo { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---------- Login ---------- */
.tela-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--branco); }
.tela-login .lado-marca { background: var(--preto); display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; color: #9c9c97; }
.tela-login .lado-marca img { width: 170px; }
.tela-login .lado-marca p { font-family: var(--serif); font-size: 2rem; color: var(--branco); line-height: 1.2; max-width: 16ch; margin: 0; }
.tela-login .lado-form { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.tela-login form { width: min(380px, 100%); }
.tela-login h1 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; margin: 0 0 .35rem; color: var(--grafite); }
.tela-login .sub { color: var(--muted); margin: 0 0 1.75rem; }
.tela-login .campo { margin-bottom: 1rem; }
.tela-login .btn { width: 100%; padding: .75rem; }
@media (max-width: 860px) { .tela-login { grid-template-columns: 1fr; } .tela-login .lado-marca { padding: 1.5rem; } .tela-login .lado-marca p { display: none; } }

/* ---------- Editor de texto ---------- */
.editor-wrap .ql-toolbar { border-radius: var(--r) var(--r) 0 0; border-color: var(--linha-forte); background: #fafaf8; }
.editor-wrap .ql-container { border-radius: 0 0 var(--r) var(--r); border-color: var(--linha-forte); min-height: 320px; font-family: var(--sans); font-size: .95rem; }
.tabela tr.selecionada td { background: #f6f0ea; }