:root{
  --bg:#f6f5f2; --card:#fff; --linha:#e3e0d9; --texto:#232120; --suave:#6f6a63;
  --acento:#8a5a2b; --acento-claro:#f3e9de; --ok:#2f6b46; --ok-bg:#e7f2ec;
  --mau:#a3302a; --mau-bg:#fbeceb; --aviso:#8a6d1f; --aviso-bg:#fbf3dd;
  --raio:10px; --sombra:0 1px 2px rgba(30,25,20,.06),0 4px 14px rgba(30,25,20,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acento)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.5rem}h2{font-size:1.18rem}h3{font-size:1rem}

/* ---------- estrutura ---------- */
.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20}
.topo-in{max-width:1240px;margin:0 auto;padding:.7rem 1.1rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.marca{font-weight:650;letter-spacing:-.01em;text-decoration:none;color:var(--texto);white-space:nowrap}
.marca span{color:var(--acento)}
.nav{display:flex;gap:.2rem;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{padding:.4rem .7rem;border-radius:8px;text-decoration:none;color:var(--suave);font-weight:500;white-space:nowrap}
.nav a:hover{background:var(--bg);color:var(--texto)}
.nav a.on{background:var(--acento-claro);color:var(--acento)}
.quem{color:var(--suave);font-size:.85rem;padding-left:.6rem;border-left:1px solid var(--linha)}
.env{max-width:1240px;margin:0 auto;padding:1.4rem 1.1rem 4rem}
.cols{display:grid;grid-template-columns:250px 1fr;gap:1.5rem;align-items:start}
@media(max-width:860px){.cols{grid-template-columns:1fr}}

/* ---------- cartões e tabelas ---------- */
.cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra)}
.cartao-p{padding:1.1rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--linha);vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);font-weight:600;
   background:#fbfaf8;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fbfaf8}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tabela-env{overflow-x:auto;border-radius:var(--raio)}

/* ---------- árvore lateral ---------- */
.arv{font-size:.9rem;padding:.5rem}
.arv details{margin-bottom:.15rem}
.arv summary{cursor:pointer;padding:.32rem .5rem;border-radius:7px;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:.5rem}
.arv summary .n{margin-left:auto}
.arv summary::-webkit-details-marker{display:none}
.arv summary:hover{background:var(--bg)}
.arv summary::before{content:"▸";color:var(--suave);margin-right:.35rem;font-size:.8em;transition:transform .12s}
.arv details[open]>summary::before{transform:rotate(90deg);display:inline-block}
.arv .fam{padding-left:.7rem}
.arv .fam>summary{font-weight:500}
.arv a{display:flex;justify-content:space-between;gap:.5rem;padding:.28rem .5rem .28rem 1.9rem;
  border-radius:7px;text-decoration:none;color:var(--suave)}
