/* =============================================================
   Tutorial Studio · Esmeralda Praia Hotel
   Construtor de manuais drag-and-drop (estilo construtor de e-mail)
   Design System: esmeralda-kit-v2 (paleta MARROM / creme)
   ============================================================= */

:root {
  /* Paleta marrom institucional (esmeralda-kit-v2) */
  --mar-50:#F2EBDF; --mar-100:#E6DAC6; --mar-200:#D5C0A0; --mar-300:#C79362;
  --mar-400:#A07D3A; --mar-500:#8A6E45; --mar-600:#745A39; --mar-700:#5C4636;
  --mar-800:#3D2E1F; --mar-900:#2C1D12;
  --areia-50:#FBF7F0; --areia-100:#F5EDDE; --areia-200:#ECDFC2; --areia-300:#DECBA1;
  --areia-400:#C5AC7F; --areia-500:#A88B5A;
  --neutral-0:#FFFFFF; --neutral-50:#FAFAF8; --neutral-100:#F4F4F1; --neutral-200:#E6E6E1;
  --neutral-300:#D1D1CA; --neutral-400:#9B9B92; --neutral-500:#71716A; --neutral-600:#52524C;
  --neutral-700:#3A3A36; --neutral-800:#1F1F1C; --neutral-900:#0F0F0E;
  --success-500:#16A34A; --warning-500:#D97706; --danger-500:#DC2626; --info-500:#2563EB;

  --primary:var(--mar-500); --primary-hover:var(--mar-600); --primary-soft:var(--mar-50);
  --bg:var(--neutral-0); --surface:var(--neutral-0); --surface-muted:var(--neutral-100);
  --border:var(--neutral-200); --border-strong:var(--neutral-300);
  --text:var(--neutral-800); --text-muted:var(--neutral-500); --text-faint:var(--neutral-400);

  --font-sans:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;
  --shadow-sm:0 1px 3px rgba(15,15,14,.06),0 1px 2px rgba(15,15,14,.04);
  --shadow-md:0 4px 8px rgba(15,15,14,.06),0 2px 4px rgba(15,15,14,.04);
  --shadow-lg:0 12px 24px rgba(15,15,14,.08),0 4px 8px rgba(15,15,14,.04);
  --shadow-mar:0 8px 20px rgba(44,29,18,.14);

  /* Feedback tool (Apontar Melhorias) — aliases usados por feedback.js */
  --joia-bg:#fff; --joia-surface:#fff; --joia-surface-2:var(--neutral-50);
  --joia-border:var(--neutral-200); --joia-border-2:var(--neutral-300);
  --joia-text:var(--mar-900); --joia-text-2:var(--neutral-600); --joia-text-3:var(--neutral-400);
  --joia-accent:var(--mar-500); --joia-accent-soft:var(--mar-50); --joia-accent-ink:var(--mar-900);
  --joia-ok:var(--success-500); --joia-gold:var(--warning-500); --joia-danger:var(--danger-500);
  --joia-shadow-lg:var(--shadow-lg);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--areia-50); color:var(--text);
  font-family:var(--font-sans); font-size:14px; -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em; overflow:hidden;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0;padding:0}
button{font-family:inherit}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(60,46,31,.18);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- TOPBAR ---------- */
.topbar{
  height:54px; display:flex; align-items:center; gap:8px; padding:0 16px;
  background:var(--mar-900); color:var(--areia-100);
  border-bottom:1px solid var(--mar-800); position:relative; z-index:40;
}
.topbar .brand{display:flex; flex-direction:column; margin-right:auto; line-height:1.05}
.topbar .brand b{font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff}
.topbar .brand small{font-family:var(--font-mono); font-size:9.5px; color:var(--mar-300); letter-spacing:.02em}
.topbar select{
  background:var(--mar-800); color:#fff; border:1px solid var(--mar-700);
  border-radius:var(--r-md); padding:7px 10px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.tbtn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--mar-700);
  background:var(--mar-800); color:#fff; border-radius:var(--r-md);
  padding:7px 11px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.tbtn:hover{background:var(--mar-700)}
.tbtn.primary{background:var(--mar-500); border-color:var(--mar-500)}
.tbtn.primary:hover{background:var(--mar-400)}
.tbtn.go{background:var(--success-500); border-color:var(--success-500)}
.tbtn.go:hover{filter:brightness(1.06)}
.tbtn input{display:none}
.tbtn svg{width:15px;height:15px}
@media(max-width:900px){ .tbtn .lbl{display:none} .topbar .brand small{display:none} }

