/* ── La portada: lo que solo gasta la portada (tanda 299) ──
 *
 * La norma de la casa dice que el CSS de una sola página va en su propio
 * fichero, y la portada era la excepción: como es la página del
 * presupuesto de peso, se venía metiendo todo en components.css para no
 * pedirle una hoja más. El razonamiento ya no se sostiene —el rediseño
 * de la 299 trae bastante CSS propio como para que esa hoja exista de
 * todas formas—, así que aquí se junta lo que solo se ve en /:
 * la fila de «hoy», el héroe del reto, el banner de noticias (que se
 * trae de components.css) y el galón de rareza de las guías recientes.
 *
 * Lo que sale de components.css lo deja de bajar TODO EL MUNDO: el
 * banner de noticias eran ~60 líneas que solo pinta la portada. */

/* ── Lo que te trae hoy: el reto y la última noticia ── */

/* Flex y no una rejilla de dos columnas: cualquiera de las dos secciones
   se puede recoger sola (js/home.js: recogerSeccion) y con flex la que
   queda se lleva la fila entera en vez de dejar media portada vacía.
   La base de 300px es la que las apila en el móvil sin media query. */
.portada-hoy {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.portada-hoy > section {
  flex: 1 1 300px;
  min-width: 0;
}

/* En escritorio la fila de «hoy» se alinea con el panel de abajo: las
   mismas dos columnas (ancha + 320px). Si cada una llevara su reparto,
   el borde del reto y el del foro no coincidirían y la portada se vería
   descuadrada por la mitad. */
@media (min-width: 960px) {
  .portada-hoy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
  }

  /* Si una de las dos se recoge (no hay noticia, o no hay reto), la que
     queda se lleva la fila. Una rejilla de dos columnas no lo hace sola:
     dejaría 320 px en blanco al lado. La marca la pone recogerSeccion
     (js/home.js). */
  .portada-hoy:has(> .seccion-recogida) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La cadena de alturas hasta el héroe: la sección y el hueco que rellena
   js/home.js (#retoTarjetas, que es una rejilla de tarjetas en el resto
   de la portada) se hacen flex para que el estirón de la fila llegue
   hasta el héroe y éste mida lo mismo que la noticia de al lado. Nada de
   `height: 100%` por el camino: un alto explícito en un hijo de flex
   ANULA el estirón, y como el padre no tiene alto definido se queda en
   el alto del contenido — el héroe salía corto y debajo quedaba un claro
   blanco. Y sin el margen de las tarjetas, que aquí deja un escalón. */
.portada-hoy #retoSeccion,
.portada-hoy #retoTarjetas {
  display: flex;
  margin-bottom: 0;
}

/* Y que cada eslabón OCUPE su sitio: un hijo de flex sin esto se encoge
   a lo que mide su contenido, y el héroe salía a media columna con un
   claro de 200px al lado. */
.portada-hoy #retoSeccion > *,
.portada-hoy #retoTarjetas > * {
  flex: 1;
  min-width: 0;
}

/* ── El héroe del reto ── */
.reto-hoy {
  position: relative;
  display: flex;
  flex-direction: column;
  /* El contenido va CENTRADO en vertical, no pegado arriba con el botón
     abajo del todo: la fila mide lo que mida la noticia de al lado (que
     lleva foto y puede ser bastante más alta), y con el botón anclado al
     suelo quedaba medio héroe de azul vacío en medio. Centrado, el hueco
     se reparte arriba y abajo y se lee como aire, no como un fallo. */
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy-dark), var(--navy) 55%, #3d8ab8);
  color: var(--blanco-fijo);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* La trama de puntos, la misma que la cabecera de un torneo: sin ella el
   degradado se ve plano. */
.reto-hoy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: 0.55;
  pointer-events: none;
}

.reto-hoy > * {
  position: relative;
  z-index: 1;
}

.reto-hoy-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.reto-hoy-titular {
  font-family: 'Fredoka', 'Inter', sans-serif;
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 600;
}

