/* Permite rolagem irrestrita e barra de rolagem nativa na prova de aprovação */
html.approval-active,
body.approval-active,
html:has(.approval-shell),
body:has(.approval-shell) {
  overflow: auto !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
}
#app.approval-active,
#app:has(.approval-shell) {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
.approval-shell{min-height:100vh;background:#f0f2ed;color:#202a22;padding:0 24px 30px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.approval-brand{max-width:1160px;margin:auto;min-height:76px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #dde3da;font-size:11px;font-weight:900;letter-spacing:.13em}.approval-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#b8e34a;color:#203429;font-size:20px;letter-spacing:-.1em}.approval-brand small{display:block;font-size:8px;color:#7b8678;letter-spacing:.12em;margin-top:3px}.approval-secure{margin-left:auto;display:flex;align-items:center;gap:7px;color:#687568;font-size:10px;font-weight:700;letter-spacing:0}.approval-secure i{width:7px;height:7px;border-radius:50%;background:#7cbb6d;box-shadow:0 0 0 3px rgba(124,187,109,.15)}.approval-intro{max-width:900px;margin:50px auto 28px}.approval-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;color:#71806e}.approval-intro h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.055em;margin:8px 0}.approval-intro p{color:#748073;font-size:13px}.approval-intro p span{padding:0 5px;color:#b5beb1}.approval-private-note{border-left:3px solid #b8e34a;border-radius:0 8px 8px 0;background:#e8eee2;padding:12px 14px;margin-top:18px;color:#51624f;font-size:11px;line-height:1.5}.approval-proof-list{display:grid;gap:28px;max-width:900px;margin:0 auto}.approval-page-section{min-width:0}.approval-page-label{font-size:10px;color:#7b8678;font-weight:800;letter-spacing:.08em;margin:0 0 8px 2px}.approval-canvas{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;border-radius:4px;background:var(--proof-gradient,var(--proof-bg,#f3f2ec));box-shadow:0 15px 42px rgba(31,43,32,.12);width:min(100%,720px);margin:0 auto;aspect-ratio:210/297}.approval-canvas.square{aspect-ratio:1}.approval-bg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.proof-item{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;color:var(--proof-color,#20242a);font-size:var(--proof-size,3cqw);line-height:1.02;white-space:normal}.proof-text{padding:1.5%;font-family:inherit;font-weight:800}.proof-brand{padding:1%;font-size:var(--proof-size,4cqw);font-weight:900;letter-spacing:-.04em}.proof-image-frame{border-radius:4%;background:#fff;box-shadow:0 1.5cqw 3cqw rgba(28,35,29,.12)}.proof-image-frame img{width:100%;height:100%;object-fit:contain}.proof-shape{padding:2%;background:var(--proof-fill,#b8e34a);font-weight:900;text-align:center;line-height:1.05}.shape-rounded{border-radius:4%}.shape-pill{border-radius:99px}.shape-ellipse{border-radius:50%}.shape-splash{border-radius:34% 66% 39% 61% / 61% 35% 65% 39%;clip-path:polygon(50% 0%,58% 8%,68% 2%,73% 13%,85% 10%,87% 22%,98% 28%,91% 39%,100% 50%,91% 59%,97% 72%,84% 77%,84% 90%,70% 88%,62% 100%,50% 91%,38% 99%,30% 88%,16% 92%,15% 78%,3% 72%,9% 60%,0 50%,9% 40%,3% 27%,16% 22%,17% 10%,31% 13%,39% 2%)}.shape-starburst{clip-path:polygon(50% 0%,59% 12%,72% 4%,75% 20%,90% 15%,87% 32%,100% 40%,89% 51%,98% 65%,82% 69%,84% 86%,68% 83%,58% 100%,48% 87%,34% 97%,30% 81%,13% 83%,18% 66%,0 59%,12% 48%,3% 34%,20% 29%,17% 13%,34% 17%,43% 1%)}.shape-ribbon{clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%)}.shape-curve{border-radius:0 0 50% 50%/0 0 26% 26%;padding-bottom:4%}.shape-arch{border-radius:50% 50% 3% 3%/40% 40% 3% 3%}.proof-product{border-radius:3%;background:rgba(255,255,255,.93);border:1px solid rgba(35,51,40,.1);padding:3%;flex-direction:column;gap:2%;text-align:center}.proof-product img{width:86%;height:58%;object-fit:contain}.proof-product strong{font-size:calc(var(--proof-size)*.8);max-width:100%;overflow:hidden}.proof-product-price{font-weight:950;color:#e94f3e;font-size:calc(var(--proof-size)*1.05)}.proof-product-price small{font-size:.52em}.proof-price{flex-direction:column;gap:3%;padding:4%;background:var(--proof-fill,#ef5747);color:var(--proof-color,#fff);font-weight:950;text-align:center;line-height:.95}.proof-price small{font-size:.55em;font-weight:850;text-transform:uppercase}.proof-price>div{display:flex;align-items:flex-start;justify-content:center;gap:2%}.proof-price>div>span{font-size:.45em;margin-top:.2em}.proof-price strong{font-size:1.8em;letter-spacing:-.08em}.proof-price sup{font-size:.45em;vertical-align:top;letter-spacing:-.02em}.proof-price em{font-style:normal;font-size:.46em}.price-shape-rounded{border-radius:8%}.price-shape-pill{border-radius:99px}.price-shape-ellipse{border-radius:50%}.price-shape-splash{clip-path:polygon(50% 0%,58% 8%,68% 2%,73% 13%,85% 10%,87% 22%,98% 28%,91% 39%,100% 50%,91% 59%,97% 72%,84% 77%,84% 90%,70% 88%,62% 100%,50% 91%,38% 99%,30% 88%,16% 92%,15% 78%,3% 72%,9% 60%,0 50%,9% 40%,3% 27%,16% 22%,17% 10%,31% 13%,39% 2%)}.price-shape-starburst{clip-path:polygon(50% 0%,59% 12%,72% 4%,75% 20%,90% 15%,87% 32%,100% 40%,89% 51%,98% 65%,82% 69%,84% 86%,68% 83%,58% 100%,48% 87%,34% 97%,30% 81%,13% 83%,18% 66%,0 59%,12% 48%,3% 34%,20% 29%,17% 13%,34% 17%,43% 1%)}.price-shape-ribbon{clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%)}.approval-decision-card{max-width:900px;margin:34px auto 22px;padding:25px;background:#fff;border:1px solid #e1e6dd;border-radius:17px;box-shadow:0 8px 28px rgba(33,44,35,.05)}.approval-decision-card h2{font-size:23px;letter-spacing:-.035em;margin:6px 0}.approval-decision-card>p{font-size:12px;color:#748073;line-height:1.5}.approval-decision-form{display:grid;gap:13px;margin-top:18px}.approval-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.approval-decision-form label{display:grid;gap:6px;color:#596558;font-size:11px;font-weight:800}.approval-decision-form input,.approval-decision-form textarea{width:100%;border:1px solid #dce2d9;border-radius:9px;background:#fbfcfa;color:#263129;padding:11px;font:inherit;font-size:13px;outline:none;box-sizing:border-box}.approval-decision-form input:focus,.approval-decision-form textarea:focus{border-color:#89a76b;box-shadow:0 0 0 3px rgba(184,227,74,.17)}.approval-decision-form textarea{resize:vertical;min-height:88px}.approval-decision-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:3px}.approval-decision-actions button{border:1px solid transparent;border-radius:9px;padding:11px 15px;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.approval-request-changes{background:#fff;border-color:#d8dfd5!important;color:#40503f}.approval-approve{background:#284331;color:white}.approval-approve:hover{background:#385942}.approval-decision-actions button:disabled{opacity:.45;cursor:wait}.approval-decision-result{padding:12px;border-radius:9px;font-size:12px;line-height:1.5}.approval-decision-result[hidden]{display:none}.approval-decision-result.success{background:#e8f4e1;color:#285a32}.approval-decision-result.error{background:#fff0eb;color:#8d3126}.approval-state-card{max-width:540px;margin:14vh auto;padding:38px;background:#fff;border:1px solid #e1e6dd;border-radius:18px;text-align:center;box-shadow:0 18px 50px rgba(32,44,34,.08)}.approval-state-card h1{font-size:27px;letter-spacing:-.04em;margin:10px 0}.approval-state-card p{color:#748073;font-size:13px;line-height:1.6}.approval-state-icon{margin:0 auto 12px;width:40px;height:40px;display:grid;place-items:center;background:#fff0e8;color:#b74b32;border-radius:50%;font-weight:900}.approval-empty-page{padding:40px;text-align:center;background:#fff;border-radius:12px;color:#71806e}.approval-loading{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:#596b57;font-weight:800}.approval-loading span{width:25px;height:25px;border:3px solid #d2dccd;border-top-color:#3d6543;border-radius:50%;animation:approval-spin .7s linear infinite}@keyframes approval-spin{to{transform:rotate(360deg)}}.approval-footer{max-width:1160px;margin:38px auto 0;padding:15px 0;border-top:1px solid #dde3da;display:flex;justify-content:space-between;gap:12px;color:#849082;font-size:9px;letter-spacing:.08em}
@media(max-width:640px){.approval-shell{padding:0 14px 22px}.approval-brand{min-height:64px;font-size:9px}.approval-brand-mark{width:32px;height:32px}.approval-secure{font-size:8px}.approval-intro{margin:30px auto 20px}.approval-intro h1{font-size:30px}.approval-intro p{font-size:11px;line-height:1.6}.approval-proof-list{gap:20px}.approval-canvas{border-radius:2px}.approval-decision-card{margin-top:24px;padding:18px 15px}.approval-form-grid{grid-template-columns:1fr}.approval-decision-actions{flex-direction:column-reverse}.approval-decision-actions button{width:100%;padding:13px}.approval-state-card{margin:12vh auto;padding:28px 20px}.approval-footer{font-size:8px;flex-direction:column}.approval-footer span:last-child{display:none}}

.approval-mobile-bar{display:none;}
@media(max-width:768px){
  .approval-mobile-bar{
    position:fixed;
    bottom:14px;
    left:14px;
    right:14px;
    z-index:90;
    display:flex;
    gap:8px;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    padding:8px 10px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.18);
    border:1px solid rgba(0,0,0,0.08);
  }
  .approval-bar-btn{
    flex:1;
    min-height:42px;
    border:0;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }
  .approval-bar-btn.zoom-btn{
    background:#203429;
    color:#b8e34a;
  }
  .approval-bar-btn.scroll-decision-btn{
    background:#e8f4e1;
    color:#285a32;
  }
  .approval-proof-list.is-zoomed{
    overflow-x:auto;
    padding-bottom:15px;
  }
  .approval-proof-list.is-zoomed .approval-canvas{
    width:180% !important;
    max-width:none !important;
    transform-origin:top left;
  }
}


