/* Portal del laboratorio de Land of Nomads.
   Se apoya en el design system del cliente (tokens.css + components.css): aquí solo
   viven las piezas propias del portal (cabecera, buscador, filtros y tarjetas). */

:root {
  /* Margen lateral de TODO el portal: cabecera, cuerpo y pie salen de aquí, así que
     nunca se descuadran entre sí.

     El CEO fijó 200 px mirando su pantalla, sin ver las pequeñas. Va con `clamp`, que
     toma tres valores: un mínimo, uno que se adapta y un máximo. Aquí el del medio no
     es un porcentaje del ancho, porque un 14 % dejaba 55 px de margen en un móvil y
     ahogaba la tarjeta. Es la mitad de lo que sobra a partir de 1.000 px: hasta ese
     ancho el margen se queda en 16 px, y de ahí para arriba crece hasta los 200 px
     que pidió. La cabecera, el cuerpo y el pie salen todos de aquí, así que jamás se
     descuadran entre sí. */
  --hub-pad: clamp(16px, (100vw - 1000px) / 4.6, 200px);
}

/* ---- Cabecera ---- */
/* Topes del CSS que dio el CEO: 20 px arriba y abajo, 200 px a los lados. El alto va
   con `clamp` para que respire en pantalla grande y se apriete en móvil; el lateral
   sale de `--hub-pad`, el mismo que el cuerpo, para no descuadrarse nunca. */
.hub-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: clamp(12px, 1.4vw, 20px) var(--hub-pad);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.hub-marca { display: flex; color: var(--brand); }
.hub-marca__svg { height: 22px; width: auto; display: block; }
.hub-top__sep { width: 1px; height: 20px; background: var(--line); }
.hub-top__t { font: 600 14.5px/1 var(--font-body); color: var(--text); }
.hub-top__acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---- Botón del portal ---- */
.hub-b {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none;
  font: 600 13px/1 var(--font-body);
  padding: 10px 14px; border-radius: var(--r-pill);
  background: var(--panel); color: var(--text);
}
.hub-b:hover { background: var(--line); }
.hub-b svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hub-b--acc { background: var(--brand-fill); color: var(--brand-contrast); }
.hub-b--acc:hover { background: var(--brand-fill-strong); }

/* ---- Portada ---- */
.hub {
  max-width: 3000px;
  margin-inline: auto;
  padding: clamp(24px, 3.5vw, 50px) var(--hub-pad);
}
.hub-hero h1 {
  font: 600 clamp(30px, 4.4vw, 48px)/1.08 var(--font-display);
  margin: 0 0 12px; max-width: 22ch;
}
.hub-hero__lead {
  font: 400 15.5px/1.7 var(--font-body); color: var(--text-muted);
  max-width: 68ch; margin: 0 0 var(--s-5);
}
/* Ya no se sangra hacia los lados con margen negativo. Con el margen del 25 % ese
   truco llevaba la barra hasta el borde de la pantalla y la dejaba descuadrada
   respecto a las tarjetas. Ahora respeta la misma columna centrada que todo lo demás. */
.hub-tools {
  position: sticky; top: var(--hub-top-h, 58px); z-index: 32;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
}
.hub-q {
  flex: 1 1 340px; min-width: 0;
  font: 400 15px/1.4 var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 13px 20px;
}
.hub-q::placeholder { color: var(--text-soft); }
.hub-q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hub-n { font: 600 12.5px/1 var(--font-body); color: var(--text-soft); flex: 0 0 auto; }

/* ---- Ejemplos de pregunta ----
   Están para enseñar, de un vistazo, que aquí se PREGUNTA. Un buscador vacío con un
   texto de ayuda genérico no le cuenta a nadie que puede escribir una frase entera. */
.hub-ejs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 6px; }
.hub-ejs__t { font: 500 12.5px/1 var(--font-body); color: var(--text-soft); }
.hub-ej {
  border: 0; cursor: pointer;
  font: 500 12.5px/1 var(--font-body); color: var(--text-muted);
  background: var(--panel); border-radius: var(--r-pill); padding: 8px 13px;
}
.hub-ej:hover { background: var(--line); color: var(--text); }