.reto-hoy-sub {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

/* Los cinco puntos del reto. Vacíos son una invitación —se ve de un
   vistazo que son cinco preguntas y no diez— y llenos, el resultado de
   hoy sin tener que leer el número. */
.reto-puntos {
  display: flex;
  gap: 8px;
  margin: 2px 0;
}

.reto-punto {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
}

.reto-punto.acertado {
  background: #ffd166;
  border-color: #ffd166;
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.22);
}

.reto-hoy-boton {
  margin-top: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: 700;
  /* Medía 38 de alto (tanda 312). Es EL botón de la portada. */
  min-height: 44px;
}

/* El botón blanco sobre azul: el .btn-primary de la casa es azul y sobre
   el degradado desaparecería. */
.reto-hoy .btn-primary.reto-hoy-boton {
  background: var(--blanco-fijo);
  color: var(--navy-dark);
  border-color: var(--blanco-fijo);
}

.reto-hoy .btn-primary.reto-hoy-boton:hover {
  background: var(--ice);
  border-color: var(--ice);
}

/* El día que ya has jugado no hay nada que pulsar con urgencia: el
   enlace a la liga va de contorno, para que no compita con el resto de
   la portada. */
.reto-hoy-boton-flojo {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  padding: 12px 16px;
  color: var(--blanco-fijo);
  font-size: var(--t-sm);
}

.reto-hoy-boton-flojo:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--blanco-fijo);
}

.reto-hoy-repaso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  width: 100%;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-sm);
  font-weight: 600;
}

.reto-hoy-repaso:hover {
  color: var(--blanco-fijo);
}

/* Jugado: mismo sitio y mismo tamaño, pero apagado. Si el de hoy hecho
   se viera igual de encendido que el de hoy pendiente, la portada
   perdería la única señal que distingue «te toca» de «ya está». */
.reto-hoy-hecha {
  background: linear-gradient(120deg, #24404f, #2f5468 60%, #3f6b80);
}

/* ── El banner de la última noticia (tanda 288, aquí desde la 299) ──
 *
 * Va con imagen, a diferencia de la fila fina del torneo, porque una
 * noticia sin foto es un enlace y con foto es una noticia —el mismo
 * razonamiento de css/noticias.css—. La imagen no toca el presupuesto
 * de peso: va en diferido y no es CSS ni JS. */

.noticia-banner {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color 0.15s var(--ease), transform 0.1s var(--ease);
}

a.noticia-banner:hover {
  border-color: var(--navy);
  transform: translateY(-1px);
}

.noticia-banner-foto {
  display: block;
  width: 100%;
  /* La caja reserva su altura ANTES de que cargue la imagen: sin esto la
     portada pega un salto justo cuando la persona va a pulsar algo. */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  background: var(--ice);
}

.noticia-banner-texto {
  padding: 16px 16px;
}

.noticia-banner-etiqueta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.noticia-banner-texto strong {
  display: block;
  margin-top: 4px;
  line-height: 1.3;
}

.noticia-banner-texto small {
  display: block;
  margin-top: 4px;
  color: var(--text-mid);
}

/* Va FUERA del banner, y no dentro como un renglón más: dentro sería un
 * enlace metido en otro enlace —que ni es HTML válido ni se puede
 * pulsar— y llevaría al artículo, que es justo lo contrario de lo que
 * promete. Esto es lo que convierte el banner en «hay una sección de
 * noticias» en vez de «hay este artículo». */
.noticia-banner-todas {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Las tarjetas de categoría, sin marco de color ──
 *
 * El borde de 2px se lo daba `.category-card` para que se viera el color
 * del hash; sin color, 2px de gris solo es una caja más gorda. */
#categoriesGrid .category-card {
  border-width: 1px;
}

#categoriesGrid .category-card:hover {
  border-color: var(--navy);
}

/* ── Lo último del foro, en la portada ── */
.foro-vivo {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  box-shadow: var(--shadow-xs);
}

.foro-vivo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.foro-vivo-cabecera h2 {
  margin: 0;
  font-size: var(--t-xl);
}

.foro-vivo-cabecera .subtext {
  margin: 2px 0 0;
}

.foro-vivo-boton {
  padding: 8px 12px;
  font-size: var(--t-sm);
  white-space: nowrap;
}

.foro-vivo-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.foro-vivo-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.foro-vivo-fila:hover {
  background: var(--ice);
}

