/* El perfil, su editor y el estilo del nombre.
 *
 * El perfil: el cartel a lo ancho y, debajo, la tarjeta (avatar, nombre, @,
 * insignias, la fila social, la biografía, las redes y el personaje) y las
 * pestañas (Listas, Actividad, Insignias); en el escritorio ancho, la tarjeta a
 * un lado y las pestañas al otro. Sobre el fondo de la página, con las
 * variables del sistema de diseño (capas --hundido < --fondo < --superficie <
 * --elevada, --esp-*, --radio-*, --tam-*); cada red lleva el color de su marca.
 * Las clases van con «pf-» (perfil) y «pfe-» (editor). */

/* Por si a algún tema le falta un token: valores de reserva sin especificidad
   (:where), así cualquier definición de estilo.css o de un tema gana siempre. */
:where(:root) {
  --superficie: color-mix(in srgb, var(--texto) 5%, var(--fondo));
  --elevada: color-mix(in srgb, var(--texto) 9%, var(--fondo));
  --estado-hover: color-mix(in srgb, var(--texto) 7%, transparent);
  --borde: color-mix(in srgb, var(--texto) 14%, transparent);
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px;
  --radio-tarjeta: 12px;
  --tam-xs: 12px; --tam-s: 13px; --tam-m: 15px; --tam-l: 17px; --tam-xl: 20px; --tam-2xl: 24px; --tam-3xl: 32px; --tam-4xl: 44px;
  --rapido: 120ms; --medio: 200ms;
}

/* ---------------------------------------------------------------- el nombre con estilo
   Los colores y la velocidad los pone nombre.mjs como variables (--n1, --n2,
   --n-nucleo, --n-fondo, --n-vel); aquí, cómo se pinta cada efecto. Los
   brillos y sombras van con filter (drop-shadow): rodean las letras y no los
   recorta el overflow del nombre (el text-shadow sí, y salía un recuadro). */
.nombre-estilo[data-efecto] { color: var(--n1, currentColor); }
.nombre-estilo.con-degradado {
  background-image: var(--n-fondo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.nombre-estilo[data-efecto='animado'] {
  background-size: 200% 100%;
  background-repeat: repeat-x;
  animation: nombre-correr var(--n-vel, 5s) linear infinite;
}
@keyframes nombre-correr { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }
/* Con «reducir movimiento», quieto: se ven sus colores de un lado a otro. */
@media (prefers-reduced-motion: reduce) {
  .nombre-estilo[data-efecto='animado'] { animation: none !important; background-size: 134% 100%; background-position: 0 50%; }
}
.nombre-estilo[data-efecto='neon'] {
  color: var(--n-nucleo, #fff);
  filter:
    drop-shadow(0 0 0.02em var(--n1))
    drop-shadow(0 0 0.07em var(--n1))
    drop-shadow(0 0 0.3em color-mix(in srgb, var(--n1) 80%, transparent));
}
.nombre-estilo[data-efecto='contorno'] { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.05em var(--n1); }
.nombre-estilo[data-efecto='pop'] { filter: drop-shadow(0.06em 0.06em 0 var(--n2)); }


/* ---------------------------------------------------------------- el perfil
   Un solo contenedor (.pf) con el acento del perfil (--pf-acento, de su tema). */
.pf {
  --pf-avatar: 96px;
  --pf-aro: 5px;
  --pf-acento: var(--acento);
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding-bottom: var(--esp-12);
}

/* El cartel: arriba del todo, a lo ancho; en el móvil, de borde a borde. */
.pf-cartel {
  position: relative; display: block; aspect-ratio: 3 / 1; overflow: hidden;
  background-color: var(--superficie);
}
.pf > .pf-cartel { margin: calc(-1 * var(--esp-2)) calc(-1 * var(--lado)) 0; }
.pf-cartel.esqueleto { background-color: var(--superficie); }

.pf-cuerpo, .pf-lado, .pf-principal { min-width: 0; }
.pf-cabeza { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pf-avatar-fila {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-3);
  width: 100%; margin-top: calc(var(--pf-avatar) / -2);
}
.pf-avatar {
  position: relative; z-index: 1;
  width: var(--pf-avatar); height: var(--pf-avatar);
  flex: none; border-radius: 50%;
  /* El aro: el color de lo que hay detrás, que lo despega del cartel. */
  box-shadow: 0 0 0 var(--pf-aro) var(--pf-aro-color, var(--fondo));
  background: var(--avatar);
}
.pf-avatar .inicial { font-size: calc(var(--pf-avatar) * 0.4); }
.pf-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--esp-2); }
.pf-acciones:empty, .pf-hueco-seguir:empty { display: none; }
/* La combinación puesta (en el tuyo): al tocarla, las demás. */
.pf-combinacion { max-width: 100%; margin-top: var(--esp-3); }
.pf-combinacion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pf-nombre {
  margin: var(--esp-4) 0 0;
  max-width: 100%;
  font-size: var(--tam-3xl);
  letter-spacing: -0.03em;
  line-height: 1.1;
  min-width: 0;
}
/* El nombre, en línea: si ocupa dos renglones, las insignias siguen a la última palabra. */
.pf-nombre .nombre-estilo { display: inline; white-space: normal; overflow-wrap: anywhere; }
.pf-usuario { margin: 2px 0 0; color: var(--texto-3); font-size: var(--tam-m); }

/* Centradas con las minúsculas del nombre (middle: la base más media altura de la x). */
.pf-nombre .insignias-nombre { --ins: 22px; gap: 4px; margin-left: 8px; vertical-align: middle; }

/* Seguidores, siguiendo y, más apagado, lo visto. */
.pf-social-hueco:empty { display: none; }
.pf-social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-4); margin-top: var(--esp-3); color: var(--texto-3); font-size: var(--tam-s); }
.pf-social-cifra { display: inline-flex; align-items: center; gap: 0.3em; padding: 2px 0; border-radius: var(--radio); }
button.pf-social-cifra:hover { color: var(--texto-2); }
button.pf-social-cifra:hover b { text-decoration: underline; }
.pf-social-cifra b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-social-cifra.quieta b { color: var(--texto-2); }

