/* ═══ Mi perfil · estilos ═══ */

.pf-hero{position:relative;padding:clamp(48px,9vh,110px) var(--pad-x) clamp(32px,5vh,56px)}
.pf-hero::before{
  content:'';position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--grano),var(--grad-h);background-size:180px,100% 100%;
}
.pf-id{display:flex;align-items:flex-start;gap:clamp(1.4rem,3vw,2.6rem);flex-wrap:wrap}
.pf-av-b{position:relative;flex-shrink:0;text-align:center}
.pf-av-b .av{transition:opacity .25s}
.pf-av-b:hover .av{opacity:.8}
.pf-av-e{
  display:block;margin-top:.7rem;font-family:var(--f-display);font-size:.72rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey);transition:color .2s;
}
.pf-av-b:hover .pf-av-e{color:var(--black)}
.pf-id-c{flex:1;min-width:260px}

.pf-nombre{
  font-family:var(--f-display);font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;letter-spacing:-.05em;line-height:.95;
  cursor:pointer;display:inline-flex;align-items:baseline;gap:.6rem;
}
.pf-nombre i,.pf-frase i{font-style:normal;font-size:.4em;color:var(--grey);transition:color .2s}
.pf-nombre:hover i,.pf-frase:hover i{color:var(--orange)}
.pf-frase{
  font-family:var(--f-serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.4;color:var(--black);
  max-width:46ch;margin-top:.8rem;cursor:pointer;display:inline-flex;align-items:baseline;gap:.6rem;
}
.pf-frase.vacia{color:var(--grey)}
.pf-colores{margin-top:1.4rem}

/* Las pestañas usan la barra de acciones del núcleo */
.pf-tab{
  position:relative;display:flex;align-items:center;height:38px;padding:0 1rem;white-space:nowrap;border-radius:999px;
  font-family:var(--f-display);font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  color:var(--grey);transition:background .25s var(--ease),color .25s var(--ease);
}
.pf-tab:hover{background:var(--hover-warm);color:var(--black)}
.pf-tab.on{background:var(--black);color:var(--white)}
@media(max-width:700px){.pf-tab{height:36px;font-size:.84rem;padding:0 .85rem}}

.pf-cifras{display:flex;gap:clamp(1.6rem,4vw,3.6rem);flex-wrap:wrap;padding-bottom:1rem}
.pf-c{display:flex;flex-direction:column;line-height:1}
.pf-c b{font-family:var(--f-display);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.05em}
.pf-c em{font-style:normal;font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-top:.6rem}

/* La frase destacada: la voz de quien escribe, en Lora sobre papel crema */
.pf-destacado{border-left:3px solid var(--pf,var(--accent));background:var(--cream-note);padding:1.5rem 1.7rem;margin-bottom:.8rem;max-width:70ch}
.pf-destacado-l{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:.7rem}
.pf-destacado p{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.45;letter-spacing:-.01em;white-space:pre-wrap}

.pf-lista{border-top:var(--borde)}
.pf-her{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding:1.4rem .3rem;border-bottom:1px solid var(--line);transition:background .25s var(--ease)}
.pf-her:hover{background:var(--hover-warm)}
.pf-her-c{flex:1;min-width:0;text-align:left}
.pf-her-n{font-family:var(--f-display);font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.04em;display:block}
.pf-her-m{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.pf-barra{display:block;height:4px;border-radius:999px;background:var(--paper);margin-top:1rem;max-width:300px;position:relative;overflow:hidden}
.pf-barra i{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--pf,var(--accent));transition:width .55s var(--ease)}

.pf-her-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.pf-bloques{border-top:var(--borde)}
.pf-bloque{border-bottom:1px solid var(--line);padding:1.4rem 0}
.pf-bloque-h{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.pf-bloque-n{font-family:var(--f-display);font-size:1.1rem;font-weight:700;letter-spacing:-.025em;flex:1}
.pf-bloque-m{font-family:var(--mono);font-size:11px;color:var(--grey)}
.pf-bloque-a{display:flex;gap:.35rem;flex-shrink:0}
.pf-items{margin-top:.9rem;padding-left:.2rem}
.pf-item{display:flex;align-items:center;gap:1rem;padding:.75rem 0;border-top:1px solid var(--line)}
.pf-item-c{flex:1;min-width:0}
.pf-item-c b{font-size:15px;font-weight:400;display:block;line-height:1.4}
.pf-item-c em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--grey);display:block;margin-top:.25rem}
.pf-item-a{display:flex;gap:.3rem;flex-shrink:0}

