/**
 * totem/totem.css — LAGIO
 *
 * Estilos do totem de autoatendimento (kiosk) e da página de upload que
 * abre no celular do cliente. Visual inspirado no embalagio.com.br, não no
 * hub interno — esta tela é pra cliente anônimo na loja, não pra
 * funcionário logado. Pensado pro monitor touch 21,5" montado na vertical.
 *
 * Carregar depois de shared/theme.css (reaproveita as variáveis de marca
 * --brand-primary-*, --brand-secondary-* definidas lá).
 */
:root{
  --primary-100: var(--brand-primary-100, #E27543);
  --primary-200: var(--brand-primary-200, #D25C20);
  --primary-300: var(--brand-primary-300, #B84A12);
  --primary-400: var(--brand-primary-400, #9C3D08);
  --secondary-dark: var(--brand-secondary-dark, #002C3E);
  --secondary-light: var(--brand-secondary-light, #DADCDB);
  --success: var(--status-success, #10B981);
  --error: var(--status-error, #EF4444);
}
*{box-sizing:border-box;}
html, body{height:100%;}
body{
  margin:0; font-family:"Montserrat",Arial,sans-serif;
  overscroll-behavior:none; -webkit-user-select:none; user-select:none;
}

.screens{position:relative; width:100%; height:100vh; overflow:hidden; background:var(--secondary-light);}
.screen{position:absolute; inset:0; display:none; flex-direction:column; opacity:0; transition:opacity .25s ease;}
.screen.active{display:flex; opacity:1;}

/* ===== Boas-vindas ===== */
.scr-idle{
  background:radial-gradient(130% 90% at 15% 0%, var(--primary-100), var(--primary-200) 45%, var(--primary-400) 100%);
  flex-direction:column; justify-content:space-between; align-items:center; text-align:center;
  padding:min(8vh,64px) 36px min(6vh,48px); position:relative; overflow:hidden;
}
.scr-idle::before, .scr-idle::after{content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08);}
.scr-idle::before{width:34vh; height:34vh; top:-10vh; right:-11vh;}
.scr-idle::after{width:44vh; height:44vh; bottom:-18vh; left:-14vh; background:rgba(0,44,62,.18);}
.idle-logo{width:min(26vw,220px); z-index:1; display:block;}
.idle-mid{display:flex; flex-direction:column; align-items:center; gap:22px; z-index:1;}
.idle-badge{
  font-size:15px; font-weight:800; letter-spacing:.14em; color:#fff; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:9px 22px;
}
.idle-title{
  font-size:clamp(32px,5.4vw,52px); font-weight:900; line-height:1.14; margin:0; color:#fff;
  text-transform:uppercase; text-shadow:0 4px 18px rgba(0,0,0,.18); max-width:14ch;
}
.idle-title span{display:inline-block; background:var(--secondary-dark); padding:3px 16px; border-radius:10px;}
.idle-sub{font-size:20px; line-height:1.6; color:rgba(255,255,255,.92); max-width:26ch; margin:0;}
.cta-pulse{
  border:none; cursor:pointer; background:#fff; color:var(--primary-300); font-family:inherit;
  font-weight:800; font-size:24px; letter-spacing:.03em; text-transform:uppercase;
  padding:26px 48px; border-radius:999px; box-shadow:0 0 0 0 rgba(255,255,255,.6);
  animation:pulse 2.1s infinite; z-index:1;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);}
  70%{box-shadow:0 0 0 34px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}
.idle-footer{font-size:15px; color:rgba(255,255,255,.75); font-weight:600; z-index:1;}

/* ===== Topbar comum ===== */
.scr-topbar{display:flex; align-items:center; justify-content:space-between; padding:32px 32px 14px; background:#fff;}
.back-chip{
  border:1px solid var(--secondary-light); background:#fff; color:var(--secondary-dark);
  font-family:inherit; font-weight:700; font-size:16px; border-radius:999px; padding:12px 22px; cursor:pointer;
}
.step-indicator{display:flex; gap:10px;}
.dot-step{width:34px; height:7px; border-radius:4px; background:var(--secondary-light);}
.dot-step.on{background:var(--primary-200);}

/* ===== Tela de QR code ===== */
.scr-qr{background:#fff;}
.qr-content{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:16px 48px 40px; gap:22px; overflow-y:auto;
}
.eyebrow{font-size:15px; font-weight:800; letter-spacing:.12em; color:var(--primary-300);}
.qr-content h2{font-size:30px; font-weight:800; color:var(--secondary-dark); margin:0; line-height:1.3; max-width:16ch;}
.qr-help{font-size:17px; color:#6b7278; line-height:1.55; margin:0; max-width:34ch;}
.qr-box{
  width:260px; height:260px; background:#fff; border:4px solid var(--secondary-dark);
  border-radius:20px; padding:14px; position:relative; flex:none; display:flex; align-items:center; justify-content:center;
}
.qr-box canvas, .qr-box img{width:100% !important; height:100% !important; image-rendering:pixelated;}
.qr-steps{display:flex; flex-direction:column; gap:12px; width:100%; max-width:420px;}
.step-item{
  display:flex; align-items:center; gap:14px; text-align:left; background:#f7f5f2;
  border-radius:14px; padding:14px 18px; font-size:17px; font-weight:600; color:var(--secondary-dark);
}
.step-item span{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--primary-200); color:#fff;
  font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.status-pill{
  display:inline-flex; align-items:center; gap:10px; background:var(--primary-100); color:#fff;
  font-size:16px; font-weight:700; border-radius:999px; padding:12px 24px;
}
.spinner{width:16px; height:16px; border-radius:50%; border:2.5px solid rgba(255,255,255,.55); border-top-color:#fff; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.qr-expire{font-size:14px; color:#9aa0a6;}
.qr-error{
  display:none; flex-direction:column; align-items:center; gap:14px; background:#fef2f2;
  border:1px solid #fecaca; border-radius:14px; padding:20px 24px; max-width:420px;
}
.qr-error.show{display:flex;}
.qr-error p{margin:0; font-size:16px; color:var(--error); font-weight:600;}
.btn-retry{
  border:none; cursor:pointer; background:var(--secondary-dark); color:#fff; font-family:inherit;
  font-weight:800; font-size:15px; border-radius:999px; padding:12px 26px;
}

/* ===== Tela: escolha de embalagem ===== */
.scr-pick{background:#fff;}
.pack-pick-content{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:16px 40px 40px; gap:22px; overflow-y:auto;
}
.pack-pick-content h2{font-size:30px; font-weight:800; color:var(--secondary-dark); margin:0; line-height:1.3;}
.pack-pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; max-width:640px; margin-top:6px;}
.pack-pick-card{
  display:flex; flex-direction:column; align-items:center; gap:14px; background:#f7f5f2;
  border:2px solid var(--secondary-light); border-radius:20px; padding:28px 16px;
  cursor:pointer; font-family:inherit;
}
.pack-pick-card:hover, .pack-pick-card.picked{border-color:var(--primary-200); background:#fdf1e9;}
.pack-pick-icon{width:100%; height:84px; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,44,62,.18));}
.pack-pick-label{font-size:18px; font-weight:800; color:var(--secondary-dark);}

/* ===== Tela de prévia ===== */
.scr-preview{background:#fff;}
.preview-content{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:16px 40px 40px; gap:26px; overflow-y:auto;
}
.preview-content h2{font-size:30px; font-weight:800; color:var(--secondary-dark); margin:0;}
.pack-mockup{position:relative; display:flex; flex-direction:column; align-items:center; gap:16px;}
.pack-stage{height:min(42vh,420px); width:100%; position:relative; display:flex; align-items:center; justify-content:center;}
.pack-shape-img{max-height:100%; max-width:88%; object-fit:contain; filter:drop-shadow(0 20px 26px rgba(0,44,62,.28));}
.pack-logo-overlay{position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); width:52%; height:38%; display:flex; align-items:center; justify-content:center;}
.pack-uploaded-logo{max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.pack-tag{
  font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#9aa0a6; background:#f7f5f2; border-radius:999px; padding:8px 18px;
}
.preview-actions{display:flex; flex-direction:column; gap:14px; width:100%; max-width:440px;}
.preview-actions-row{display:flex; gap:14px;}
.btn-primary, .btn-secondary{
  border-radius:999px; font-family:inherit; font-weight:800; font-size:17px; padding:18px 14px; cursor:pointer; border:none;
}
.preview-actions-row .btn-secondary{flex:1;}
.btn-primary{background:var(--primary-200); color:#fff;}
.btn-secondary{background:#fff; color:var(--secondary-dark); border:1.5px solid var(--secondary-light);}

/* ===== Tela de fim ===== */
.scr-done{
  background:linear-gradient(160deg, var(--secondary-dark), #01161f 100%);
  flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:56px 40px; gap:22px;
}
.done-check{width:88px; height:88px; border-radius:50%; background:var(--success); color:#fff; font-size:42px; font-weight:900; display:flex; align-items:center; justify-content:center;}
.scr-done h2{font-size:36px; font-weight:900; margin:0;}
.scr-done p{font-size:18px; color:rgba(255,255,255,.8); line-height:1.6; max-width:30ch; margin:0;}
.done-code{font-size:17px; font-weight:700; color:rgba(255,255,255,.92); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:12px 24px;}
.done-code strong{color:#fff; font-size:22px;}

/* ===== upload.html (celular do cliente) ===== */
.upload-page{min-height:100vh; display:flex; flex-direction:column; align-items:center; background:#faf8f6; padding:28px 20px 48px;}
.upload-logo{width:150px; margin-bottom:28px;}
.upload-card{width:100%; max-width:420px; background:#fff; border-radius:20px; padding:28px 22px; box-shadow:0 10px 30px -14px rgba(0,44,62,.25); text-align:center;}
.upload-card h1{font-size:22px; font-weight:800; color:var(--secondary-dark); margin:0 0 10px;}
.upload-card p{font-size:15px; color:#6b7278; line-height:1.55; margin:0 0 22px;}
.upload-dropzone{
  border:2px dashed var(--secondary-light); border-radius:16px; padding:32px 16px; margin-bottom:18px;
  display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; background:#f7f5f2;
}
.upload-dropzone.has-file{border-color:var(--primary-200); background:#fdf1e9;}
.upload-dropzone .icon{font-size:38px;}
.upload-preview{max-width:100%; max-height:180px; border-radius:10px; margin-bottom:10px; display:none;}
.upload-preview.show{display:block;}
.btn-upload{
  width:100%; border:none; cursor:pointer; background:var(--primary-200); color:#fff; font-family:inherit;
  font-weight:800; font-size:16px; border-radius:999px; padding:16px; margin-top:6px;
}
.btn-upload:disabled{opacity:.5; cursor:default;}
.upload-status{font-size:14px; font-weight:700; margin-top:14px;}
.upload-status.error{color:var(--error);}
.upload-status.success{color:var(--success);}
.upload-done-check{width:64px; height:64px; border-radius:50%; background:var(--success); color:#fff; font-size:30px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}