.pf-bio { margin: var(--esp-4) 0 0; max-width: 62ch; color: var(--texto-2); font-size: var(--tam-m); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Las redes en pastillas: el icono con el color de su marca y el usuario. */
.pf-conexiones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-4) 0 0; padding: 0; list-style: none; }
.pf-conexiones li { display: block; min-width: 0; }
.pf-conexion {
  display: flex; align-items: center; gap: var(--esp-2); max-width: 240px; height: 36px;
  padding: 0 var(--esp-3) 0 4px; border-radius: var(--radio-pastilla);
  background: var(--superficie); color: var(--texto); text-decoration: none;
  transition: background var(--rapido), transform var(--medio) var(--muelle);
}
.pf-conexion:hover { background: var(--elevada); }
.pf-conexion:active { transform: scale(0.97); }
.pf-conexion-icono { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--marca, var(--elevada)); color: #fff; }
.pf-conexion-icono .icono-red { width: 15px; height: 15px; }
.pf-conexion-texto { min-width: 0; font-size: var(--tam-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El color de cada red (el de su marca). */
.red-instagram { --marca: #d62976; }
.red-x { --marca: #000; }
.red-youtube { --marca: #e60000; }
.red-tiktok { --marca: #111; }
.red-twitch { --marca: #9146ff; }
.red-discord { --marca: #5865f2; }
.red-anilist { --marca: #0b8ed9; }
.red-myanimelist { --marca: #2e51a2; }
.red-goodreads { --marca: #5b3c1e; }
.red-spotify { --marca: #1a9e48; }

/* El personaje favorito: su retrato (la imagen, la carátula de su obra o su inicial) y su nombre. */
.pf-pj { display: flex; align-items: center; gap: var(--esp-3); max-width: 100%; margin-top: var(--esp-4); padding: var(--esp-2) var(--esp-4) var(--esp-2) var(--esp-2); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.pf-pj-retrato { position: relative; flex: none; width: 60px; aspect-ratio: 3 / 4; border-radius: var(--radio); overflow: hidden; background: var(--elevada); }
.pf-pj-retrato .cartel { width: 100%; height: 100%; }
.pf-pj-retrato .cartel img { width: 100%; height: 100%; object-fit: cover; }
.pf-pj-retrato.inicial { display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--pf-acento) 75%, #000), color-mix(in srgb, var(--pf-acento) 30%, #000)); color: #fff; font-family: var(--fuente-titulos); font-size: 26px; font-weight: 600; }
.pf-pj-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-pj-etiqueta { color: var(--texto-3); font-size: var(--tam-xs); }
.pf-pj-nombre { font-family: var(--fuente-titulos); font-size: var(--tam-l); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.pf-pj-obra { color: var(--texto-2); font-size: var(--tam-s); overflow-wrap: anywhere; }

/* ---- las pestañas y su contenido */
.pf-pestanas { display: flex; gap: var(--esp-6); margin: var(--esp-8) 0 var(--esp-6); box-shadow: inset 0 -1px 0 var(--borde); }
.pf-pestana { position: relative; display: inline-flex; align-items: center; height: 44px; color: var(--texto-3); font-size: var(--tam-m); font-weight: 600; white-space: nowrap; transition: color var(--rapido); }
.pf-pestana:hover { color: var(--texto-2); }
.pf-pestana.activa { color: var(--texto); }
.pf-pestana.activa::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--pf-acento); }
.pf-zona { min-width: 0; }
.pf-hueco:empty { display: none; }
.pf-vacio { margin: 0; padding: var(--esp-8) var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--superficie); color: var(--texto-3); text-align: center; }

/* Listas: los favoritos en grande y, debajo, todas las listas en su rejilla (listas.css). */
.pf-listas { display: flex; flex-direction: column; gap: var(--esp-8); }
.pf-seccion-titulo, .pf-listas .listas-destacadas-cabeza h3 { margin: 0 0 var(--esp-3); font-size: var(--tam-l); letter-spacing: -0.01em; line-height: 1.3; }
.pf-listas .listas-destacadas-cabeza h3 { margin: 0; }
/* En el tuyo, «Ordenar» sube a la altura del título (y «Ver todas» sobra: están todas). */
.pf-listas .listas-destacadas { position: relative; }
.pf-listas .listas-destacadas-acciones { position: absolute; top: -6px; right: 0; }
.pf-listas .listas-destacadas:has(.listas-destacadas-acciones) .listas-destacadas-todas { display: none; }
.pf-fila-favoritos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5) var(--esp-3); }
@media (min-width: 600px) { .pf-fila-favoritos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4); } }
.pf-favorito { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; text-align: left; }
.pf-favorito .cartel { width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--superficie); transition: transform var(--medio) var(--muelle); }
.pf-favorito .cartel img { width: 100%; height: 100%; object-fit: cover; }
.pf-favorito:hover .cartel { transform: translateY(-3px); }
.pf-favorito-titulo { color: var(--texto-2); font-size: var(--tam-s); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Actividad: una entrada debajo de otra, como comentarios. */
.pf-feed { display: flex; flex-direction: column; gap: var(--esp-4); max-width: 760px; }
.pf-feed-lista { display: flex; flex-direction: column; }
.pf-entrada { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--esp-4); padding: var(--esp-4) 0; box-shadow: inset 0 -1px 0 var(--borde); }
.pf-entrada:first-child { padding-top: 0; }
.pf-entrada:last-child { box-shadow: none; }
.pf-entrada-cartel { width: 48px; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: var(--superficie); transition: transform var(--medio) var(--muelle); }
.pf-entrada-cartel:hover { transform: translateY(-2px); }
.pf-entrada-cartel .cartel { width: 100%; height: 100%; }
.pf-entrada-cartel .cartel img { width: 100%; height: 100%; object-fit: cover; }
.pf-entrada-cartel .cartel-titulo { display: none; }
.pf-entrada-cuerpo { display: flex; flex-direction: column; min-width: 0; }
.pf-entrada-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); }
.pf-entrada-frase { margin: 0; min-width: 0; color: var(--texto-2); font-size: var(--tam-m); line-height: 1.4; overflow-wrap: anywhere; }
.pf-entrada-frase b { color: var(--texto); font-weight: 600; }
.pf-entrada-nota { flex: none; padding: 2px var(--esp-2); border-radius: var(--radio-pastilla); background: var(--superficie); color: var(--texto); font-size: var(--tam-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-entrada-meta { margin-top: 2px; color: var(--texto-3); font-size: var(--tam-s); }
.pf-entrada-texto { margin-top: var(--esp-2); color: var(--texto); font-size: var(--tam-m); line-height: 1.5; overflow-wrap: anywhere; }
.pf-entrada .pie-comentario { margin-top: var(--esp-2); }
.pf-entrada-esq { height: 72px; margin-bottom: var(--esp-3); border-radius: var(--radio-tarjeta); }

/* El perfil privado: el candado y una frase. */
.pf-privado { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); margin-top: var(--esp-8); padding: var(--esp-10) var(--esp-6); border-radius: var(--radio-tarjeta); background: var(--superficie); text-align: center; }
.pf-privado-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--elevada); color: var(--texto-2); margin-bottom: var(--esp-2); }
.pf-privado-icono .icono { width: 26px; height: 26px; }
.pf-privado h2 { font-size: var(--tam-xl); }
.pf-privado p { margin: 0; color: var(--texto-3); max-width: 40ch; }

/* Mientras carga. */
.esqueleto-perfil .pf-avatar { margin-top: calc(var(--pf-avatar) / -2); }
.pf-linea-esq { height: 18px; width: 120px; margin-top: var(--esp-3); border-radius: var(--radio-campo); }
.pf-linea-esq.ancha { height: 32px; width: 220px; margin-top: var(--esp-4); }

/* Seguidores o seguidos. */
.pf-gente-lista { display: flex; flex-direction: column; }
.pf-gente-fila { display: flex; align-items: center; gap: var(--esp-3); width: 100%; }
.pf-gente-abrir { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--esp-3); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pf-gente-avatar { width: 40px; height: 40px; flex: none; }
.pf-gente-textos { display: flex; flex-direction: column; min-width: 0; }
.pf-gente-textos small { color: var(--texto-3); font-size: var(--tam-s); }

@media (min-width: 900px) {
  .pf { --pf-avatar: 128px; --pf-aro: 6px; }
  .pf > .pf-cartel { margin: 0; border-radius: var(--radio-panel); }
  .pf-cabeza { padding: 0 var(--esp-8); }
  .pf-avatar-fila { padding-bottom: var(--esp-1); }
  .pf-nombre { font-size: var(--tam-4xl); letter-spacing: -0.035em; }
  .pf-principal { padding: 0 var(--esp-8); }
}

/* En el escritorio ancho: la tarjeta a un lado, montada sobre el cartel, y el contenido al otro. */
@media (min-width: 1200px) {
  .pf { --pf-avatar: 112px; --pf-tarjeta: color-mix(in srgb, var(--pf-acento) 12%, var(--superficie)); }
  .pf-cuerpo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--esp-8); align-items: start; }
  .pf-lado {
    --pf-aro-color: var(--pf-tarjeta);
    margin-top: calc(-1 * var(--esp-12)); position: relative; z-index: 1;
    padding: 0 var(--esp-5) var(--esp-6); border-radius: var(--radio-panel);
    background: linear-gradient(to bottom, var(--pf-tarjeta), var(--superficie) 280px);
  }
  .pf-lado .pf-cabeza { padding: 0; }
  /* La fila del avatar se deshace: los botones bajan debajo de la fila social, a lo ancho. */
  .pf-lado .pf-avatar-fila { display: contents; }
  .pf-lado .pf-avatar { margin-top: calc(var(--pf-avatar) / -2); }
  .pf-lado .pf-acciones { order: 1; width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: var(--esp-1); margin-top: var(--esp-5); }
  .pf-lado .pf-acciones > .boton:first-child { flex: 1; }
  .pf-lado .pf-bio, .pf-lado .pf-conexiones, .pf-lado .pf-pj { order: 2; }
  .pf-lado .pf-nombre { font-size: var(--tam-3xl); }
  .pf-lado .pf-pj { width: 100%; background: var(--fondo); }
  .pf-lado .pf-conexion { background: var(--fondo); }
  .pf-lado .pf-conexion:hover { background: var(--elevada); }
  .pf-principal { padding: 0; }
  .pf-pestanas { margin-top: var(--esp-6); }
  .esqueleto-perfil .pf-lado { min-height: 320px; }
}

/* ---------------------------------------------------------------- la vista previa del editor */
.pf-previa {
  --pf-avatar: 72px; --pf-aro: 4px;
  /* La tarjeta lleva el acento arriba, como la del perfil en el escritorio. */
  --pf-aro-color: color-mix(in srgb, var(--pf-acento) 12%, var(--fondo));
  padding: 0 0 var(--esp-5); border-radius: var(--radio-tarjeta); overflow: hidden;
  background: linear-gradient(to bottom, var(--pf-aro-color) 160px, var(--fondo) 360px);
}
.pf-previa > .pf-cartel { margin: 0; border-radius: 0; }
.pf-previa .pf-cabeza { padding: 0 var(--esp-4); }
.pf-previa .pf-nombre { font-size: var(--tam-2xl); margin-top: var(--esp-3); }
.pf-previa .pf-usuario { font-size: var(--tam-s); }
.pf-previa .pf-bio { font-size: var(--tam-s); margin-top: var(--esp-3); }
.pf-previa .pf-conexiones { margin-top: var(--esp-3); gap: 6px; }
.pf-previa .pf-conexion { height: 30px; }
.pf-previa .pf-conexion-icono { width: 22px; height: 22px; }
.pf-previa .pf-conexion-icono .icono-red { width: 12px; height: 12px; }
.pf-previa .pf-pj { margin-top: var(--esp-3); }
.pf-previa .pf-favoritos { padding: var(--esp-4) var(--esp-4) 0; }
.pf-previa .pf-seccion-titulo { font-size: var(--tam-s); margin-bottom: var(--esp-2); }
.pf-previa .pf-fila-favoritos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); }
.pf-previa .pf-favorito .cartel { border-radius: var(--radio); }
.pf-previa .pf-favorito-titulo { display: none; }
.pf-previa .pf-pestanas { gap: var(--esp-4); margin: var(--esp-4) var(--esp-4) 0; }
.pf-previa .pf-pestana { height: 34px; font-size: var(--tam-s); }
/* Lo que acaba de cambiar, resaltado un momento (sin movimiento, se queda marcado hasta el siguiente cambio). */
.pfe-resalta { animation: pfe-resalta 1.4s ease-out; }
@keyframes pfe-resalta {
  from { outline: 2px solid var(--acento); outline-offset: 3px; }
  to { outline: 2px solid transparent; outline-offset: 3px; }
}
.pf-previa .pf-cartel.pfe-resalta, .pf-previa.pfe-resalta { animation-name: pfe-resalta-dentro; }
@keyframes pfe-resalta-dentro {
  from { outline: 2px solid var(--acento); outline-offset: -2px; }
  to { outline: 2px solid transparent; outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .pfe-resalta { animation: none !important; outline: 2px solid var(--acento); outline-offset: 3px; }
  .pf-previa .pf-cartel.pfe-resalta, .pf-previa.pfe-resalta { outline-offset: -2px; }
}

/* ---------------------------------------------------------------- el editor
   Los apartados arriba y lo de cada uno debajo; la vista previa al lado (en el
   móvil, arriba y fija, en pequeño); abajo, la barra de guardar. */
.capa.editor-perfil-capa .panel { padding-top: var(--esp-6); }
.pfe .titulo-hoja { margin-bottom: var(--esp-4); }
.pfe-rejilla { display: flex; flex-direction: column; gap: var(--esp-4); }
.pfe-lado { position: sticky; top: calc(-1 * var(--esp-6)); z-index: 3; margin: 0 calc(-1 * var(--lado)); padding: var(--esp-2) var(--lado); background: var(--elevada); }
.pfe-opciones { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.pfe-apartados { width: 100%; }
.pfe-apartados .segmento { flex: 1; white-space: nowrap; }
.pfe-cuerpo { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
/* En el móvil, la vista previa se queda en la cabeza: lo demás se ve en el apartado. */
@media (max-width: 899px) {
  .pfe-previa .pf-previa { --pf-avatar: 52px; --pf-aro: 3px; padding-bottom: var(--esp-3); }
  .pfe-previa :is(.pf-social, .pf-bio, .pf-conexiones, .pf-pj, .pf-pestanas, .pf-favoritos) { display: none; }
  .pfe-previa .pf-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--esp-3); align-items: end; }
  .pfe-previa .pf-avatar-fila { grid-row: span 2; width: auto; }
  .pfe-previa .pf-nombre { margin: 0; font-size: var(--tam-xl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pfe-previa .pf-nombre .nombre-estilo { white-space: nowrap; }
}
.pfe-bloque { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--superficie); min-width: 0; }
.pfe-titulo { font-size: var(--tam-m); letter-spacing: -0.01em; }
.pfe .campo-etiqueta { color: var(--texto-2); font-size: var(--tam-s); font-weight: 600; }
.pfe .campo { position: relative; }
.pfe-nota { margin: calc(-1 * var(--esp-1)) 0 0; color: var(--texto-3); font-size: var(--tam-s); line-height: 1.45; }
.pfe-cuenta { align-self: flex-end; color: var(--texto-3); font-size: var(--tam-xs); font-variant-numeric: tabular-nums; }

/* Lo avanzado, plegado. */
.pfe-mas > summary { width: fit-content; cursor: pointer; color: var(--texto-2); font-size: var(--tam-s); font-weight: 600; padding: var(--esp-1) 0; }
.pfe-mas > summary:hover { color: var(--texto); }
.pfe-mas[open] > summary { margin-bottom: var(--esp-3); }

/* La barra de guardar: abajo, solo con cambios (y un momento tras guardar). */
.pfe-barra {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
  margin: var(--esp-6) calc(-1 * var(--esp-2)) 0; padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4);
  border-radius: var(--radio-tarjeta); background: var(--hundido);
}
.pfe-barra[hidden] { display: none; }
.pfe-barra-texto { display: flex; align-items: center; gap: var(--esp-2); flex: 1 1 0; min-width: 0; margin: 0; color: var(--texto-3); font-size: var(--tam-s); }
.pfe-barra-texto .icono { width: 16px; height: 16px; color: var(--bien); }
.pfe-barra.sucia .pfe-barra-texto { color: var(--texto); font-weight: 600; }
.pfe-barra .boton { flex: none; }
/* En el móvil, con cambios: el aviso en su línea y los dos botones debajo, a la derecha. */
.pfe-barra-texto + .boton:not([hidden]), .pfe-barra .boton[hidden] + .boton { margin-left: auto; }
@media (max-width: 639px) { .pfe-barra.sucia .pfe-barra-texto { flex-basis: 100%; padding: var(--esp-1) 0; } }
.pfe-salir .fila-botones { margin-top: var(--esp-5); flex-wrap: nowrap; }
.pfe-salir .fila-botones .boton { white-space: nowrap; }
/* La pregunta al salir: sus tres botones en una fila; en el móvil, uno debajo de otro (guardar arriba). */
.capa.pequena:has(.pfe-salir) .panel { width: min(540px, 100%); }
@media (max-width: 639px) { .pfe-salir .fila-botones { flex-direction: column-reverse; } }

/* El avatar y el cartel, como quedan en el perfil: el cartel a lo ancho y el avatar
   montado en su borde de abajo. Cada imagen es un botón (al tocarla, otra); el lápiz lo
   dice al pasar por encima (en el móvil, siempre). Recortar y Quitar, al lado de cada una. */
.pfe-imagenes { --pfe-avatar: 88px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: var(--esp-3); align-items: start; }
.pfe-imagenes .pfe-pieza { display: contents; }
.pfe-pieza { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.pfe-vista { position: relative; display: block; overflow: hidden; background: var(--hundido); }
.pfe-vista:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pfe-vista:disabled { cursor: progress; }
.pfe-vista-imagen { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter var(--rapido); }
.pfe-vista:hover .pfe-vista-imagen { filter: brightness(0.85); }
.pfe-vista.cartel { grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 3 / 1; border-radius: var(--radio-campo); }
.pfe-pieza-cartel .pfe-botones { grid-column: 4; grid-row: 2; justify-content: flex-end; margin-top: var(--esp-2); }
/* El avatar no recorta: el lápiz (y «Comprobando la imagen…») puede salirse del círculo. */
.pfe-vista.avatar {
  grid-column: 1; grid-row: 2; z-index: 1;
  width: var(--pfe-avatar); height: var(--pfe-avatar); margin: calc(var(--pfe-avatar) / -2) 0 0 var(--esp-4);
  display: grid; place-items: center; overflow: visible; border-radius: 50%;
  background: var(--avatar); color: var(--sobre-avatar); box-shadow: 0 0 0 4px var(--superficie);
}
.pfe-vista.avatar .pfe-vista-imagen { border-radius: 50%; }
.pfe-vista.avatar .inicial { font-size: calc(var(--pfe-avatar) * 0.4); font-weight: 600; }
.pfe-pieza-avatar .pfe-botones { grid-column: 2; grid-row: 2; align-self: end; }
.pfe-vista.personaje { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radio); display: grid; place-items: center; color: var(--texto-3); }
.pfe-vista.personaje.vacia { background: transparent; box-shadow: inset 0 0 0 1.5px var(--borde); }
.pfe-vista.personaje > .icono { width: 28px; height: 28px; }
.pfe-lapiz {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px;
  border-radius: var(--radio-pastilla); background: rgb(0 0 0 / 0.6); color: #fff;
  font-size: var(--tam-xs); font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--rapido);
}
.pfe-lapiz .icono { width: 13px; height: 13px; }
.pfe-lapiz.comprobando { padding: 5px 10px; }
.pfe-vista.cartel .pfe-lapiz, .pfe-vista.personaje .pfe-lapiz { top: var(--esp-2); right: var(--esp-2); }
.pfe-vista.avatar .pfe-lapiz { bottom: 4px; left: 50%; transform: translateX(-50%); }
.pfe-vista:is(:hover, :focus-visible, .vacia) .pfe-lapiz, .pfe-lapiz.comprobando { opacity: 1; }
@media (hover: none) { .pfe-lapiz { opacity: 1; } }
.pfe-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1); }
/* El color del cartel liso, en un botón como los de al lado. */
.pfe-boton-color { position: relative; cursor: pointer; }
.pfe-boton-color-punto { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
.pfe-boton-color input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pfe-boton-color:focus-within { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); }