.pf-exp{border-top:var(--borde);margin-top:1.2rem}
.pf-exp .exp-row{border:none;border-bottom:1px solid var(--line)}
.pf-acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:3rem}

/* Los ejercicios de cada categoría, uno a uno */
.pf-ejs{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}
.pf-ej{
  display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;border:1.5px solid var(--line);background:var(--white);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.pf-ej:hover{border-color:var(--black);background:var(--hover-warm)}
.pf-ej-n{flex:1;min-width:0;font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:-.02em}
.pf-bloque-h .cod{flex-shrink:0}
.pf-bloque-h .vn,.pf-bloque-h .vn-0{margin-left:auto}
.pf-bloque-n{flex:0 1 auto !important}
.pf-her > .mini.go{order:1}
.pf-ejs{order:2;margin-bottom:.4rem}

/* ══════ PERFIL · rediseño ══════
   Tres vistas: Resumen, una por categoría y Tus datos. Todo lo que se baja
   es una de dos cosas, y siempre se ve igual:
   · copia de seguridad (.json, tarjeta negra): para no perderlo
   · texto para IA (icono de bocadillo): para leerlo en un chat */
.pf-sec{margin-top:clamp(40px,7vh,72px)}
.pf-sec > .slabel{margin-bottom:1rem}
.pf-h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;line-height:.95;font-size:clamp(2rem,4vw,3.2rem);margin:.4rem 0 .8rem;text-wrap:balance}
.pf-c b small{font-size:.5em;color:var(--grey);letter-spacing:-.02em}

/* Categorías en el resumen */
.pf-cats{display:grid;gap:1rem}
.pf-cat{border:var(--borde);padding:clamp(18px,2.4vw,28px)}
.pf-cat-h{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.pf-cat-h h3{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.045em;line-height:1}
.pf-cat-h .btn-s{height:40px;font-size:.88rem}
.pf-cat-ruta{display:block;font-family:var(--mono);font-size:12px;color:var(--accent-ink);margin-bottom:.35rem}
.pf-cat .rec-t{margin-bottom:1rem}
.pf-cat .pf-ejs{margin:0}

/* Las dos (o tres) formas */
.pf-formas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,20px);margin-top:1.4rem}
.pf-formas-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-forma{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:clamp(20px,2.4vw,30px);border:var(--borde);background:var(--white)}
.pf-forma-copia{background:var(--black);color:var(--white);border-color:var(--black)}
.pf-forma.pf-forma-copia p,.pf-forma.pf-forma-copia dd{color:#D8D1C9}
.pf-forma-copia .pf-dl dt{color:var(--grey-dark)}
.pf-forma-copia .btn-p{background-color:var(--white);color:var(--black);border-color:var(--white)}
.pf-forma-copia .btn-p:hover{color:var(--white)}
.pf-forma-copia .pf-forma-i{color:var(--orange)}
.pf-forma-n{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);font-family:var(--mono);font-size:12px;opacity:.6}
.pf-forma-i{color:var(--accent-ink)}
.pf-forma-i svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pf-forma-f{align-self:flex-start;font-family:var(--mono);font-size:11px;padding:.15rem .5rem;border-radius:3px;border:1px solid currentColor;opacity:.75}
.pf-forma h3{font-family:var(--f-display);font-weight:800;font-size:1.45rem;letter-spacing:-.04em;line-height:1.05;margin-top:.2rem}
.pf-forma p{font-size:15px;line-height:1.55;color:var(--grey)}
.pf-forma-m{margin-top:auto;padding-top:.8rem;font-family:var(--mono);font-size:11.5px;opacity:.75}
.pf-forma .btn-p,.pf-forma .btn-s{align-self:stretch;margin-top:.4rem}
.pf-forma-alt{align-self:center;font-family:var(--f-display);font-weight:600;font-size:.85rem;text-decoration:underline;text-underline-offset:3px;opacity:.85}
.pf-forma-alt:hover{color:var(--orange);opacity:1}
.pf-dl{display:grid;gap:.15rem;margin-top:.2rem}
.pf-dl dt{font-family:var(--f-display);font-weight:600;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-top:.5rem}
.pf-dl dd{font-size:14.5px;line-height:1.5}
.pf-mas{margin-top:1.2rem;font-size:15px;color:var(--grey)}
.pf-mas button,.pf-leyenda button,.pf-enlace{font-family:var(--f-display);font-weight:700;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:980px){.pf-formas-3{grid-template-columns:1fr}}
@media(max-width:720px){.pf-formas{grid-template-columns:1fr}}

