/* PescaRadar · estilos de vistas concretas.
 *
 * Lo genérico vive en app.css. Aquí solo lo que es propio de una pantalla y no
 * se reutiliza en ningún otro sitio.
 */

/* ---- feed de capturas ------------------------------------------------------- */

.capFeed { display: flex; flex-direction: column; gap: var(--pr-4); }

.capCard { display: flex; flex-direction: column; }

.capHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pr-2); padding: var(--pr-3) var(--pr-4);
}
.capAutor {
  display: flex; align-items: center; gap: var(--pr-2);
  color: inherit; text-decoration: none; font-size: var(--pr-small);
}
.capAutor .prAvatar { width: 34px; height: 34px; }
.capFecha { font-size: var(--pr-caption); color: var(--pr-text-faint); }

/* `aspect-ratio` reserva el hueco antes de que llegue la imagen: sin esto la
   tarjeta salta al cargar y se pierde el sitio donde estabas leyendo. */
.capFoto {
  width: 100%; display: block; aspect-ratio: 1;
  object-fit: cover; background: var(--pr-surface-2);
}

.capCuerpo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pr-2);
  padding: var(--pr-3) var(--pr-4);
}
.capTitulo { display: flex; align-items: center; gap: var(--pr-2); font-size: var(--pr-h3); }
.capMedidas { font-size: var(--pr-small); color: var(--pr-text-soft); }
.capNota {
  margin: 0; padding: 0 var(--pr-4) var(--pr-3);
  font-size: var(--pr-small); line-height: 1.55; color: var(--pr-text-soft);
}
.capAcciones {
  display: flex; gap: var(--pr-2); padding: var(--pr-3) var(--pr-4);
  border-top: 1px solid var(--pr-border);
}

/* ---- asistente de publicación ------------------------------------------------ */

.wizPasos { display: flex; gap: var(--pr-1); margin-bottom: var(--pr-4); }
.wizPasos i {
  flex: 1; height: 3px; border-radius: 99px; background: var(--pr-surface-2);
  transition: background var(--pr-base) var(--pr-ease);
}
.wizPasos i.isOn { background: var(--pr-primary); }

.wizTitulo { margin: 0 0 var(--pr-3); font-size: var(--pr-h3); }
.wizPrevia { width: 100%; border-radius: var(--pr-r-card); display: block; }
.wizVacia {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--pr-2); aspect-ratio: 4/3;
  border: 1px dashed var(--pr-border-strong); border-radius: var(--pr-r-card);
  color: var(--pr-text-faint); font-size: var(--pr-small);
}
.wizFila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pr-3); }

/* ---- ranking ------------------------------------------------------------------ */

.rnkChips { margin-bottom: var(--pr-3); }
.rnkNota { margin: 0 0 var(--pr-4); }

/* Podio: el primero en el centro y más alto, como en un podio real. */
.rnkPodio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--pr-2); align-items: end; margin-bottom: var(--pr-4);
}
.rnkPodioItem {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--pr-3) var(--pr-2);
  background: var(--pr-surface-1); border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card); text-decoration: none; color: inherit;
  font-size: var(--pr-caption); text-align: center;
}
.rnkPodioItem b { font-size: var(--pr-small); }
.rnkPodioItem small { color: var(--pr-text-faint); }
.rnkPodioMedalla { font-size: 24px; }
.rnkP1 { padding-block: var(--pr-4); border-color: var(--pr-primary); }

.rnkLista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pr-2); }
.rnkRow {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--pr-3);
  padding: var(--pr-3);
  background: var(--pr-surface-1); border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
}
.rnkRow.isMe { border-color: var(--pr-primary); background: var(--pr-primary-soft); }
.rnkPos { text-align: center; font-weight: 900; color: var(--pr-text-faint); }
.rnkQuien { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: inherit; min-width: 0; }
.rnkQuien small { font-size: var(--pr-caption); color: var(--pr-text-faint); }
.rnkXp { font-family: var(--pr-font-num); font-variant-numeric: tabular-nums; font-weight: 800; }
.rnkXp small { font-size: 10px; color: var(--pr-text-faint); margin-left: 3px; }

/* Tu posición se queda pegada abajo: en una lista larga es lo que más se busca. */
.rnkYo {
  position: sticky; bottom: calc(var(--pr-bottomnav-h) + var(--pr-safe-bottom) + var(--pr-2));
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--pr-4); padding: var(--pr-3) var(--pr-4);
  background: var(--pr-surface-2); border: 1px solid var(--pr-primary);
  border-radius: var(--pr-r-card); box-shadow: var(--pr-shadow-2);
}
.rnkYo span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--pr-text-faint); font-weight: 900; }
.rnkYo small { font-size: var(--pr-caption); color: var(--pr-text-soft); }

/* ---- amigos --------------------------------------------------------------------- */

.prCommunity .prMain { max-width: 880px; }

