/* ==========================================================================
   Karmapet — Área de cliente  ·  panel.css
   Todo va scopeado bajo #kpapp para no chocar con el tema de WordPress.
   ========================================================================== */
#kpapp,#kpgate{
  --g1:#1C463C;--g2:#2F6B5C;--g3:#C98A3E;
  --mint:#FBF9F3;--mint2:#EAF1EB;--mint3:#BCD7CB;
  --ink:#17302A;--soft:#3C5A52;
  --mu:rgba(20,42,36,.65);--mu2:rgba(20,42,36,.28);
  --border:rgba(47,107,92,.14);--borderM:rgba(47,107,92,.24);
  --ok:#22a06b;
  --fd:'Spectral',Georgia,serif;--fs:'Figtree',sans-serif;
  font-family:var(--fs);color:var(--ink);
}
#kpapp *,#kpapp *::before,#kpapp *::after,#kpgate *{box-sizing:border-box}
#kpapp button{font-family:inherit;cursor:pointer}
#kpapp .paw-ico{display:inline-block;vertical-align:-.12em}

/* ---------- GATE (no logueado / no socio) ---------- */
#kpgate{max-width:520px;margin:3rem auto;background:#fff;border:1px solid var(--border);border-radius:20px;padding:2.5rem;text-align:center;box-shadow:0 12px 40px rgba(20,42,36,.08)}
#kpgate .paw-ico{width:2.2rem;height:2.2rem;fill:var(--g3);margin-bottom:1rem}
#kpgate h2{font-family:var(--fd);font-weight:400;font-size:1.6rem;color:var(--ink);margin:0 0 .5rem}
#kpgate p{color:var(--mu);line-height:1.65;margin:0 0 1.5rem;font-size:.95rem}
#kpgate .kp-btn{display:inline-block;padding:.85rem 1.8rem;background:var(--g2);color:#fff;border-radius:100px;font-weight:600;text-decoration:none;transition:background .2s}
#kpgate .kp-btn:hover{background:var(--g1)}

/* ---------- SHELL ---------- */
#kpapp{display:grid;grid-template-columns:264px 1fr;min-height:80vh;background:var(--mint);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(20,42,36,.08)}
#kpapp .kp-side{background:var(--g1);color:#fff;display:flex;flex-direction:column;padding:1.5rem 1rem}
#kpapp .kp-logo{display:flex;align-items:center;gap:.55rem;font-family:var(--fd);font-size:1.25rem;font-weight:500;padding:.35rem .6rem 1.4rem}
#kpapp .kp-logo .paw-ico{fill:var(--g3);width:1.35rem;height:1.35rem}
#kpapp .kp-nav{display:flex;flex-direction:column;gap:.2rem;flex:1}
#kpapp .kp-navi{display:flex;align-items:center;gap:.8rem;padding:.72rem .85rem;border-radius:12px;font-size:.9rem;font-weight:500;color:rgba(234,241,235,.72);background:none;border:none;text-align:left;width:100%;transition:background .18s,color .18s}
#kpapp .kp-navi svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0}
#kpapp .kp-navi:hover{background:rgba(255,255,255,.06);color:#fff}
#kpapp .kp-navi.active{background:var(--g2);color:#fff}
#kpapp .kp-suser{margin-top:1rem;padding:.85rem;background:rgba(255,255,255,.06);border-radius:14px}
#kpapp .kp-sutop{display:flex;align-items:center;gap:.7rem}
#kpapp .kp-suav{width:38px;height:38px;border-radius:50%;background:var(--g3);color:#3A2410;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
#kpapp .kp-suname{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kpapp .kp-suplan{font-size:.7rem;color:var(--mint3)}
#kpapp .kp-logout{margin-top:.7rem;display:block;text-align:center;width:100%;padding:.5rem;border:1px solid rgba(255,255,255,.16);background:none;color:rgba(234,241,235,.85);border-radius:10px;font-size:.78rem;font-weight:500;text-decoration:none;transition:background .2s}
#kpapp .kp-logout:hover{background:rgba(255,255,255,.08)}

