/* ============================================================
   PetZone — petzone.css
   Estilo cálido turquesa + coral. Acompaña a Bootstrap 5.
   ============================================================ */
:root{
  --pz-bg:#F7F5F0; --pz-surface:#FFFFFF; --pz-surface-2:#FBF8F2;
  --pz-ink:#1F3A3D; --pz-ink-2:#2C4A4D; --pz-muted:#6B7773; --pz-muted-2:#94A09C;
  --pz-line:#E8E3DA;
  --pz-primary:#2BB3A3; --pz-primary-deep:#0F8478; --pz-primary-soft:#D9F1ED;
  --pz-accent:#FF7A59; --pz-accent-deep:#E55C3C; --pz-accent-soft:#FFE4DA;
  --pz-warm:#FCD9B6; --pz-success:#2EAA6B; --pz-warn:#F2A93B; --pz-danger:#E04848;
  --pz-r:16px; --pz-r-lg:24px;
  --pz-font:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  --pz-display:"Fraunces","Plus Jakarta Sans",serif;
  --pz-sh-sm:0 1px 2px rgba(31,58,61,.06),0 2px 6px rgba(31,58,61,.04);
  --pz-sh-md:0 4px 10px rgba(31,58,61,.06),0 12px 24px rgba(31,58,61,.06);
  --pz-sh-coral:0 8px 22px rgba(255,122,89,.35);
}
*{box-sizing:border-box}
body{
  font-family:var(--pz-font); color:var(--pz-ink);
  background:
    radial-gradient(1200px 600px at 8% -8%, #FFE9DD 0%, transparent 60%),
    radial-gradient(1000px 700px at 108% 6%, #D9F1ED 0%, transparent 55%),
    #EFE9DD;
  margin:0; -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:var(--pz-primary-deep);text-decoration:none}
a:hover{color:var(--pz-primary)}
.fr{font-family:var(--pz-display)}
.text-accent{color:var(--pz-accent)!important}
.text-primary-deep{color:var(--pz-primary-deep)!important}
.text-muted-pz{color:var(--pz-muted)!important}

/* ---------- Navbar ---------- */
.pz-nav{
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--pz-line); position:sticky; top:0; z-index:1030;
}
.pz-brand{display:flex;align-items:center;gap:10px;font-family:var(--pz-display);font-weight:700;font-size:20px;color:var(--pz-ink)}
.pz-brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pz-primary),var(--pz-primary-deep));box-shadow:0 6px 16px rgba(43,179,163,.3)}
.pz-navlink{font-size:14px;font-weight:600;color:var(--pz-ink-2);padding:6px 2px;border-bottom:2px solid transparent}
.pz-navlink:hover{color:var(--pz-ink)}
.pz-navlink.active{color:var(--pz-ink);border-bottom-color:var(--pz-accent)}
.pz-badge-dot{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--pz-accent);border:2px solid #fff}