.comHero {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-4);
  margin-bottom: var(--pr-4); padding: var(--pr-4);
  background: linear-gradient(135deg, var(--pr-surface-1), var(--pr-primary-soft));
  border: 1px solid var(--pr-border); border-radius: var(--pr-r-card);
  box-shadow: var(--pr-inset-top), var(--pr-shadow-1);
}
.comHero h1, .comPanelHead h1 { margin: 0; font-size: var(--pr-h2); line-height: 1.15; }
.comHero p, .comPanelHead p { margin: var(--pr-1) 0 0; color: var(--pr-text-soft); font-size: var(--pr-small); }
.comEyebrow {
  display: block; margin-bottom: var(--pr-1); color: var(--pr-primary);
  font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.comFeedFiltros { margin-bottom: var(--pr-4); }
.comCargar { margin-top: var(--pr-4); text-align: center; }
.comFin { display: flex; align-items: center; gap: var(--pr-3); color: var(--pr-text-faint); font-size: var(--pr-caption); }
.comFin span { flex: 1; height: 1px; background: var(--pr-border); }

.comCatch .capFoto { aspect-ratio: 16 / 10; }
.capFotoBtn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.capSinFoto {
  display: grid; place-items: center; aspect-ratio: 16 / 6;
  background: linear-gradient(145deg, var(--pr-surface-2), var(--pr-primary-soft));
  color: var(--pr-primary);
}
.comCatch .capAutor > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.comCatch .capAutor small { color: var(--pr-text-faint); font-size: 11px; font-weight: 500; }
.comCatch .capCuerpo { align-items: flex-start; }
.comCatch .capTitulo { width: 100%; }
.capMeta { display: flex; flex-wrap: wrap; gap: var(--pr-1); width: 100%; }
.capMeta span {
  padding: 3px var(--pr-2); border-radius: 99px;
  background: var(--pr-surface-2); color: var(--pr-text-soft); font-size: var(--pr-caption);
}
.capLugar { display: flex; align-items: center; gap: var(--pr-1); color: var(--pr-text-faint); font-size: var(--pr-caption); }
.capCompartir { display: flex; justify-content: flex-end; padding: 0 var(--pr-3) var(--pr-2); }
.comFotoAmpliada { display: block; width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--pr-r-card); }

.comPanelHead {
  display: flex; align-items: center; gap: var(--pr-3);
  margin-bottom: var(--pr-4); padding: var(--pr-4);
  background: var(--pr-surface-1); border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card); box-shadow: var(--pr-inset-top), var(--pr-shadow-1);
}
.comPanelIcon {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: var(--pr-r-btn); background: var(--pr-primary-soft); color: var(--pr-primary);
}

.amiBuscar { position: relative; margin-bottom: var(--pr-4); }
.amiBuscar .prInput {
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: var(--pr-3) 42px var(--pr-3) 44px;
  border: 1px solid var(--pr-border-strong); border-radius: var(--pr-r-btn);
  background: var(--pr-surface-1); color: var(--pr-text);
  font: inherit; font-size: var(--pr-body); box-shadow: var(--pr-inset-top), var(--pr-shadow-1);
  outline: none;
}
.amiBuscar .prInput::placeholder { color: var(--pr-text-faint); }
.amiBuscar .prInput:focus { border-color: var(--pr-primary); box-shadow: 0 0 0 3px var(--pr-primary-soft); }
.amiBuscarIcon {
  position: absolute; left: 14px; top: 50%; z-index: 1;
  display: grid; place-items: center; color: var(--pr-text-faint); transform: translateY(-50%);
}
.amiLimpiar, .amiQuitar {
  display: grid; place-items: center; padding: 0; border: 0; background: transparent;
  color: var(--pr-text-faint); cursor: pointer;
}
.amiLimpiar { position: absolute; right: 8px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); border-radius: 50%; }
.amiLimpiar[hidden] { display: none; }
.amiLimpiar:hover, .amiQuitar:hover { background: var(--pr-surface-2); color: var(--pr-danger); }
.prCommunity .prSrOnly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.amiPersona {
  display: flex; align-items: center; gap: var(--pr-3); flex: 1 1 auto; min-width: 0;
  color: inherit; text-decoration: none;
}
.amiPersona > div { display: flex; flex-direction: column; min-width: 0; }
.amiPersona b, .amiPersona small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prCommunity .amiAcciones { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--pr-2); }
.amiQuitar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; }

@media (max-width: 560px) {
  .comHero { align-items: flex-start; flex-direction: column; }
  .comHero .prBtn { width: 100%; }
  .comPanelHead { align-items: flex-start; padding: var(--pr-3); }
  .comPanelHead p { line-height: 1.45; }
  .prCommunity .prRow { flex-wrap: wrap; }
  .prCommunity .amiAcciones { width: 100%; padding-left: 54px; }
  .prCommunity .amiAcciones .prBtn { flex: 1; }
  .comCatch .capFoto { aspect-ratio: 4 / 3; }
}

/* ---- actividad ------------------------------------------------------------------- */

.actCabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pr-3); margin-bottom: var(--pr-4);
  font-size: var(--pr-small); color: var(--pr-text-soft);
}
/* Sin leer se marca con una barra lateral, no con negrita: la negrita ya la usa
   el título y dos énfasis a la vez no distinguen nada. */
.prRow.isUnread { border-left: 3px solid var(--pr-primary); cursor: pointer; }

/* ---- perfil ----------------------------------------------------------------------- */

.perHead { padding: var(--pr-4); margin-bottom: var(--pr-4); }
.perIdentidad { display: flex; align-items: center; gap: var(--pr-4); }
.perIdentidad h1 { margin: 0; font-size: var(--pr-h2); }
.perTitulo { margin: 2px 0 0; font-size: var(--pr-small); color: var(--pr-text-soft); }

