/**
 * Generador ZPL en Vivo (/recursos/generador-zpl/). Sin cambios de fondo
 * respecto al original en docs/shared/mundoalmacentoolsv1.zip (no tenía
 * captación de leads) — solo reset/body ESCOPADOS a .ma-recurso-embed,
 * ver la misma nota en recurso-diagnostico-sga.css.
 */

.ma-recurso-embed,
.ma-recurso-embed *,
.ma-recurso-embed *::before,
.ma-recurso-embed *::after {
  box-sizing: border-box;
}
.ma-recurso-embed * {
  margin: 0;
  padding: 0;
}

.ma-recurso-embed {
  --zpl-blue: #1e40af;
  --zpl-blue-dark: #1e3a8a;
  --zpl-gray-100: #f1f5f9;
  --zpl-gray-200: #e2e8f0;
  --zpl-gray-500: #64748b;
  --zpl-gray-700: #334155;
  --zpl-gray-900: #0f172a;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--zpl-gray-900);
  padding: 24px 0 48px;
}

.ma-recurso-embed .wrapper { max-width: 900px; margin: 0 auto; }
.ma-recurso-embed h1 { font-size: 1.6rem; font-weight: 800; color: var(--zpl-blue-dark); text-align: center; margin-bottom: 6px; }
.ma-recurso-embed .subtitle { text-align: center; color: var(--zpl-gray-500); margin-bottom: 28px; font-size: 0.9rem; }
.ma-recurso-embed .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .ma-recurso-embed .grid { grid-template-columns: 1fr; } }
.ma-recurso-embed .card { background: white; border-radius: 14px; padding: 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.07); }
.ma-recurso-embed .card-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--zpl-blue); margin-bottom: 16px; }

.ma-recurso-embed .field { margin-bottom: 14px; }
.ma-recurso-embed .field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--zpl-gray-700); margin-bottom: 4px; }
.ma-recurso-embed .field input,
.ma-recurso-embed .field select { width: 100%; padding: 8px 10px; border: 1.5px solid var(--zpl-gray-200); border-radius: 7px; font-size: 0.88rem; outline: none; transition: border-color 0.15s; }
.ma-recurso-embed .field input:focus,
.ma-recurso-embed .field select:focus { border-color: var(--zpl-blue); }
.ma-recurso-embed .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ma-recurso-embed .section-sep { border: none; border-top: 1px solid var(--zpl-gray-200); margin: 16px 0; }

.ma-recurso-embed .zpl-output { background: #0f172a; border-radius: 10px; padding: 16px; font-family: 'Courier New', monospace; font-size: 0.8rem; color: #7dd3fc; white-space: pre-wrap; word-break: break-all; min-height: 180px; max-height: 280px; overflow-y: auto; }

.ma-recurso-embed .preview-area { min-height: 200px; display: flex; align-items: center; justify-content: center; background: var(--zpl-gray-100); border-radius: 10px; overflow: hidden; }
.ma-recurso-embed .preview-area img { max-width: 100%; max-height: 280px; object-fit: contain; }
.ma-recurso-embed .preview-placeholder { text-align: center; color: var(--zpl-gray-500); font-size: 0.85rem; padding: 20px; }

.ma-recurso-embed .btn-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ma-recurso-embed .btn { padding: 9px 18px; border: none; border-radius: 7px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.ma-recurso-embed .btn-primary { background: var(--zpl-blue); color: white; }
.ma-recurso-embed .btn-primary:hover { background: var(--zpl-blue-dark); }
.ma-recurso-embed .btn-ghost { background: var(--zpl-gray-100); color: var(--zpl-gray-700); }
.ma-recurso-embed .btn-ghost:hover { background: var(--zpl-gray-200); }

.ma-recurso-embed .note { font-size: 0.73rem; color: var(--zpl-gray-500); margin-top: 10px; line-height: 1.5; }