#kpapp .kp-main{display:flex;flex-direction:column;min-width:0}
#kpapp .kp-top{position:sticky;top:0;z-index:20;background:rgba(251,249,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:1.15rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
#kpapp .kp-top h1{font-family:var(--fd);font-weight:400;font-size:1.4rem;color:var(--ink);line-height:1.15;margin:0}
#kpapp .kp-top .sub{font-size:.82rem;color:var(--mu);margin-top:.15rem}
#kpapp .kp-tr{display:flex;align-items:center;gap:.7rem}
#kpapp .kp-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:100px;font-size:.74rem;font-weight:600;background:rgba(34,160,107,.12);color:#1c7d54}
#kpapp .kp-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
#kpapp .kp-save{padding:.65rem 1.35rem;background:var(--g2);color:#fff;border:none;border-radius:100px;font-size:.85rem;font-weight:600;box-shadow:0 6px 16px rgba(27,61,53,.2);transition:background .2s,transform .12s}
#kpapp .kp-save:hover{background:var(--g1);transform:translateY(-1px)}
#kpapp .kp-burger{display:none;background:none;border:none;padding:.3rem}
#kpapp .kp-burger svg{width:24px;height:24px;stroke:var(--g1);fill:none;stroke-width:2}

#kpapp .kp-content{padding:2rem;max-width:900px;width:100%}
#kpapp .kp-view{display:none;animation:kpfade .4s ease}
#kpapp .kp-view.on{display:block}
@keyframes kpfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- cards & fields ---------- */
#kpapp .kp-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.6rem}
#kpapp .kp-card + .kp-card{margin-top:1.25rem}
#kpapp .kp-ch{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.35rem}
#kpapp .kp-ci{width:40px;height:40px;border-radius:11px;background:var(--mint2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#kpapp .kp-ci svg{width:20px;height:20px;stroke:var(--g2);fill:none;stroke-width:1.9}
#kpapp .kp-ch h3{font-family:var(--fd);font-weight:500;font-size:1.15rem;color:var(--ink);line-height:1.2;margin:0}
#kpapp .kp-ch p{font-size:.82rem;color:var(--mu);margin:.2rem 0 0;line-height:1.5}
#kpapp .kp-g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#kpapp .kp-fld{margin-bottom:1rem}
#kpapp .kp-fld label{display:block;font-size:.78rem;font-weight:500;color:var(--soft);margin-bottom:.4rem}
#kpapp .kp-fld input,#kpapp .kp-fld select,#kpapp .kp-fld textarea{width:100%;padding:.75rem .9rem;border:1.5px solid var(--border);border-radius:11px;font-family:var(--fs);font-size:.9rem;color:var(--ink);background:var(--mint);outline:none;transition:border-color .2s,box-shadow .2s}
#kpapp .kp-fld textarea{resize:vertical;min-height:82px;line-height:1.6}
#kpapp .kp-fld input:focus,#kpapp .kp-fld select:focus,#kpapp .kp-fld textarea:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(47,107,92,.1);background:#fff}
#kpapp .kp-hint{font-size:.75rem;color:var(--mu);margin-top:.35rem;line-height:1.5}

/* stats */
#kpapp .kp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
#kpapp .kp-stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.15rem}
#kpapp .kp-stat .k{font-size:.7rem;color:var(--mu);text-transform:uppercase;letter-spacing:.08em}
#kpapp .kp-stat .v{font-family:var(--fd);font-size:1.3rem;color:var(--ink);margin-top:.2rem;line-height:1.1}
#kpapp .kp-stat .s{font-size:.75rem;color:var(--g2);font-weight:500;margin-top:.25rem}
#kpapp .kp-greet{font-family:var(--fd);font-weight:300;font-size:1.8rem;color:var(--ink);margin:0 0 .3rem}
#kpapp .kp-greet em{font-style:italic;color:var(--g2)}
#kpapp .kp-greetsub{color:var(--mu);font-size:.92rem;margin:0 0 1.6rem}

/* segmented */
#kpapp .kp-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
#kpapp .kp-opt{border:1.5px solid var(--border);background:var(--mint);border-radius:13px;padding:.9rem .6rem;text-align:center;transition:all .18s;font-family:inherit}
#kpapp .kp-opt:hover{border-color:var(--mint3)}
#kpapp .kp-opt.sel{border-color:var(--g2);background:#fff;box-shadow:0 0 0 3px rgba(47,107,92,.1)}
#kpapp .kp-opt .t{font-weight:600;font-size:.88rem;color:var(--ink)}
#kpapp .kp-opt .s{font-size:.71rem;color:var(--mu);margin-top:.15rem}
#kpapp .kp-opt.sel .t{color:var(--g1)}

/* slider */
#kpapp input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:var(--mint2);outline:none;margin-top:.3rem}
#kpapp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--g2);border:3px solid #fff;box-shadow:0 2px 6px rgba(27,61,53,.35);cursor:pointer}
#kpapp input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--g2);border:3px solid #fff;cursor:pointer}
#kpapp .kp-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mu);margin-top:.5rem}

