/* El modo «Plantillas» del lienzo de Diseño (public/galeria-plantillas.js). Solo tokens de
   cuarto-oscuro.css: ningun color, sombra ni duracion escrita a mano (paridad-cuarto-oscuro).
   Va DESPUES de cuarto-oscuro.css porque necesita ganarle a una regla suya (ver .gx-card.on).
   Forma: pildora = se toca, 16 px = flota, 4 px = contenido. Nada se anima con el teclado. */

/* La capa se ancla al lienzo. En el panel angosto el lienzo ya es `position:fixed` (regla mas
   especifica de styles.css), asi que esta solo cubre el caso ancho. */
.ge-unificado .ge-canvas{ position:relative; }
.gplt{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; min-height:0; pointer-events:none; }
.gplt[data-estado="rejilla"]{ pointer-events:auto; background:var(--ge-canvas); }
.gplt-rej{ display:none; flex:1; min-height:0; flex-direction:column; }
.gplt[data-estado="rejilla"] .gplt-rej{ display:flex; }
.gplt-prueba{ display:none; position:absolute; inset:0; pointer-events:none; }
.gplt[data-estado="probar"] .gplt-prueba{ display:block; }

/* Los botones del modo: `.geditor button{border:none;background:none}` le gana a `.btn` (mismo
   problema que ya tuvieron los botones de la vista previa), asi que se dicen aqui completos. */
.geditor .gplt .btn{ background:var(--piedra-on); color:var(--tinta); border:0; }
.geditor .gplt .btn.btn-gh{ background:transparent; color:var(--texto); }
.geditor .gplt .btn.btn-p{ background:var(--boton); color:var(--boton-t); }

.gplt-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; min-height:68px; padding:16px 26px; }
.gplt-ti{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); line-height:1.2; }
.gplt-n{ font-size:var(--t-meta); color:var(--medio); }
.gplt-grow{ flex:1; }
.gplt-atras{ display:inline-flex; transform:scaleX(-1); }
.gplt-cons{ display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 14px 0 10px; border-radius:var(--r-pildora); background:var(--piedra); color:var(--texto); font-size:var(--t-meta); font-weight:500; cursor:pointer; }
.gplt-cons input{ accent-color:var(--tinta); width:16px; height:16px; margin:0; }
.gplt-ban{ display:flex; align-items:center; gap:12px; margin:0 26px 12px; padding:10px 12px 10px 16px; min-height:48px; border-radius:var(--r-flota); background:var(--piedra); color:var(--texto); font-size:var(--t-texto); line-height:1.45; }
.gplt-ban > span{ flex:1; }
.gplt-scroll{ flex:1; min-height:0; overflow:auto; padding:2px 26px 24px; }
/* Las tarjetas son las de siempre (.gx-card); aqui solo se reacomodan al ancho del lienzo. */
.gplt .gx-selgrid{ grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:18px; max-width:none; margin:0; }
.gplt .gx-cardm{ display:none; }
.gplt .gx-cardfoot{ padding:12px 14px; }
.gplt .gx-tag{ color:var(--tinta); }
.gplt .gx-usar{ color:var(--texto); }
/* cuarto-oscuro.css:753 (especificidad 0,3,0, carga al final) deja a `.gx-card` sin borde ni
   sombra: el aro de la plantilla elegida no se veia. Regla propia, mas especifica, con tinta y
   no con --accent (la marca nueva no lleva color en controles). */
:root[data-theme] .gplt .gx-card.on{ box-shadow:inset 0 0 0 2px var(--tinta); }

/* El riel se atenua mientras el modo esta abierto; la fila «Plantilla» queda viva. */
.gplt-off{ opacity:.38; pointer-events:none; }
/* El riel es una fila flex (fila + «Guardado»): «Antes» baja a su propia linea. */
.ge-unificado .ge-railtop{ flex-wrap:wrap; }
.gplt-antes{ flex:0 0 100%; display:flex; align-items:center; gap:6px; padding:4px 4px 0; font-size:var(--t-meta); color:var(--medio); }
.gplt-antes[hidden]{ display:none; }
.gplt-antes button{ font:inherit; font-weight:600; color:var(--tinta); text-decoration:underline; text-underline-offset:2px; background:none; border:0; padding:0; cursor:pointer; }

/* La pildora «Plantillas» de la barra del lienzo. */
.gplt-pil{ display:inline-flex; align-items:center; gap:6px; }
.gplt-pil[aria-pressed="true"]{ background:var(--piedra-on); color:var(--tinta); }

/* Probar en vivo: el chip arriba y la pildora abajo, flotando sobre la galeria real. */
.gplt-chip{ display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:var(--r-pildora); background:var(--caja); color:var(--medio); font-size:var(--t-meta); white-space:nowrap; box-shadow:var(--sombra-flota); }
.gplt-chip i{ width:7px; height:7px; border-radius:50%; background:var(--texto); }
.gplt-foot{ position:absolute; left:0; right:0; top:0; bottom:22px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:76px 12px 0; }
.gplt-abajo{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.gplt-nota{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:var(--r-pildora); background:var(--caja); color:var(--texto); font-size:var(--t-meta); text-align:center; box-shadow:var(--sombra-flota); pointer-events:auto; }
.gplt-pill{ display:flex; align-items:center; gap:6px; padding:6px; border-radius:var(--r-pildora); background:var(--caja); box-shadow:var(--sombra-flota); pointer-events:auto; }
.gplt-nav{ display:flex; align-items:center; gap:6px; }
.gplt-acc{ display:flex; align-items:center; gap:6px; }
.geditor .gplt-ib{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--texto); background:none; border:0; cursor:pointer; }
.gplt-pn{ min-width:132px; text-align:center; }
.gplt-pa{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; }
.gplt-pb{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; }
.gplt-sep{ width:1px; height:24px; background:var(--linea); margin:0 6px; }

/* La franja tras la primera subida, en la pestana Fotos. */
.gplt-empuja{ display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:10px 12px 10px 16px; border-radius:var(--r-flota); background:var(--piedra); color:var(--texto); font-size:var(--t-texto); line-height:1.45; }
.gplt-empuja > span{ flex:1; }

/* Panel angosto (telefono, o escritorio con el chat abierto): el lienzo es una capa fija sobre
   toda la ventana. Una columna de tarjetas y la pildora en dos filas, sobre la zona segura. */
@container (max-width:900px){
  .gplt-bar{ padding:12px 16px; }
  .gplt-ban{ margin:0 16px 12px; }
  .gplt-scroll{ padding:2px 12px 24px; }
  .gplt-foot{ bottom:calc(10px + env(safe-area-inset-bottom)); justify-content:flex-end; padding-top:0; gap:8px; }
  .gplt-pill{ flex-direction:column; align-items:stretch; gap:6px; width:100%; max-width:440px; border-radius:var(--r-flota); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .gplt-nav{ justify-content:center; }
  .gplt-sep{ display:none; }
  .gplt-acc .btn{ flex:1; }
  .gplt-empuja{ flex-wrap:wrap; }
}
@container (max-width:560px){
  .gplt .gx-selgrid{ grid-template-columns:minmax(0,1fr); }
}