/* ---- Respuesta directa ----
   Cuando una pieza gana con claridad, se dice cuál es y por qué, en vez de dejar al
   usuario deducirlo del orden de la rejilla. */
.hub-resp {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border-radius: var(--r-lg);
  padding: 15px 18px; margin: 12px 0 4px;
}
/* `display:flex` gana al atributo `hidden` del navegador, así que sin esta línea el
   cartel de respuesta se queda como una barra gris vacía cuando no hay nada que
   responder. Pasa con cualquier componente al que se le dé un display propio. */
.hub-resp[hidden] { display: none; }
.hub-resp__t { font: 600 15px/1.4 var(--font-body); color: var(--text); margin: 0; }
.hub-resp__m { font: 400 13px/1.5 var(--font-body); color: var(--text-muted); margin: 3px 0 0; }
.hub-resp__ir {
  margin-left: auto; flex: 0 0 auto; text-decoration: none;
  font: 600 13px/1 var(--font-body);
  padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--brand-fill); color: var(--brand-contrast);
}
.hub-resp__ir:hover { background: var(--brand-fill-strong); }

/* ---- Filtros por categoría: una sola fila, se desplazan de lado ---- */
.hub-filtros {
  /* Se pega DEBAJO del buscador, que también es pegajoso. El alto del buscador lo mide
     `hub.js` y lo deja en `--hub-tools-h`, porque cambia al pasar a móvil (el conteo
     baja de línea). El 68 px es solo el valor de reserva hasta que mide. */
  position: sticky; top: calc(var(--hub-top-h, 58px) + var(--hub-tools-h, 68px)); z-index: 30;
  display: flex; gap: 8px;
  padding: 10px 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
}
.hub-filtros::-webkit-scrollbar { display: none; }
.chip-f {
  flex: 0 0 auto; border: 0; cursor: pointer;
  font: 600 12.5px/1 var(--font-body); letter-spacing: .03em;
  padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--panel); color: var(--text);
}
.chip-f:hover { background: var(--line); }
.chip-f.on { background: var(--brand-fill); color: var(--brand-contrast); }
.chip-f b { font-weight: 700; opacity: .72; margin-left: 3px; }

/* ---- Grupos y rejilla de tarjetas ----
   Cuatro columnas en una pantalla de portátil normal (1440 px de ancho) y cinco en un
   monitor grande. El mínimo de 300 px es lo que hace que a 1440 entren cuatro y no
   cinco apretadas. */
.hub-grupo { padding-top: var(--s-5); }
.hub-grupo__t {
  font: 600 13px/1 var(--font-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand);
  margin: 0 0 var(--s-4);
}
.hub-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---- Tarjeta de pieza ----
   Sin borde y sin efecto al pasar por encima: se distingue por superficie y sombra
   estática, que es la norma de la casa. */
.w {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}

/* La imagen ocupa el ancho completo de la tarjeta, recortada a 3:2. Nunca en columna
   estrecha con franjas de fondo a los lados. */
/* 2026-08-08: pasó de 3:2 a 16:9 por orden del CEO, que veía las tarjetas demasiado
   altas. Es el recorte que más altura ahorra sin tocar el ancho de la rejilla.

   OJO con `min-height: 0`, que parece de adorno y NO lo es. La tarjeta es un contenedor
   flexible en columna, y en ese caso la altura mínima de cada hijo es, por defecto, la de
   su contenido. Como la foto declara 900x506 en sus atributos, la caja crecía hasta esa
   altura y se comía la proporción: se calculaba 16:9 y se pintaba 3:2. Con `min-height: 0`
   la caja obedece la proporción y la foto se recorta dentro. */