/* toggles */
#kpapp .kp-tgl{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:12px;background:var(--mint);margin-bottom:.7rem}
#kpapp .kp-tgl .l{display:flex;align-items:center;gap:.75rem}
#kpapp .kp-tgl .l svg{width:19px;height:19px;stroke:var(--g2);fill:none;stroke-width:1.8}
#kpapp .kp-tgl .tt{font-weight:500;font-size:.88rem;color:var(--ink)}
#kpapp .kp-tgl .ts{font-size:.75rem;color:var(--mu)}
#kpapp .kp-sw{position:relative;width:44px;height:25px;flex-shrink:0}
#kpapp .kp-sw input{opacity:0;width:0;height:0}
#kpapp .kp-sw .track{position:absolute;inset:0;background:var(--mu2);border-radius:100px;transition:background .2s}
#kpapp .kp-sw .track::before{content:'';position:absolute;left:3px;top:3px;width:19px;height:19px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
#kpapp .kp-sw input:checked + .track{background:var(--g2)}
#kpapp .kp-sw input:checked + .track::before{transform:translateX(19px)}

/* PAI banner/summary/timeline */
#kpapp .kp-banner{display:flex;gap:.9rem;padding:1.1rem 1.25rem;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;border-radius:16px;margin-bottom:1.4rem}
#kpapp .kp-banner svg{width:22px;height:22px;stroke:var(--g3);fill:none;stroke-width:1.9;flex-shrink:0;margin-top:.1rem}
#kpapp .kp-banner p{font-size:.86rem;line-height:1.6;color:rgba(234,241,235,.92);margin:0}
#kpapp .kp-banner strong{color:#fff}
#kpapp .kp-sum{margin-top:1.3rem;padding:1.1rem 1.25rem;background:var(--mint2);border-radius:14px;font-size:.9rem;color:var(--soft);line-height:1.7}
#kpapp .kp-sum b{color:var(--g1);font-weight:600}
#kpapp .kp-timeline{display:flex;align-items:flex-start;gap:.4rem;margin-top:1.4rem;overflow-x:auto;padding-bottom:.3rem}
#kpapp .kp-tls{flex:1;min-width:120px;text-align:center}
#kpapp .kp-tld{width:32px;height:32px;border-radius:50%;background:var(--mint2);color:var(--g2);display:flex;align-items:center;justify-content:center;margin:0 auto .55rem;font-weight:700;font-size:.85rem;box-shadow:0 0 0 2px var(--mint3)}
#kpapp .kp-tls:last-child .kp-tld{background:var(--g3);color:#3A2410;box-shadow:0 0 0 2px var(--g3)}
#kpapp .kp-tlt{font-weight:600;font-size:.82rem;color:var(--ink)}
#kpapp .kp-tlsub{font-size:.73rem;color:var(--mu);margin-top:.15rem;line-height:1.4}

/* contacts */
#kpapp .kp-crow{display:flex;flex-direction:column;gap:.6rem;padding:.8rem;border:1.5px solid var(--border);border-radius:13px;margin-bottom:.7rem;background:var(--mint)}
#kpapp .kp-crow-top,#kpapp .kp-crow-bot{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
#kpapp .kp-crow .ord{width:26px;height:26px;border-radius:8px;background:#fff;color:var(--g1);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
#kpapp .kp-crow input,#kpapp .kp-crow select{flex:1 1 150px;min-width:0;padding:.6rem .7rem;border:1.5px solid var(--border);border-radius:9px;font-family:var(--fs);font-size:.85rem;background:#fff;color:var(--ink);outline:none}
#kpapp .kp-crow input:focus{border-color:var(--g2)}
#kpapp .kp-crow .del{flex:0 0 auto;width:30px;height:30px;border:none;background:none;color:var(--mu);border-radius:8px;font-size:1.2rem;line-height:1;cursor:pointer}
#kpapp .kp-crow .del:hover{background:rgba(220,80,60,.1);color:#c0392b}
#kpapp .kp-cestado{flex:0 0 auto;font-size:.72rem;font-weight:600;padding:.32rem .6rem;border-radius:100px;white-space:nowrap}
#kpapp .kp-est-ok{background:rgba(34,160,107,.14);color:#1c7d54}
#kpapp .kp-est-wait{background:rgba(201,138,62,.16);color:#9a641f}
#kpapp .kp-est-none{background:var(--mint2);color:var(--mu)}
#kpapp .kp-add{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.2rem;border:1.5px dashed var(--borderM);background:none;border-radius:12px;color:var(--g2);font-weight:600;font-size:.85rem;width:100%;justify-content:center;transition:all .2s}
#kpapp .kp-add:hover{border-color:var(--g2);background:var(--mint2)}
#kpapp .kp-add svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
#kpapp .kp-note{font-size:.78rem;color:var(--mu);line-height:1.6;margin-top:1.1rem;padding-left:1rem;border-left:2px solid var(--mint3)}

