/* ══════════════════════════════════════════════════════════════════════════════
   galeria-pagina.css — PÁGINA · Galería (galeria.html) · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Arquitectura §2.5 "el corazón": header anti-perfeccionismo · buscador · placa
   de filtros · orden y cuenta · grid de casos · paginación · detalle en OVERLAY
   de dos paneles. 13/oct (weekly): buscador arriba, orden aparte, paginación.

   3/oct — rehecha con las referencias (reporte "Referencias visuales", W1 y W2):
   · El lienzo sigue blanco, con la retícula que se enciende al pasar. La
     jerarquía la dan las placas (.placa, css/ficha.css): la barra de filtros y
     cada card son blancas con borde; el panel del detalle, gris claro; el
     prompt, tinta.
   · Card con el sello a sangre (4:3, es la "imagen"), título a un solo tamaño en
     Inter, autor con avatar y una línea gris de meta y cifras al pie.
     Referencia: Skillshare / Telescope.
   · Detalle como dos paneles: la pieza (el prompt, grande, en tinta) a la
     izquierda; autor, votos, ficha y comentarios en un panel con scroll propio
     a la derecha. Cierra fuera del panel. Referencia: Dribbble / Skillshare.
   · VT323 solo en cifras, alias y estados; rótulos y ayudas en Inter pequeño.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera con la acción primaria a la derecha (4/oct) ─────────────────── */
.ficha__cabecera--centrada { align-items: center; }
.ficha__cabecera--centrada .cta { margin: 0 var(--espacio-8) var(--espacio-8) 0; }

/* ── Placa de filtros (20/oct, Figma de Christian): el buscador es la primera
      fila, a todo el ancho, sobre una banda gris clara; debajo, los grupos de
      chips: reto a la izquierda, país a la derecha ───────────────────────── */
.filtros { margin: 0 0 var(--espacio-16); overflow: hidden; }
.buscar {
  margin: 0;
  padding: var(--espacio-24);
  background: var(--superficie-clara);
  border-bottom: var(--trazo-filete) solid var(--borde-filete);
}
.buscar__caja { display: block; }
.buscar__campo {
  width: 100%;
  height: 48px;
  padding: var(--espacio-8) var(--espacio-24);
  border: var(--trazo-filete) solid var(--borde-filete);
  border-radius: var(--radio-pildora);
  background: var(--superficie-pagina);
  font: inherit;
  font-size: var(--tipo-meta);
}
.buscar__campo::placeholder { color: var(--texto-terciario); }
.buscar__campo:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 2px; }

.filtros__grupos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-12) var(--espacio-40);
  align-items: center;
  justify-content: space-between;
  padding: var(--espacio-24);
}
.filtros__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); }
.filtros__rotulo {
  margin-right: var(--espacio-4);
  font-weight: 600;
  font-size: var(--tipo-meta-menor);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

/* ── Orden: fuera de la placa. Cuenta a la izquierda, opciones a la derecha. ── */
.orden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-12) var(--espacio-24);
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--espacio-24);
}
.orden__cuenta { margin: 0; font-family: var(--tipografia-pixel); font-size: var(--tipo-dato); line-height: 1; letter-spacing: .04em; color: var(--texto-secundario); }
.orden__cuenta:empty { display: none; }
.orden__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); margin-left: auto; }

/* ── Paginación: anterior · números · siguiente, centrada bajo el grid ───── */
.paginas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-8) var(--espacio-16);
  align-items: center;
  justify-content: center;
  margin: var(--espacio-48) 0 0;
}

/* ── Grid de cards ────────────────────────────────────────────────────────── */

.galeria-pagina__grid {
  --tarjeta: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--espacio-24);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* La card es la de css/galeria.css; aquí solo el grid y el hover. */
.galeria-pagina__grid .caso { width: 100%; cursor: pointer; transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease; }
.galeria-pagina__grid .caso:hover { transform: translateY(-4px); border-color: var(--borde-fuerte); }
.galeria-pagina__grid .caso:focus-within { outline: var(--trazo-foco) solid var(--acento-base); outline-offset: 4px; }
.galeria-pagina__grid .caso__cuerpo { min-height: 188px; }

.galeria-pagina__vacio { padding: var(--espacio-48) 0; font-size: var(--tipo-cuerpo); color: var(--texto-terciario); }

/* ── Detalle: overlay de dos paneles ──────────────────────────────────────── */