/* ---------- 3-COLUMN SHELL ---------- */
.shell{
  display:grid; grid-template-columns:236px minmax(0,1fr) 320px;
  height:calc(100vh - 54px);
}
.palette{background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:14px}
.stage{background:var(--areia-100); overflow-y:auto; padding:26px 20px 120px}
.props{background:var(--surface); border-left:1px solid var(--border); overflow-y:auto; padding:16px}

/* mobile: palette + props viram gavetas simples via toggle */
.col-title{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); margin:2px 0 10px;
}

/* ---------- PALETTE ---------- */
.pgroup{margin-bottom:16px}
.pitem{
  display:flex; align-items:center; gap:10px; padding:9px 10px; margin-bottom:7px;
  background:var(--neutral-50); border:1px solid var(--border); border-radius:var(--r-md);
  cursor:grab; font-size:12.5px; font-weight:700; color:var(--mar-800); user-select:none;
  transition:border-color .12s, box-shadow .12s, transform .06s;
}
.pitem:hover{border-color:var(--mar-300); box-shadow:var(--shadow-sm)}
.pitem:active{cursor:grabbing}
.pitem .pic{
  width:30px; height:30px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--mar-50); color:var(--mar-600);
}
.pitem .pic svg{width:17px;height:17px}
.pitem small{display:block; font-weight:500; font-size:10.5px; color:var(--text-muted); margin-top:1px}
.pitem .txt{min-width:0}
.pitem .txt b{display:block; font-size:12.5px; line-height:1.15}
.palette .hint{font-size:11px; color:var(--text-muted); line-height:1.5; background:var(--mar-50);
  border:1px solid var(--mar-100); border-radius:var(--r-md); padding:10px 11px; margin-top:6px}
.sortable-ghost{opacity:.35}
.sortable-drag{box-shadow:var(--shadow-lg); border-radius:var(--r-md)}

/* ---------- CANVAS DOC (poster) ---------- */
.canvas-wrap{max-width:900px; margin:0 auto}
.canvas-hint{
  text-align:center; color:var(--mar-600); background:#fff; border:1.5px dashed var(--mar-300);
  border-radius:var(--r-lg); padding:34px 20px; font-size:14px; margin-top:8px;
}
.canvas-hint b{font-family:var(--font-display); font-weight:600; display:block; font-size:18px; color:var(--mar-800); margin-bottom:6px}

/* ---------- BLOCK WRAPPER (edição) ---------- */
.cblk{position:relative; outline:2px solid transparent; border-radius:10px; transition:outline-color .12s}
.cblk:hover{outline-color:var(--mar-200)}
.cblk.sel{outline-color:var(--mar-500)}
.cblk .tools{
  position:absolute; top:-13px; right:10px; display:none; gap:3px; z-index:6;
  background:var(--mar-900); border-radius:var(--r-full); padding:3px 4px; box-shadow:var(--shadow-md);
}
.cblk:hover .tools, .cblk.sel .tools{display:flex}
.cblk .tools button{
  width:26px; height:26px; border:0; background:transparent; color:#fff; border-radius:var(--r-full);
  cursor:pointer; display:grid; place-items:center;
}
.cblk .tools button:hover{background:rgba(255,255,255,.16)}
.cblk .tools .grip{cursor:grab; color:var(--mar-300)}
.cblk .tools svg{width:14px;height:14px}
.cblk [contenteditable]{outline:none; border-radius:4px; transition:background .12s}
.cblk [contenteditable]:hover{background:rgba(138,110,69,.06)}
.cblk [contenteditable]:focus{background:rgba(138,110,69,.10); box-shadow:0 0 0 2px var(--mar-200)}
.cblk [contenteditable][data-empty]:empty::before{content:attr(data-empty); color:var(--text-faint); font-style:italic}

/* =============================================================
   POSTER / MANUAL — estilo editorial creme + passos coloridos
   (compartilhado por canvas e export)
   ============================================================= */
