/* ============================================================
   KASITHA · kx-stitch-profile.css · v2
   Piel del perfil según la maqueta (16-jul). Lecciones fijadas:
   media queries PROPIAS para el layout de escritorio; nada de
   utilidades ajenas. Paleta/tipografía de la piel Stitch
   (Fraunces autoalojada, granates de la marca).
   ============================================================ */

.kx-stitch-profile{
  --stzp-serif:'Fraunces',Georgia,serif;
  --stzp-sans:Inter,system-ui,sans-serif;
  --stzp-ink:#1d1b18;
  --stzp-soft:#6f675e;
  --stzp-mute:#9b9187;
  --stzp-hair:rgba(45,32,22,.12);
  --stzp-red:#a30028;
  --stzp-red-2:#c8233c;
  --stzp-tint:#fbe9e6;
  --stzp-beige:#f6efe7;
  --stzp-green:#1c8a4c;
}

/* ---------- cabecera (móvil: centrada como la maqueta) ---------- */
.kx-stitch-profile .stz-head{text-align:center;padding:10px 0 4px;background:transparent}
.kx-stitch-profile .profile-head{background:transparent!important;box-shadow:none}
.kx-stitch-profile .stz-head .av{width:88px;height:88px;margin:0 auto 12px;font-size:34px}
.kx-stitch-profile .stz-head h2{font:600 26px/1.15 var(--stzp-serif);letter-spacing:-.01em;color:var(--stzp-ink);margin:2px 0 4px}
.kx-stitch-profile .stz-head p.small{font:400 13.5px var(--stzp-sans);color:var(--stzp-soft);margin:0 0 2px}
.kx-stitch-profile .kx-profile-email{margin:0 0 8px!important;color:var(--stzp-mute)!important;font-size:14px!important}

/* conmutador BUSCO (solo-app): centrado bajo la cabecera, y el
   hint pasa a fluir en bloque para no pisar contenido */
.kx-stitch-profile .kxh-row{display:flex;flex-wrap:wrap;justify-content:center;position:relative;margin:6px 0 14px}
.kx-stitch-profile .kxh-hint{position:relative;top:auto;left:auto;right:auto;flex:1 1 100%;display:block;margin:10px auto 0;max-width:360px}
.kx-stitch-profile .kxh-hint::before,
.kx-stitch-profile .kxh-hint::after{display:none!important;content:none!important}

