/* app8 — placas para Instagram */

.ig-autos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem}
.ig-auto{display:grid;grid-template-columns:66px minmax(0,1fr);gap:.7rem;align-items:center;
  text-align:left;font:inherit;cursor:pointer;padding:.6rem;border:1px solid var(--bd);
  background:var(--b3);color:var(--tx);transition:border-color .15s,background .15s}
.ig-auto:hover:not([disabled]){border-color:var(--or);background:var(--b4)}
.ig-auto[disabled]{opacity:.45;cursor:not-allowed}
.ig-mini{width:66px;height:66px;background:var(--b4);border:1px solid var(--bd);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.ig-mini img{width:100%;height:100%;object-fit:cover;display:block}
.ig-txt{min-width:0}
.ig-txt strong{display:block;font-size:.84rem;line-height:1.3}
.ig-txt small{display:block;margin-top:.15rem;font-size:.66rem;color:var(--tx3);line-height:1.45}

/* La tira de fotos: se elige cuál va en la placa. */
.ig-fotos{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem .1rem .6rem;margin-bottom:.9rem;
  scrollbar-width:thin}
.ig-f{flex:0 0 auto;width:78px;height:78px;padding:0;cursor:pointer;overflow:hidden;
  border:2px solid var(--bd2);background:var(--b4);transition:border-color .15s}
.ig-f img{width:100%;height:100%;object-fit:cover;display:block}
.ig-f:hover{border-color:rgba(255,106,0,.6)}
.ig-f.activa{border-color:var(--or)}

.ig-tablero{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:1.1rem;align-items:start}
.ig-lienzo{background:var(--b4);border:1px solid var(--bd);padding:.5rem;
  display:flex;align-items:center;justify-content:center;min-height:200px}
/* El canvas sale a 1080 de ancho: acá se muestra escalado, sin deformarse. */
.ig-lienzo canvas{max-width:100%;height:auto;display:block}
.ig-campos{min-width:0}

.ig-texto{width:100%;font-family:var(--fb);font-size:.76rem;line-height:1.65;
  background:var(--b2);color:var(--tx);border:1px solid var(--bd2);padding:.7rem .8rem;
  resize:vertical;min-height:220px}
.ig-texto:focus{border-color:var(--or);outline:none}

@media (max-width:820px){
  .ig-tablero{grid-template-columns:minmax(0,1fr)}
  .ig-lienzo{max-width:320px;margin:0 auto}
}
@media (max-width:560px){
  .ig-autos{grid-template-columns:minmax(0,1fr)}
  .ig-f{width:64px;height:64px}
}