/* Las tarjetas del chat de `armar_galeria` (F5 de galerias, public/galeria-xarpie.js). Solo tokens de cuarto-oscuro.css: va DESPUES
   de el. Forma: la tarjeta flota (16 px), las fotos son contenido (4 px), lo que se toca es pildora. Filas sin cajas ni rayas. */
.gxa{ background:var(--piedra); border-radius:var(--r-flota); box-shadow:var(--sombra-flota); padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-3); color:var(--texto); max-width:100%; box-sizing:border-box; }
.gxa-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); }
.gxa-tit{ font-size:var(--t-campo); font-weight:600; color:var(--tinta); }
.gxa-meta{ font-size:var(--t-meta); color:var(--medio); }

/* portadas */
.gxa-props{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-3); }
.gxa-prop{ display:flex; flex-direction:column; gap:var(--e-2); min-width:0; }
.gxa-foto{ position:relative; aspect-ratio:3/2; border-radius:var(--r); overflow:hidden; background:var(--piedra-on); }
.gxa-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.gxa-num{ position:absolute; left:var(--e-2); top:var(--e-2); min-width:22px; height:22px; border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font-size:var(--t-meta); font-weight:600; display:flex; align-items:center; justify-content:center; }
.gxa-pq{ font-size:var(--t-meta); line-height:1.35; color:var(--medio); }
.gxa-usar{ min-height:44px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-meta); font-weight:600; cursor:pointer; transition:background var(--d-toque) var(--curva-cambia); }
.gxa-usar:hover:not(:disabled){ background:var(--tinte-toque); }
.gxa-usar.on{ background:var(--boton); color:var(--boton-t); }
.gxa-usar:disabled:not(.on){ opacity:.5; cursor:default; }
.gxa-ahora{ display:flex; align-items:center; gap:var(--e-3); }
.gxa-mini{ width:54px; aspect-ratio:2/3; border-radius:var(--r); object-fit:cover; flex:none; background:var(--piedra-on); }
.gxa-ahora-t{ display:flex; flex-direction:column; gap:2px; font-size:var(--t-texto); color:var(--tinta); }

/* plantilla: la misma tarjeta de la rejilla de Plantillas, sin su marco de boton */
/* El mockup es 4/5 (una pantalla): al ancho del chat medía ~750 px de alto. Al ancho de una tarjeta de la rejilla (~220 px) se lee igual. */
.gxa .gxa-plt{ cursor:default; pointer-events:none; border-radius:var(--r); overflow:hidden; width:min(100%, 220px); align-self:flex-start; }
.gxa-lineas{ display:flex; flex-direction:column; gap:var(--e-1); }
.gxa-aviso{ font-size:var(--t-meta); line-height:1.45; color:var(--urge); }
.gxa-pill{ align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; padding:0 var(--e-4); border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-texto); font-weight:500; text-decoration:none; }
.gxa-pill:hover{ background:var(--tinte-toque); }

/* capitulos: filas sin cajas ni rayas */
.gxa-caps{ display:flex; flex-direction:column; }
.gxa-cap{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-2) 0; }
.gxa-tres{ display:flex; gap:3px; flex:none; }
.gxa-tres img{ width:26px; height:26px; border-radius:var(--r); object-fit:cover; background:var(--piedra-on); }
.gxa-capt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.gxa-capn{ font-size:var(--t-texto); font-weight:600; color:var(--tinta); }

/* ajustes */
.gxa-aj{ display:flex; flex-direction:column; gap:2px; padding:var(--e-1) 0; }
.gxa-ajv{ display:flex; align-items:center; gap:var(--e-2); font-size:var(--t-texto); color:var(--tinta); }
.gxa-antes{ color:var(--medio); text-decoration:line-through; text-decoration-thickness:1px; }
.gxa-nota{ margin:0; font-size:var(--t-meta); line-height:1.45; color:var(--medio); }

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