.perNivel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; width: 72px; height: 72px; flex: 0 0 auto; position: relative;
  border: 1px solid var(--pr-primary); border-radius: 20px;
  background: var(--pr-grad-nivel);
  box-shadow: var(--pr-inset-top), var(--pr-shadow-2);
}
.perNivel small { font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #8fc5d6; }
.perNivel b { font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.perEmblema { position: absolute; top: -8px; right: -8px; font-size: 18px; }

/* El color del emblema sube por tramos: subir de nivel se nota sin leer nada. */
.perNivel[data-tier="2"] { background: linear-gradient(150deg, #125b52, #07211f); border-color: #3fa08c; }
.perNivel[data-tier="3"] { background: linear-gradient(150deg, #3d5b12, #1d2107); border-color: #8ba03f; }
.perNivel[data-tier="4"] { background: linear-gradient(150deg, #5b4512, #211a07); border-color: #c9a227; }
.perNivel[data-tier="5"] { background: linear-gradient(150deg, #5b1245, #210716); border-color: #bd3f9a; }

.perProgreso { margin-top: var(--pr-4); }
.perBarra { height: 8px; border-radius: 99px; background: var(--pr-surface); overflow: hidden; }
.perBarra span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pr-primary), var(--pr-accent));
  transition: width var(--pr-slow) var(--pr-ease);
}

.perTiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--pr-2); margin-bottom: var(--pr-6); }
.perTile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--pr-3) var(--pr-2);
  background: var(--pr-surface-1); border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
}
.perTile b { font-size: var(--pr-h3); font-variant-numeric: tabular-nums; }
.perTile small { font-size: var(--pr-caption); color: var(--pr-text-faint); text-align: center; }
.perTileButton{font:inherit;color:inherit;cursor:pointer;text-align:center}
.perTileButton:hover,.perTileButton:focus-visible{border-color:var(--pr-accent);outline:none}
.perProfileActions{display:flex;gap:var(--pr-2);flex-wrap:wrap;margin:var(--pr-4) 0}
.perSocial{display:flex;gap:var(--pr-2);flex-wrap:wrap;margin-bottom:var(--pr-5)}
.perContentTabs{margin-bottom:var(--pr-3)}
.perTextTile{min-height:130px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:12px;text-align:center;color:inherit;text-decoration:none;background:var(--pr-surface);border:1px solid var(--pr-line);border-radius:var(--pr-radius-md);font-size:12px}

/* Una sugerencia cada vez. Cinco tareas a la vez se ignoran todas. */
.perSugerencia {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-3);
  padding: var(--pr-3) var(--pr-4); margin-bottom: var(--pr-6);
  background: var(--pr-primary-soft); border: 1px solid var(--pr-primary);
  border-radius: var(--pr-r-card);
}
.perSugerencia div { display: flex; flex-direction: column; gap: 2px; }
.perSugerencia small { font-size: var(--pr-caption); color: var(--pr-text-soft); }

.perAvatarGrande { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--pr-border); }
.perAvatarVacio { display: grid; place-items: center; background: var(--pr-surface-2); color: var(--pr-text-faint); }

.perGaleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pr-1); }
.perGaleria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pr-2); display: block; }
.perGaleriaVacia { display: grid; place-items: center; aspect-ratio: 1; background: var(--pr-surface-2); border-radius: var(--pr-2); color: var(--pr-text-faint); }

.diaPrivado { display: flex; align-items: center; gap: var(--pr-2); margin-bottom: var(--pr-3); }

/* ---- logros ------------------------------------------------------------------------- */

.logGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--pr-3); }
/* Los bloqueados se ven enteros, solo más apagados: saber lo que falta es lo
   que engancha, esconderlo no protege nada. */
.logCard { padding: var(--pr-4); display: flex; flex-direction: column; gap: var(--pr-1); opacity: .68; }
.logCard.isOn { opacity: 1; border-color: var(--pr-success); }
.logIcono { font-size: 26px; }
.logCard b { font-size: var(--pr-small); }
.logCard small { font-size: var(--pr-caption); color: var(--pr-text-soft); line-height: 1.45; }
.logBarra { height: 5px; border-radius: 99px; background: var(--pr-surface); overflow: hidden; margin-top: var(--pr-1); }
.logBarra span { display: block; height: 100%; background: var(--pr-primary); }
.logProg { font-size: 11px; }
.logXp { font-size: 11px; font-weight: 900; color: var(--pr-success); }

@media (min-width: 840px) {
  .rnkYo { bottom: var(--pr-4); }
}

/* ---- distintivo del equipo -------------------------------------------------------
 *
 * Lleva texto además de color: "Administrador" se entiende sin distinguir
 * tonos, y un color suelto no dice qué significa.
 */
.perStaff {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: var(--pr-2);
  padding: 2px var(--pr-2);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.perStaff.isAdmin {
  background: var(--pr-grad-nivel, var(--pr-surface-2));
  border: 1px solid var(--pr-primary);
  color: var(--pr-primary);
}
.perStaff.isMod {
  background: var(--pr-surface-2);
  border: 1px solid var(--pr-border-strong);
  color: var(--pr-text-soft);
}

/* ---- foto de perfil en ajustes ---------------------------------------------------- */

.fotoCaja { display: flex; align-items: center; gap: var(--pr-4); }

.fotoPrevia {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--pr-surface-2);
  border: 1px solid var(--pr-border);
  color: var(--pr-text-faint);
}
.fotoPrevia img { width: 100%; height: 100%; object-fit: cover; }

.fotoAcciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pr-2); min-width: 0; }
.fotoAcciones .prHint { flex: 1 1 100%; margin: 0; }



/* ===========================================================================
   Perfil rediseñado.

   Antes era una cabecera pequeña y tres listas de enlaces: parecía la pantalla
   de ajustes de la aplicación, no el perfil de nadie. Ahora hay portada,
   avatar, cuatro cifras y cuatro pestañas.

   Todo se apoya en los tokens de `tokens.css`. Ni un hex suelto que luego
   haya que buscar por el proyecto cuando cambie el azul.
   =========================================================================== */

.perHero {
  position: relative;
  margin-bottom: var(--pr-4);
  overflow: hidden;
  border: 1px solid var(--pr-border);
  border-radius: 22px;
  background: var(--pr-surface-1);
}

/* Sin foto, una portada de marca: mar y radar. Es CSS, no una imagen, así que
   no cuesta una descarga ni provoca salto al cargar. */
.perPortada {
  height: 104px;
  background:
    radial-gradient(circle at 80% 120%, rgba(53,182,216,.30), transparent 55%),
    radial-gradient(circle at 12% -20%, rgba(56,224,196,.18), transparent 50%),
    linear-gradient(120deg, #08303e, #0a2030);
}
.perPortada.tieneFoto { background-size: cover; background-position: center; }

/* El avatar sube; el texto NO.
   Antes las tres cosas compartían fila y el bloque empezaba por encima del
   final de la portada, así que el nombre caía sobre el degradado y se leía
   mal. Ahora el avatar tiene su propia fila -es lo único que pisa la portada- y
   el nombre arranca ya sobre el fondo liso de la tarjeta. */
.perHeroCuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar avatar"
    "texto  lado";
  align-items: end;
  gap: var(--pr-2) var(--pr-3);
  padding: 0 var(--pr-4);
}
.perHeroCuerpo .perAvatar { grid-area: avatar; margin-top: -44px; }
.perHeroCuerpo .perHeroTexto { grid-area: texto; }
.perHeroLado {
  grid-area: lado; display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; padding-bottom: 2px;
}

/* Editar perfil: al lado del nivel, donde se busca. Con texto además del
   icono, porque un lápiz solo obliga a adivinar. */
.perEditar {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 0 10px;
  border: 1px solid var(--pr-border); border-radius: 999px;
  background: transparent; color: var(--pr-text-soft);
  font: 700 11px/1 var(--pr-font); text-decoration: none; white-space: nowrap;
}
.perEditar:hover { border-color: var(--pr-primary); color: var(--pr-text); }

.perAvatar {
  display: grid; place-items: center;
  width: 88px; height: 88px;
  overflow: hidden;
  border: 3px solid var(--pr-surface-1);
  border-radius: 50%;
  background: var(--pr-surface-2);
}
.perAvatar img { width: 100%; height: 100%; object-fit: cover; }
.perAvatarLetra { font: 800 34px/1 var(--pr-font); color: var(--pr-primary); }

.perHeroTexto { min-width: 0; padding-bottom: 4px; }
/* Color y peso explícitos: es el segundo elemento más importante del hero,
   después del avatar, y tiene que leerse sin esfuerzo. */
.perHeroTexto h1 {
  margin: 0; color: var(--pr-text);
  font-size: clamp(19px, 5vw, 24px); font-weight: 800; line-height: 1.15;
  overflow-wrap: anywhere;
}
/* El distintivo baja a su propia línea: en 360 px competía con el nombre por
   el ancho y lo partía por la mitad. */
.perHeroTexto .perStaff { margin-top: 5px; }
.perHeroSub { margin: 3px 0 0; color: var(--pr-text-soft); font-size: 12px; line-height: 1.4; }

.perNivelBadge {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto; padding: 6px 11px;
  border: 1px solid var(--pr-border-strong); border-radius: 999px;
  background: var(--pr-primary-soft);
  font: 800 11px/1 var(--pr-font); white-space: nowrap;
}

.perHero .perProgreso { padding: var(--pr-4); }

/* ---- estadísticas ------------------------------------------------------- */

.perTiles { gap: var(--pr-2); }
.perTile {
  padding: var(--pr-3) var(--pr-2);
  border-radius: 14px;
}
.perTile b { font-size: 22px; }

/* ---- pestañas ----------------------------------------------------------- */

.perTabs {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 2px; overflow-x: auto;
  margin: 0 0 var(--pr-3);
  border-bottom: 1px solid var(--pr-border);
  background: var(--pr-surface);
  scrollbar-width: none;
}
.perTabs::-webkit-scrollbar { display: none; }
.perTab {
  flex: 0 0 auto; min-height: 44px; padding: 10px 13px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--pr-text-soft);
  font: 750 13px/1 var(--pr-font); cursor: pointer;
}
.perTab.on { border-bottom-color: var(--pr-primary); color: var(--pr-text); }

