/* El editor de las tarjetas con el QR del álbum («Mi boda» › Fotos). Móvil primero, con el pulgar: vista previa fija arriba, ajustes debajo, «Descargar el PDF» en una
   barra de abajo, zonas de toque de 48 px o más y separadas, botones + y − en vez de deslizadores. En ordenador, los ajustes a un lado y la tarjeta al otro. */
.qr-editor [hidden] { display: none !important; }
.qr-oculto { font-size: 16px; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* con el editor abierto ocupa toda la pantalla: sin la cabecera y las pestañas de «Mi boda» */
body.qr-abierto .pb-cab { display: none; }
body.qr-abierto .pb-principal { padding-top: 0; }
body.qr-abierto .pb-pie { display: none; }
@media (min-width: 64rem) { body.qr-abierto .pb-principal { max-width: 72rem; } }

.qr-editor { display: grid; gap: .9rem; padding-bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px)); color: var(--color-neutral-fg); font: 400 1rem/1.5 var(--font-text); }
.qr-cargando { margin: 3rem auto; max-width: 30rem; text-align: center; color: var(--color-neutral-muted); display: grid; gap: .8rem; }

/* cabecera */
.qr-cab { display: grid; gap: .1rem; padding-top: .4rem; }
.qr-volver { justify-self: start; min-height: 48px; padding: .4rem .2rem; border: 0; background: none; color: var(--color-primary); font: 600 1rem var(--font-text); cursor: pointer; }
.qr-titulo { margin: 0; font: 400 1.35rem/1.25 var(--font-display); color: var(--color-primary); }
.qr-titulo:focus { outline: none; }
.qr-guardado { margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--color-neutral-muted); }

