/* =====================================================================
   GOM Sprite Editor · ajuste fino sobre el kit de marca
   Devuelve la jerarquía a los botones: el mapeo automático de paleta
   dejó todos los estados con el mismo verde. Aquí se define el lenguaje
   de botones GOM — fondo negro, borde verde, relleno sólo en la acción
   principal y rojo reservado para lo destructivo.
   ===================================================================== */

/* Superficies planas, como en gameovermexico.com */
.gom-branded .panel,
.gom-branded .status,
.gom-branded .thumb,
.gom-branded .stageWrap,
.gom-branded input,
.gom-branded select,
.gom-branded button{
  border-radius:2px;
}
.gom-branded .panel{
  background:linear-gradient(180deg,#0b0b0e,#08080a);
  border:1px solid rgba(57,255,20,.14);
  box-shadow:0 22px 60px rgba(0,0,0,.6);
}

/* ── Botones ── */
.gom-branded button{
  background:#0e0e12;
  color:var(--gom-text);
  border:1px solid rgba(57,255,20,.28);
  font-family:'Space Grotesk',ui-monospace,monospace;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .18s,border-color .18s,color .18s;
}
.gom-branded button:hover{
  background:rgba(57,255,20,.12);
  border-color:var(--gom-green);
  color:var(--gom-green);
}

/* Acción principal del flujo */
.gom-branded button.ok,
.gom-branded #applyProtectedTransparency,
.gom-branded #downloadZip{
  background:var(--gom-green);
  color:#050505;
  border-color:var(--gom-green);
  box-shadow:0 0 22px rgba(57,255,20,.28);
}
.gom-branded button.ok:hover,
.gom-branded #applyProtectedTransparency:hover,
.gom-branded #downloadZip:hover{
  background:var(--gom-green-2);
  color:#050505;
}

/* Destructivo */
.gom-branded button.danger{
  background:#0e0e12;
  color:#ff5b5b;
  border-color:rgba(255,32,32,.45);
}
.gom-branded button.danger:hover{
  background:rgba(255,32,32,.14);
  border-color:var(--gom-red);
  color:#ff8080;
}

/* Secundario / auxiliar */
.gom-branded button.secondary{
  background:#0b0b0e;
  color:var(--gom-muted);
  border-color:rgba(255,255,255,.1);
}
.gom-branded button.secondary:hover{
  color:var(--gom-text);
  border-color:rgba(57,255,20,.35);
  background:rgba(57,255,20,.07);
}

/* Herramientas de selección — morado del logotipo */
.gom-branded button.blue,
.gom-branded button.purple{
  background:#0e0e12;
  color:var(--gom-purple-2);
  border-color:rgba(160,107,255,.4);
}
.gom-branded button.blue:hover,
.gom-branded button.purple:hover{
  background:rgba(123,47,247,.16);
  border-color:var(--gom-purple-2);
  color:#c4a0ff;
}

/* ── Títulos y etiquetas ── */
.gom-branded .toolsTitle{
  font-family:'Space Grotesk',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gom-green);
  border-top:1px solid rgba(57,255,20,.14);
}
.gom-branded .modeBadge{
  background:rgba(57,255,20,.12);
  border:1px solid rgba(57,255,20,.3);
  color:var(--gom-green);
  border-radius:2px;
  font-family:'Space Grotesk',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.06em;
}

/* La cabecera propia del editor se apoya en la topbar de marca */
.gom-branded > header{
  background:rgba(3,3,3,.5);
  border-bottom:1px solid rgba(57,255,20,.12);
}
.gom-branded > header h1{
  font-family:'Bangers','Impact',sans-serif;
  font-size:30px;
  letter-spacing:.06em;
  color:var(--gom-green);
  text-shadow:0 0 18px rgba(57,255,20,.35);
}

/* Cajas de recorte sobre el lienzo */
.gom-branded .box{border-color:var(--gom-green)}
.gom-branded .box.active{border-color:var(--gom-purple-2);background:rgba(123,47,247,.14)}
.gom-branded .handle{background:var(--gom-green)}

/* =============================================================
   Teléfono
   -------------------------------------------------------------
   Estas reglas viven aquí y no en el <style> embebido porque este
   archivo se carga después: así ganan sin pelear con la cascada.
   ============================================================= */
@media (max-width:760px){
  /* La rejilla no podía encogerse por debajo del ancho de su contenido
     y empujaba la página 18 px hacia la derecha. */
  .gom-branded main{
    grid-template-columns:minmax(0,1fr) !important;
    padding:10px !important;
    gap:10px !important;
  }
  .gom-branded main>*{min-width:0}
  body.gom-branded,html.gom-branded{overflow-x:hidden}

  .gom-branded .panel{padding:12px !important}
  .gom-branded .controls{position:static !important;max-height:none !important}

  /* Objetivos táctiles: nada por debajo de 44 px de alto */
  .gom-branded input,
  .gom-branded select,
  .gom-branded button{min-height:44px;font-size:15px}
  .gom-branded input[type=range]{min-height:34px;padding:0}
  .gom-branded input[type=color]{height:48px}
  .gom-branded input[type=checkbox]{min-height:auto;width:20px;height:20px}
  .gom-branded label{font-size:13px;margin:10px 0 6px}

  /* Los pares de botones se apilan: dos por fila quedaban muy angostos */
  .gom-branded .row{grid-template-columns:1fr !important;gap:8px}
  .gom-branded .row:has(input[type=number]){grid-template-columns:1fr 1fr !important}

  /* Lienzo: se desplaza dentro de su caja y acepta pellizco para acercar */
  .gom-branded .stageWrap{
    padding:8px;min-height:300px;max-height:60vh;
    touch-action:pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling:touch;
  }
  /* Los cuadros de recorte se arrastran con el dedo sin mover la página.
     El lienzo de pintura lo controla el JS según el pincel esté activo o no. */
  .gom-branded .box,.gom-branded .handle{touch-action:none}
  .gom-branded .handle{width:22px;height:22px;right:-11px;bottom:-11px}

  .gom-branded .previewGrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
  .gom-branded .thumb img{height:56px}

  .gom-branded>header{padding:12px 14px}
  .gom-branded>header h1{font-size:24px}
  .gom-branded>header p{font-size:12.5px}

  .gom-branded .toolsTitle{margin-top:20px}
  .gom-branded .tiny{font-size:12px}
}