/* ---------- secciones como tarjetas ---------- */
.kx-stitch-profile .profile-section{background:#fff;border:1px solid var(--stzp-hair);border-radius:18px;padding:16px 18px;margin:0 0 14px}
.kx-stitch-profile .ps-head h3{font:600 19px var(--stzp-serif);letter-spacing:-.01em;color:var(--stzp-ink)}
.kx-stitch-profile .ps-head .ps-action{font:700 13px var(--stzp-sans);color:var(--stzp-red)}

/* ---------- Ajustes de cuenta: tarjeta-menú (maqueta móvil) ---------- */
.kx-stitch-profile .stz-ajustes{background:transparent;border:0;padding:0}
.kx-stitch-profile .stz-ajustes > .ps-head{margin:4px 2px 10px;border:0;padding-bottom:0}
.kx-stitch-profile .stz-menu{background:#fff;border:1px solid var(--stzp-hair);border-radius:18px;overflow:hidden}
.kx-stitch-profile .stz-menu-item{display:block;width:100%;background:#fff;border:0;border-top:1px solid var(--stzp-hair);padding:0;margin:0;text-align:left}
.kx-stitch-profile .stz-menu-item:first-child{border-top:0}
.kx-stitch-profile .stz-menu-face{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;cursor:pointer;background:#fff;border:0;text-align:left;list-style:none}
.kx-stitch-profile .stz-menu-face::-webkit-details-marker{display:none}
.kx-stitch-profile .stz-menu-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--stzp-tint);color:var(--stzp-red);flex:none}
.kx-stitch-profile .stz-menu-tt{flex:1;min-width:0}
.kx-stitch-profile .stz-menu-tt b{display:block;font:500 17px var(--stzp-serif);color:var(--stzp-ink)}
.kx-stitch-profile .stz-menu-tt i{display:block;font:400 12.5px var(--stzp-sans);font-style:normal;color:var(--stzp-soft);margin-top:2px}
.kx-stitch-profile .stz-menu-arrow{color:var(--stzp-mute);font-size:22px;line-height:1;transition:transform .18s ease}
.kx-stitch-profile details.stz-acc[open] .stz-menu-arrow{transform:rotate(90deg)}
.kx-stitch-profile .stz-menu-body{padding:0 16px 14px 70px}
.kx-stitch-profile .stz-menu-body .data-list{margin-top:2px}

/* ---------- tarjeta de plan (maqueta) ---------- */
.kx-stitch-profile .stz-plan{background:var(--stzp-beige);border:1px solid var(--stzp-hair);border-radius:20px;padding:20px}
.kx-stitch-profile .stz-plan > .ps-head{margin-bottom:2px}
.kx-stitch-profile .stz-plan > .ps-head h3{display:none} /* el eyebrow de la tarjeta ya titula */
.kx-stitch-profile .stz-plan-eyebrow{display:block;font:700 12px var(--stzp-sans);text-transform:uppercase;letter-spacing:.14em;color:var(--stzp-red)}
.kx-stitch-profile .stz-plan-title{margin:6px 0 16px;font:600 30px/1.05 var(--stzp-serif);letter-spacing:-.02em;color:var(--stzp-ink)}
.kx-stitch-profile .stz-plan-list{display:grid;grid-template-columns:1fr;gap:12px}
.kx-stitch-profile .stz-plan-item{display:flex;align-items:center;gap:12px;font:500 15.5px var(--stzp-serif);color:var(--stzp-ink)}
.kx-stitch-profile .stz-plan-ico{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--stzp-green);color:var(--stzp-green);flex:none;background:#fff}
.kx-stitch-profile .stz-plan-lock{color:var(--stzp-soft)}
.kx-stitch-profile .stz-plan-lock .stz-plan-ico{border-color:var(--stzp-hair);color:var(--stzp-mute)}
.kx-stitch-profile .stz-plan-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:14px;border:0;border-radius:14px;background:var(--stzp-red-2);color:#fff;font:700 15.5px var(--stzp-sans);cursor:pointer}
.kx-stitch-profile .stz-plan .ps-head .ps-action{position:relative;z-index:1}

/* ---------- banner de ayuda (maqueta: rosa + botón outline) ---------- */
.kx-stitch-profile .stz-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;background:var(--stzp-tint);border-radius:18px;padding:20px;margin:0 0 14px}
.kx-stitch-profile .stz-help-txt b{display:block;font:600 19px var(--stzp-serif);color:var(--stzp-red);letter-spacing:-.01em}
.kx-stitch-profile .stz-help-txt span{display:block;font:400 13.5px var(--stzp-sans);color:var(--stzp-soft);margin-top:4px;max-width:46ch}
.kx-stitch-profile .stz-help-cta{padding:12px 18px;border:1.5px solid var(--stzp-red);border-radius:12px;background:transparent;color:var(--stzp-red);font:700 14px var(--stzp-sans);cursor:pointer;white-space:nowrap}

/* ---------- cerrar sesión (móvil: botón outline; maqueta) ---------- */
.kx-stitch-profile .stz-micuenta{background:transparent;border:0;padding:0}
.kx-stitch-profile .stz-logout-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border:1.5px solid var(--stzp-hair);border-radius:16px;background:transparent;color:var(--stzp-red);font:700 15.5px var(--stzp-serif);cursor:pointer}
.kx-stitch-profile .kx-stz-logout{display:none} /* el lateral solo existe en escritorio */

