/* =========================================================================
   perfil — prototipo (public/perfil.html)

   Se carga DESPUÉS de styles.css y styles-v2.css y sólo agrega: no pisa ni un
   token, ni una tipografía, ni un color. Las reglas de la casa siguen valiendo
   tal cual:

     · nada de cajas ni botones: la estructura la dan líneas de 1px y aire
     · sólo blanco y negro: ni un tono de color, salvo las portadas
     · en VERSALES sólo los rótulos que ordenan la página

   Por eso el tema claro no necesita ni una regla aquí: todo sale de var(--…),
   que ya cambia sola.
   ========================================================================= */

.pf { padding-bottom: 90px }

/* ---------- cabecera del perfil ----------
   foto cuadrada + identidad + contadores. Lo único que la separa del resto es
   una línea de 1px abajo; no hay tarjeta ni fondo. */
/* dos bandas apiladas, las dos a todo el ancho: identidad y contadores. Así
   los cinco contadores caben en una línea y la biografía no se parte. */
.pf-head { padding: 10px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 34px }
.pf-perfil { display: flex; align-items: flex-start; gap: 26px }
.pf-foto {
  flex: none; width: 132px; padding: 0; border: 1px solid var(--line);
  background: none; cursor: pointer; line-height: 0; border-radius: 0;
  transition: border-color .16s ease;
}
.pf-foto:hover { border-color: var(--line-2) }
.pf-foto img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block }
.pf-ident { min-width: 0; flex: 1 }
.pf-ident h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em }
.pf-bio { color: var(--muted); margin-top: 10px }
/* debajo de la biografía y con un poco más de aire: es un dato al margen, no
   la continuación de la frase de arriba */
.pf-handle { font-family: var(--mono); font-size: .78rem; color: var(--faint); margin-top: 12px }

/* contadores: el número manda (display, grande) y el rótulo lo acompaña
   pequeño y en versales, como en el resto del sitio */
/* repartidos de borde a borde, no apelotonados a la izquierda: la banda de
   contadores mide lo mismo que las filas de portadas de abajo, así que la
   cabecera entera ocupa el ancho de la página */
.pf-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; margin-top: 28px }
.pf-stat dd { font-family: var(--display); font-weight: 600; font-size: 1.18rem; line-height: 1.1 }
.pf-stat dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); order: 2; margin-top: 4px;
}
.pf-stat { display: flex; flex-direction: column }

.pf-cargando { font-family: var(--mono); font-size: .78rem; color: var(--faint) }
.pf-vacio { font-family: var(--mono); font-size: .78rem; color: var(--faint); padding: 10px 0 }

/* ---------- rótulos de sección ----------
   versales + una línea que se come lo que sobra del ancho: ordena sin encerrar */
.pf-sec { margin-bottom: 46px }
.pf-rotulo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-family: var(--mono); font-weight: 400; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.pf-rotulo::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.pf-rotulo-n { color: var(--line-2); letter-spacing: normal; text-transform: none }

/* ---------- las dos mitades ----------
   Social y Blog usan las mismas pestañas que tenía el hub (.hub-tabs), que ya
   están resueltas: texto con subrayado, sin caja. Aquí sólo se separan un poco
   más de la cabecera. */
#pf-secs { margin-top: -6px; margin-bottom: 34px }
/* en VERSALES, como los demás rótulos que ordenan la página (favoritos, ahora,
   los filtros del muro): estas dos parten el perfil en dos, que es lo más
   grande que ordena esta página. El espaciado extra es el mismo de .sub-tab:
   sin él las mayúsculas se apelotonan. */
#pf-secs .hub-tab { text-transform: uppercase; letter-spacing: .12em }
/* el aviso de "cargando" del blog se vacía cuando llega la lista, pero un <p>
   vacío sigue ocupando su alto y dejaba un hueco entre las pestañas y la
   primera publicación */
#blog-status:empty { display: none }

/* ---------- ahora ---------- */
/* Siete columnas exactas, no auto-fill. Y minmax(0,1fr) y no 1fr a secas:
   1fr es minmax(auto,1fr), y ese "auto" no deja que la columna baje del ancho
   natural de la portada, así que las imágenes se desbordaban unas sobre otras.
   Motivo de fondo: las dos filas de arriba (favoritos y
   ahora) tienen siempre siete cosas, así que con auto-fill una calzaba justo y
   la otra dejaba un hueco a la derecha con las portadas más chicas. Fijando
   las columnas, las dos ocupan el ancho entero y las portadas miden igual. */