.w__img {
  position: relative;
  aspect-ratio: 16 / 9; width: 100%;
  min-height: 0; flex: 0 0 auto; overflow: hidden;
  background: var(--panel);
}
.w__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* La fecha va DESTACADA sobre la imagen, no escondida en letra gris al pie. Sobre
   tinta sólida al 88 %, que es fondo oscuro de verdad: así la letra crema pasa
   contraste y nunca cae en blanco sobre claro. */
.w__fecha {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-body); letter-spacing: .01em;
  padding: 8px 12px; border-radius: var(--r-pill);
  /* EL VELO DE LA CASA, NO UNA TINTA MEZCLADA (corregido el 2026-08-12).
     Esto iba con `color-mix(var(--ink) 88%)` y letra crema, buscando «fondo oscuro de
     verdad». Y `--ink` SE DA LA VUELTA con el tema: en oscuro valia casi blanco, asi que
     la pastilla se volvia clara con la letra crema encima. Medido: 1,27:1, invisible.
     Es el gotcha 190 otra vez: un color que se creia fijo y no lo era.
     `--veil-btn` es exactamente esto en el sistema, un velo oscuro para lo que se pone
     ENCIMA DE UNA IMAGEN, y no cambia con el tema porque la foto tampoco cambia. */
  background: var(--veil-btn);
  color: var(--on-veil);
  backdrop-filter: blur(6px);
}
.w__fecha svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .85; }

/* El distintivo de acceso se va con la imagen, a la esquina de arriba. Solo lo llevan
   las piezas que viven en OTRO servidor: las de casa comparten clave y marcarlas no
   informaría de nada. */
.w__acc {
  position: absolute; right: 12px; top: 12px;
  font: 600 11.5px/1 var(--font-body); letter-spacing: .01em;
  padding: 7px 11px; border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
/* Arena sobre tinta: el amarillo de marca no pasa contraste con texto claro encima.
   La letra es `--on-veil-light`, la del sistema para una pastilla CLARA encima de una foto.
   Antes era `--ink`, que se da la vuelta con el tema: en oscuro la letra se aclaraba y se
   perdia sobre su propio fondo claro. Encima de una foto el tema no cambia nada, asi que
   este par tampoco puede cambiar. Es el mismo fallo que tenia la pastilla de la fecha. */
.w__acc--clave-propia { background: var(--sand); color: var(--on-veil-light); }
.w__acc--abierta { background: color-mix(in srgb, var(--cream) 92%, transparent); color: var(--on-veil-light); }

/* Cuerpo compactado el 2026-08-08 (orden del CEO: tarjetas más bajas). Se recortan
   huecos e interlineados, no el contenido: no se esconde ni se recorta ningún texto. */
.w__cuerpo { display: flex; flex-direction: column; gap: 7px; padding: 13px 15px 13px; flex: 1 1 auto; }
.w__t { font: 600 16px/1.25 var(--font-body); margin: 0; }
.w__d { font: 400 13.5px/1.45 var(--font-body); color: var(--text-muted); margin: 0; }
.w__q { font: 400 12px/1.45 var(--font-body); color: var(--text-soft); margin: 0; }
/* Etiquetas. Iban en gris apagado sobre el panel y se perdían, sobre todo en el tema
   oscuro. Ahora llevan el texto a plena intensidad sobre un escalón neutro más claro
   que la tarjeta, así que se leen de un vistazo y siguen sin gritar más que el título.
   Sin tinte de color a propósito: el escalón sale de la línea del sistema, que desde
   el 2026-08-08 es gris puro. */
.w__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
.w__tag {
  font: 600 11.5px/1 var(--font-body); letter-spacing: .01em;
  color: var(--text); background: var(--line);
  border-radius: var(--r-pill); padding: 6px 10px;
}
/* Quien subió la pieza. Va sobre la foto, en la esquina OPUESTA a la fecha (orden del
   CEO, 2026-08-09): la fecha abajo a la izquierda, el autor abajo a la derecha. Antes
   iba entre las etiquetas del cuerpo y se leía como una categoría más. Mismo alto y
   mismo redondeo que la fecha para que la pareja quede equilibrada. */
.w__autor {
  position: absolute; right: 12px; bottom: 12px;
  font: 600 12px/1 var(--font-body); letter-spacing: .01em;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: var(--brand-fill); color: var(--brand-contrast);
}
.w__foot { margin-top: auto; padding-top: 10px; }
.w__foot .hub-b { width: 100%; justify-content: center; }

.hub-vacio {
  font: 400 15px/1.6 var(--font-body); color: var(--text-muted);
  padding: var(--s-6) 0;
}

/* ---- Pie ---- */
.hub-pie {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--hub-pad);
  display: grid; gap: 12px; justify-items: start;
  border-top: 1px solid var(--line);
}
.hub-pie__svg { height: 20px; width: auto; display: block; color: var(--brand); }
.hub-pie p { font: 400 12.5px/1.6 var(--font-body); color: var(--text-soft); margin: 0; }