.foro-vivo-fila > .mini-avatar {
  flex-shrink: 0;
}

.foro-vivo-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

/* Dos líneas y no una (tanda 316). Con `nowrap` un título largo se
   cortaba con «…» incluso en los 562 px del escritorio, y en el móvil
   —donde solo le quedaban 160— se cortaban los tres. Un tema que no
   dice de qué va no invita a entrar a nadie. */
.foro-vivo-titulo {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.foro-vivo-titulo:hover {
  color: var(--navy);
  text-decoration: underline;
}

.foro-vivo-meta {
  font-size: var(--t-xs);
  white-space: nowrap;
  /* Con nowrap y SIN recorte, «Fulanito de Tal · hace 30 minutos» se
     salía de su columna y estiraba la portada entera en un móvil de
     320px. Mismo trato que el título de al lado: se recorta con «…». */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── En el móvil el título manda (tanda 316) ──
 *
 * Medido en 390 px: al título le quedaban 160 px y los tres salían
 * cortados —«Mi lista de C…»—, porque la cuenta de mensajes se lleva su
 * columna a la derecha. En 1280 tiene 562 y no se corta ni uno. Un tema
 * que no dice de qué va no invita a entrar a nadie.
 *
 * La cuenta NO se quita: la 300 la puso en grande a propósito, porque es
 * el dato que decide si entras. Lo que cambia es dónde — baja a su
 * propia línea, debajo del autor y la hora, y deja el ancho entero para
 * el título, que se reparte en dos líneas.
 */
@media (max-width: 559px) {
  .foro-vivo-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }
  .foro-vivo-fila > .mini-avatar { grid-row: 1 / span 2; }
  .foro-vivo-texto { grid-column: 2; }
  .foro-vivo-cuenta {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: 4px;
    text-align: left;
    margin-top: 4px;
  }
  .foro-vivo-cuenta b {
    display: inline;
    font-size: var(--t-sm);
  }
  .foro-vivo-cuenta small {
    display: inline;
    margin-top: 0;
  }

  /* TRES líneas y no dos: medido, en 390 px al título le quedan 222 y en
     320 px, 152. Con dos líneas «¿Qué mazo me recomendáis para empezar?»
     —que no es un título raro— seguía cortándose. */
  .foro-vivo-titulo {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* ── Las dos columnas de verdad (tanda 300) ──
 *
 * La 299 dejó el reto y la noticia arriba, pero de ahí para abajo la
 * portada seguía siendo una torre de bloques a pantalla completa: guía
 * destacada, torneo, foro, atajos, categorías, actividad y guías, uno
 * detrás de otro. Ahora lo que pasa va en la columna ancha y lo tuyo
 * —tu torneo, tus pasos, tu liga— en la estrecha. */

/* `.seccion-cabecera` vive en css/components.css desde la tanda 303: la
   usan la portada Y /usuarios, y esas dos no comparten ninguna otra
   hoja. Tenerla aquí dejaba el título de «Gente de PokeDoc» sin estilo. */

/* La caja blanca de la columna lateral. Es la misma forma que .top-mes,
   que ya vive ahí: así los cinco bloques de la lateral se leen como
   cinco cosas del mismo tipo y no como cinco inventos distintos. */
.panel-lateral {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 16px;
  box-shadow: var(--shadow-xs);
}

/* ── El próximo torneo: una cita, no un enlace ── */
.portada-torneo {
  display: flex;
  align-items: center;
  /* 12 y no 16 (tanda 311): la escala redondeó hacia arriba y esta
     tarjeta ya iba justa — el nombre del torneo se partía en dos
     líneas dentro de una columna de 105 px. 12 también es un paso de
     la escala; aquí es EL paso que le toca. */
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy-dark), var(--navy-light));
  color: var(--blanco-fijo);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease);
}

.portada-torneo:hover {
  transform: translateY(-1px);
  color: var(--blanco-fijo);
}

/* El día, en un recuadro: es lo primero que se mira de una cita, y es lo
   que distingue esta tarjeta del resto de enlaces de la portada. */
.portada-torneo-fecha {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 8px;
  line-height: 1;
}

.portada-torneo-fecha b {
  font-family: var(--font-display);
  font-size: var(--t-xl);
}