.perPanel { animation: perPanelIn var(--pr-base, 180ms) var(--pr-ease, ease); }
@keyframes perPanelIn { from { opacity: .6; transform: translateY(3px); } }

.perVerTodo { color: var(--pr-primary); font-size: 12px; font-weight: 700; text-decoration: none; }

/* ---- capturas ----------------------------------------------------------- */

.perCapturas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pr-2);
}
@media (min-width: 620px) { .perCapturas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .perCapturas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.perCap {
  display: flex; flex-direction: column; min-width: 0;
  overflow: hidden; border: 1px solid var(--pr-border); border-radius: 16px;
  background: var(--pr-surface-1); color: inherit; text-decoration: none;
}
/* Proporción fija: la rejilla no salta cuando entran las fotos. */
.perCapFoto {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--pr-surface-2);
}
.perCapFoto img { width: 100%; height: 100%; object-fit: cover; }
.perCapSinFoto { color: var(--pr-text-faint); }
.perCapPie { padding: 9px 10px 11px; }
.perCapPie b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.perCapPie i { display: block; margin-top: 2px; color: var(--pr-accent); font: 700 12px/1.2 var(--pr-font-num); font-style: normal; }
.perCapPie small { display: block; margin-top: 3px; color: var(--pr-text-faint); font-size: 10px; letter-spacing: .04em; }

.perCapNueva {
  align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 1.28;
  border-style: dashed; color: var(--pr-text-soft); font-size: 12px; text-align: center;
}
.perCapMas { font: 300 34px/1 var(--pr-font); color: var(--pr-primary); }

/* ---- calendario --------------------------------------------------------- */

.perCalCabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pr-2); margin-bottom: var(--pr-2);
}
.perCalCabecera b { font-size: 15px; text-transform: capitalize; }
.perCalFlecha {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--pr-border); border-radius: 12px;
  background: transparent; color: var(--pr-text); font-size: 17px; cursor: pointer;
}
.perCalSemana, .perCalRejilla {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.perCalSemana span {
  padding-bottom: 4px; color: var(--pr-text-faint);
  font-size: 10px; font-weight: 800; text-align: center;
}
.perDia {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; min-height: 34px;
  border: 1px solid transparent; border-radius: 9px;
  background: var(--pr-surface-1); color: var(--pr-text-soft);
  font-size: 12px; cursor: default;
}
.perDia i { font-style: normal; }
.perDiaVacio { background: transparent; }
/* Tres intensidades de verde. La cifra sigue escrita: no se depende del color. */
/* Intensidad de verde con el token de exito: el mismo significado en el tema
   claro y en el oscuro. La cifra sigue escrita dentro: no se depende del color. */
.perDia.n1 { background: color-mix(in srgb, var(--pr-success) 16%, transparent); color: var(--pr-text); }
.perDia.n2 { background: color-mix(in srgb, var(--pr-success) 34%, transparent); color: var(--pr-text); }
.perDia.n3 { background: color-mix(in srgb, var(--pr-success) 62%, transparent); color: var(--pr-primary-ink); font-weight: 800; }
.perDia[data-perdia] { cursor: pointer; }
.perDia.esHoy { border-color: var(--pr-primary); }
.perDia.elegido { outline: 2px solid var(--pr-primary); outline-offset: 1px; }
.perDia em {
  position: absolute; top: 2px; right: 4px;
  font: 800 9px/1 var(--pr-font-num); font-style: normal; color: inherit; opacity: .85;
}

.perDiaCaja {
  margin-top: var(--pr-3); padding: var(--pr-3);
  border: 1px solid var(--pr-border); border-radius: 16px; background: var(--pr-surface-1);
}
.perDiaCaja b { font-size: 14px; }
.perDiaCaja small { display: block; margin: 2px 0 10px; color: var(--pr-text-soft); font-size: 12px; }

/* ---- especies ----------------------------------------------------------- */

.perEspecies { display: grid; gap: var(--pr-2); }
.perEspecie {
  border: 1px solid var(--pr-border); border-radius: 16px;
  background: var(--pr-surface-1); overflow: hidden;
}
.perEspecie summary {
  display: flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 var(--pr-3);
  list-style: none; cursor: pointer;
}
.perEspecie summary::-webkit-details-marker { display: none; }
.perEspeciePos {
  flex: 0 0 auto; color: var(--pr-primary);
  font: 800 13px/1 var(--pr-font-num);
}
.perEspecie summary b { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.perEspecie summary small { flex: 0 0 auto; color: var(--pr-text-soft); font-size: 12px; }
.perEspecieCuerpo { padding: 0 var(--pr-3) var(--pr-3); }
.perEspecieDatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--pr-2);
  padding-top: var(--pr-2); border-top: 1px solid var(--pr-border);
}
.perEspecieDatos span { display: block; color: var(--pr-text-faint); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.perEspecieDatos b { font: 800 16px/1.2 var(--pr-font-num); }
.perEspecieFotos { display: flex; gap: 6px; margin-top: var(--pr-3); }
.perEspecieFotos img { width: 33%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; }

/* ---- progreso ----------------------------------------------------------- */

.perLogros {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--pr-2);
}
.perLogro {
  display: grid; place-items: center; gap: 5px;
  padding: var(--pr-3) 6px;
  border: 1px solid var(--pr-border); border-radius: 14px;
  background: var(--pr-surface-1); text-align: center;
}
.perLogro small { font-size: 10px; line-height: 1.3; color: var(--pr-text-soft); }
.perLogroIcono { font-size: 20px; }
.perLogro.bloqueado { opacity: .45; }

