/* ============================================================
   PetPulse · Componentes UI
   ============================================================ */

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;line-height:1;border-radius:var(--r-pill);
  padding:14px 20px;transition:transform .12s ease,box-shadow .2s ease,background .2s;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn .ic,.btn [data-lucide]{width:18px;height:18px;}
.btn-primary{background:var(--grad-teal);color:#fff;box-shadow:var(--sh-teal);}
.btn-primary:hover{box-shadow:0 16px 34px rgba(22,189,184,.36);}
.btn-ink{background:var(--pp-ink);color:#fff;}
.btn-peach{background:var(--grad-peach);color:#5a2c1c;}
.btn-ghost{background:var(--pp-mint);color:var(--pp-turquoise-deep);}
.btn-outline{background:#fff;color:var(--pp-ink);box-shadow:inset 0 0 0 1.5px var(--pp-line);}
.btn-soft{background:#fff;color:var(--pp-slate);box-shadow:var(--sh-sm);}
.btn-block{display:flex;width:100%;}
.btn-lg{padding:17px 24px;font-size:16px;}
.btn-sm{padding:10px 15px;font-size:13.5px;}
.btn-danger{background:var(--pp-coral);color:#fff;}
.btn[disabled]{opacity:.5;pointer-events:none;}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-pill);background:#fff;
  color:var(--pp-ink);box-shadow:var(--sh-sm);}
.iconbtn [data-lucide]{width:20px;height:20px;}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:8px 13px;border-radius:var(--r-pill);background:#fff;color:var(--pp-slate);
  box-shadow:inset 0 0 0 1.2px var(--pp-line);cursor:pointer;white-space:nowrap;}
.chip [data-lucide]{width:15px;height:15px;}
.chip.is-on{background:var(--pp-ink);color:#fff;box-shadow:none;}
.chip.teal.is-on{background:var(--pp-turquoise-deep);}

/* ---------- Inputs ---------- */
.field{display:block;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--pp-slate);
  margin:0 0 7px 2px;}
.input,.select{width:100%;background:#fff;border-radius:var(--r-md);
  padding:14px 15px;font-size:15px;color:var(--pp-ink);
  box-shadow:inset 0 0 0 1.4px var(--pp-line);transition:box-shadow .15s;}
.input::placeholder{color:var(--pp-muted);}
.input:focus,.select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--pp-turquoise);}
.input-icon{position:relative;}
.input-icon [data-lucide]{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--pp-muted);width:18px;height:18px;}
.input-icon .input{padding-left:42px;}
.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r-pill);
  padding:13px 18px;box-shadow:var(--sh-md);}
.searchbar [data-lucide]{color:var(--pp-muted);width:19px;height:19px;}
.searchbar input{border:none;outline:none;flex:1;font-size:15px;background:none;}