.portada-torneo-fecha span {
  margin-top: 4px;
  font-size: var(--t-2xs);
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

.portada-torneo-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portada-torneo-cuerpo strong {
  font-size: var(--t-md);
  line-height: 1.25;
}

.portada-torneo-cuerpo small {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.82);
}

.portada-torneo-boton {
  flex-shrink: 0;
  background: var(--blanco-fijo);
  color: var(--navy-dark);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--t-sm);
  font-weight: 700;
}

/* ── Los temas, en fila de chips ── */
.portada-temas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.portada-temas-rotulo {
  color: var(--text-mid);
  font-size: var(--t-sm);
  font-weight: 600;
  margin-right: 2px;
}

.portada-tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.15s var(--ease);
}

.portada-tema:hover {
  border-color: var(--navy);
  color: var(--text);
}

/* El icono se queda con el tinte de la categoría: es el único color que
   sobrevivió a la tanda 299 y es el que hace reconocible cada tema. */
.portada-tema svg {
  flex-shrink: 0;
}

.portada-tema b {
  background: var(--ice);
  color: var(--navy);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: var(--t-2xs);
  font-weight: 700;
}

/* ── El foro, con la cuenta de mensajes a la derecha ── */
.foro-vivo-cuenta {
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
}

.foro-vivo-cuenta b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
}

.foro-vivo-cuenta small {
  display: block;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: var(--t-2xs);
}

/* Dos columnas, siempre. `.guia-rejilla` se rellena sola con pistas de
   300 px mínimo contando el ancho que tenga; aquí vive DENTRO de una
   columna, y con cuatro guías se quieren dos filas de dos —que es lo que
   además equilibra el alto con la lateral—. */
@media (min-width: 640px) {
  #recentGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Los primeros pasos, en la lateral ── */
.portada-lateral .primeros-pasos {
  padding: 16px 16px;
}

.primeros-pasos-barra {
  display: block;
  height: 6px;
  margin: 12px 0 4px;
  border-radius: var(--radius-pill);
  background: var(--ice);
  overflow: hidden;
}

.primeros-pasos-barra i {
  display: block;
  height: 100%;
  background: var(--success);
  border-radius: var(--radius-pill);
  transition: width 0.3s var(--ease);
}

/* En una columna de 320px el botón del paso siguiente no cabe al lado
   del texto: baja debajo y se lleva la fila entera. */
@media (min-width: 960px) {
  .portada-lateral .paso {
    flex-wrap: wrap;
  }

  .portada-lateral .paso-boton {
    width: 100%;
    margin-top: 8px;
    justify-content: center;
  }
}

/* El tinte de la categoría va SOLO en la pastilla del icono. Puesto en
   el chip entero (primer intento de la 300) devolvía justo lo que la 299
   quitó: seis pastillas de colores distintos compitiendo en fila. */
.portada-tema-icono {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  /* Sin la sombra de tres píxeles de .icon-tint-*: a 22px es una raya
     gorda, no un relieve. */
  box-shadow: none !important;
}

/* ── En el móvil, los primeros pasos primero (tanda 316) ──
 *
 * Medido: «Tus primeros pasos» empezaba a 2.401 px de una portada de
 * 3.917 — el 61% hacia abajo. En escritorio está a 470, arriba en la
 * lateral; en el móvil las dos columnas se apilan y la lateral entera
 * cae al final. O sea que el módulo que le dice a alguien RECIÉN
 * LLEGADO qué hacer es de lo último que ve, justo el día que más falta
 * le hace.
 *
 * `display: contents` disuelve las dos columnas y deja todas las
 * secciones como hijas directas del panel, que es lo único que hace que
 * `order` pueda mover una de una columna a la otra. El hueco entre
 * secciones no cambia: el panel tiene el mismo `gap` de 16 px que las
 * columnas que disuelve.
 *
 * No hace falta apagarlo cuando los tres pasos están hechos: ahí la
 * sección se queda `hidden` para siempre (js/primeros-pasos.js) y un
 * elemento sin caja no se coloca en ninguna parte.
 */
@media (max-width: 959px) {
  .portada-principal,
  .portada-lateral {
    display: contents;
  }

  #primerosPasos {
    order: -1;
  }
}