/* Botón «Texto para IA»: siempre el mismo icono y la misma forma */
.pf-bia{
  display:inline-flex;align-items:center;gap:.4rem;height:32px;padding:0 .8rem;border-radius:999px;
  border:1.5px solid var(--line);font-family:var(--f-display);font-weight:600;font-size:.8rem;white-space:nowrap;
  transition:border-color .25s,background .25s,color .25s;
}
.pf-bia svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent-ink)}
.pf-bia:hover{border-color:var(--black);background:var(--hover-warm)}

/* Cabecera de una categoría y su leyenda */
.pf-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.pf-cab .tx{max-width:56ch}
.pf-cab .rec{margin-top:1.2rem}
.pf-leyenda{display:flex;gap:.7rem;align-items:flex-start;margin:2rem 0 1.6rem;padding:1rem 1.2rem;background:var(--paper);border-left:3px solid var(--orange);font-size:14.5px;line-height:1.5;color:var(--grey)}
.pf-leyenda svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:.1rem}
.pf-leyenda b{color:var(--black)}

/* Un ejercicio dentro de la categoría */
.pf-ejs-l{display:grid;gap:.8rem}
.pf-ejb{border:var(--borde);background:var(--white)}
.pf-ejb.vacio{border-style:dashed;border-color:var(--grey-dark)}
.pf-ejb-h{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:1rem 1.1rem;box-shadow:inset 4px 0 0 var(--c,var(--black))}
.pf-ejb-h .cod{flex-shrink:0}
.pf-ejb-n{flex:1;min-width:160px;display:flex;flex-direction:column}
.pf-ejb-n b{font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.035em;line-height:1.1}
.pf-ejb-n em{font-family:var(--f-serif);font-style:italic;font-size:.92rem;color:var(--grey)}
.pf-ejb-a{display:flex;gap:.4rem;align-items:center;margin-left:auto}
.pf-ejb-v{padding:0 1.1rem 1rem;font-size:14px;color:var(--grey)}
.pf-vers{list-style:none;border-top:1px solid var(--line)}
.pf-vers li{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.75rem 1.1rem .75rem 1.6rem;border-bottom:1px solid var(--line)}
.pf-vers li:last-child{border-bottom:none}
.pf-vers-c{flex:1;min-width:160px}
.pf-vers-c b{display:block;font-weight:700;font-size:15px}
.pf-vers-c em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--grey);margin-top:.15rem}
.pf-vers-a{display:flex;gap:.4rem;align-items:center}
.pf-cat-pie{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;
  padding:1.2rem 1.3rem;background:var(--paper);border:1px solid var(--line);
}
.pf-cat-pie b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.pf-cat-pie span{font-size:14px;color:var(--grey)}
.pf-cat-pie .pf-bia{height:40px;padding:0 1.1rem;font-size:.88rem;background:var(--white);border-color:var(--black)}
.pf-cat-pie .pf-bia span{color:var(--black);font-size:inherit}

/* Tus datos: estado del dispositivo y perfiles */
.pf-estado{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:var(--borde)}
.pf-estado > div{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem;border-right:1px solid var(--line)}
.pf-estado > div:last-child{border-right:none}
.pf-estado span{font-family:var(--f-display);font-weight:600;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.pf-estado b{font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.pf-estado em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--grey)}
.pf-estado .mini{align-self:flex-start;margin-top:.2rem}
@media(max-width:760px){.pf-estado{grid-template-columns:1fr 1fr}.pf-estado > div:nth-child(2){border-right:none}.pf-estado > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.pf-uso{font-family:var(--mono);font-size:11px;padding:.2rem .55rem;border-radius:999px;background:var(--orange);color:var(--white)}
.pf-borrar{padding-top:1.6rem;border-top:1.5px solid var(--danger)}
@media(max-width:600px){
  .pf-ejb-a{margin-left:0;width:100%}
  .pf-vers li{padding-left:1.1rem}
}