/* ---- más opciones ------------------------------------------------------- */

.perMas {
  margin-top: var(--pr-5);
  border: 1px solid var(--pr-border); border-radius: 18px;
  background: var(--pr-surface-1); padding: 0 var(--pr-3);
}
.perMas > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 52px; list-style: none; cursor: pointer;
  font: 750 14px/1 var(--pr-font);
}
.perMas > summary::-webkit-details-marker { display: none; }
.perMas[open] > summary { border-bottom: 1px solid var(--pr-border); margin-bottom: var(--pr-3); }
.perMas .prSection { margin-bottom: var(--pr-3); }

/* ---- invitar amigos ----------------------------------------------------- */

.perReferral {
  position: relative;
  margin-top: var(--pr-5); padding: var(--pr-4);
  border: 1px solid var(--pr-border-strong); border-radius: 18px;
  /* Con tokens, no con un navy fijo: las pantallas de contenido usan el tema
     claro (`.prApp:not(.prMapa)`) y ahi un rgba(7,26,35,.6) era un borron
     oscuro en mitad de la pagina. */
  background: linear-gradient(150deg, var(--pr-primary-soft), var(--pr-surface-2));
}
.perReferral h2 { margin: 0 0 5px; font-size: 16px; }
.perReferral p { margin: 0 0 var(--pr-3); color: var(--pr-text-soft); font-size: 13px; line-height: 1.5; }
.perReferralPremio {
  position: absolute; top: var(--pr-4); right: var(--pr-4);
  padding: 5px 10px; border-radius: 999px;
  background: var(--pr-primary); color: var(--pr-primary-ink);
  font: 800 12px/1 var(--pr-font-num);
}

/* ---- estados vacíos ----------------------------------------------------- */

.perVacio {
  padding: var(--pr-6) var(--pr-4); text-align: center;
  border: 1px dashed var(--pr-border); border-radius: 18px;
}
.perVacioTitulo { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.perVacio p { margin: 0 0 var(--pr-3); color: var(--pr-text-soft); font-size: 13px; line-height: 1.5; }
.perVacio .prBtn { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .perPanel { animation: none; }
}


/* En 360 px el nivel y «Editar» ya no caben junto al nombre sin estrangularlo:
   pasan a su propia fila, alineados a la izquierda como el resto. */
@media (max-width: 379px) {
  .perHeroCuerpo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "avatar" "texto" "lado";
  }
  .perHeroLado { flex-direction: row; align-items: center; }
}


/* ===========================================================================
   Capturas · «Descubrir» en rejilla (§8-§12).

   La pregunta de esta pestaña es visual -«¿qué se está pescando?»-, así que
   manda la foto. La tarjeta social larga se queda en «Mías», que es donde se
   repasa el propio historial y hacen falta editar y borrar.
   =========================================================================== */

/* La rejilla de capturas puede respirar mas que un feed de texto: son fotos,
   y en un monitor grande cuatro columnas de 200 px se quedan pequeñas. El
   resto de pantallas sigue con los 860 px de `.prMain`. */
.prCatches .prMain { max-width: 1120px; }

.capIntroFila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pr-3); flex-wrap: wrap; margin-bottom: var(--pr-3);
}
.capIntroFila .capIntro { margin: 0; flex: 1 1 200px; }
.capAtlas {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 14px; border: 1px solid var(--pr-border-strong); border-radius: 999px;
  background: var(--pr-primary-soft); color: var(--pr-text);
  font: 700 12px/1 var(--pr-font); text-decoration: none; white-space: nowrap;
}
.capAtlas:hover, .capAtlas:focus-visible { border-color: var(--pr-primary); }
@media (pointer: coarse) { .capAtlas { min-height: 44px; } }

.capIntro {
  margin: 0 0 var(--pr-3); color: var(--pr-text-soft);
  font-size: var(--pr-small, 13px); line-height: 1.45;
}

.capRejilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pr-3);
}
@media (min-width: 620px) { .capRejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .capRejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.capTile {
  display: flex; flex-direction: column; min-width: 0;
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--pr-border); border-radius: var(--pr-r-card, 16px);
  background: var(--pr-surface-1); color: inherit;
  transition: border-color var(--pr-base, 160ms) var(--pr-ease, ease),
              transform var(--pr-base, 160ms) var(--pr-ease, ease);
}
.capTile:hover { border-color: var(--pr-primary); }
.capTile:active { transform: scale(.985); }
.capTile:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }

/* 4:5 y `cover`: la foto de una captura casi siempre es vertical, y así el pez
   se recorta por los lados y no por la cabeza. */
