/* ============================================================
   WaterGo · el grabador

   Disposición: en escritorio el visor manda y los controles van a
   un lado; en móvil el visor se queda PEGADO ARRIBA y los mandos
   pasan por debajo. Es la regla que cumplen todos los
   personalizadores que funcionan: mientras tocas un control tienes
   que estar viendo lo que cambia. Si el visor se va con el scroll,
   el que personaliza escribe a ciegas.
   ============================================================ */

.grabador {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}

/* ---------- el visor ---------- */

.grabador__visor {
  position: sticky;
  top: 96px;
  border-radius: var(--r-g);
  background: var(--tinte-nude);
  background-image: radial-gradient(120% 90% at 70% 6%,
                    rgba(255,255,255,.5), transparent 62%);
  padding: clamp(14px, 2vw, 26px);
  overflow: hidden;
}

/* El zoom NO es un adorno. Medido: con el visor a 320 px en un móvil,
   una marca de 34 mm deja la letra en 12 px de pantalla y el grabado
   no se lee — todo el trabajo del relieve se pierde. A x2,6 la letra
   sube a 41 px y ahí sí convence. La botella entera sirve para
   elegir; el zoom es para creérselo. */
.grabador__visor.esta-cerca { overflow: hidden; }

.grabador__lupa {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tinta) 18%, transparent);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-micro) var(--ease-out),
              scale var(--dur-micro) var(--ease-out);
}

.grabador__lupa:hover { scale: 1.06; }
.grabador__lupa:active { scale: .96; }

.grabador__lupa[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}

/* La botella y su barra de altura, pegadas. La barra tiene que estar
   AL LADO de lo que mueve: en el panel de mandos, a medio metro de la
   botella, nadie relaciona una cosa con la otra. */
.grabador__caja {
  display: flex;
  align-items: stretch;
  gap: var(--e-3);
  justify-content: center;
}

/* Un range vertical de verdad. writing-mode es lo que lo pone de pie
   en los navegadores modernos; el appearance:slider-vertical es el
   apaño de antes y se deja de reserva. */
.grabador__barra-v {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical;
  width: 34px;
  margin: 0;
  accent-color: var(--tinta);
  cursor: ns-resize;
  flex: none;
}

.grabador__barra-h {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--e-4);
}

.grabador__barra-h input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--tinta);
}

.grabador__barra-et {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
}

.grabador__barra-et b {
  font-weight: 400;
  color: var(--color-on-background);
  font-variant-numeric: tabular-nums;
}

.grabador__escena {
  /* el cursor dice que se puede arrastrar antes de intentarlo */
  cursor: grab;
  touch-action: none;
  transform-origin: 50% 56%;
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: block;
  margin-inline: auto;
  /* el alto manda: la botella es vertical y lo que importa es
     verla entera, no llenar el ancho */
  height: clamp(320px, 46vh, 520px);
  aspect-ratio: 1 / 2.4;
}

.grabador__foto,
.grabador__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.grabador__foto {
  object-fit: contain;
  object-position: center;
  /* sin multiply: la foto ya viene recortada con alfa. Con multiply, el
     tinte del visor se le comía el color a la botella. */
}

.grabador__lienzo {
  overflow: visible;
  pointer-events: none;
}

.esta-cerca .grabador__escena { transform: scale(2.6); }

/* Las cotas no se agrandan con el zoom: se quedan del mismo grosor y
   del mismo cuerpo, como en un plano. Si crecieran, taparían justo lo
   que se ha ido a mirar. */
.esta-cerca .grabador__cotas { opacity: .35; }
.esta-cerca .grabador__medida { display: none; }

/* La banda del logotipo ya grabado: zona reservada, no decoración. La
   marca del cliente se para ahí y hay que ver por qué. Muy suave: cae
   sobre la fotografía y el protagonista es la botella, no el aviso. */