/* ==========================================================================
   DESIGN SYSTEM - MODAL DE APROVAÇÃO (Clean, SaaS moderno, Inter)
   Cores: Fundo #F8FAFC, Primária #2563EB, Sucesso #16A34A, Alerta #DC2626
   Texto: #0F172A, Secundário: #64748B
   ========================================================================== */
.ds-approval-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 16px;
  animation: fadeIn 0.18s ease-out;
}
.ds-approval-card {
  width: min(620px, 100%);
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #0F172A;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-approval-header {
  padding: 18px 22px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ds-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #2563EB;
}
.ds-approval-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin: 4px 0 2px;
  letter-spacing: -0.02em;
}
.ds-header-sub {
  font-size: 12px;
  color: #64748B;
  display: flex;
  gap: 6px;
  align-items: center;
}
.ds-header-sub strong {
  color: #0F172A;
}
.ds-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #64748B;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ds-close-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}
.ds-approval-body {
  padding: 18px 22px;
  display: grid;
  gap: 16px;
  max-height: 75vh;
  overflow-y: auto;
}
.ds-approval-banner {
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
}
.ds-banner-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.ds-banner-body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.ds-banner-body p {
  margin: 0;
  font-size: 12px;
}
.ds-banner-quote {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 3px solid currentColor;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  font-size: 12px;
}
.ds-approval-banner.banner-success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}
.ds-approval-banner.banner-success .ds-banner-icon {
  background: #DCFCE7;
  color: #16A34A;
}
.ds-approval-banner.banner-alert {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.ds-approval-banner.banner-alert .ds-banner-icon {
  background: #FEE2E2;
  color: #DC2626;
}
.ds-approval-banner.banner-pending {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}
.ds-approval-banner.banner-pending .ds-banner-icon {
  background: #DBEAFE;
  color: #2563EB;
}
.ds-link-section {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.ds-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.3px;
}
.ds-link-row {
  display: flex;
  gap: 8px;
}
.ds-input-link {
  flex: 1;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 12px;
  color: #0F172A;
  outline: none;
}
.ds-input-link:focus {
  border-color: #2563EB;
  background: #FFFFFF;
}
.ds-sublink-row {
  font-size: 11px;
  color: #64748B;
}
.ds-sublink-row a {
  color: #2563EB;
  text-decoration: none;
}
.ds-sublink-row a:hover {
  text-decoration: underline;
}
.ds-primary-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.ds-btn {
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.ds-btn:hover {
  transform: translateY(-1px);
}
.ds-btn:active {
  transform: translateY(0);
}
.ds-btn-primary {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
}
.ds-btn-primary:hover {
  background: #1D4ED8;
}
.ds-btn-secondary {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #CBD5E1;
}
.ds-btn-secondary:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
}
.ds-btn-preview {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.ds-btn-preview:hover {
  background: #1D4ED8;
}
.ds-btn-whatsapp {
  background: #16A34A;
  color: #FFFFFF;
  border-color: #16A34A;
}
.ds-btn-whatsapp:hover {
  background: #15803D;
}
.ds-testing-section {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.ds-testing-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #475569;
}
.ds-testing-badge {
  background: #E2E8F0;
  color: #334155;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.ds-testing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds-chip {
  border-radius: 6px;
  padding: 6px 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s;
}
.ds-chip-success {
  background: #DCFCE7;
  color: #166534;
  border-color: #BBF7D0;
}
.ds-chip-success:hover {
  background: #BBF7D0;
}
.ds-chip-alert {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FECACA;
}
.ds-chip-alert:hover {
  background: #FECACA;
}
.ds-chip-neutral {
  background: #FFFFFF;
  color: #475569;
  border-color: #CBD5E1;
}
.ds-chip-neutral:hover {
  background: #F8FAFC;
}
.ds-approval-footer {
  padding: 14px 22px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ds-secure-hint {
  font-size: 11px;
  color: #64748B;
}

/* Badges de aprovação nos cards e no estúdio */
.brandkit-approval-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.brandkit-approval-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.brandkit-approval-pill.approved {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}
.brandkit-approval-pill.changes {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
.brandkit-approval-pill.pending {
  background: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #93C5FD;
}

.approval-card-pill {
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.approval-card-pill.approved {
  background: #DCFCE7;
  color: #166534;
}
.approval-card-pill.changes {
  background: #FEE2E2;
  color: #991B1B;
}
.approval-card-pill.pending {
  background: #DBEAFE;
  color: #1E40AF;
}

.approval-editor-banner {
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
  color: #92400E;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.approval-editor-banner strong {
  color: #B45309;
}
.approval-editor-banner .banner-action-btn {
  background: #FFFFFF;
  border: 1px solid #FCD34D;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #92400E;
  cursor: pointer;
}
.approval-editor-banner .banner-action-btn:hover {
  background: #FEF3C7;
}

/* Ocultar guias e pontilhados no portal de aprovação */
.approval-canvas .safe-area,
.approval-canvas .canvas-grid,
.approval-canvas .snap-guides-container,
.approval-canvas .snap-guide,
.approval-canvas .resize-handle,
.approval-canvas .rotate-handle,
.approval-canvas .product-slot-placeholder,
.approval-canvas .slot-photo-placeholder,
.approval-canvas .empty-circle,
.approval-canvas .product-add-hint {
  display: none !important;
  border: none !important;
  outline: none !important;
}
.approval-canvas .product-object.is-empty {
  display: none !important;
}