/* El aspecto del perfil: cada tema en pequeño (su fondo arriba, una tarjeta abajo y el punto del acento). */
.pfe-paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--esp-3) var(--esp-2); }
.pfe-paleta { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--texto-3); font-size: var(--tam-xs); }
.pfe-paleta > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfe-paleta-muestra { position: relative; display: grid; grid-template-rows: 1fr 1fr; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radio-campo); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); transition: transform var(--medio) var(--muelle); }
.pfe-paleta-muestra i { display: block; }
.pfe-paleta-muestra .punto { position: absolute; left: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(0 0 0 / 0.35); }
.pfe-paleta:hover .pfe-paleta-muestra { transform: translateY(-2px); }
.pfe-paleta.elegida { color: var(--texto); }
.pfe-paleta.elegida .pfe-paleta-muestra { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); }

/* Cada color a mano: un disco (al tocarlo, el selector) con su nombre debajo. */
.pfe-colores { display: flex; flex-wrap: wrap; gap: var(--esp-4); }
.pfe-color { display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); cursor: pointer; }
.pfe-color-disco { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); overflow: hidden; }
.pfe-color-disco input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pfe-color:focus-within .pfe-color-disco { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); }
.pfe-color-nombre { color: var(--texto-2); font-size: var(--tam-xs); }
.pfe-color-extras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-top: var(--esp-3); }