.grabador__banda rect {
  fill: color-mix(in srgb, var(--tinta) 6%, transparent);
  stroke: color-mix(in srgb, var(--tinta) 26%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}


/* Con la lupa puesta la banda estorba: se ha ido a mirar el grabado. */
.esta-cerca .grabador__banda { opacity: .3; }

/* Las cotas: finas, del color de la tinta y sin sombra. Un plano
   de taller no lleva adornos. */
.grabador__cotas line {
  stroke: color-mix(in srgb, var(--tinta) 62%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.grabador__cotas .grabador__tope {
  stroke: color-mix(in srgb, var(--tinta) 82%, transparent);
  stroke-width: 1.4;
}

/* Las medidas caen sobre la fotografía, así que llevan un halo del
   color del papel: sin él, un número oscuro sobre la zona oscura de
   la botella no se lee. paint-order pinta primero el trazo y deja el
   relleno limpio encima. */
.grabador__medida {
  font-family: var(--f-mono);
  font-size: 15px;
  fill: var(--tinta);
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: var(--papel);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.grabador__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-4);
  margin: var(--e-4) 0 0;
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
}

.grabador__pie b {
  font-weight: 400;
  color: var(--color-on-background);
}

.grabador__aviso {
  margin: var(--e-3) 0 0;
  padding: 10px 14px;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.4;
}

.grabador__aviso[hidden] { display: none; }

.grabador__nota {
  margin: var(--e-4) 0 0;
  font-family: var(--f-body);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--color-muted);
}


/* ---------- los mandos ---------- */

.grabador__mandos {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 26px);
}

.gcampo { display: flex; flex-direction: column; gap: var(--e-3); border: 0; padding: 0; margin: 0; }

/* OJO: `display: flex` gana al `[hidden] { display: none }` del
   navegador, así que el campo de tinta seguía viéndose con el láser
   elegido aunque el JS le pusiera hidden. Hay que decirlo aquí. */
.gcampo[hidden] { display: none; }

.gcampo__et {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 0;
}

.gcampo__et b {
  font-family: var(--f-mono);
  font-weight: 400;
  color: var(--color-on-background);
  font-variant-numeric: tabular-nums;
}

.gcampo__caja {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  padding: 14px 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--r-s);
  background: var(--color-surface);
  color: var(--color-on-surface);
  width: 100%;
  text-transform: uppercase;
}

.gcampo__caja:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-color: var(--color-ring);
}

.gcampo__pista {
  font-family: var(--f-body);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--color-muted);
  margin: 0;
}

/* Pastillas: el radio va oculto y la etiqueta hace de botón. El
   toque mínimo son 48 px, que es lo que separa un control que se
   pulsa a la primera de uno que hay que perseguir. */
.gopciones { display: flex; flex-wrap: wrap; gap: 8px; }
.gopciones > div { position: relative; }

.gopciones input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}

.gopcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--r-l);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .96rem;
  color: var(--color-on-surface);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.gopciones input:checked + .gopcion {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.gopciones input:focus-visible + .gopcion {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Muestras de color: círculo grande, con el aro de selección por
   fuera para que no se coma el color. */
.gmuestra {
  display: block;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--m);
  box-shadow: inset 0 0 0 1px rgba(29,29,27,.18);
  transition: box-shadow var(--dur-micro) var(--ease-out);
}

.gopciones input:checked + .gmuestra {
  box-shadow: inset 0 0 0 1px rgba(29,29,27,.18),
              0 0 0 3px var(--color-background),
              0 0 0 5px var(--color-primary);
}

.gopciones input:focus-visible + .gmuestra {
  outline: 2px solid var(--color-ring);
  outline-offset: 6px;
}

.gcampo__rango {
  width: 100%;
  min-height: 48px;
  accent-color: var(--tinta);
}


/* ---------- móvil ----------
   El visor se queda pegado arriba y encoge; los mandos pasan a una
   sola columna debajo. Nunca se pierde de vista lo que se está
   cambiando. */

@media (max-width: 900px) {
  .grabador { grid-template-columns: 1fr; gap: var(--e-5); }

  .grabador__visor {
    position: sticky;
    top: 8px;
    z-index: 5;
    padding: var(--e-3);
    /* la sombra solo aparece cuando ya está pegado, para que no
       flote sobre nada al principio */
    box-shadow: 0 10px 24px rgba(29,29,27,.10);
  }

  .grabador__escena { height: clamp(210px, 32vh, 300px); }
  .grabador__barra-v { width: 30px; }

  .grabador__pie { font-size: 10px; gap: 4px 12px; }
  .grabador__nota { display: none; }
}

@media (max-width: 520px) {
  .gopcion { padding: 0 15px; font-size: .9rem; }
  .gmuestra { width: 44px; height: 44px; }
}