/* la vista previa: siempre a la vista arriba */
.qr-previa { position: sticky; top: 0; z-index: 5; display: grid; gap: .45rem; margin-inline: -1rem; padding: .5rem 1rem .6rem; background: var(--color-neutral-bg); border-bottom: 1px solid var(--color-neutral-line); box-shadow: 0 6px 12px -8px rgb(0 0 0 / .3); }
.qr-vistas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.qr-hoja { display: grid; place-items: center; min-height: 0; }
.qr-lienzo { display: block; width: auto; height: auto; max-width: 100%; max-height: 26dvh; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25), 0 8px 22px -10px rgb(0 0 0 / .4); }
.qr-ver-hoja:not(.qr-escribiendo) .qr-lienzo { max-height: 30dvh; }
.qr-hoja { position: relative; }
.qr-lienzo { cursor: zoom-in; }
/* «Verla en grande»: encima de la tarjeta, abajo a la derecha, para el pulgar */
.qr-ver-grande { position: absolute; right: 0; bottom: 0; display: grid; justify-items: center; gap: .15rem; min-width: 56px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-primary); font: 600 .8125rem/1 var(--font-text); cursor: pointer; }
.qr-ver-grande-icono { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--color-primary); border-radius: 50%; background: var(--color-neutral-surface); box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
@media (min-width: 64rem) { .qr-ver-grande { position: static; grid-auto-flow: column; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .95rem; } }
.qr-escribiendo .qr-ver-grande { display: none; }
/* la tarjeta a pantalla completa */
.qr-grande { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border: 0; background: #1d1d1d; }
.qr-grande[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; place-items: center; }
.qr-grande::backdrop { background: #1d1d1d; }
.qr-lienzo-grande { display: block; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 8px 30px rgb(0 0 0 / .5); cursor: zoom-out; }
.qr-grande-botones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .6rem; width: min(30rem, 100%); }
.qr-grande .qr-boton { min-height: 52px; }
.qr-grande .qr-boton--claro { background: transparent; color: #fff; border-color: #fff; }
.qr-grande button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.qr-medidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; text-align: center; }
.qr-medidas > div { padding: .2rem .25rem; border-radius: 10px; background: var(--color-neutral-surface); border: 1px solid var(--color-neutral-line); }
.qr-medidas dt { font-size: .8125rem; line-height: 1.2; color: var(--color-neutral-muted); }
.qr-medidas dd { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.qr-mal dd, .qr-medidas .qr-mal dt { color: #a3262a; }
.qr-medidas .qr-mal { border-color: #a3262a; }
.qr-aviso { margin: 0; padding: .5rem .7rem; border-radius: 10px; background: #fdecea; border: 1px solid #a3262a; color: #8a1c1c; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.qr-ayuda.qr-mal, .qr-sil-estado.qr-mal, #qr-sil-estado.qr-mal { color: #a3262a; font-weight: 600; }

/* lo que se toca no se queda nunca detrás de la vista previa fija ni de la barra de abajo */
.qr-ajustes button, .qr-ajustes summary, .qr-ajustes label, .qr-ajustes fieldset { scroll-margin-top: calc(var(--qr-previa-alto, 16rem) + .75rem); scroll-margin-bottom: 11rem; }

/* los ajustes, en bloques */
.qr-ajustes { display: grid; gap: .9rem; min-width: 0; }
.qr-bloque { margin: 0; padding: .9rem 1rem 1rem; border: 1px solid var(--color-neutral-line); border-radius: 16px; background: var(--color-neutral-surface); display: grid; gap: .75rem; min-width: 0; }
.qr-bloque > legend, .qr-bloque > h3, .qr-mas-cuerpo h3 { margin: 0; padding: 0; font: 400 1.15rem/1.3 var(--font-display); color: var(--color-primary); }
.qr-bloque > legend { padding: 0 .3rem; }
.qr-ayuda { margin: 0; font-size: .95rem; color: var(--color-neutral-muted); }
.qr-etiqueta { margin: .2rem 0 0; font-weight: 600; }
.qr-nota { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: var(--color-neutral-surface); border: 1px dashed var(--color-neutral-line); font-size: .95rem; }

/* campos (16 px: así el iPhone no hace zoom al tocarlos) */
.qr-campo { display: grid; gap: .3rem; }
.qr-campo label { font-weight: 600; }
.qr-campo input, .qr-campo textarea { width: 100%; min-height: 48px; padding: .6rem .75rem; border: 1.5px solid var(--color-neutral-line); border-radius: 12px; background: var(--color-neutral-bg); color: var(--color-neutral-fg); font: 400 1rem/1.4 var(--font-text); }
.qr-campo textarea { resize: vertical; min-height: 5.5rem; }
.qr-campo input, .qr-campo textarea { scroll-margin-top: calc(var(--qr-previa-alto, 16rem) + 1rem); }
.qr-casilla { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; min-height: 48px; cursor: pointer; }
.qr-casilla input { width: 1.6rem; height: 1.6rem; accent-color: var(--color-primary); }

/* los seis tamaños, en tarjetas grandes */
.qr-tamanos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.qr-tamano { position: relative; display: block; cursor: pointer; }
.qr-tamano input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qr-tamano-cuerpo { display: grid; justify-items: center; align-content: start; gap: .35rem; height: 100%; min-height: 9.5rem; padding: .7rem .5rem; text-align: center; border: 1.5px solid var(--color-neutral-line); border-radius: 14px; background: var(--color-neutral-bg); color: var(--color-primary); }
.qr-tamano-texto { display: grid; gap: .1rem; color: var(--color-neutral-fg); }
.qr-tamano-texto strong { font-size: 1.05rem; }
.qr-tamano-nota { font-weight: 400; color: var(--color-neutral-muted); font-size: .95rem; }
.qr-tamano-uso { font-size: .92rem; line-height: 1.3; }
.qr-tamano-med { font-size: .8125rem; color: var(--color-neutral-muted); }
.qr-tamano input:checked + .qr-tamano-cuerpo { border-color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); background: var(--color-neutral-surface); }
.qr-tamano input:focus-visible + .qr-tamano-cuerpo { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* + y −: pasos grandes en vez de deslizadores */
.qr-paso { display: grid; grid-template-columns: 56px 1fr 56px; gap: .6rem; align-items: center; }
.qr-mas-menos { min-height: 52px; border-radius: 14px; border: 1.5px solid var(--color-primary); background: var(--color-neutral-bg); color: var(--color-primary); font: 600 1.6rem/1 var(--font-text); cursor: pointer; }
.qr-mas-menos:active { background: var(--color-neutral-surface); }
.qr-valor { display: flex; align-items: center; justify-content: center; gap: .2rem; font: 600 1.25rem/1.2 var(--font-text); font-variant-numeric: tabular-nums; color: var(--color-primary); }
/* el número se puede escribir: 16 px o más para que el iPhone no amplíe la pantalla al tocarlo */
.qr-valor-campo { width: 4.2ch; min-height: 48px; padding: 0 .2rem; border: 1.5px solid var(--color-neutral-line); border-radius: 10px; background: var(--color-neutral-surface); color: inherit; font: inherit; font-size: max(16px, 1.25rem); text-align: center; }
.qr-valor-campo:focus { outline: 3px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-primary); }
/* tocar rápido dos veces un botón no amplía la pantalla (el doble toque del iPhone) */
.qr-editor button, .qr-editor label, .qr-editor summary, .qr-editor input, .qr-editor select, .qr-editor textarea, .qr-grande button { touch-action: manipulation; }

/* colores */
.qr-colores { display: flex; flex-wrap: wrap; gap: .8rem; }
.qr-color { position: relative; display: block; width: 48px; height: 48px; cursor: pointer; }
.qr-color input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qr-muestra { display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--qr-papel, #fff); box-shadow: inset 0 0 0 11px var(--qr-tinta, #000), 0 0 0 1px rgb(0 0 0 / .25); }
.qr-color input:checked + .qr-muestra { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.qr-color input:focus-visible + .qr-muestra { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* cómo imprimirlas */
.qr-opciones { display: grid; gap: .6rem; }
.qr-opcion { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .75rem; min-height: 56px; padding: .7rem .8rem; border: 1.5px solid var(--color-neutral-line); border-radius: 14px; background: var(--color-neutral-bg); cursor: pointer; }
.qr-opcion input { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--color-primary); }
.qr-opcion strong { display: block; }
.qr-opcion .qr-ayuda { display: block; margin-top: .15rem; }
.qr-opcion:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.qr-opcion:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.qr-folios { margin: .2rem 0 0; font-weight: 600; text-align: center; color: var(--color-primary); }

/* más opciones, plegadas */
.qr-mas > summary { display: flex; align-items: center; min-height: 48px; font: 400 1.15rem/1.3 var(--font-display); color: var(--color-primary); cursor: pointer; }
.qr-mas-cuerpo { display: grid; gap: 1rem; padding-top: .5rem; }
.qr-mas-cuerpo section { display: grid; gap: .6rem; }
.qr-descargas { display: grid; gap: .6rem; }

/* segmentos y botones */
.qr-segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.qr-segmento { min-height: 44px; padding: .4rem .6rem; border: 1.5px solid var(--color-primary); border-radius: 12px; background: var(--color-neutral-surface); color: var(--color-primary); font: 600 .95rem/1.2 var(--font-text); cursor: pointer; }
.qr-segmento[aria-pressed="true"] { background: var(--color-primary); color: var(--color-neutral-bg); }
.qr-boton { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: .6rem 1.1rem; border-radius: 14px; border: 1.5px solid var(--color-primary); background: var(--color-primary); color: var(--color-neutral-bg); font: 600 1rem/1.25 var(--font-text); text-align: center; cursor: pointer; }
.qr-boton--claro { background: var(--color-neutral-bg); color: var(--color-primary); }
.qr-boton--principal { min-height: 56px; font-size: 1.1rem; }
.qr-boton:disabled { opacity: .6; cursor: progress; }
.qr-editor button:focus-visible, .qr-editor summary:focus-visible, .qr-casilla:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* la barra de abajo: «Descargar el PDF» siempre a mano */
.qr-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; gap: .25rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--color-neutral-surface); border-top: 1px solid var(--color-neutral-line); box-shadow: 0 -6px 18px rgb(0 0 0 / .15); }
.qr-barra-estado { margin: 0; min-height: 0; font-size: .9rem; text-align: center; color: var(--color-neutral-muted); }
.qr-barra-estado:empty { display: none; }

/* con el teclado: la vista previa se encoge y la barra se esconde, para no tapar lo que se escribe */
.qr-escribiendo .qr-lienzo { max-height: 14dvh; }
.qr-escribiendo .qr-medidas, .qr-escribiendo .qr-vistas, .qr-escribiendo .qr-barra { display: none; }
.qr-escribiendo .qr-aviso { font-size: .875rem; padding: .3rem .6rem; }

/* ordenador: los ajustes a un lado y la tarjeta al otro */
@media (min-width: 64rem) {
  .qr-editor { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); grid-template-areas: "cab cab" "ajustes previa" "barra previa"; column-gap: 3rem; align-items: start; padding-bottom: 2rem; }
  .qr-cab { grid-area: cab; }
  .qr-ajustes { grid-area: ajustes; }
  .qr-previa { grid-area: previa; top: 1rem; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; gap: .7rem; max-width: 34rem; }
  .qr-lienzo { max-height: 68dvh; }
  .qr-barra { grid-area: barra; position: sticky; bottom: 0; padding: .8rem 0 .6rem; background: var(--color-neutral-bg); border: 0; box-shadow: none; }
  .qr-tamanos { grid-template-columns: repeat(3, 1fr); }
  .qr-escribiendo .qr-lienzo { max-height: 68dvh; }
  .qr-escribiendo .qr-medidas, .qr-escribiendo .qr-barra { display: grid; }
  .qr-escribiendo .qr-vistas { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .qr-editor * { transition: none !important; } }

/* «Vuestro sitio en la tarjeta»: botón grande, lo bonito primero */
.qr-boton--sitio { min-height: 64px; padding: .7rem 1rem; font-size: 1.05rem; }
.qr-sil-ajustes, #qr-sil-ajustes { display: grid; gap: .6rem; }
/* la barra de abajo lleva dos botones: el del PDF y, debajo, el de WhatsApp */
.qr-barra .qr-boton--whatsapp { min-height: 48px; font-size: .95rem; }