.arv a:hover{background:var(--bg);color:var(--texto)}
.arv a.on{background:var(--acento-claro);color:var(--acento);font-weight:600}
.arv .n{color:#a49c92;font-size:.78rem;font-variant-numeric:tabular-nums}

/* ---------- grelha de desenhos ---------- */
.grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.item{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra);display:flex;flex-direction:column}
.item.oculto{opacity:.55}
.item .img{aspect-ratio:3/4;background:#efece7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.item .img img{width:100%;height:100%;object-fit:contain;display:block}
.item .corpo{padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.item .cod{font-weight:650;font-size:.9rem}
.item .cam{font-size:.74rem;color:var(--suave);line-height:1.35}
.linha-bot{display:flex;align-items:center;gap:.4rem;margin-top:auto}
.linha-bot input[type=number]{width:64px}

/* ---------- formulários ---------- */
label{display:block;font-size:.8rem;font-weight:600;color:var(--suave);margin-bottom:.25rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:.5rem .6rem;border:1px solid var(--linha);border-radius:8px;background:#fff;
  font:inherit;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento-claro);border-color:var(--acento)}
.campo{margin-bottom:.9rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:8px;border:1px solid var(--linha);
  background:#fff;color:var(--texto);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--bg)}
.btn-p{background:var(--acento);border-color:var(--acento);color:#fff}
.btn-p:hover{background:#754c24}
.btn-mini{padding:.3rem .55rem;font-size:.8rem}
.btn-perigo{color:var(--mau);border-color:#e8cfcd}
.btn-perigo:hover{background:var(--mau-bg)}
.barra{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.barra .cresce{flex:1;min-width:160px}

/* ---------- diversos ---------- */
.etq{display:inline-block;padding:.12rem .45rem;border-radius:999px;font-size:.72rem;font-weight:650;
  background:var(--bg);color:var(--suave);border:1px solid var(--linha)}
.etq-ok{background:var(--ok-bg);color:var(--ok);border-color:#cfe3d8}
.etq-mau{background:var(--mau-bg);color:var(--mau);border-color:#eed3d1}
.etq-aviso{background:var(--aviso-bg);color:var(--aviso);border-color:#ecdfba}
.msg{padding:.65rem .9rem;border-radius:8px;margin-bottom:1rem;font-weight:500;border:1px solid}
.msg-ok{background:var(--ok-bg);color:var(--ok);border-color:#cfe3d8}
.msg-erro{background:var(--mau-bg);color:var(--mau);border-color:#eed3d1}
.msg-aviso{background:var(--aviso-bg);color:var(--aviso);border-color:#ecdfba}
.suave{color:var(--suave)}
.mini{font-size:.82rem}
.vazio{padding:2.5rem 1rem;text-align:center;color:var(--suave)}
.cabec{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.migalhas{font-size:.85rem;color:var(--suave);margin-bottom:.2rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.4rem}
.kpi{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:.9rem 1rem;box-shadow:var(--sombra)}
.kpi .v{font-size:1.5rem;font-weight:680;letter-spacing:-.02em}
.kpi .r{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);font-weight:600}
.centrado{max-width:390px;margin:8vh auto}
.neg{color:var(--mau);font-weight:650}

/* ---------- visível / oculto (só o administrador vê isto) ---------- */
.filtro-estado{display:flex;align-items:center;gap:.3rem;margin-bottom:1rem;flex-wrap:wrap}
.filtro-estado a{padding:.3rem .7rem;border-radius:999px;text-decoration:none;font-size:.85rem;
  font-weight:600;color:var(--suave);border:1px solid var(--linha);background:#fff}
.filtro-estado a:hover{background:var(--bg);color:var(--texto)}
.filtro-estado a.on{background:var(--acento);border-color:var(--acento);color:#fff}

.arv .n-tudo{color:var(--ok);font-weight:650}
.arv .n-parte{color:var(--aviso);font-weight:650}
.arv .n-nada{color:#b9b2a8}

.item.e-visivel{border-left:3px solid var(--ok)}
.item.e-oculta{border-left:3px solid var(--mau);background:#fbf8f7}
.item.e-oculta .img{
  background-image:repeating-linear-gradient(45deg,rgba(163,48,42,.09) 0 7px,transparent 7px 14px)}
.item.e-oculta img{opacity:.45;filter:grayscale(.55)}
.item.e-oculta:hover img{opacity:.9;filter:none}
.item .img{position:relative}
.item-escolhido{outline:2px solid var(--acento)}
.img-botao{border:0;background:none;padding:0;cursor:pointer;width:100%}

tr.l-oculta td:first-child{box-shadow:inset 3px 0 0 var(--mau)}
tr.l-oculta td:nth-child(2) img{opacity:.5;filter:grayscale(.55)}
tr.l-visivel td:first-child{box-shadow:inset 3px 0 0 var(--ok)}

/* ---------- lista de expositores ---------- */
.exp-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-bottom:.5rem}
.exp-cartao{overflow:hidden;display:flex;flex-direction:column}
.exp-prev{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:6px;background:#efece7;
  text-decoration:none;min-height:76px;align-items:center}
.exp-prev img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;background:#fff}
.exp-prev img.e-oculto{opacity:.45;filter:grayscale(.6)}
.exp-prev-vazio{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;
  border:1px dashed #cfc9c0;border-radius:3px;color:#b0a99f;font-size:.7rem}
.exp-cartao-corpo{padding:.7rem .8rem .8rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.exp-nome{font-weight:650}
.exp-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;align-items:end}

/* =====================================================================
   Expositor rotativo — 6 colunas de 8 pochetes.
   Todas as pochetes têm a MESMA altura e o mesmo passo: o que muda é a
   largura, porque o cartão quadrado é mais largo que o rectangular.
   Por isso as colunas 1 e 2 são mais largas que as colunas 3 a 6.
   ===================================================================== */

.poch-lugar{position:relative}
.col-quadrado    .poch-lugar{aspect-ratio:84/90}
.col-retangular  .poch-lugar{aspect-ratio:63/90}
.poch{position:absolute;top:0;left:0;width:100%;background:#fff;border-radius:2px;
  display:block;text-decoration:none;overflow:hidden}
.poch-quadrado{aspect-ratio:1/1}
.poch-retangular{aspect-ratio:3/4}
.poch img{width:100%;height:100%;object-fit:cover;display:block}
.poch img.e-oculto{opacity:.5;filter:grayscale(.6)}
.poch-vazia{background:#f1efea;border:1px dashed #cfc9c0;display:flex;align-items:center;justify-content:center}
.poch-mais{color:#b0a99f;font-size:1.3rem;font-weight:300;line-height:1}
.poch-marca{position:absolute;left:0;right:0;bottom:0;background:rgba(163,48,42,.88);color:#fff;
  font-size:.56rem;font-weight:700;text-align:center;padding:.08rem 0;letter-spacing:.04em;text-transform:uppercase}

/* ---------- plano de composição ---------- */
.exp-grelha{display:grid;grid-template-columns:1.33fr 1.33fr 1fr 1fr 1fr 1fr;gap:.8rem;max-width:800px}
@media(max-width:820px){.exp-grelha{grid-template-columns:1.33fr 1.33fr 1fr;max-width:420px}}
@media(max-width:440px){.exp-grelha{grid-template-columns:1.33fr 1fr}}
.exp-coluna{display:flex;flex-direction:column}
.exp-coluna-tit{font-size:.72rem;font-weight:650;text-align:center;line-height:1.3;
  color:var(--texto);margin-bottom:.6rem}
.exp-coluna-tit small{display:block;font-weight:500;color:var(--suave)}

/* suportes de arame de cada pochete, como no plano em anexo.
   Ficam no lugar (não no cartão), senão o overflow do cartão corta-os. */
.poch-edit{box-shadow:0 1px 3px rgba(30,25,20,.16)}
.exp-coluna .poch-lugar::before,.exp-coluna .poch-lugar::after{content:"";position:absolute;
  top:9%;height:74%;width:8px;border:2px solid #1b1815;pointer-events:none;z-index:1}
.exp-coluna .poch-lugar::before{left:-6px;border-right:0;border-radius:3px 0 0 3px}
.exp-coluna .poch-lugar::after{right:-6px;border-left:0;border-radius:0 3px 3px 0}
.poch-edit:hover{outline:2px solid var(--acento);outline-offset:3px}

/* vista superior */
.exp-topo-vista{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:1.4rem;padding:1rem 1.2rem}
.exp-legenda{font-size:.82rem;display:grid;gap:.5rem}
.exp-legenda div{display:flex;align-items:center;gap:.55rem}
.exp-legenda i{width:26px;height:13px;border-radius:3px;display:inline-block}
.exp-legenda .lq{background:#f5d9a8;border:1.5px solid #d9a441}
.exp-legenda .lr{background:#bcd9f5;border:1.5px solid #5b93cc}

/* ---------- expositor a três dimensões ---------- */
.exp3d-palco{perspective:1700px;perspective-origin:50% 42%;display:flex;justify-content:center;
  padding:1rem 0 2rem;cursor:grab;touch-action:pan-y;user-select:none}
.exp3d-palco.a-arrastar{cursor:grabbing}
.exp3d-eixo{transform-origin:50% 38%;display:flex;flex-direction:column;align-items:center}

.exp3d-letreiro{background:#fff;border:1px solid #d8d3ca;border-radius:3px;box-shadow:0 3px 8px rgba(30,25,20,.18);
  width:168px;padding:.6rem .4rem .5rem;text-align:center;font-weight:800;font-size:1rem;
  letter-spacing:.1em;color:#1b1815;position:relative;z-index:3}
.exp3d-letreiro small{display:block;font-size:.52rem;font-weight:600;letter-spacing:.17em;
  color:#44403a;margin-top:.25rem;line-height:1.5}
.exp3d-letreiro span{display:block;font-size:.52rem;color:#8a837a;margin-top:.1rem}
.exp3d-coroa{width:140px;height:17px;margin-top:.4rem;border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(90deg,#15120f 0 2px,#403a32 2px 10px);
  box-shadow:0 2px 5px rgba(0,0,0,.32);position:relative;z-index:2}

.exp3d{position:relative;width:92px;height:726px;transform-style:preserve-3d;
  transition:transform .05s linear}
/* cada face é uma coluna; o fundo escuro é a grade de arame por trás */
.exp3d-face{position:absolute;top:0;height:726px;padding:4px 4px 0;
  display:flex;flex-direction:column;
  background:linear-gradient(#2c2820,#17150f);
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(80px);
  backface-visibility:hidden}
.exp3d-face.col-quadrado{width:92px;left:0}
.exp3d-face.col-retangular{width:71px;left:10px}
.exp3d-face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(10,8,6,var(--esc,0))}
.exp3d-face .poch-lugar{aspect-ratio:auto;height:90px}
.exp3d-face .poch{box-shadow:0 1px 3px rgba(0,0,0,.55);border-radius:1px}
.exp3d-face .poch img{object-position:top}
.exp3d-face .poch-vazia{background:#221f1a;border-color:#3d3830}
.exp3d-face .poch-mais{display:none}

/* pé: haste e base em estrela com rodízios */
.exp3d-poste{width:14px;height:54px;background:linear-gradient(90deg,#0e0c0a,#3e382f 40%,#0e0c0a);
  border-radius:0 0 2px 2px}
.exp3d-base{width:210px;height:62px;margin-top:-4px}
.exp3d-ctl{justify-content:center;margin-top:.5rem}