.capTileMarco {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(150deg, var(--pr-surface-2), var(--pr-primary-soft));
}
.capTileFoto { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto, marcador de marca: silueta de pez sobre el fondo de la casa. Ni un
   icono de imagen rota ni un hueco gris. */
.capTileSinFoto { color: var(--pr-primary); opacity: .55; }

.capTilePie { padding: 9px 10px 11px; min-width: 0; }
.capTilePie b {
  display: block; font-size: 13px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.capTilePie i {
  display: block; margin-top: 2px; font-style: normal;
  color: var(--pr-accent); font: 700 12px/1.2 var(--pr-font-num, inherit);
}
.capTilePie small {
  display: block; margin-top: 3px; color: var(--pr-text-faint); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Resumen de «Mías» (§24). Solo cifras que salen de lo que hay delante. */
.capResumen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pr-2);
  margin-bottom: var(--pr-4);
}
.capResumenDato {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--pr-3) var(--pr-2);
  border: 1px solid var(--pr-border); border-radius: 14px;
  background: var(--pr-surface-1);
}
.capResumenDato b { font: 800 20px/1 var(--pr-font-num, inherit); }
.capResumenDato span { color: var(--pr-text-faint); font-size: 11px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .capTile { transition: none; }
  .capTile:active { transform: none; }
}


/* ===========================================================================
   Ficha de especie (Atlas).

   Tema claro, como el resto de pantallas de contenido: todo con tokens, nada
   de hex sueltos. La estructura es la del encargo, seccion a seccion.
   =========================================================================== */

/* La especie de una captura lleva a su ficha. Se subraya al pasar por encima
   en vez de ir siempre en color: en una rejilla de doce capturas, doce enlaces
   de color compiten con las fotos. */
/* ---- índice del Atlas ---------------------------------------------------- */

.atlIntro { margin: 0 0 var(--pr-3); color: var(--pr-text-soft); font-size: 13px; line-height: 1.5; }
.atlBuscador { margin-bottom: var(--pr-3); }
.atlFiltros { margin-bottom: var(--pr-4); }
.atlCuenta { margin: 0 0 var(--pr-3) !important; }

.atlRejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--pr-2);
}
.atlBuscador .prInput { width: 100%; }
.atlTarjeta {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px;
  min-width: 0; padding: 10px 12px 10px 10px;
  border: 1px solid var(--pr-border); border-radius: 14px;
  background: var(--pr-surface-1); color: inherit; text-decoration: none;
  transition: border-color var(--pr-base, 160ms) var(--pr-ease, ease);
}
/* Sin ilustracion, el nombre ocupa todo el ancho. */
.atlTarjeta.sinArte { grid-template-columns: 1fr auto; }
.atlTarjeta:hover { border-color: var(--pr-primary); }
.atlTarjeta:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }
.atlArte { display: grid; place-items: center; color: var(--pr-text-faint); }
.atlArte svg { width: 100%; height: auto; }
.atlTexto { min-width: 0; display: grid; gap: 1px; }
.atlTexto b {
  font-size: 13.5px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atlTexto i {
  color: var(--pr-text-faint); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Un grupo (`Diplodus spp.`) no es una especie y no tendrá afinidad: se avisa
   aquí para que nadie lo abra esperando un número. */
.atlGrupo {
  flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; white-space: nowrap;
  background: var(--pr-surface-2); color: var(--pr-text-faint);
  font: 700 9px/1.4 var(--pr-font); vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) { .atlTarjeta { transition: none; } }

.capEspecie { color: inherit; text-decoration: none; }
.capEspecie:hover, .capEspecie:focus-visible { text-decoration: underline; }

.espHero {
  display: grid; gap: var(--pr-3);
  margin-bottom: var(--pr-5); padding: var(--pr-4);
  border: 1px solid var(--pr-border); border-radius: 20px;
  background: var(--pr-surface-1);
}
.espHeroArte { display: grid; place-items: center; }
.espHeroArte svg { max-width: 100%; height: auto; }
.espHeroTexto h1 { margin: 0; font-size: clamp(21px, 5.5vw, 28px); line-height: 1.15; }
.espCientifico { margin: 4px 0 0; color: var(--pr-text-soft); font-size: 13px; }

.espChips { display: flex; flex-wrap: wrap; gap: 6px; }
.espChip {
  padding: 5px 10px; border: 1px solid var(--pr-border); border-radius: 999px;
  background: var(--pr-primary-soft); font-size: 11px; font-weight: 700;
}

.espSeccion { margin-bottom: var(--pr-5); }
.espSeccion > h2 {
  margin: 0 0 var(--pr-2); font-size: 12px; font-weight: 900;
  color: var(--pr-text-faint); text-transform: uppercase; letter-spacing: .06em;
}
.espSeccion p { margin: 0 0 var(--pr-2); line-height: 1.6; font-size: 14px; }
.espLista { margin: 0; padding-left: 18px; }
.espLista li { margin-bottom: 6px; line-height: 1.55; font-size: 14px; }

/* Hoy en este pesquero: la afinidad, con su barra y sus motivos. */
.espHoy {
  padding: var(--pr-4); border: 1px solid var(--pr-border-strong);
  border-radius: 18px; background: var(--pr-surface-1);
}
.espAfinidad { display: grid; gap: 4px; }
.espAfinidadEtiqueta {
  font-size: 11px; font-weight: 800; color: var(--pr-text-faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.espAfinidad > b { font: 900 42px/1 var(--pr-font-num, inherit); letter-spacing: -.04em; }
.espAfinidad > b i { margin-left: 3px; font: 700 15px/1 var(--pr-font); color: var(--pr-text-soft); }
.espAfinidad > small { color: var(--pr-text-soft); font-size: 12px; }
.espAfinidadBarra {
  width: 100%; height: 8px; margin: 6px 0 2px;
  overflow: hidden; border-radius: 999px;
  background: color-mix(in srgb, var(--pr-text) 10%, transparent);
}
.espAfinidadBarra i { display: block; height: 100%; border-radius: inherit; }

/* La distincion entre Score y afinidad se explica, no se da por sabida. */
.espNota {
  margin: var(--pr-3) 0 0 !important; padding: 9px 11px;
  border-left: 3px solid var(--pr-primary); border-radius: 0 10px 10px 0;
  background: var(--pr-primary-soft);
  color: var(--pr-text-soft); font-size: 12px !important; line-height: 1.5 !important;
}

.espMotivos { margin-top: var(--pr-3); }
.espMotivos h3 {
  margin: 0 0 5px; font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em;
}
.espMotivos ul { margin: 0; padding-left: 16px; }
.espMotivos li { font-size: 13px; line-height: 1.5; margin-bottom: 3px; }
.esFavor h3 { color: var(--pr-success); }
.esNeutro h3 { color: var(--pr-text-faint); }
.esContra h3 { color: var(--pr-danger); }

/* Bloques que esperan capturas. NO son un cero: son un hueco explicado. */
.espSinMuestra, .espAviso, .espCerrado {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 !important; padding: 10px 12px;
  border: 1px dashed var(--pr-border); border-radius: 12px;
  color: var(--pr-text-soft); font-size: 12.5px !important; line-height: 1.5 !important;
}
.espSinMuestra svg, .espAviso svg, .espCerrado svg { flex: 0 0 auto; margin-top: 1px; }
.espAviso, .espCerrado {
  border-style: solid; border-color: var(--pr-warning);
  background: color-mix(in srgb, var(--pr-warning) 10%, transparent);
  color: var(--pr-text);
}
.espFuenteDato {
  margin: 6px 0 var(--pr-3) !important;
  color: var(--pr-text-faint); font-size: 11px !important;
}

.espLegal p { display: flex; align-items: flex-start; gap: 8px; }
.espLegal .prBtn { margin-top: var(--pr-2); }

.espFuentes {
  margin-top: var(--pr-6); padding: 0 var(--pr-3);
  border: 1px solid var(--pr-border); border-radius: 14px;
  background: var(--pr-surface-1);
}
.espFuentes > summary {
  min-height: 46px; display: flex; align-items: center;
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; color: var(--pr-text-soft);
}
.espFuentes > summary::-webkit-details-marker { display: none; }
.espFuentes p { padding-bottom: var(--pr-2); font-size: 12.5px; line-height: 1.55; }

/* ---- ficha de especie · suplemento ------------------------------------------ */

.espSub {
  margin: var(--pr-3) 0 6px; font-size: 11px; font-weight: 900;
  color: var(--pr-text-faint); text-transform: uppercase; letter-spacing: .05em;
}

/* Histograma de doce columnas. Se usa igual para la temporada orientativa y
   para las capturas reales, pero NUNCA con el mismo rotulo: son datos de
   distinta naturaleza y el titulo de la seccion es lo que los separa. */
.espBarras {
  /* El numero de columnas lo pone el JS: doce meses u ocho fases. */
  display: grid; gap: 3px; align-items: end;
  height: 108px; margin-bottom: var(--pr-2);
}
.espBarra { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; }
.espBarra > i {
  align-self: end; width: 100%; min-height: 2px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--pr-primary), color-mix(in srgb, var(--pr-primary) 55%, transparent));
}
.espBarra > b {
  font-size: 9px; font-weight: 700; text-align: center;
  color: var(--pr-text-faint); letter-spacing: -.02em;
}
/* La temporada es una referencia editorial, no un recuento: se pinta en un tono
   distinto para que las dos graficas no se confundan de un vistazo. */
.espTemporada .espBarra > i {
  background: linear-gradient(180deg, var(--pr-text-faint), color-mix(in srgb, var(--pr-text-faint) 40%, transparent));
}
/* ---- normativa --------------------------------------------------------------- */

.espNormaFiltro {
  display: flex; flex-wrap: wrap; gap: var(--pr-2); margin-bottom: var(--pr-3);
}
.espNormaFiltro label {
  display: grid; gap: 3px; flex: 1 1 150px;
  font-size: 10px; font-weight: 800; color: var(--pr-text-faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.espNormaFiltro select {
  width: 100%; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--pr-border); border-radius: 12px;
  background: var(--pr-surface-1); color: var(--pr-text);
  font: 600 13px/1 var(--pr-font);
}

.espEstado {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 0 0 var(--pr-2) !important; padding: 9px 12px;
  border-left: 4px solid var(--pr-border-strong); border-radius: 0 12px 12px 0;
  background: var(--pr-surface-1);
}
.espEstado b { font-size: 14px; }
.espEstado span { color: var(--pr-text-soft); font-size: 11.5px; }
.espEstado.esp-ok { border-left-color: var(--pr-success); }
.espEstado.esp-warn { border-left-color: var(--pr-warning); }
.espEstado.esp-danger { border-left-color: var(--pr-danger); }

.espMarco { margin-bottom: var(--pr-2); }
.espMarco > a { font-size: 13px; font-weight: 700; }
.espSeccion.espLegal a { color: var(--pr-primary); }