/* El estilo del nombre: cada fuente y cada efecto con tu nombre puesto; los colores en muestras. */
.pfe-fuentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.pfe-fuente { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: var(--esp-3); border-radius: var(--radio-boton); background: var(--hundido); text-align: left; transition: background var(--rapido), box-shadow var(--rapido); }
.pfe-fuente:hover { background: var(--estado-hover); }
.pfe-fuente.activa { box-shadow: inset 0 0 0 2px var(--acento); background: var(--seleccion); }
/* La muestra no recorta el brillo: la caja deja sitio alrededor. */
.pfe-fuente-muestra { display: block; align-self: stretch; max-width: 100%; padding: 4px 6px; margin: -4px -6px; min-width: 0; }
.pfe-fuente-muestra .nombre-estilo { font-size: var(--tam-xl); font-weight: 400; line-height: 1.35; max-width: 100%; }
.pfe-efecto .nombre-estilo { font-weight: 600; }
.pfe-fuente small { color: var(--texto-3); font-size: var(--tam-xs); }
.pfe-opciones-efecto { display: flex; flex-direction: column; gap: var(--esp-3); margin-top: var(--esp-1); }
.pfe-rapidas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.pfe-rapida { width: 32px; height: 32px; border-radius: 50%; background: var(--pfe-muestra); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); transition: transform var(--medio) var(--muelle); }
.pfe-rapida.pareja { width: 56px; border-radius: var(--radio-pastilla); }
.pfe-rapida:hover { transform: scale(1.06); }
.pfe-rapida.elegida { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); }
.pfe-velocidad { align-self: flex-start; }