/* ---- Formulario de acceso ---- */
.acceso {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--s-5);
}
.acceso__caja {
  width: 100%; max-width: 400px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: clamp(26px, 5vw, 38px);
  display: grid; gap: 16px;
}
.acceso__marca { height: 26px; width: auto; color: var(--brand); }
.acceso h1 { font: 600 22px/1.25 var(--font-display); margin: 0; }
.acceso p { font: 400 14px/1.6 var(--font-body); color: var(--text-muted); margin: 0; }
.acceso label { font: 600 12px/1 var(--font-body); color: var(--text-muted); letter-spacing: .04em; }
.acceso input {
  width: 100%; font: 400 15px/1.4 var(--font-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px;
}
.acceso input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* El boton de la puerta ES el del sistema (`btn btn-primary` en el marcado).
   Aqui queda solo el ancho completo, que es de formulario y no de boton.
   Antes del 2026-08-31 se pintaba entero aqui y llevaba la letra a 700 y 14,5
   px, cuando la del sistema es 600 y 15. */
.acceso button { width: 100%; justify-content: center; }
.acceso__mal {
  font: 500 13px/1.5 var(--font-body); color: var(--err);
  background: color-mix(in srgb, var(--err) 12%, transparent);
  border-radius: var(--r-md); padding: 11px 14px; margin: 0;
}

/* En pantallas medianas el margen lateral vuelve a crecer un poco: apurar hasta el
   borde solo tiene sentido cuando el ancho sobra y sirve para meter otra columna. */
@media (max-width: 900px) {
}
@media (max-width: 620px) {
  .hub-top__t { display: none; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-resp__ir { margin-left: 0; width: 100%; text-align: center; justify-content: center; }
}

/* ---------- ordenar por fecha ---------- */
/* Misma píldora que los filtros y mismo acento para lo elegido: se lee como familia suya.
   Lo que cambia es que NO se queda pegado arriba: dos barras pegajosas seguidas se comen
   media pantalla en un móvil. */
.hub-orden{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:var(--sp-9,14px) 0 var(--sp-6,8px)}
.hub-orden__t{font-size:var(--fs-sm,.86rem);color:var(--text-dim,#777);margin-right:var(--sp-4,6px)}
.chip-o{flex:0 0 auto;padding:var(--sp-6,8px) var(--sp-12,16px);border-radius:var(--r-pill,999px);
  border:var(--hair-soft,1px solid rgba(0,0,0,.12));background:var(--surface,#fff);
  font-size:var(--fs-sm,.86rem);font-weight:var(--w-medio,500);color:var(--text-dim,#777);
  cursor:pointer;font-family:inherit;white-space:nowrap}
.chip-o:hover{color:var(--text,#111);background:var(--surface-alt,#f4f4f4)}
.chip-o.on{background:var(--lime,var(--accent,#C1FE1A));color:var(--on-accent,#1A1A1A);
  border-color:var(--lime,var(--accent,#C1FE1A));font-weight:var(--w-fuerte,600)}
.chip-o:focus-visible{outline:2px solid var(--lime,var(--accent,#C1FE1A));outline-offset:2px}