/* ═══════════════════════════════════════════
   MaxCaps Portal — Design System
   Primary: #F0508C (hot pink from logo)
   ═══════════════════════════════════════════ */

:root {
  --pink:        #F0508C;
  --pink-dark:   #D63A78;
  --pink-light:  #FF80B5;
  --pink-bg:     #FFF0F6;
  --pink-border: #FFD0E8;
  --pink-muted:  #FFEAF4;
  --text:        #1A0A12;
  --text-muted:  #8B5A72;
  --text-soft:   #C49AB0;
  --white:       #FFFFFF;
  --card-bg:     #FFFFFF;
  --page-bg:     #FDF5F9;
  --border:      #F0D8E8;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 4px 20px rgba(240,80,140,.12);
  --shadow-lg:   0 12px 40px rgba(240,80,140,.20);
}

/* ── Reset ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--page-bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--pink);text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── Auth layout (login / recover / reset) ── */
.center-body{
  background:linear-gradient(150deg,#3D0020 0%,#7A1045 40%,#F0508C 100%);
  display:flex;align-items:center;justify-content:center;
  /* push content below notch on iOS PWA */
  padding: max(16px, calc(env(safe-area-inset-top) + 16px))
           max(16px, env(safe-area-inset-right))
           max(16px, calc(env(safe-area-inset-bottom) + 16px))
           max(16px, env(safe-area-inset-left));
  min-height:100vh;
}
.auth-card{width:100%;max-width:440px;border-radius:24px;overflow:hidden;box-shadow:0 32px 64px rgba(0,0,0,.35)}

/* ── Card ───────────────────────────────── */
.card{background:var(--card-bg)}
.card-top{
  background:linear-gradient(150deg,#3D0020,#A02060,#F0508C);
  padding:30px 24px 34px;text-align:center;
}
.logo-img{width:130px;max-width:60%;margin:0 auto}

/* Circular glass icon */
.card-top-icon{
  width:68px;height:68px;
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.35);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;color:#fff;
  margin:20px auto 0;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

/* Main title — Poppins 900, big */
.card-top-sub{
  font-family:'Poppins',sans-serif;
  font-size:1.9rem;font-weight:900;
  color:#fff;line-height:1.15;
  margin-top:12px;letter-spacing:-.6px;
  text-shadow:0 4px 20px rgba(0,0,0,.35);
}

/* Tagline below title */
.card-top-tagline{
  font-family:'Poppins',sans-serif;
  color:rgba(255,255,255,.6);
  font-size:.78rem;font-weight:400;
  margin-top:7px;line-height:1.5;
  letter-spacing:.3px;
}
.card-body{padding:28px 24px 24px}

/* ── Typography ─────────────────────────── */
.step-title{font-size:1.15rem;font-weight:800;color:var(--text);margin-bottom:6px}
.step-sub{font-size:.9rem;color:var(--text-muted);margin-bottom:20px;line-height:1.65}
.step-sub strong{color:var(--text)}

/* ── Form ───────────────────────────────── */
.form-group{margin-bottom:16px}
label{
  display:block;font-size:.72rem;font-weight:700;
  color:var(--text-muted);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.7px;
}
input[type=text],input[type=email],input[type=password]{
  width:100%;border:2px solid var(--pink-border);border-radius:var(--radius-sm);
  padding:14px 16px;font-size:1rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
  color:var(--text);background:#FFF8FB;font-family:inherit;
}
input:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 4px rgba(240,80,140,.12)}
input.err{border-color:#ef4444;background:#fff5f5}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:48px}
.pass-eye{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--text-soft);
  font-size:1.15rem;padding:4px;line-height:1;transition:color .15s;
}
.pass-eye:hover{color:var(--pink)}

/* ── Buttons ────────────────────────────── */
.btn{
  width:100%;padding:15px;border:none;border-radius:var(--radius-sm);
  font-size:1rem;font-weight:700;cursor:pointer;
  transition:all .15s;display:flex;align-items:center;justify-content:center;
  gap:8px;font-family:inherit;text-decoration:none;
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:linear-gradient(135deg,var(--pink-dark),var(--pink),var(--pink-light));
  color:#fff;box-shadow:0 4px 18px rgba(240,80,140,.40);
}
.btn-primary:hover{box-shadow:0 6px 24px rgba(240,80,140,.55);filter:brightness(1.06)}
.btn-ghost{
  background:#fff;color:var(--text-muted);
  border:2px solid var(--pink-border);margin-top:10px;
  font-size:.92rem;font-weight:600;
}
.btn-ghost:hover{background:var(--pink-muted);border-color:var(--pink);color:var(--pink)}

/* ── Alerts ─────────────────────────────── */
.erro-box{
  background:#fef2f2;border:1.5px solid #fecaca;border-radius:var(--radius-sm);
  padding:13px 16px;margin-bottom:16px;font-size:.875rem;color:#dc2626;
  display:flex;align-items:flex-start;gap:10px;line-height:1.5;
}
.erro-box i{margin-top:1px;flex-shrink:0;font-size:1rem}

.success-box{
  background:#fff0f7;border:1.5px solid var(--pink-border);
  border-radius:var(--radius);padding:26px 22px;text-align:center;
}
.success-icon{font-size:3.2rem;display:block;margin-bottom:14px}
.success-title{font-size:1.1rem;font-weight:800;color:var(--pink-dark);margin-bottom:8px}
.success-msg{font-size:.875rem;color:var(--text-muted);line-height:1.65}
.email-badge{display:inline-block;background:var(--pink-muted);color:var(--pink-dark);
  font-weight:700;font-family:monospace;padding:4px 12px;border-radius:6px;margin:6px 0;font-size:.9rem}

.invalid-box{background:#fff7ed;border:1.5px solid #fed7aa;border-radius:var(--radius);
  padding:26px 22px;text-align:center}
.invalid-icon{font-size:2.8rem;display:block;margin-bottom:12px}
.invalid-title{font-size:1.05rem;font-weight:800;color:#9a3412;margin-bottom:8px}
.invalid-msg{font-size:.875rem;color:#c2410c;line-height:1.6}

/* ── Chips & badges ─────────────────────── */
.cpf-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--pink-muted);border:1.5px solid var(--pink-border);
  border-radius:50px;padding:9px 18px;
  font-size:.95rem;color:var(--pink-dark);font-weight:700;
  font-family:monospace;margin-bottom:18px;letter-spacing:.5px;
}
.hint{font-size:.75rem;color:var(--text-soft);margin-top:7px;
  display:flex;align-items:center;gap:5px;line-height:1.4}
.link-small{
  display:block;text-align:center;font-size:.85rem;
  color:var(--text-muted);margin-top:14px;
}
.link-small:hover{color:var(--pink)}

/* ── Password strength ───────────────────── */
.strength{height:5px;border-radius:3px;background:#f0d8e8;margin-top:8px;overflow:hidden}
.strength-bar{height:100%;border-radius:3px;width:0;transition:width .3s,background .3s}
.strength-lbl{font-size:.72rem;color:var(--text-soft);margin-top:4px}

/* ═══════════════════════════════════════════
   DASHBOARD LAYOUT
   ═══════════════════════════════════════════ */

/* ── App Header ─────────────────────────── */
/* black-translucent: content goes behind notch — compensate with safe-area */
.app-header{
  background:linear-gradient(135deg,#3D0020,#A02060,#F0508C);
  color:#fff;
  padding-top: env(safe-area-inset-top);          /* push content below notch */
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: 0;
  min-height: calc(58px + env(safe-area-inset-top));
  display:flex;flex-direction:column;justify-content:flex-end;
  position:sticky;top:0;z-index:200;
  box-shadow:0 2px 16px rgba(0,0,0,.25);
}
/* inner row sits in the 58px area below the notch */
.app-header-inner{
  height:58px;display:flex;align-items:center;
  justify-content:space-between;width:100%;
}
.header-logo{height:32px;filter:brightness(0) invert(1)}
.header-right{display:flex;align-items:center;gap:10px}
.header-name{font-size:.82rem;opacity:.85;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:8px;padding:7px 12px;
  font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .2s;font-family:inherit;white-space:nowrap;
}
.btn-logout:hover{background:rgba(255,255,255,.32)}

/* ── Page layout ─────────────────────────── */
.page-wrap{max-width:700px;margin:0 auto;padding:20px 14px 60px}
.page-title{font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:4px}
.page-sub{font-size:.875rem;color:var(--text-muted);margin-bottom:20px}

/* ── Action bar (novo pedido + suporte) ──── */
.action-bar{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:18px;
}
.btn-action{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 10px;border-radius:var(--radius-sm);
  font-size:.85rem;font-weight:700;text-decoration:none;
  transition:opacity .15s,transform .1s;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  white-space:nowrap;
}
.btn-action:active{transform:scale(.97)}
.btn-action-primary{
  background:linear-gradient(135deg,var(--pink-dark),var(--pink));
  color:#fff;
}
.btn-action-primary:hover{opacity:.88}
.btn-action-whatsapp{
  background:linear-gradient(135deg,#128C7E,#25D366);
  color:#fff;
}
.btn-action-whatsapp:hover{opacity:.88}

/* ── Counter bar ─────────────────────────── */
.counter-bar{
  display:flex;gap:0;margin-bottom:20px;
  background:var(--card-bg);border-radius:var(--radius);
  border:1.5px solid var(--pink-border);overflow:hidden;
  box-shadow:var(--shadow);
}
.counter-item{flex:1;text-align:center;padding:14px 8px;border-right:1.5px solid var(--pink-border)}
.counter-item:last-child{border:none}
.counter-num{font-size:1.6rem;font-weight:900;color:var(--pink);line-height:1}
.counter-num.green{color:#16a34a}
.counter-num.orange{color:#ea580c}
.counter-lbl{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px;font-weight:600}

/* ── Order card ─────────────────────────── */
.order-card{
  background:var(--card-bg);border-radius:var(--radius);
  border:1.5px solid var(--pink-border);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
  transition:box-shadow .2s,transform .15s;
}
.order-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}

.order-head{padding:16px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.order-rastreio{
  font-family:monospace;font-size:1.15rem;font-weight:900;
  color:var(--text);letter-spacing:.6px;line-height:1.2;word-break:break-all;
}
.order-meta{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.plat-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.meta-text{font-size:.78rem;color:var(--text-soft)}
.nf-badge{
  font-size:.73rem;font-weight:700;background:var(--pink-muted);
  color:var(--pink-dark);border:1px solid var(--pink-border);
  border-radius:6px;padding:2px 8px;
}

.status-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:50px;
  font-size:.75rem;font-weight:800;white-space:nowrap;flex-shrink:0;
  border:1.5px solid transparent;
}
.status-prep  {background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.status-ready {background:var(--pink-muted);color:var(--pink-dark);border-color:var(--pink-border)}
.status-done  {background:#f0fdf4;color:#15803d;border-color:#bbf7d0}

/* ── Items list ─────────────────────────── */
.order-items{padding:0 18px 4px;border-top:1.5px solid var(--pink-muted)}
.items-label{font-size:.7rem;font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.6px;padding:11px 0 8px}
.item-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--pink-muted);font-size:.9rem;
}
.item-row:last-child{border:none;padding-bottom:12px}
.item-name{color:var(--text)}
.item-qty{
  font-weight:800;color:var(--pink);
  background:var(--pink-muted);padding:2px 10px;
  border-radius:20px;font-size:.8rem;white-space:nowrap;margin-left:8px;
}

/* ── Card footer ─────────────────────────── */
.order-foot{
  padding:12px 18px;background:var(--pink-muted);
  display:flex;gap:10px;flex-wrap:wrap;border-top:1.5px solid var(--pink-border);
}
.btn-track{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--pink-dark),var(--pink));
  color:#fff;border:none;border-radius:var(--radius-sm);
  padding:10px 16px;font-size:.85rem;font-weight:700;
  cursor:pointer;text-decoration:none;transition:opacity .15s;
  font-family:inherit;box-shadow:0 2px 8px rgba(240,80,140,.30);
}
.btn-track:hover{opacity:.88}
.btn-copy{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--text-muted);
  border:1.5px solid var(--pink-border);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .15s;font-family:inherit;
}
.btn-copy:hover{background:var(--pink-muted);border-color:var(--pink);color:var(--pink)}
.btn-copy.copied{color:#15803d;border-color:#86efac;background:#f0fdf4}

/* ── Empty state ─────────────────────────── */
.empty-state{
  text-align:center;padding:60px 24px;
  background:var(--card-bg);border-radius:var(--radius);
  border:1.5px solid var(--pink-border);
}
.empty-icon{font-size:3.5rem;display:block;margin-bottom:14px}
.empty-msg{font-size:.95rem;color:var(--text-muted)}

/* ═══════════════════════════════════════════
   PHOTO GALLERY
   ═══════════════════════════════════════════ */
.order-fotos{padding:12px 18px 14px;border-top:1.5px solid var(--pink-muted)}
.fotos-label{font-size:.7rem;font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;
  display:flex;align-items:center;gap:6px}
.fotos-scroll{
  display:flex;gap:10px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:4px;
}
.fotos-scroll::-webkit-scrollbar{display:none}
.foto-thumb{
  width:90px;height:90px;flex-shrink:0;min-width:90px;max-width:90px;
  display:block;object-fit:cover;border-radius:10px;cursor:pointer;
  border:2px solid var(--pink-border);transition:transform .15s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.foto-thumb:hover,.foto-thumb:active{transform:scale(.96);box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* ── Lightbox ──────────────────────────── */
#lightbox{
  display:none;position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:9999;background:rgba(0,0,0,.92);
  -webkit-tap-highlight-color:transparent;
}
#lightbox.open{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#lightbox-img{
  max-width:min(96vw,600px);max-height:80vh;
  object-fit:contain;border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.6);display:block;
}
#lightbox-nav{display:flex;align-items:center;gap:20px}
.lb-btn{
  background:rgba(255,255,255,.18);border:none;color:#fff;
  width:44px;height:44px;border-radius:50%;font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.lb-btn:hover{background:rgba(255,255,255,.32)}
.lb-btn:disabled{opacity:.3;cursor:default}
#lb-counter{color:rgba(255,255,255,.7);font-size:.85rem;min-width:50px;text-align:center}
/* Close button lives outside #lightbox — always fixed, shown/hidden via .open */
#lb-close{
  display:none;position:fixed;
  top:calc(env(safe-area-inset-top) + 14px);right:18px;
  z-index:10000;
  background:rgba(255,255,255,.18);border:none;color:#fff;
  width:40px;height:40px;border-radius:50%;font-size:1.1rem;
  cursor:pointer;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
#lb-close.open{display:flex}

/* ═══════════════════════════════════════════
   PWA INSTALL BANNER
   ═══════════════════════════════════════════ */
#pwa-banner{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:linear-gradient(135deg,#3D0020,#A02060);
  color:#fff;padding:14px 16px;z-index:999;
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
  flex-direction:column;gap:10px;
  animation:slideUp .35s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pwa-row{display:flex;align-items:center;gap:10px}
.pwa-icon{font-size:1.5rem;flex-shrink:0}
.pwa-text{flex:1;font-size:.88rem;line-height:1.4}
.pwa-text strong{display:block;font-size:.95rem;margin-bottom:2px}
.pwa-ios-steps{
  background:rgba(255,255,255,.12);border-radius:10px;
  padding:10px 14px;font-size:.82rem;line-height:1.7;
  display:flex;align-items:flex-start;gap:8px;
}
.pwa-ios-steps i{margin-top:2px;flex-shrink:0;font-size:1rem}
.btn-pwa-install{
  background:#fff;color:var(--pink);border:none;
  border-radius:8px;padding:9px 16px;font-size:.85rem;
  font-weight:800;cursor:pointer;white-space:nowrap;
  font-family:inherit;flex-shrink:0;transition:opacity .15s;
}
.btn-pwa-install:hover{opacity:.88}
.btn-pwa-close{
  background:rgba(255,255,255,.18);border:none;color:#fff;
  border-radius:8px;padding:9px 12px;cursor:pointer;
  font-size:.9rem;font-family:inherit;flex-shrink:0;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:420px){
  .card-body,.card-top{padding-left:18px;padding-right:18px}
  .order-rastreio{font-size:1rem}
  .order-head{flex-direction:column;gap:8px}
  .status-badge{align-self:flex-start}
  .btn-track,.btn-copy{flex:1;justify-content:center}
  .counter-num{font-size:1.35rem}
  .btn-action{font-size:.78rem;padding:12px 8px}
}
@media(max-width:320px){
  .action-bar{grid-template-columns:1fr}
}

/* Safe area — bottom home indicator */
#pwa-banner{padding-bottom:max(14px, calc(env(safe-area-inset-bottom) + 10px))}
.page-wrap{padding-bottom:max(60px, calc(env(safe-area-inset-bottom) + 40px))}