/* Las redes: su icono y su nombre, el campo y el interruptor de las tarjetas. */
.pfe-redes { display: flex; flex-direction: column; gap: var(--esp-2); }
.pfe-red { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre interruptor' 'campo campo' 'error error'; gap: var(--esp-2) var(--esp-3); align-items: center; }
.pfe-red-nombre { grid-area: nombre; display: flex; align-items: center; gap: var(--esp-2); font-size: var(--tam-s); font-weight: 600; color: var(--texto); min-width: 0; }
.pfe-red-icono { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--marca); color: #fff; flex: none; }
.pfe-red-icono .icono-red { width: 14px; height: 14px; }
.pfe-red .campo-texto { grid-area: campo; height: 40px; }
.pfe-red-tarjeta { grid-area: interruptor; display: flex; align-items: center; gap: var(--esp-2); color: var(--texto-3); font-size: var(--tam-xs); white-space: nowrap; cursor: pointer; }
.pfe-red .campo-texto.mal { box-shadow: inset 0 0 0 1.5px var(--peligro); }
.pfe-red-error { grid-area: error; margin: 0; color: var(--peligro); font-size: var(--tam-s); }

/* El personaje: la imagen (opcional) a la izquierda y sus dos campos. */
.pfe-personaje { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.pfe-personaje-campos { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }

/* Los favoritos: cuatro carteles. */
.pfe-favoritos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); }
.pfe-favorito { aspect-ratio: 2 / 3; border-radius: var(--radio); overflow: hidden; background: var(--hundido); transition: transform var(--medio) var(--muelle); }
.pfe-favorito .cartel { width: 100%; height: 100%; }
.pfe-favorito .cartel img { width: 100%; height: 100%; object-fit: cover; }
.pfe-favorito.hueco { display: grid; place-items: center; color: var(--texto-3); box-shadow: inset 0 0 0 1.5px var(--borde); }
.pfe-favorito:hover { transform: translateY(-2px); }