.detalle {
  position: relative;
  width: min(1200px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-pagina);
  color: var(--texto-principal);
  overflow: auto;   /* 4/oct: el diálogo crece con el contenido y se desplaza entero */
}
.detalle::backdrop { background: color-mix(in srgb, var(--superficie-tinta) 72%, transparent); }
.detalle__marco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 34%, 400px);
  align-items: stretch;
}
.detalle__cerrar {
  position: sticky;            /* se queda arriba mientras el diálogo se desplaza */
  top: var(--espacio-16);
  float: right;
  z-index: 2;
  margin: var(--espacio-16) var(--espacio-16) -50px 0;
  padding: var(--espacio-8) var(--espacio-12);
  border: var(--trazo-filete) solid var(--borde-filete);
  background: var(--superficie-pagina);
  font: inherit;
  font-size: var(--tipo-meta);
  font-weight: 600;
  cursor: pointer;
}
.detalle__cerrar:hover { border-color: var(--borde-fuerte); }
.detalle__cerrar:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 2px; }

/* La pieza: título y el prompt, grande, en tinta. Debajo, la lectura. */
.detalle__pieza { display: grid; gap: var(--espacio-32); align-content: start; padding: clamp(32px, 4vw, 56px); }
.detalle__cabecera { display: grid; gap: var(--espacio-16); }
.detalle__fila { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espacio-16); }
.detalle__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-16);
  margin: 0;
  font-size: var(--tipo-meta);
  color: var(--texto-terciario);
}
.detalle__titulo {
  max-width: 26ch;
  margin: 0;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.8125rem);   /* Display/Tarjeta (29), como en Figma */
  line-height: 1.15;
  letter-spacing: -.01em;
}

.detalle__prompt {
  margin: 0;
  padding: var(--espacio-24) var(--espacio-32) var(--espacio-32);
  background: var(--superficie-tinta);
  color: var(--texto-sobre-tinta);
  border-radius: var(--radio-tarjeta);
}
.detalle__prompt-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-16); margin-bottom: var(--espacio-16); }
.detalle__prompt .ficha__rotulo { margin: 0; color: var(--texto-sobre-tinta-terciario); }
.detalle__prompt pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--tipografia-pixel);
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.3;
  color: var(--texto-sobre-tinta);
}
.detalle__copiar {
  padding: var(--espacio-8) var(--espacio-12);
  border: var(--trazo-filete) solid var(--texto-sobre-tinta-terciario);
  background: transparent;
  color: var(--texto-sobre-tinta);
  font: inherit;
  font-size: var(--tipo-meta);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.detalle__copiar:hover { border-color: var(--texto-sobre-tinta); }
.detalle__copiar[data-copiado] { background: var(--acento-base); border-color: var(--acento-base); color: var(--texto-principal); }
.detalle__copiar:focus-visible { outline: var(--trazo-foco) solid var(--acento-base); outline-offset: 3px; }

.detalle__lectura { display: grid; max-width: 68ch; padding: var(--espacio-24) 0; }
.detalle__bloque { margin: 0; padding: var(--espacio-32) 0; border-top: var(--trazo-filete) solid var(--borde-filete); }
.detalle__bloque:first-child { padding-top: 0; border-top: 0; }
.detalle__bloque .ficha__h2 { margin-bottom: var(--espacio-16); }

/* El panel: gris claro. Votos · comentarios · reportar (4/oct: el autor y la ficha subieron a la pieza). */
.detalle__panel {
  display: grid;
  gap: var(--espacio-32);
  align-content: start;
  padding: var(--espacio-64) var(--espacio-32) var(--espacio-32);
  background: var(--superficie-clara);
  border-left: var(--trazo-filete) solid var(--borde-filete);
}
.detalle__autor { display: flex; align-items: center; gap: var(--espacio-12); margin: 0; }
.detalle__autor-datos { display: grid; gap: var(--espacio-4); }
.detalle__alias {
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--texto-acento-sobre-claro);
}
.detalle__pais { font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.detalle__nombre { font-size: var(--tipo-meta); line-height: 1.4; color: var(--texto-principal); }

.detalle__votos {
  padding: var(--espacio-24);
  background: var(--superficie-pagina);
  border: var(--trazo-filete) solid var(--borde-filete);
  border-radius: var(--radio-tarjeta);
}
.detalle__votos .cifra { margin-bottom: var(--espacio-16); }
.detalle__votos .cifra__t { font-size: var(--tipo-meta); }
.detalle__nota:empty { display: none; }
.detalle__votar { margin: 0 var(--espacio-8) var(--espacio-8) 0; border: 0; cursor: pointer; }
.detalle__votar:disabled { cursor: default; transform: none; }
.detalle__votar:disabled .cta__cara { background: var(--superficie-clara); color: var(--texto-secundario); }
.detalle__votar:disabled::before { background: var(--borde-filete); transform: translate(var(--sombra-dura-desplazamiento), var(--sombra-dura-desplazamiento)); }
.detalle__nota { margin: var(--espacio-12) 0 0; font-size: var(--tipo-meta); line-height: 1.5; color: var(--texto-secundario); }
.detalle__nota a { color: inherit; font-weight: 600; }

.detalle__ficha { display: grid; gap: var(--espacio-12); margin: 0; }
.detalle__ficha > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--espacio-12); align-items: baseline; }
.detalle__ficha dt { font-weight: 600; font-size: var(--tipo-meta-menor); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-terciario); }
.detalle__ficha dd { margin: 0; font-size: var(--tipo-meta); line-height: 1.4; overflow-wrap: anywhere; }
.detalle__evidencia { font-weight: 600; color: var(--texto-principal); }
.detalle__reportar { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: var(--tipo-meta-menor); color: var(--texto-terciario); text-decoration: underline; cursor: pointer; }
.detalle__reportar:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 3px; }