.pf-ahora, .pf-fijados { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 26px 16px }
.pf-ahora-it { display: block }
.pf-ahora-cover { border: 1px solid var(--line); line-height: 0 }
.pf-ahora-cover .poster { border: none }
.pf-ahora-t {
  display: block; font-family: var(--display); font-weight: 600; font-size: .88rem;
  line-height: 1.25; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-ahora-m { display: block; font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-top: 3px }

/* ---------- fijados ---------- */
.pf-fij { display: block }
.pf-fij-t {
  display: block; font-family: var(--mono); font-size: .7rem; color: var(--faint);
  margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- filtros del muro ----------
   son las sub-pestañas de siempre (.sub-tab), un punto más grandes porque aquí
   son la navegación principal y no un detalle */
.pf-filtros { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 22px }
.pf-filtros[hidden] { display: none }
.pf-filtros .sub-tab { font-size: .84rem }

/* ---------- el muro ---------- */
.pf-posts { display: flex; flex-direction: column }
.pf-post {
  display: flex; align-items: center; gap: 14px; padding: 9px 2px;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.pf-post-poster { flex: none; width: 46px; line-height: 0 }
.pf-post-main { flex: 1; min-width: 0 }
.pf-post-linea {
  display: block; font-family: var(--display); font-weight: 600; font-size: 1rem;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* el verbo va en mono y apagado: es el andamio de la frase, no la noticia */
.pf-post-linea b { font-family: var(--mono); font-weight: 400; font-size: .8rem; color: var(--faint); margin-right: 4px }
.pf-post-anio { font-family: var(--mono); font-weight: 400; font-size: .76rem; color: var(--faint); margin-left: 5px }
.pf-post-sub { display: block; font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-top: 3px }
.pf-post-meta { flex: none; display: flex; align-items: center; gap: 9px }
.pf-post-estrellas { width: auto; font-size: .92rem }
.pf-post-extra { font-family: var(--mono); font-size: .74rem; color: var(--faint); white-space: nowrap }
.pf-marca { font-size: .9rem; line-height: 1; color: var(--muted) }
.pf-fav { color: #e5484d }
.pf-post-cuando { flex: none; width: 84px; text-align: right; font-family: var(--mono); font-size: .72rem; color: var(--faint) }

/* Una fila que además trae tu nota o los episodios deja de estar centrada: el
   texto cuelga bajo el título, dentro de su misma columna, y la portada, las
   estrellas y la fecha se alinean arriba. */
.pf-post-abierto { align-items: flex-start; padding: 13px 2px }
.pf-post-nota {
  margin-top: 9px; color: var(--muted); font-size: .93rem; line-height: 1.5; max-width: 66ch;
}
.pf-post-main .prow-eps { margin-top: 10px }

/* Una fila que además trae tu nota o los episodios deja de estar centrada: el
   texto cuelga bajo el título, dentro de su misma columna, y la portada, las
   estrellas y la fecha se alinean arriba. */
.pf-post-abierto { align-items: flex-start; padding: 13px 2px }
.pf-post-nota {
  margin-top: 9px; color: var(--muted); font-size: .93rem; line-height: 1.5; max-width: 66ch;
}
.pf-post-main .prow-eps { margin-top: 10px }

/* "cargar más" es texto con una línea debajo, no un botón con caja */
.pf-mas {
  display: inline-block; margin-top: 22px; background: none; border: none;
  border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0 0 3px;
  font-family: var(--mono); font-size: .76rem; color: var(--muted); cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.pf-mas:hover { color: var(--text); border-bottom-color: var(--text) }

/* ---------- pendientes ----------
   reusa la estantería de portadas del sitio (.pcard-grid + .hcard), que ya
   está resuelta; sólo hay que dejar que sea un enlace */
.pf .hcard { display: block }
/* el título y la meta de la estantería son <span> aquí (van dentro de un
   enlace), y en un elemento en línea el recorte con puntos suspensivos no
   funciona: sin esto, los títulos largos se salen por encima del de al lado */
.pf .hcard .hcard-cover, .pf .hcard .hcard-t, .pf .hcard .hcard-meta { display: block }

/* ---------- pantallas medianas ---------- */
@media (max-width: 1100px) {
  .pf-ahora, .pf-fijados { grid-template-columns: repeat(5, minmax(0, 1fr)) }
}

/* ---------- pantallas angostas ---------- */
@media (max-width: 640px) {
  .pf-head { gap: 18px; padding-bottom: 24px; margin-bottom: 28px }
  /* con las portadas de escritorio, "Ahora" ocupaba siete pantallas de teléfono
     antes de llegar al muro: aquí van más chicas y en cuatro columnas */
  .pf-ahora, .pf-fijados { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px }
  .pf-post { gap: 11px }
  .pf-post-poster { width: 38px }
  .pf-post-linea { font-size: .94rem }
  .pf-post-cuando { width: 60px; font-size: .68rem }
  .pf-post-estrellas { font-size: .8rem; letter-spacing: 0 }
}