/* ---------- Buttons ---------- */
.btn-coral{background:var(--pz-accent);color:#fff;border:none;border-radius:999px;font-weight:600;box-shadow:var(--pz-sh-coral)}
.btn-coral:hover{background:var(--pz-accent-deep);color:#fff}
.btn-teal{background:var(--pz-primary);color:#fff;border:none;border-radius:999px;font-weight:600}
.btn-teal:hover{background:var(--pz-primary-deep);color:#fff}
.btn-ghostpz{background:#fff;color:var(--pz-ink);border:1px solid var(--pz-line);border-radius:999px;font-weight:600}
.btn-ghostpz:hover{background:var(--pz-surface-2);color:var(--pz-ink)}
.btn-darkpz{background:var(--pz-ink);color:#fff;border:none;border-radius:999px;font-weight:600}
.btn-darkpz:hover{background:#142729;color:#fff}
.rounded-pill-pz{border-radius:999px}

/* ---------- Cards ---------- */
.pz-card{background:var(--pz-surface);border:1px solid var(--pz-line);border-radius:var(--pz-r-lg);box-shadow:var(--pz-sh-sm)}
.pz-card-pad{padding:20px}
.pz-card-hover{transition:transform .12s,box-shadow .15s}
.pz-card-hover:hover{transform:translateY(-3px);box-shadow:var(--pz-sh-md)}

/* ---------- Chips / badges ---------- */
.pz-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--pz-line);font-size:12px;font-weight:600;color:var(--pz-ink-2)}
.pz-chip.teal{background:var(--pz-primary-soft);color:var(--pz-primary-deep);border-color:transparent}
.pz-chip.coral{background:var(--pz-accent-soft);color:var(--pz-accent-deep);border-color:transparent}
.pz-chip.warm{background:var(--pz-warm);color:#7E4B1A;border-color:transparent}
.pz-chip.ink{background:var(--pz-ink);color:#fff;border-color:transparent}
.pz-chip.success{background:#DCF2E5;color:#1F7B4A;border-color:transparent}
.pz-chip.warn{background:#FEEFD3;color:#8C5A0E;border-color:transparent}
.pz-chip.danger{background:#FBDADA;color:#962525;border-color:transparent}

/* ---------- Forms ---------- */
.pz-label{font-size:12px;font-weight:600;color:var(--pz-muted);margin-bottom:6px;display:block}
.pz-input,.form-control,.form-select{border:1px solid var(--pz-line);border-radius:12px;padding:11px 14px;font-size:14px}
.pz-input:focus,.form-control:focus,.form-select:focus{border-color:var(--pz-primary);box-shadow:0 0 0 4px var(--pz-primary-soft)}

/* ---------- Pet photo / placeholder ---------- */
.pz-photo{width:100%;height:100%;object-fit:cover;display:block}
.pz-ph{width:100%;height:100%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--pz-warm),var(--pz-accent-soft));font-family:var(--pz-display)}

/* ---------- Hero ---------- */
.pz-hero-title{font-family:var(--pz-display);font-weight:600;letter-spacing:-.02em;line-height:1.03}
.pz-section-title{font-family:var(--pz-display);font-weight:600;letter-spacing:-.01em}

/* ---------- Map ---------- */
#map,.pz-map{width:100%;border-radius:var(--pz-r);overflow:hidden;z-index:1}
.leaflet-container{font-family:var(--pz-font)}

/* ---------- Swipe ---------- */
.swipe-stage{position:relative;max-width:380px;margin:0 auto;height:540px}
.swipe-card{position:absolute;inset:0;background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:0 12px 30px rgba(31,58,61,.12),0 30px 60px rgba(31,58,61,.08);border:1px solid var(--pz-line);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.swipe-card.leaving-left{transform:translate(-140%,20px) rotate(-22deg);opacity:0}
.swipe-card.leaving-right{transform:translate(140%,20px) rotate(22deg);opacity:0}
.swipe-card.back1{transform:translateY(14px) scale(.94);opacity:.95}
.swipe-card.back2{transform:translateY(28px) scale(.88);opacity:.8}
.swipe-actions{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:18px}
.swipe-btn{border:none;background:#fff;box-shadow:var(--pz-sh-md);border-radius:999px;display:grid;place-items:center;cursor:pointer}

/* ---------- Chat ---------- */
.chat-wrap{display:grid;grid-template-columns:320px 1fr;min-height:560px;background:#fff;border-radius:var(--pz-r-lg);overflow:hidden;border:1px solid var(--pz-line)}
.chat-list{border-right:1px solid var(--pz-line);overflow-y:auto;max-height:640px}
.chat-item{padding:14px 16px;display:flex;gap:12px;align-items:center;cursor:pointer;border-bottom:1px solid #f0ece3}
.chat-item.active{background:var(--pz-primary-soft)}
.bubble{max-width:75%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.4;margin-bottom:8px}
.bubble.me{background:var(--pz-primary);color:#fff;border-bottom-right-radius:6px;margin-left:auto}
.bubble.them{background:#fff;border:1px solid var(--pz-line);border-bottom-left-radius:6px}

/* ---------- Avatar ---------- */
.pz-avatar{border-radius:50%;overflow:hidden;background:linear-gradient(160deg,var(--pz-warm),var(--pz-accent-soft));display:grid;place-items:center;color:#fff;font-weight:700;flex-shrink:0}
.pz-avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- Misc ---------- */
.pz-alertbox{background:#FEEFD3;border-radius:12px;padding:10px 14px;color:#8C5A0E;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.pz-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1080;background:var(--pz-ink);color:#fff;padding:12px 20px;border-radius:999px;box-shadow:var(--pz-sh-md);font-size:14px;font-weight:600}
.divider{height:1px;background:var(--pz-line);margin:14px 0}
footer.pz-foot{border-top:1px solid var(--pz-line);background:rgba(255,255,255,.6);padding:24px 0;margin-top:48px;color:var(--pz-muted);font-size:13px}