/* account */
#kpapp .kp-accplan{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem;background:linear-gradient(135deg,var(--g2),var(--g1));border-radius:16px;color:#fff;margin-bottom:1.25rem;flex-wrap:wrap}
#kpapp .kp-accplan .tier{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mint3)}
#kpapp .kp-accplan .name{font-family:var(--fd);font-size:1.4rem;font-weight:400;margin:.15rem 0}
#kpapp .kp-accplan .price{font-size:.84rem;color:rgba(234,241,235,.85)}
#kpapp .kp-accplan a{padding:.7rem 1.3rem;background:var(--g3);color:#3A2410;border:none;border-radius:100px;font-weight:600;font-size:.84rem;text-decoration:none;display:inline-block;transition:transform .12s}
#kpapp .kp-accplan a:hover{transform:translateY(-1px)}

/* toast */
#kp-toast{position:fixed;bottom:1.75rem;left:50%;transform:translateX(-50%) translateY(160%);background:var(--g1,#1C463C);color:#fff;padding:.9rem 1.5rem;border-radius:100px;font-family:'Figtree',sans-serif;font-size:.88rem;font-weight:500;box-shadow:0 12px 40px rgba(20,42,36,.2);z-index:99999;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#kp-toast.show{transform:translateX(-50%) translateY(0)}
#kp-toast.err{background:#a13527}

/* responsive */
@media(max-width:820px){
  #kpapp{grid-template-columns:1fr;position:relative}
  #kpapp .kp-side{position:absolute;top:0;left:0;bottom:0;z-index:50;width:250px;transform:translateX(-102%);transition:transform .3s;border-radius:20px 0 0 20px}
  #kpapp .kp-side.open{transform:translateX(0)}
  #kpapp .kp-burger{display:block}
  #kpapp .kp-content{padding:1.4rem 1.1rem 3rem}
  #kpapp .kp-stats{grid-template-columns:1fr 1fr}
  #kpapp .kp-seg{grid-template-columns:1fr 1fr}
  #kpapp .kp-save .lbl{display:none}
}
@media(max-width:520px){
  #kpapp .kp-g2{grid-template-columns:1fr}
  #kpapp .kp-stats{grid-template-columns:1fr}
}

/* ---------- BAÚL: subida y galería ---------- */
#kpapp .kp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:2.2rem 1.2rem;border:2px dashed var(--borderM);border-radius:14px;background:var(--mint);cursor:pointer;transition:border-color .18s,background .18s}
#kpapp .kp-drop:hover,#kpapp .kp-drop.drag{border-color:var(--g2);background:var(--mint2)}
#kpapp .kp-drop svg{width:34px;height:34px;stroke:var(--g2);fill:none;stroke-width:1.7}
#kpapp .kp-dropt{font-size:.92rem;color:var(--ink);font-weight:500}
#kpapp .kp-dropt span{color:var(--g2);text-decoration:underline}
#kpapp .kp-drops{font-size:.75rem;color:var(--mu)}
#kpapp .kp-upbar{height:6px;border-radius:100px;background:var(--mint2);overflow:hidden;margin-top:.9rem}
#kpapp .kp-upbar-in{height:100%;width:0;background:var(--g2);transition:width .2s}
#kpapp .kp-empty{margin-top:1rem;font-size:.85rem;color:var(--mu);text-align:center}
#kpapp .kp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem;margin-top:1.1rem}
#kpapp .kp-gitem{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--mint2);border:1px solid var(--border);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
#kpapp .kp-gitem img,#kpapp .kp-gitem video{width:100%;height:100%;object-fit:cover;display:block}
#kpapp .kp-gitem .kp-audio{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.7rem;width:100%}
#kpapp .kp-gitem .kp-audio svg{width:30px;height:30px;stroke:var(--g2);fill:none;stroke-width:1.7}
#kpapp .kp-gitem .kp-audio audio{width:100%}
#kpapp .kp-gdel{position:absolute;top:6px;right:6px;width:26px;height:26px;border:none;border-radius:50%;background:rgba(20,42,36,.72);color:#fff;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}
#kpapp .kp-gdel:hover{background:#b3261e}