/* ============ escritorio ============ */
@media (min-width:960px){
  .kx-stitch-profile .kx-stz-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start;max-width:1160px;margin:8px auto 40px;padding:0 8px}
  .kx-stitch-profile .kx-stz-side{position:sticky;top:24px;border:1px solid var(--stzp-hair);border-radius:18px;padding:30px 22px 18px;background:#fff}
  .kx-stitch-profile .kx-stz-side .stz-head{padding:0}
  .kx-stitch-profile .kx-stz-side .av{width:96px;height:96px}
  .kx-stitch-profile .kx-stz-side h2{font-size:24px}
  .kx-stitch-profile .kx-stz-logout{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:12px 0 4px;border:0;border-top:1px solid var(--stzp-hair);background:transparent;color:var(--stzp-red);font:700 14.5px var(--stzp-sans);cursor:pointer}
  .kx-stitch-profile .stz-micuenta{display:none} /* en escritorio el logout vive en la tarjeta lateral */
  .kx-stitch-profile .kx-stz-main{display:flex;flex-direction:column;gap:2px;min-width:0}
  .kx-stitch-profile .kxh-row{justify-content:flex-start;margin-top:0}
  .kx-stitch-profile .kxh-hint{margin-left:0}

  /* Ajustes de cuenta: grid 2×2 de tarjetas (maqueta escritorio) */
  .kx-stitch-profile .stz-menu{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:transparent;border:0;border-radius:0;overflow:visible}
  .kx-stitch-profile .stz-menu-item{border:1px solid var(--stzp-hair);border-radius:18px;background:#fff}
  .kx-stitch-profile .stz-menu-item:first-child{border-top:1px solid var(--stzp-hair)}
  .kx-stitch-profile .stz-menu-face{flex-wrap:wrap;align-items:flex-start;padding:20px;gap:12px}
  .kx-stitch-profile .stz-menu-ico{width:44px;height:44px}
  .kx-stitch-profile .stz-menu-arrow{margin-left:auto}
  .kx-stitch-profile .stz-menu-tt{flex:1 1 100%;order:3}
  .kx-stitch-profile .stz-menu-tt b{font-size:21px}
  .kx-stitch-profile .stz-menu-tt i{font-size:13px;margin-top:4px}
  .kx-stitch-profile .stz-menu-body{padding:0 20px 16px}

  /* plan: checklist a 2 columnas (maqueta) y CTA a su ancho */
  .kx-stitch-profile .stz-plan-list{grid-template-columns:1fr 1fr;column-gap:26px}
  .kx-stitch-profile .stz-plan-cta{width:auto;padding:13px 26px}
}

/* v2.1 · ajustes del feedback (16-jul tarde) */
/* (2) conmutador BUSCO: aire respecto al chip Particular y piel Stitch
   (burbuja negra fuera, bordes hairline, sombras suaves) */
.kx-stitch-profile .stz-head{padding-bottom:12px}
.kx-stitch-profile .kxh-row{margin:16px auto 18px}
.kx-stitch-profile .kxh-chip{background:#fff;border:1px solid var(--stzp-hair);box-shadow:none;padding:6px 14px 6px 6px;gap:10px}
.kx-stitch-profile .kxh-av{background:var(--stzp-tint);color:var(--stzp-red)}
.kx-stitch-profile .kxh-av i{background:var(--stzp-red);border-color:#fff}
.kx-stitch-profile .kxh-tx small{font:700 10.5px var(--stzp-sans);text-transform:uppercase;letter-spacing:.12em;color:var(--stzp-red)}
.kx-stitch-profile .kxh-tx b{font:600 15px var(--stzp-sans);color:var(--stzp-ink)}
.kx-stitch-profile .kxh-chev{color:var(--stzp-mute)}
.kx-stitch-profile .kxh-add{width:40px;height:40px;background:var(--stzp-red-2);box-shadow:none}
/* (3) chips de "Nivel de encaje": desplazable pero SIN barra visible */
.kx-stitch-profile .stz-chips{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.kx-stitch-profile .stz-chips::-webkit-scrollbar{display:none;width:0;height:0}

/* v2.5 · el + del sombrero recupera su pulso (descubribilidad), en clave Stitch */
.kx-stitch-profile .kxh-add.kxh-pulse{animation:stz-hat-pulse 2.2s ease-out infinite}
@keyframes stz-hat-pulse{
  0%{box-shadow:0 0 0 0 rgba(200,35,60,.45)}
  70%{box-shadow:0 0 0 12px rgba(200,35,60,0)}
  100%{box-shadow:0 0 0 0 rgba(200,35,60,0)}
}