/* Comentarios en hilo (G-001), dentro del panel. */
.hilo { padding-top: var(--espacio-24); border-top: var(--trazo-filete) solid var(--borde-filete); }
.hilo__titulo { display: flex; align-items: baseline; gap: var(--espacio-8); margin: 0 0 var(--espacio-8); font-weight: 600; font-size: var(--tipo-cuerpo-menor); }
.hilo__n { font-family: var(--tipografia-pixel); font-weight: 400; font-size: var(--tipo-dato); color: var(--texto-terciario); }
.hilo__lista { list-style: none; margin: 0 0 var(--espacio-16); padding: 0; }
.comentario { padding: var(--espacio-16) 0; border-bottom: var(--trazo-filete) solid var(--borde-filete); }
.comentario--respuesta { margin-left: var(--espacio-32); }
.comentario__cabeza { display: flex; align-items: center; gap: var(--espacio-8); margin-bottom: var(--espacio-8); }
.comentario__alias { font-family: var(--tipografia-pixel); font-size: var(--tipo-dato); line-height: 1; letter-spacing: .04em; color: var(--texto-acento-sobre-claro); }
.comentario__fecha { margin-left: auto; font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.comentario__texto { margin: 0; font-size: var(--tipo-cuerpo-menor); line-height: 1.5; }
.comentario__reportar { margin-top: var(--espacio-8); }
.hilo__form .campo { margin-bottom: var(--espacio-12); }
.hilo__form textarea.campo__control { min-height: 96px; }
.hilo__vacio { margin: 0 0 var(--espacio-16); font-size: var(--tipo-meta); color: var(--texto-terciario); }
.hilo__puerta {
  margin: 0;
  padding: var(--espacio-16);
  background: var(--superficie-pagina);
  border: var(--trazo-filete) solid var(--borde-filete);
  font-size: var(--tipo-meta);
  line-height: 1.5;
}
.hilo__puerta a { color: inherit; font-weight: 600; }

/* Aviso ("Reporte recibido", "Prompt copiado"): un estado, en voz de máquina.
   Vive en <body>, fuera de .pagina: por eso el tamaño va literal. */
.aviso-flotante {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 32px;
  translate: -50% 0;
  padding: var(--espacio-8) var(--espacio-16);
  background: var(--superficie-tinta);
  color: var(--texto-acento-sobre-tinta);
  font-family: var(--tipografia-pixel);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .detalle { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .detalle__marco { grid-template-columns: 1fr; }
  .detalle__fila { flex-direction: column; }
  .detalle__panel { padding-top: var(--espacio-32); border-left: 0; border-top: var(--trazo-filete) solid var(--borde-filete); }
  .detalle__pieza { padding-top: var(--espacio-64); }
}
@media (prefers-reduced-motion: reduce) { .galeria-pagina__grid .caso { transition: none; } }