/* segmented control */
.seg{display:inline-flex;background:#EFF2F4;border-radius:var(--r-pill);padding:4px;gap:2px;}
.seg button{padding:9px 16px;border-radius:var(--r-pill);font-size:13.5px;font-weight:700;
  color:var(--pp-slate);}
.seg button.is-on{background:#fff;color:var(--pp-ink);box-shadow:var(--sh-sm);}

/* ---------- Cards & surfaces ---------- */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:18px;}
.card-flat{background:#fff;border-radius:var(--r-md);box-shadow:inset 0 0 0 1.4px var(--pp-line);padding:16px;}
.tile{border-radius:var(--r-lg);padding:16px;}
.divider{height:1px;background:var(--pp-line);margin:14px 0;border:0;}

/* ---------- Badges & estados ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:5px 10px;border-radius:var(--r-pill);line-height:1;}
.badge [data-lucide]{width:13px;height:13px;}
.badge-verify{background:var(--pp-mint);color:var(--pp-turquoise-deep);}
.badge-gold{background:var(--pp-amber-tint);color:#B5860E;}
.badge-ok{background:#E9F6EF;color:var(--pp-green);}
.badge-pending{background:#FFF1ED;color:#C2562F;}
.badge-new{background:var(--pp-peach-tint);color:#C2562F;}
.rating{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:13.5px;color:var(--pp-ink);}
.rating [data-lucide]{width:14px;height:14px;color:var(--pp-amber);fill:var(--pp-amber);}

/* ---------- Avatares ---------- */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);
  font-weight:800;color:#fff;background:var(--grad-teal);flex:none;overflow:hidden;}
.av img{width:100%;height:100%;object-fit:cover;}
.av-32{width:32px;height:32px;font-size:13px;}
.av-40{width:40px;height:40px;font-size:15px;}
.av-48{width:48px;height:48px;font-size:17px;}
.av-56{width:56px;height:56px;font-size:19px;}
.av-72{width:72px;height:72px;font-size:24px;}
.av.peach{background:var(--grad-peach);color:#5a2c1c;}
.av.violet{background:linear-gradient(135deg,#B58BE6,#9B6BD8);}
.av.amber{background:linear-gradient(135deg,#FFD27A,#FFC24B);color:#7a5800;}

/* ---------- Service chips (categorías) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.svc{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;}
.svc .ic{width:62px;height:62px;border-radius:20px;display:flex;align-items:center;
  justify-content:center;background:#fff;box-shadow:var(--sh-sm);transition:transform .15s;}
.svc .ic [data-lucide]{width:26px;height:26px;color:var(--pp-turquoise-deep);}
.svc:hover .ic{transform:translateY(-3px);box-shadow:var(--sh-md);}
.svc span{font-size:12px;font-weight:700;color:var(--pp-ink);}
.svc.mint .ic{background:var(--pp-mint);}
.svc.peach .ic [data-lucide]{color:#E8703F;}
.svc.peach .ic{background:var(--pp-peach-tint);}
.svc.amber .ic{background:var(--pp-amber-tint);}.svc.amber .ic [data-lucide]{color:#B5860E;}
.svc.violet .ic{background:var(--pp-violet-tint);}.svc.violet .ic [data-lucide]{color:var(--pp-violet);}

/* ---------- Provider card ---------- */
.prov{display:flex;align-items:center;gap:13px;background:#fff;border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .15s;cursor:pointer;}
.prov:hover{box-shadow:var(--sh-md);transform:translateY(-2px);}
.prov .meta{flex:1;min-width:0;}
.prov .nm{font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;}
.prov .sub{font-size:12.5px;color:var(--pp-muted);margin-top:2px;}
.prov .pr{text-align:right;}

/* list row */
.lrow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--pp-line);}
.lrow:last-child{border-bottom:0;}

/* ---------- Stat / KPI ---------- */
.stat{background:#fff;border-radius:var(--r-lg);padding:16px 17px;box-shadow:var(--sh-sm);}
.stat .v{font-size:24px;font-weight:800;letter-spacing:-.03em;}
.stat .k{font-size:12.5px;color:var(--pp-muted);font-weight:600;margin-top:2px;}
.trend{font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:3px;}
.trend.up{color:var(--pp-green);}.trend.down{color:var(--pp-coral);}

/* ---------- Device / phone frame ---------- */
.stage{min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);background:
   radial-gradient(60% 60% at 18% 12%,rgba(22,189,184,.10),transparent 60%),
   radial-gradient(50% 50% at 90% 90%,rgba(255,158,125,.12),transparent 60%),
   var(--pp-backdrop);}
.device{width:392px;max-width:100%;height:min(840px,calc(100vh - 48px));
  background:#fff;border-radius:46px;box-shadow:var(--sh-device);
  padding:11px;position:relative;flex:none;}
.device::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:120px;height:30px;background:#0c1418;border-radius:99px;z-index:30;}
.device-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;
  background:var(--pp-cream);display:flex;flex-direction:column;}
.statusbar{height:46px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 8px;font-size:13px;font-weight:700;color:var(--pp-ink);flex:none;
  background:transparent;z-index:5;}
.statusbar .dots{display:flex;gap:5px;align-items:center;}
.statusbar [data-lucide]{width:15px;height:15px;}
.screen-body{flex:1;overflow-y:auto;overflow-x:hidden;}
.screen-pad{padding:6px 20px 24px;}

/* ---- App a PANTALLA COMPLETA en móvil / PWA instalada (sin marco de teléfono) ---- */
@media (max-width:680px){
  .stage{padding:0;min-height:100vh;min-height:100dvh;background:var(--pp-cream);}
  .device{width:100%;max-width:none;height:100vh;height:100dvh;min-height:100dvh;
    border-radius:0;box-shadow:none;padding:0;}
  .device::before{display:none;}                 /* sin notch falso */
  .device-screen{border-radius:0;height:100vh;height:100dvh;}
  .statusbar{height:env(safe-area-inset-top);min-height:env(safe-area-inset-top);padding:0;}
  .statusbar > *{display:none;}                   /* oculta la hora/iconos falsos */
}
@media (display-mode:standalone), (display-mode:fullscreen), (display-mode:minimal-ui){
  .stage{padding:0;min-height:100vh;min-height:100dvh;background:var(--pp-cream);}
  .device{width:100%;max-width:none;height:100vh;height:100dvh;min-height:100dvh;
    border-radius:0;box-shadow:none;padding:0;}
  .device::before{display:none;}
  .device-screen{border-radius:0;height:100vh;height:100dvh;}
  .statusbar{height:env(safe-area-inset-top);min-height:env(safe-area-inset-top);padding:0;}
  .statusbar > *{display:none;}
}

/* App top bar inside device */
.appbar{display:flex;align-items:center;gap:12px;padding:8px 20px 12px;}
.appbar h1{font-size:21px;}
.appbar .sub{font-size:13px;color:var(--pp-muted);}

/* Bottom nav */
.bnav{display:flex;justify-content:space-around;align-items:center;flex:none;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  box-shadow:0 -1px 0 var(--pp-line);}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;
  font-weight:700;color:var(--pp-muted);padding:5px 10px;border-radius:14px;position:relative;}
.bnav a [data-lucide]{width:22px;height:22px;}
.bnav a.is-on{color:var(--pp-turquoise-deep);}
.bnav a.is-on::after{content:"";position:absolute;bottom:-2px;width:5px;height:5px;border-radius:99px;background:var(--pp-turquoise);}
.bnav .nav-badge{position:absolute;top:1px;right:6px;background:var(--pp-coral);color:#fff;
  font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:99px;display:flex;
  align-items:center;justify-content:center;padding:0 3px;}

/* progress steps */
.steps{display:flex;gap:6px;}
.steps i{height:5px;border-radius:99px;background:var(--pp-line);flex:1;transition:background .3s;}
.steps i.on{background:var(--pp-turquoise);}

/* ---------- Rewards ---------- */
.reward-card{background:var(--grad-ink);color:#fff;border-radius:var(--r-xl);padding:20px;position:relative;overflow:hidden;}
.reward-card::after{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;
  border-radius:99px;background:radial-gradient(circle,rgba(255,194,75,.4),transparent 70%);}
.progressbar{height:9px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;}
.progressbar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD27A,#FFC24B);}
.progressbar.teal > i{background:var(--grad-teal);}

/* ---------- Gina chat ---------- */
.gina-head{display:flex;align-items:center;gap:11px;padding:12px 18px;
  background:var(--grad-ink);color:#fff;}
.gina-head .dot{width:8px;height:8px;border-radius:99px;background:#5BE8A0;box-shadow:0 0 0 3px rgba(91,232,160,.25);}
.chat{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(var(--pp-mint),var(--pp-cream) 220px);}
.bub{max-width:80%;padding:11px 14px;border-radius:18px;font-size:14px;line-height:1.45;
  animation:pp-pop .3s ease both;box-shadow:var(--sh-sm);}
.bub.bot{align-self:flex-start;background:#fff;color:var(--pp-ink);border-bottom-left-radius:6px;}
.bub.me{align-self:flex-end;background:var(--grad-teal);color:#fff;border-bottom-right-radius:6px;}
.bub.card-bub{background:#fff;padding:0;overflow:hidden;width:88%;max-width:300px;}
.typing{display:inline-flex;gap:4px;align-items:center;padding:13px 16px;}
.typing i{width:7px;height:7px;border-radius:99px;background:var(--pp-muted);animation:pp-dot 1.2s infinite;}
.typing i:nth-child(2){animation-delay:.15s;}.typing i:nth-child(3){animation-delay:.3s;}
.quickreplies{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px;}
.quickreplies button{background:#fff;border:1.4px solid var(--pp-line-cool);color:var(--pp-turquoise-deep);
  font-weight:700;font-size:13px;padding:9px 13px;border-radius:99px;}
.chatbar{display:flex;gap:9px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff;box-shadow:0 -1px 0 var(--pp-line);}
.chatbar input{flex:1;border:none;outline:none;background:#EFF2F4;border-radius:99px;padding:12px 16px;font-size:14px;}

/* ---------- Tracking map ---------- */
.map{position:relative;height:230px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,#DCEFEA,#CFE6E8);box-shadow:inset 0 0 0 1px var(--pp-line-cool);}
.map .road{position:absolute;background:#fff;opacity:.8;}
.map .pin{position:absolute;width:38px;height:38px;border-radius:99px 99px 99px 4px;
  transform:rotate(45deg);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-md);}
.map .pin [data-lucide]{transform:rotate(-45deg);color:#fff;width:18px;height:18px;}
.map .pin.dest{background:var(--pp-ink);}
.map .pin.live{background:var(--pp-turquoise);animation:pp-pulse 1.8s infinite;}
.map .track{position:absolute;border-top:3px dashed var(--pp-turquoise-deep);opacity:.7;}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:9999;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:var(--pp-ink);color:#fff;padding:12px 18px;border-radius:99px;font-weight:600;
  font-size:14px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:9px;animation:pp-pop .3s ease;}
.toast [data-lucide]{width:18px;height:18px;color:#5BE8A0;}

/* ---------- Bottom sheet / modal ---------- */
.sheet-mask{position:absolute;inset:0;background:rgba(15,30,38,.42);z-index:40;
  display:flex;align-items:flex-end;animation:pp-fade .25s;}
.sheet{background:#fff;width:100%;border-radius:26px 26px 0 0;padding:10px 20px 24px;
  max-height:88%;overflow-y:auto;animation:pp-fade .3s;}
.sheet .grip{width:42px;height:5px;border-radius:99px;background:var(--pp-line);margin:6px auto 14px;}

/* ---------- Empty state ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 20px;}
.empty img{width:150px;}

/* ---------- Pulso · mascota animada (Veo · WebP alfa) ---------- */
.pp-mascot{position:relative;display:inline-block;line-height:0;}
.pp-mascot .m-anim{width:100%;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));}

/* ---------- Captura de foto → avatar 3D ---------- */
.pp-photo{position:relative;width:128px;height:128px;border-radius:50%;margin:0 auto;
  background:var(--pp-mint);display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:inset 0 0 0 2px var(--pp-turquoise);cursor:pointer;transition:transform .15s;}
.pp-photo:active{transform:scale(.97);}
.pp-photo .ph-empty{display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--pp-turquoise-deep);font-weight:700;font-size:11px;text-align:center;}
.pp-photo .ph-empty [data-lucide]{width:30px;height:30px;}
.pp-photo img{width:100%;height:100%;object-fit:cover;}
.pp-gen-loading{position:absolute;inset:0;background:rgba(255,255,255,.88);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:9px;backdrop-filter:blur(2px);}
.pp-gen-loading .sp{width:30px;height:30px;border:3px solid var(--pp-mint);
  border-top-color:var(--pp-turquoise);border-radius:50%;animation:pp-spin .8s linear infinite;}
.pp-gen-loading small{font-size:10px;color:var(--pp-turquoise-deep);font-weight:800;letter-spacing:.02em;}
.pp-gen-badge{position:absolute;bottom:5px;right:5px;width:32px;height:32px;border-radius:50%;
  background:var(--grad-teal);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-md);border:2px solid #fff;}
.pp-gen-badge [data-lucide]{width:16px;height:16px;}