.poster{
  background:#fff; border:1px solid #DAD0BF; border-radius:2px;
  box-shadow:0 18px 50px rgba(31,26,20,.09);
  --p-ground:#F7F4EE; --p-text:#1F1A14; --p-muted:#857664; --p-line:#DAD0BF; --p-line-strong:#1F1A14;
  color:var(--p-text); font-family:var(--font-sans); font-size:16px; line-height:1.55;
}
.export-body{background:#F7F4EE; margin:0; padding:26px 14px}
.export-body .poster{max-width:900px; margin:0 auto}

/* masthead */
.p-masthead{display:grid; grid-template-columns:1fr 210px; border-bottom:2px solid var(--p-line-strong)}
.p-mh-left{padding:22px clamp(22px,5vw,46px); border-right:1px solid var(--p-line)}
.p-org{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--p-muted); margin-bottom:6px}
.p-title{font-family:var(--font-display); font-weight:600; font-size:26px; line-height:1.08}
.p-sub{font-size:13px; color:var(--p-muted); margin-top:5px}
.p-mh-right{display:flex; flex-direction:column; font-family:var(--font-mono); font-size:11.5px}
.p-mh-right .r{display:flex; justify-content:space-between; gap:8px; padding:9px 16px; border-bottom:1px solid var(--p-line)}
.p-mh-right .r:last-child{border-bottom:0}
.p-mh-right .r span{color:var(--p-muted); text-transform:uppercase}
.p-mh-right .r b{text-align:right}
.p-mh-right .code b{background:var(--mar-800); color:#fff; padding:1px 7px; border-radius:3px}

/* body padding container for blocks */
.p-body{padding:6px clamp(22px,5vw,46px) 4px}

/* ordem certa (gold box) */
.p-gold{display:flex; gap:12px; align-items:flex-start; background:#FEF6D8; border:1px solid #f2e2a0; border-radius:8px; padding:13px 16px; margin:18px 0}
.p-gold .k{font-family:var(--font-display); font-weight:700; font-size:22px; color:#8a6d1a; line-height:1; flex:none}
.p-gold ol{margin:0; padding-left:18px; font-size:14px}
.p-gold li{margin:3px 0}
.p-gold .gt{font-weight:800; color:#8a6d1a; font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px}

/* aviso (barra vermelha) */
.p-warn{background:#fff; border:2px solid #C0392B; color:#C0392B; border-radius:10px; padding:11px 16px; text-align:center; font-weight:800; margin:16px 0; font-size:15px}

/* resumo "A ORDEM CERTA" (cards coloridos + setas) */
.p-ordem-title{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--p-muted); margin:20px 0 8px}
.p-ordem{display:flex; gap:6px; align-items:stretch; flex-wrap:wrap; margin-bottom:14px}
.p-oc{flex:1; min-width:110px; border:2px solid; border-radius:12px; padding:12px 10px; background:#fff; position:relative; display:flex; flex-direction:column; gap:7px}
.p-oc .on{width:26px; height:26px; border-radius:50%; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px}
.p-oc .ol{font-weight:800; font-size:13px; line-height:1.15}
.p-oc-arrow{align-self:center; color:var(--p-muted); font-size:18px; font-weight:700; flex:none}

/* section title colorido */
.p-section{font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--p-line); padding-bottom:9px; margin:30px 0 6px}
.p-section .chip{font-family:var(--font-mono); color:#fff; border-radius:6px; padding:2px 10px; font-size:12px}

/* passo */
.p-step{border:0; border-top:1px solid var(--p-line); border-radius:0; padding:16px 2px; margin:0}
.p-step:first-of-type{border-top:0}
.p-step-h{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.p-step-h .n{width:30px; height:30px; border-radius:8px; color:#fff; font-family:var(--font-mono); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none}
.p-step-h h4{font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.1}
.p-step-body{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.p-step-body.nomedia{grid-template-columns:1fr}
.p-step-text{font-size:14.5px; white-space:pre-wrap; line-height:1.5}

/* mosaico numerado */
.p-mosaic{display:grid; gap:7px}
.p-mosaic.m1{grid-template-columns:1fr}
.p-mosaic.m2,.p-mosaic.m3,.p-mosaic.m4,.p-mosaic.m5,.p-mosaic.m6{grid-template-columns:1fr 1fr}
.p-mi{position:relative; border:1px solid var(--p-line); border-radius:8px; overflow:hidden; background:#f7f7f7}
.p-mi img{width:100%; display:block}
.p-mi .mb{position:absolute; top:5px; left:5px; background:#1F1A14; color:#fff; font-size:11px; font-weight:800; border-radius:6px; width:20px; height:20px; display:flex; align-items:center; justify-content:center}
.p-cap{font-family:var(--font-mono); font-size:10px; color:var(--p-muted); text-transform:uppercase; letter-spacing:.03em; margin-top:6px}

/* bloco imagem standalone */
.p-imgblock{margin:14px 0}

/* tabela */
.p-tablewrap{margin:14px 0; overflow-x:auto}
.p-table{width:100%; border-collapse:collapse; font-size:13.5px; border:1px solid var(--p-line); border-radius:10px; overflow:hidden}
.p-table th{background:var(--mar-800); color:#fff; text-align:left; padding:9px 12px; font-size:12px; text-transform:uppercase; letter-spacing:.03em}
.p-table td{padding:9px 12px; border-top:1px solid var(--p-line)}
.p-table tr:nth-child(even) td{background:#FBF9F5}

/* deu problema */
.p-probs{background:var(--mar-800); border-radius:14px; padding:15px 16px; margin:16px 0}
.p-probs .pt{color:#fff; font-weight:800; text-align:center; font-size:15px; margin-bottom:11px; letter-spacing:.02em}
.p-probgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.p-pcard{background:#fff; border-radius:10px; padding:11px 13px}
.p-pcard h5{margin:0 0 4px; font-size:13.5px; color:#C0392B; font-weight:800}
.p-pcard p{margin:0; font-size:13px; white-space:pre-wrap; line-height:1.45}

/* mais detalhes */
.p-details{border:1px solid var(--p-line); background:#FBF9F5; border-radius:10px; padding:14px 16px; margin:16px 0}
.p-details .dh{font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--mar-800); margin-bottom:6px}
.p-details .dtxt{font-size:14px; white-space:pre-wrap; line-height:1.5; margin-bottom:8px}

/* telefones */
.p-phones{border:1.5px dashed var(--p-line-strong); border-radius:12px; padding:14px 16px; font-size:14px; margin:14px 0}
.p-phones .ph-title{font-weight:800; margin-bottom:8px}
.p-phones .ph{margin:5px 0; display:flex; gap:8px}
.p-phones .ph .who{font-weight:700}

/* texto livre */
.p-text{font-size:15px; line-height:1.6; margin:12px 0; white-space:pre-wrap}

/* footer */
.p-foot{padding:16px clamp(22px,5vw,46px); margin-top:14px; border-top:2px solid var(--p-line-strong); font-family:var(--font-mono); font-size:10.5px; color:var(--p-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; text-transform:uppercase}

@media (max-width:680px){
  .p-masthead{grid-template-columns:1fr}
  .p-mh-left{border-right:0; border-bottom:1px solid var(--p-line)}
  .p-step-body,.p-probgrid{grid-template-columns:1fr}
}

/* =============================================================
   PROPRIEDADES (coluna direita)
   ============================================================= */
.prop-empty{color:var(--text-muted); font-size:13px; line-height:1.6}
.prop-empty .doc-fields label{margin-top:10px}
.prop-sec{margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border)}
.prop-sec:last-child{border-bottom:0}
.prop-h{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--mar-700); margin-bottom:9px; display:flex; align-items:center; gap:7px}
.prop-h .tag{background:var(--mar-50); color:var(--mar-700); border-radius:var(--r-full); padding:2px 9px; font-size:10px}
label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; margin-bottom:3px}
input[type=text],textarea,.props select{
  width:100%; font:inherit; font-size:13px; border:1px solid var(--border); border-radius:var(--r-md);
  padding:8px 9px; background:#fff; color:var(--text); margin-bottom:9px;
}
textarea{resize:vertical; min-height:60px; line-height:1.45}
input:focus,textarea:focus{outline:none; border-color:var(--mar-400); box-shadow:0 0 0 3px var(--ring-color-soft,rgba(138,110,69,.25))}
.row2{display:flex; gap:8px}
.row2>div{flex:1}

/* swatches de cor */
.swatches{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:9px}
.sw{width:24px; height:24px; border-radius:var(--r-sm); cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--border)}
.sw.on{box-shadow:0 0 0 2px var(--mar-900)}
.sw-pick{width:26px; height:26px; padding:0; border:1px solid var(--border); border-radius:var(--r-sm); background:none; cursor:pointer}

/* mini-lista de sub-itens (passos, problemas, telefones, ordem, tabela) */
.subitem{background:var(--neutral-50); border:1px solid var(--border); border-radius:var(--r-md); padding:10px; margin-bottom:9px}
.subitem .sih{display:flex; align-items:center; gap:6px; margin-bottom:7px}
.subitem .sih b{font-size:12px}
.subitem .sih .sp{margin-left:auto; display:flex; gap:3px}
.iconbtn{background:var(--neutral-100); border:1px solid var(--border); border-radius:var(--r-sm); padding:4px 7px; font-size:12px; color:var(--neutral-700); cursor:pointer; line-height:1}
.iconbtn:hover{background:var(--neutral-200)}
.addbtn{width:100%; background:var(--mar-50); color:var(--mar-700); border:1px dashed var(--mar-300); border-radius:var(--r-md); padding:9px; font-weight:700; font-size:12.5px; cursor:pointer}
.addbtn:hover{background:var(--mar-100)}
.dangerbtn{width:100%; background:var(--danger-50,#FEF2F2); color:var(--danger-500); border:1px solid #f3c9c9; border-radius:var(--r-md); padding:8px; font-weight:700; font-size:12px; cursor:pointer; margin-top:4px}

/* thumbs de imagem no painel */
.thumbs{display:flex; gap:7px; flex-wrap:wrap; margin:6px 0}
.thumb{width:70px; height:54px; border-radius:var(--r-sm); overflow:hidden; position:relative; border:1px solid var(--border); background:#f0f0f0}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb .b{position:absolute; top:2px; left:2px; background:#1F1A14; color:#fff; font-size:9px; border-radius:4px; padding:0 4px; font-weight:800}
.thumb .tc{position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; background:rgba(0,0,0,.55)}
.thumb .tc button{background:none; border:0; color:#fff; padding:2px 4px; font-size:10px; cursor:pointer}
.filebtn{display:inline-flex; align-items:center; gap:6px; background:var(--mar-500); color:#fff; border-radius:var(--r-md); padding:8px 12px; font-size:12.5px; font-weight:700; cursor:pointer; margin-bottom:6px}
.filebtn:hover{background:var(--mar-400)}
.filebtn input{display:none}
.dropzone{border:1.5px dashed var(--mar-300); border-radius:var(--r-md); padding:12px; text-align:center; font-size:11.5px; color:var(--text-muted); background:var(--mar-50); margin-bottom:8px}
.dropzone.over{background:var(--mar-100); border-color:var(--mar-500); color:var(--mar-700)}

.prop-note{font-size:11px; color:var(--text-muted); line-height:1.5; background:var(--info-50,#EFF6FF); border:1px solid #d7e6fb; border-radius:var(--r-md); padding:9px 10px; margin-top:6px}
.prop-note b{color:var(--info-500)}

/* dica / info inline */
.hint{font-size:11px; color:var(--text-muted); font-style:italic; line-height:1.5; margin-top:4px}

/* toast */
#toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--mar-900); color:#fff; padding:10px 18px; border-radius:var(--r-full); font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); z-index:9000; opacity:0; pointer-events:none; transition:opacity .2s}
#toast.show{opacity:1}

/* ---------- mobile ---------- */
.mtabs{display:none}
@media(max-width:1000px){
  body{overflow:auto}
  .shell{grid-template-columns:1fr; height:auto}
  .palette,.props{display:none}
  .shell.show-palette .palette{display:block; position:fixed; top:54px; left:0; bottom:0; width:80vw; max-width:300px; z-index:50; box-shadow:var(--shadow-lg)}
  .shell.show-props .props{display:block; position:fixed; top:54px; right:0; bottom:0; width:88vw; max-width:340px; z-index:50; box-shadow:var(--shadow-lg)}
  .stage{padding:16px 10px 120px; min-height:calc(100vh - 54px)}
  .mtabs{display:flex; position:fixed; bottom:0; left:0; right:0; height:52px; background:var(--mar-900); z-index:60; border-top:1px solid var(--mar-800)}
  .mtabs button{flex:1; background:transparent; border:0; color:var(--areia-100); font-size:12px; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px}
  .mtabs button svg{width:18px;height:18px}
  .stage{padding-bottom:80px}
}

@media print{
  body{overflow:visible; background:#fff}
  .topbar,.palette,.props,.mtabs,#toast{display:none!important}
  .shell{display:block; height:auto}
  .stage{background:#fff; padding:0; overflow:visible}
  .canvas-wrap{max-width:100%}
  .cblk{outline:0!important}
  .cblk .tools{display:none!important}
  .poster{box-shadow:none; border:0}
  .p-ordem,.p-oc,.p-probs,.p-pcard,.p-warn,.p-gold,.p-step,.p-table th,.p-step-h .n,.p-oc .on{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  [data-fb-ui]{display:none!important}
}