/* Layout: barra superior em gradiente, conteúdo em painéis brancos sobre fundo cinza claro */
@font-face { font-family: 'Papelli Medium'; src: url('/fonts/papelli-medium.ttf') format('opentype'); font-display: block; }
@font-face { font-family: 'Papelli ExtraBold'; src: url('/fonts/papelli-extrabold.ttf') format('opentype'); font-display: block; }

:root {
  --brand: #21238F; --brand-esc: #191b70; --brand1: #21238F;
  --ink: #1e2532; --muted: #687387; --line: #dfe3ea; --bg: #f5f6f8; --panel: #fff;
  --soft: #eef0f8; --head: #21238F; --rowsel: #fff3e6; --danger: #c62828; --ok: #1b8a4b; --focus: #2f7df6;
  --ui: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--ui) }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
[hidden] { display: none !important }
a { color: inherit }

/* ---------- topo ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--brand); color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 9px max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 2px 6px rgba(0,0,0,.15) }
.logo { display: flex; align-items: center; text-decoration: none; cursor: pointer; padding: 2px 0 }
.logo img { height: 30px; width: auto; display: block }
.top .sp { flex: 1 }
.btn-top { border: 1.5px solid #fff; background: transparent; color: #fff; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-weight: 700; white-space: nowrap; text-decoration: none }
.btn-top:hover { background: rgba(255,255,255,.15) }
.ico { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; border-radius: 6px; display: grid; place-items: center; position: relative }
.ico:hover { background: rgba(255,255,255,.15) }
.ico svg { width: 20px; height: 20px }
.quem { font-size: 12px; font-weight: 700; background: rgba(0,0,0,.18); border-radius: 20px; padding: 3px 10px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis }
.drop-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; color: var(--ink); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.25); min-width: 230px; padding: 6px; z-index: 50; text-align: left }
.drop-menu a { display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer }
.drop-menu a:hover { background: var(--soft) }
.drop-menu .grp { font-size: 11px; color: var(--muted); font-weight: 800; letter-spacing: .06em; padding: 8px 12px 2px; text-transform: uppercase }

main { padding: 12px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)) }
.crumb { font-size: 13px; color: var(--muted); margin: 8px 0 14px }
.crumb b { color: var(--ink) }
.crumb a { text-decoration: none; cursor: pointer }
h2.tit { font-size: 18px; margin: 0 0 12px }

/* ---------- botões e campos ---------- */
.btn { border: 1px solid #c7ced9; background: #fff; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none }
.btn:hover { background: var(--soft) }
.btn:disabled { opacity: .55; cursor: default }
.btn.pri { background: var(--head); border-color: var(--head); color: #fff }
.btn.pri:hover, .btn.hot:hover { background: var(--brand-esc); border-color: var(--brand-esc) }
.btn.hot { background: var(--brand); border-color: var(--brand); color: #fff }
.btn.dng { color: var(--danger); border-color: #e8b4b4 }
.btn.sm { padding: 3px 8px; font-size: 12px }
.btn.on { background: var(--head); color: #fff; border-color: var(--head) }
label.f { display: block; font-weight: 700; font-size: 13px; margin: 10px 0 4px }
.inp { width: 100%; border: 1px solid #c9d0db; border-radius: 6px; padding: 6px 9px; background: #fff; min-height: 34px }
textarea.inp { resize: vertical; min-height: 56px }
.inp:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px rgba(47,125,246,.15) }
.inp.err { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(198,40,40,.12) }
input[type=color].inp { padding: 2px; height: 34px }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.chk { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; font-size: 13px; cursor: pointer }
.chk input { margin-top: 3px }
.hint { font-size: 12px; color: var(--muted) }
.err-msg { color: var(--danger); font-weight: 700; font-size: 13px }

/* ---------- painéis ---------- */
.panel { background: var(--panel); border-radius: 6px; box-shadow: 0 1px 2px rgba(20,30,50,.06) }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px }
.card-h { background: var(--soft); border-bottom: 1px solid var(--line); padding: 9px 14px; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; gap: 6px }
.card-b { padding: 4px 14px 14px }
.pad { padding: 16px }

/* ---------- tabelas ---------- */
.list-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 16px 6px }
.list-top .sp { flex: 1 }
.search { display: flex; align-items: center; border-bottom: 1.5px solid #9aa4b5; min-width: 200px; flex: 0 1 280px }
.search input { border: 0; background: transparent; padding: 6px 4px; flex: 1; min-width: 0; outline: none }
.filters { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 16px 14px; align-items: flex-end }
.filters label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px }
.filters select { min-width: 120px }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 16px 10px; padding: 8px 12px; background: var(--rowsel); border: 1px solid #ffd2a6; border-radius: 6px }
.tbl-wrap { overflow-x: auto }
table.tbl { width: 100%; border-collapse: collapse }
.tbl.wide { min-width: 1000px }
.tbl th { font-size: 12.5px; text-align: left; font-weight: 700; padding: 10px 8px; border-bottom: 2px solid var(--line); line-height: 1.15; vertical-align: bottom }
.tbl td { padding: 8px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle }
.tbl tbody tr:nth-child(odd) { background: #f7f9fb }
.tbl tbody tr.sel { background: var(--rowsel) }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap }
.tbl td.desc { font-weight: 600; text-transform: uppercase; max-width: 240px }
.tbl input.inp { min-height: 30px; padding: 4px 6px }
.qty { width: 62px; border: 1px solid #cfd6e0; border-radius: 6px; padding: 5px 8px; background: #fff }
.acts { display: flex; gap: 2px; white-space: nowrap }
.acts button { background: none; border: 0; padding: 6px; border-radius: 5px; cursor: pointer; color: #3a4558 }
.acts button:hover { background: var(--soft) }
.acts svg { width: 16px; height: 16px; display: block }
.pill { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 20px; background: #e8f5ee; color: var(--ok); white-space: nowrap }
.pill.no { background: #f1f2f5; color: #7a8496 }
.pill.warn { background: #fff1d6; color: #9a5b00 }
.pill.adm { background: #e6efff; color: #2456b8 }
.empty { padding: 40px 16px; text-align: center; color: var(--muted) }
.pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 12px 16px; font-size: 13px; color: var(--muted) }

/* ---------- criar cartaz ---------- */
.ed-grid { display: grid; grid-template-columns: minmax(230px, 250px) minmax(210px, 240px) minmax(0, 1fr); gap: 14px; align-items: start }
.ed-col { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.ed-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.ed-btns .btn { flex: 1 1 auto }
.pv { position: sticky; top: 64px; min-width: 0 }
.pv-h { background: var(--head); color: #fff; display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 4px 4px 0 0 }
.pv-h .t { font-weight: 600; flex: 1; white-space: nowrap }
.pv-h input[type=range] { width: min(200px, 40vw); accent-color: #4aa3ff }
.pv-h .zv { font-size: 12px; width: 42px; text-align: right; font-variant-numeric: tabular-nums }
.pv-stage { background: #dcdfe4; height: calc(100vh - 140px); min-height: 420px; overflow: auto; padding: 12px; border-radius: 0 0 4px 4px; position: relative }
.pv-sizer { position: relative; margin: 0 auto }
.pv-sizer > .poster { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 4px 14px rgba(0,0,0,.25) }
.pv-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 20px }

/* ---------- editor de layout ---------- */
.le { display: grid; grid-template-columns: 230px minmax(0, 1fr) 290px; gap: 12px; align-items: start }
.le .side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto }
.le-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px }
.le-bar .inp { width: auto }
.layers { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto }
.layers li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px; border: 1px solid transparent }
.layers li:hover { background: var(--soft) }
.layers li.sel { background: #e6efff; border-color: #b7cdf7 }
.layers li .tp { font-size: 9.5px; font-weight: 800; color: var(--muted); width: 42px; flex: none; letter-spacing: .03em }
.layers li .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.props .row2, .props .row4 { gap: 6px }
.props label.f { margin: 8px 0 3px; font-size: 12px }
.seg { display: flex; border: 1px solid #c9d0db; border-radius: 6px; overflow: hidden }
.seg button { flex: 1; border: 0; background: #fff; padding: 5px; cursor: pointer; font-size: 12px; font-weight: 700 }
.seg button + button { border-left: 1px solid #c9d0db }
.seg button.on { background: var(--head); color: #fff }
.stage-ed .poster .pc { cursor: move; outline: 1px dashed rgba(47,125,246,.35); outline-offset: -1px }
.stage-ed .poster .pc.sel { outline: 2px solid #2f7df6; z-index: 5 }
.stage-ed .poster .pc.vazio { background: repeating-linear-gradient(45deg, rgba(47,125,246,.08) 0 6px, transparent 6px 12px) }
.handle { position: absolute; width: 12px; height: 12px; background: #2f7df6; border: 2px solid #fff; border-radius: 2px; z-index: 10; box-shadow: 0 0 0 1px #2f7df6 }

/* ---------- cartões (campanhas) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 16px }
.ccard { border: 1px solid var(--line); border-radius: 8px; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; background: #fff }
.ccard .thumb { width: 90px; height: 127px; background: #f0f2f5 center/cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: 11px }
.ccard b { font-size: 14px; text-transform: uppercase }
.fmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.fmt-slot { border: 1px solid var(--line); border-radius: 6px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center }
.fmt-slot .thumb { width: 100%; aspect-ratio: 1; background: #f0f2f5 center/contain no-repeat; border-radius: 4px; display: grid; place-items: center; color: var(--muted); font-size: 11px }

/* ---------- dashboard ---------- */
.dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.dcard { background: #fff; border-radius: 6px; padding: 16px; box-shadow: 0 1px 2px rgba(20,30,50,.06); min-height: 230px; display: flex; flex-direction: column }
.dcard h3 { margin: 0; text-align: center; font-size: 13px; letter-spacing: .04em }
.dcard .sub { text-align: center; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; letter-spacing: .04em }
.big-n { font-size: 46px; font-weight: 800; text-align: center; margin: auto 0; font-variant-numeric: tabular-nums }
.hbars { display: flex; flex-direction: column; gap: 7px }
.hbar { display: grid; grid-template-columns: 110px 1fr 44px; gap: 8px; align-items: center; font-size: 12px }
.hbar .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right }
.hbar .b { height: 16px; background: #a9b4c2; border-radius: 2px; min-width: 2px }
.hbar .v { font-variant-numeric: tabular-nums; color: var(--muted) }
.vbars { display: flex; align-items: flex-end; gap: 5px; height: 130px; border-bottom: 1px solid var(--line); padding-top: 6px }
.vbars .c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10px; color: var(--muted) }
.vbars .c .b { width: 100%; background: #a9b4c2; border-radius: 2px 2px 0 0; min-height: 1px }
.vbars .c.cur .b { background: var(--brand1) }
.vlabels { display: flex; gap: 5px; font-size: 10px; color: var(--muted) }
.vlabels span { flex: 1; text-align: center }

/* ---------- modal / toast / login ---------- */
.mask { position: fixed; inset: 0; background: rgba(20,26,38,.55); z-index: 60; display: grid; place-items: center; padding: 16px }
.modal { background: #fff; border-radius: 8px; width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.35) }
.modal.wide { width: min(1000px, 100%) }
.modal.small { width: min(440px, 100%) }
.modal-h { background: var(--head); color: #fff; padding: 12px 16px; border-radius: 8px 8px 0 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700 }
.modal-h .x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; line-height: 1 }
.modal-b { padding: 16px; overflow: auto }
.modal-f { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center }
.dropzone { border: 2px dashed #b9c1ce; border-radius: 8px; padding: 30px 16px; text-align: center; cursor: pointer; color: var(--muted) }
.dropzone.over { border-color: var(--focus); background: #f0f6ff }
.prev-wrap { display: grid; place-items: center; background: #e3e6ea; border-radius: 6px; padding: 12px; overflow: hidden }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 90; background: #1e2532; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: 380px; font-weight: 600 }
.toast.err { background: var(--danger) }
.toast.ok { background: var(--ok) }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--brand); padding: 16px }
.login-logo { display: block; height: 46px; width: auto; margin: 0 auto 22px }
.login { background: #fff; border-radius: 10px; padding: 28px; width: min(380px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.25) }
.login .logo-chip { background: var(--brand); border-radius: 8px; padding: 12px; margin: -6px -6px 18px }
.login .logo-chip img { height: 34px; display: block; margin: 0 auto }
.login h1 { font-size: 18px; text-align: center; margin: 0 0 4px }

/* ---------- cartaz ---------- */
.poster { position: relative; overflow: hidden; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; user-select: none }
.poster-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none }
.pc { position: absolute; display: flex; overflow: visible; font-size: calc(var(--fs) * var(--k, 1)); word-break: normal; overflow-wrap: break-word }
.pc .in { display: inline-block; max-width: 100% }
.pc.nowrap .in { white-space: nowrap; max-width: none }
.pc.risc .in { text-decoration: line-through; text-decoration-thickness: .07em }
.pc .pi { line-height: inherit }
.pc .pd { font-size: .5em; vertical-align: top; position: relative; top: .14em; line-height: 1 }

/* impressão */
#areaImpressao { position: fixed; left: -100000px; top: 0; pointer-events: none }
#areaImpressao .folha { position: relative; overflow: hidden; background: #fff }
@media print {
  body > *:not(#areaImpressao) { display: none !important }
  body { background: #fff }
  #areaImpressao { position: static; left: 0 }
  .folha { position: relative; overflow: hidden; break-after: page; page-break-after: always }
  .folha:last-child { break-after: auto; page-break-after: auto }
}

@media (max-width: 1150px) {
  .ed-grid { grid-template-columns: 1fr 1fr }
  .pv { grid-column: 1 / -1; position: static }
  .pv-stage { height: 70vh }
  .le { grid-template-columns: 1fr 1fr }
  .le .stagecol { grid-column: 1 / -1; order: -1 }
  .le .side { position: static; max-height: none }
}
@media (max-width: 640px) {
  .ed-grid, .le { grid-template-columns: 1fr }
  .quem, .btn-top .lbl { display: none }
  .row4 { grid-template-columns: 1fr 1fr }
}