/* §320 — casa Relatórios › Layouts (sabe-report-layouts.js) + prévia no painel de aparência.
   Tokens do SabeTudo (tema claro/escuro/marca); a "folha" da prévia usa o papel da bolha. */

.rpt-layouts-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rlay-back {
  align-self: flex-start; border: 0; background: none; color: var(--tomate-text, var(--paper));
  font: inherit; font-size: calc(13px * var(--sabe-fs, 1)); cursor: pointer; padding: 2px 0;
}
.rlay-back:hover { text-decoration: underline; }
.rlay { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rlay-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.rlay-top h2 { margin: 2px 0 4px; font-size: calc(17px * var(--sabe-fs, 1)); }
.rlay-top .sabe-cmp-note { max-width: 60ch; }

.rlay-policy { border: 1px solid rgba(var(--bink), .18); border-radius: 12px; padding: 8px 12px; margin: 0; }
.rlay-policy legend { font-size: calc(12px * var(--sabe-fs, 1)); color: var(--lilac); padding: 0 4px; }
.rlay-policy-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.rlay-pol {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; cursor: pointer;
  border: 1px solid rgba(var(--bink), .18); border-radius: 10px; padding: 6px 10px; min-width: 14rem; flex: 1 1 14rem;
}
.rlay-pol small { grid-column: 2; color: var(--lilac); font-size: calc(11.5px * var(--sabe-fs, 1)); }
.rlay-pol.is-on { border-color: var(--tomate); background: rgba(var(--acc-rgb), .10); }
.rlay-policy[disabled] .rlay-pol { cursor: default; opacity: .8; }

.rlay-new, .rlay-arch, .rlay-move {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: calc(13px * var(--sabe-fs, 1));
}
.rlay-new label, .rlay-arch, .rlay-move label { display: inline-flex; gap: 6px; align-items: center; }
.rlay-new input, .rlay-new select, .rlay-arch select, .rlay-move select, .rlay-in, .rlay-add, .rlay-name input {
  border: 1px solid rgba(var(--bink), .25); border-radius: 8px; background: var(--bubble-hi, #fff);
  color: var(--bink-solid, #182A24); font: inherit; font-size: calc(12.5px * var(--sabe-fs, 1)); padding: 4px 8px;
}

.rlay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 12px; }
.rlay-card {
  border: 1px solid rgba(var(--bink), .18); border-radius: 14px; overflow: hidden; display: flex;
  flex-direction: column; background: rgba(var(--bink), .03);
}
.rlay-card.is-default { border-color: var(--tomate); }
.rlay-card-b { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.rlay-card-t { display: flex; gap: 6px; align-items: center; }
.rlay-badge {
  font-size: calc(10.5px * var(--sabe-fs, 1)); border-radius: 999px; padding: 1px 8px;
  background: rgba(var(--acc-rgb), .18); color: var(--tomate-text, var(--paper));
}
.rlay-usage, .rlay-link {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left;
  color: var(--tomate-text, var(--paper)); font-size: calc(12.5px * var(--sabe-fs, 1));
}
.rlay-usage:hover, .rlay-link:hover { text-decoration: underline; }
.rlay-prev { padding: 10px; background: rgba(var(--bink), .06); }

/* folha de prévia (papel da bolha, sempre claro) */
.rlay-paper {
  background: var(--bubble-hi, #fff); color: var(--bink-solid, #182A24); border-radius: 6px;
  padding: 10px 12px; font-size: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  pointer-events: none; user-select: none;
}
.rlay-paper .rpt-frame-header { margin-bottom: .5rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(var(--bink), .16); }
.rlay-paper .rpt-frame-footer { margin-top: .5rem; padding-top: .35rem; border-top: 1px solid rgba(var(--bink), .16); }
.rlay-paper .rpt-lay-band { margin: 0 0 .5rem; }
.rlay-paper .rpt-lay-header .rpt-lay-img.rpt-lay-s { max-height: 18px; }
.rlay-paper .rpt-lay-header .rpt-lay-img.rpt-lay-m { max-height: 28px; }
.rlay-paper .rpt-lay-header .rpt-lay-img.rpt-lay-l { max-height: 40px; }
.rlay-paper .rpt-lay-filters.is-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.rlay-rows { display: flex; flex-direction: column; gap: 4px; }
.rlay-row { display: grid; grid-template-columns: 3fr 2fr 1fr; gap: 8px; }
.rlay-row span { height: 5px; border-radius: 3px; background: rgba(var(--bink), .12); }
.rlay-row:nth-child(even) span { background: rgba(var(--bink), .07); }

/* editor */
.rlay-ed-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rlay-ed-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rlay-ed-prev { position: sticky; top: 8px; min-width: 0; }
.rlay-ed-prev h3, .rlay-zone h3 { margin: 0 0 6px; font-size: calc(14px * var(--sabe-fs, 1)); }
.rlay-name { display: flex; gap: 8px; align-items: center; }
.rlay-name input { flex: 1 1 auto; font-size: calc(14px * var(--sabe-fs, 1)); }
.rlay-zone { border: 1px solid rgba(var(--bink), .16); border-radius: 12px; padding: 10px; }
.rlay-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rlay-slot { background: rgba(var(--bink), .04); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rlay-slot h4 { margin: 0; font-size: calc(11px * var(--sabe-fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--lilac); }
.rlay-els { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rlay-el { border: 1px solid rgba(var(--bink), .18); border-radius: 8px; padding: 5px 6px; background: var(--bubble-hi, transparent); color: var(--bink-solid, inherit); }
.rlay-el-h { display: flex; justify-content: space-between; gap: 4px; align-items: center; font-size: calc(12.5px * var(--sabe-fs, 1)); }
.rlay-el-h > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlay-el-acts { display: inline-flex; gap: 1px; flex: 0 0 auto; }
.rlay-el-acts button {
  border: 0; background: none; cursor: pointer; font-size: 11px; padding: 1px 3px; color: inherit; opacity: .75; border-radius: 4px;
}
.rlay-el-acts button:hover:not([disabled]) { opacity: 1; background: rgba(var(--acc-rgb), .15); }
.rlay-el-acts button[disabled] { opacity: .25; cursor: default; }
.rlay-el-o { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.rlay-el-o:empty { display: none; }
.rlay-el-o .rlay-in { max-width: 100%; }
.rlay-el-o input[type=text] { flex: 1 1 100%; }
.rlay-up { cursor: pointer; }
.rlay-warn { display: block; flex-basis: 100%; color: var(--lilac); font-size: calc(11px * var(--sabe-fs, 1)); }
.rlay-add { width: 100%; }
.rlay-bg, .rlay-band { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: calc(12.5px * var(--sabe-fs, 1)); }
.rlay-band label { display: inline-flex; gap: 6px; align-items: center; }
.rlay-fade { display: inline-flex; gap: 6px; align-items: center; }
.rlay-tbl td:first-child { width: 2rem; }

/* painel de aparência do relatório */
.sabe-appear-prevbox { margin: 6px 0 8px; max-width: 520px; }
.rlay-paper.is-mini { font-size: 9px; }

@media (max-width: 880px) {
  .rlay-ed-cols { grid-template-columns: 1fr; }
  .rlay-ed-prev { position: static; order: -1; }
  .rlay-slots { grid-template-columns: 1fr; }
}

/* botões compactos (o .sabe-cmp-item do wizard é bloco de largura cheia) */
.rlay .sabe-cmp-item, .sabe-appear .sabe-cmp-item {
  display: inline-flex; width: auto; flex: 0 0 auto; align-items: center; gap: 4px;
  padding: 5px 12px; font-size: calc(12.5px * var(--sabe-fs, 1));
}
.rlay .sabe-cmp-item.sel { font-weight: 700; }
.rlay .sabe-cmp-item.is-danger { color: var(--bad, #c62828); }
.rlay-top .sabe-cmp-chips { flex-wrap: nowrap; }
.rlay-el-h > span:first-child { white-space: normal; overflow: visible; }