/* =============================================================
   Generador de QR para restaurantes — estilos propios de la página
   ============================================================= */

/* Móvil: contenido → vista 2D → diseño → objeto 3D → vista 3D.
   Escritorio: controles a la izquierda y vistas fijas a la derecha. */
.qr-tool {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content" "p2d" "design" "object" "p3d";
}
.qr-side { display: contents; }
.qr-content { grid-area: content; }
.qr-p2d { grid-area: p2d; }
.qr-design { grid-area: design; }
.qr-object { grid-area: object; }
.qr-p3d { grid-area: p3d; }
.qr-design, .qr-object { border-top: 1px solid var(--line); padding-top: 1.1rem; }

@media (min-width: 960px) {
  .qr-tool {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "content side" "design side" "object side";
    column-gap: 1.75rem; align-items: start;
  }
  .qr-side { display: grid; gap: 1rem; grid-area: side; align-self: start; }
  .qr-side > .qr-p2d, .qr-side > .qr-p3d { grid-area: auto; }
}
@media (min-width: 960px) and (min-height: 860px) {
  .qr-side { position: sticky; top: 74px; }
}

.qr-step { display: flex; align-items: center; gap: .55rem; font-weight: 700; margin-bottom: .7rem; }
.qr-step .num {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent); font-size: .85rem;
}
.qr-step .opt { font-weight: 500; color: var(--ink-3); font-size: .9rem; }
.qr-tool .hint { font-size: .8rem; color: var(--ink-3); }
.qr-modes { margin-bottom: .8rem; }
.qr-fields { display: grid; gap: .75rem; }
.qr-pass-row { display: flex; gap: .5rem; }
.qr-pass-row .input { flex: 1; min-width: 0; }
.qr-sub { display: grid; gap: .5rem; }
.qr-sub:not(.grid-2) { grid-template-columns: minmax(0, 1fr); }
.qr-sub + .qr-sub { margin-top: .95rem; }
#qr-error { margin-top: .6rem; }

@media (max-width: 539px) {
  .qr-modes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .qr-modes span { justify-content: center; width: 100%; padding-inline: .3rem; font-size: .88rem; }
  .qr-styles span { padding-inline: .62rem; font-size: .86rem; }
  .qr-content .field .hint { display: none; }
  .qr-preview { padding: .7rem; }
}

/* Vista 2D */
.qr-preview {
  position: relative; display: grid; place-items: center; padding: .9rem;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
}
.qr-canvas { width: min(100%, 210px); aspect-ratio: 1; }
@media (min-width: 540px) { .qr-canvas { width: min(100%, 240px); } }
@media (min-width: 960px) { .qr-canvas { width: min(100%, 260px); } }
.qr-canvas canvas, .qr-canvas svg { width: 100% !important; height: auto !important; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.qr-preview.is-demo .qr-canvas { opacity: .32; filter: grayscale(.5); }
.qr-demo-label {
  display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .4rem .8rem; border-radius: 99px; background: var(--ink); color: var(--bg);
  font-size: .82rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow);
}
.qr-preview.is-demo .qr-demo-label { display: block; }
.qr-downloads { margin-top: .75rem; display: grid; gap: .45rem; }
.qr-downloads .btn-row { gap: .5rem; }
.qr-downloads .select { width: auto; min-height: 44px; }
.qr-downloads .hint { margin: 0; }

/* Diseño */
.qr-colors { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: center; }
.qr-color { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.qr-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.qr-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); padding: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-fg) 50% 100%);
}
.qr-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.qr-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: .35rem; max-width: 560px; }
.qr-emoji {
  height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  font-size: 1.35rem; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.qr-emoji:hover { border-color: var(--line-strong); }
.qr-emoji[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.qr-logo-btn { position: relative; overflow: hidden; }
.qr-logo-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qr-logo-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Objeto 3D */
.qr-range { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center; }
.qr-range label { font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.qr-range output { font-variant-numeric: tabular-nums; font-weight: 650; font-size: .9rem; }
.qr-range input { grid-column: 1 / -1; }
.qr-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; font-size: .85rem; color: var(--ink-3); }
.qr-chip { display: inline-flex; padding: .2rem .6rem; border-radius: 99px; font-weight: 650; font-size: .8rem; }
.qr-chip.is-ok { background: var(--ok-soft); color: var(--ok); }
.qr-chip.is-bad { background: var(--bad-soft); color: var(--bad); }
.qr-warn-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.qr-warn-list .alert { font-size: .88rem; }
.qr-note { padding: .65rem .85rem; border-radius: 10px; font-size: .86rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); }

/* Vista 3D */
.qr3d-view {
  position: relative; height: 280px; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, var(--surface) 0%, var(--surface-2) 70%);
  border: 1px solid var(--line);
}
@media (min-width: 960px) { .qr3d-view { height: 290px; } }
.qr3d-canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.qr3d-canvas:active { cursor: grabbing; }
.qr3d-msg {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center;
  color: var(--ink-3); font-size: .9rem; pointer-events: none;
}
.qr3d-msg.is-error { color: var(--ink-2); }
.qr3d-badge {
  position: absolute; left: .6rem; top: .6rem; z-index: 1; padding: .2rem .55rem; border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line);
  font-size: .75rem; font-weight: 650; color: var(--ink-2); pointer-events: none;
}
.qr-p3d .btn-row { margin-top: .7rem; }
.qr-p3d .hint { margin-top: .4rem; }