/* Las combinaciones: cada una en pequeño (su cartel, su avatar y su acento), su nombre y sus botones. */
.pfe-combos { display: flex; flex-direction: column; gap: var(--esp-2); }
.pfe-combo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); width: 100%; padding: var(--esp-2); border-radius: var(--radio-tarjeta); background: var(--hundido); text-align: left; }
.pfe-combo.activa { box-shadow: inset 0 0 0 2px var(--acento); }
button.pfe-combo:hover { background: var(--estado-hover); }
.pfe-combo-mini { position: relative; flex: none; width: 96px; height: 56px; border-radius: var(--radio-campo); overflow: hidden; background: var(--elevada); }
.pfe-combo-mini .pfe-combo-cartel { position: absolute; left: 0; top: 0; width: 100%; height: 32px; aspect-ratio: auto; }
.pfe-combo-avatar { position: absolute; left: 8px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--elevada); }
.pfe-combo-avatar .inicial { font-size: 13px; }
.pfe-combo-mini::after { content: ''; position: absolute; right: 8px; bottom: 9px; width: 24px; height: 6px; border-radius: 3px; background: var(--pf-acento, var(--acento)); }
.pfe-combo-textos { display: flex; flex-direction: column; flex: 1 1 0; min-width: 80px; }
.pfe-combo-textos b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfe-combo-textos small { color: var(--texto-3); font-size: var(--tam-xs); }
.pfe-combo-acciones { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pfe-combos-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-top: var(--esp-2); }
.pfe-combos-pie .campo-texto { flex: 1 1 180px; height: 40px; }
.pfe-combos-cuenta { width: 100%; color: var(--texto-3); font-size: var(--tam-xs); }
.pf-combinaciones .pfe-combos { margin-bottom: var(--esp-4); }
.pf-combinaciones .boton.sutil { width: 100%; }

@media (max-width: 639px) {
  .pfe-imagenes { --pfe-avatar: 72px; }
  .pfe-apartados .segmento { padding-left: var(--esp-2); padding-right: var(--esp-2); font-size: var(--tam-s); }
}
@media (min-width: 640px) {
  .pfe-fuentes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pfe-red { grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: 'nombre campo interruptor' '. error error'; }
}
/* En el escritorio: lo de editar a la izquierda y la vista previa fija a la derecha. */
@media (min-width: 900px) {
  .capa.editor-perfil-capa .panel { width: min(1080px, 100%); padding-top: var(--esp-8); }
  .pfe-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--esp-8); align-items: start; }
  .pfe-opciones { grid-column: 1; grid-row: 1; }
  .pfe-lado { grid-column: 2; grid-row: 1; top: 0; margin: 0; padding: 0; background: none; }
  .pfe-bloque { padding: var(--esp-5); }
  .pfe-barra { margin: var(--esp-8) 0 0; }
}
.elegir-titulo-seccion { margin: var(--esp-4) 0 var(--esp-2); font-size: var(--tam-m); }