/* BassForge - boton y ventana de la tarjeta para compartir. Clases con
   prefijo propio: este fichero se carga en todas las pantallas. */

.res-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.res-btn-tarjeta:disabled{opacity:.4;cursor:default}

.tarjeta-velo{
  position:fixed;inset:0;z-index:70;background:rgba(5,6,9,.8);
  display:grid;place-items:center;padding:24px;
}
.tarjeta-velo[hidden]{display:none}
.tarjeta-caja{
  background:var(--sup);border:1px solid var(--line);border-radius:8px;padding:20px;
  display:grid;grid-template-columns:auto minmax(220px,300px);gap:24px;
  max-height:calc(100vh - 48px);max-width:calc(100vw - 48px);
}
.tarjeta-lienzo{
  height:min(76vh,760px);width:auto;aspect-ratio:9/16;border-radius:10px;
  background:var(--ground);box-shadow:0 18px 50px -20px rgba(0,0,0,.9);
}
.tarjeta-lado{display:flex;flex-direction:column;gap:12px;min-width:0}
.tarjeta-lado h3{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;font-weight:400;font-size:26px;
  margin:0;color:var(--white);text-transform:uppercase;letter-spacing:.01em;
}
.tarjeta-lado p{margin:0;color:var(--ink2);font-size:13px;line-height:1.5}
.tarjeta-aviso{border-left:3px solid var(--warn);padding:8px 10px;background:var(--sup2);border-radius:0 4px 4px 0}
.tarjeta-aviso[hidden]{display:none}
.tarjeta-formato{font-family:var(--mono);font-size:11px!important;color:var(--muted)!important}
/* los tres disenos: los mismos datos, otra forma de contarlos */
.tarjeta-disenos{display:flex;gap:6px;flex-wrap:wrap}
.tarjeta-disenos button{
  flex:1 1 auto;padding:8px 10px;border:1px solid var(--line);border-radius:4px;
  background:var(--sup2);color:var(--ink2);cursor:pointer;
  font-size:13px;font-weight:600;
}
.tarjeta-disenos button:hover{color:var(--white);border-color:var(--forge-dim)}
.tarjeta-disenos button.activa{
  background:var(--forge-glow);border-color:var(--forge);color:var(--forge);
}
.tarjeta-disenos button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.tarjeta-acc{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.tarjeta-acc .btn:disabled{opacity:.55;cursor:default}

@media(max-width:760px){
  .tarjeta-caja{grid-template-columns:1fr;overflow:auto}
  .tarjeta-lienzo{height:auto;width:100%}
}