/* Catálogo de estilos de edición. Se apoya en avatars.css: la tarjeta, el
   modal y los tags son los mismos de la sección de avatares, para que el
   dominio entero se sienta igual. Aquí solo van las diferencias. */

/* La portada de un estilo es su animación, no una captura. */
.est-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
/* ⚠️ DE DOS EN DOS EN EL CELULAR, nunca de una en una. Si hay un solo estilo
   ocupa la fila entera (media tarjeta sola se veía vacía) y, si el último
   queda suelto, va al centro y del mismo ancho. */
@media(max-width:620px){.est-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .est-grid>:only-child{grid-column:1/-1}
  .est-grid>:last-child:nth-child(odd):not(:only-child){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}}
/* la tarjeta enseña el estilo en horizontal (la intro de YouTube) y la
   ventana en vertical (el reel): cada caja con la proporción de su formato,
   así no hay ni bandas vacías ni recorte */
.est-grid .av-art{aspect-ratio:16/9;position:relative}
.est-autor{margin-top:9px;font-size:11.4px;color:var(--gray-2)}


/* Lo que lo distingue, en cuatro líneas: para saber si es tu estilo sin leer el prompt. */
.est-marcas{display:grid;gap:7px;margin:2px 0 18px;padding:0;list-style:none}
.est-marcas li{position:relative;padding-left:22px;font-size:12.9px;color:var(--gray);line-height:1.55}
.est-marcas li::before{content:"";position:absolute;left:5px;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}

/* Los archivos del estilo */
.est-arch{display:grid;gap:10px;margin-bottom:18px}
.est-f{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--line);background:rgba(16,28,56,.45)}
.est-f-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(201,160,64,.22),rgba(201,160,64,.06));
  border:1px solid rgba(201,160,64,.3)}
.est-f-ico svg{width:18px;height:18px;fill:none;stroke:var(--gold-xlight);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.est-f-tx{flex:1;min-width:0}
.est-f-tx b{display:block;font-size:13.8px;font-weight:700;margin-bottom:3px}
.est-f-tx p{font-size:12.3px;color:var(--gray-2);line-height:1.5}
.est-f-q{display:block;margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-2)}
.est-f-btn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 15px;
  border-radius:11px;font-size:12.7px;font-weight:700;text-decoration:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#1a1200}
.est-f-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.est-f-btn:hover{filter:brightness(1.07)}

/* El prompt */
.est-pr-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:9px;flex-wrap:wrap}
.est-pr-h b{font-size:13.8px;font-weight:700}
.est-pr-h span{font-size:11.8px;color:var(--gray-2)}
.modal.col pre{max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  padding:15px 16px;border-radius:13px;border:1px solid var(--line);background:#060b19;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.2px;line-height:1.65;color:#cfe0ff}
.modal.col .m-cuerpo .btn{align-self:flex-start;margin-top:11px}


@media (max-width:700px){
  /* (aquí había un `.est-grid{grid-template-columns:1fr}` que, al ir después,
     pisaba el «de dos en dos» del celular y los dejaba de uno en uno) */
  .est-f{flex-wrap:wrap;align-items:flex-start}
  .modal.col .m-cuerpo .btn{align-self:stretch}
  .est-f-btn{width:100%;justify-content:center}
}

/* ── el reparto del modal: la animación manda a la izquierda ── */
.m-art{flex:0 0 auto;width:auto;height:100%;aspect-ratio:9/16;max-width:46%;
  position:relative;background:#070d1e;align-self:stretch}
.m-cuerpo .est-pr-h:first-child{margin-top:2px}
/* el texto largo rueda dentro, y el botón de copiar se queda abajo siempre */
.m-rollo{flex:1;min-height:0;overflow:auto;padding-right:4px}
/* el prompt NO lleva scroll propio: un solo scroll por ventana, o la rueda
   se queda atrapada en el bloque de texto */
.m-rollo pre{max-height:none;overflow:visible;white-space:pre-wrap;word-break:break-word;
  padding:15px 16px;border-radius:13px;border:1px solid var(--line);background:#060b19;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.2px;line-height:1.65;color:#cfe0ff}
.m-cuerpo .btn{align-self:flex-start;margin-top:12px}

@media (max-width:820px){
  .modal{flex-direction:column;overflow:auto}
  .m-art{flex:0 0 auto;width:100%;height:auto;max-width:none;aspect-ratio:16/9}
  .m-rollo{overflow:visible}
  .m-cuerpo .btn{align-self:stretch}
}