/* =========================================================
   EDITOR DE FOTOS — extiende el sistema visual de styles.css
   Modo "full-size, una foto a la vez" (inspirado en el editor de
   imágenes de WhatsApp): barra de iconos arriba, foto grande al centro,
   carrusel de miniaturas abajo. Reemplaza el grid de tarjetas.
   ========================================================= */

/* =========================================================
   NAV — reemplaza el .site-header dinámico (renderHeader/header-footer.js)
   por el header estático provisto, exclusivo de esta página. Se traducen
   sus valores a las variables ya definidas en ../styles.css en vez de
   redeclarar un :root propio — los tokens ya coinciden casi 1:1
   (--mustard es el mismo hex que nuestro --yellow, --shadow/--radius del
   nav ya son equivalentes a --shadow-sm/--r-md) para no arriesgar
   divergencias entre ambos sistemas. Scoped a fotos.css a propósito: no se
   toca ../styles.css, que también sirve al wizard de impresión.
   ========================================================= */
header.nav{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ height:42px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:28px; font-weight:500; font-size:.95rem; }
.nav-links a{ color:var(--ink); text-decoration:none; }
.nav-links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.burger{ display:none; background:none; border:var(--line); border-radius:var(--r-md); padding:8px 10px; cursor:pointer; }
.burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; }
.wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 24px; }
.btn-mustard{ background:var(--yellow); color:var(--ink); }

/* El .segmented compartido asume pocas opciones en una sola fila — el de
   tamaño tiene 6, así que acá permitimos que se acomoden en 2 filas de 3
   en pantallas angostas en vez de apretarse ilegibles en una sola línea. */
#peTamano{ flex-wrap:wrap; }
#peTamano button{ flex:1 1 30%; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .nav-links.open{
    display:flex; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; background:var(--paper); border-bottom:var(--line);
    padding:20px 24px; gap:18px;
  }
}

/* ---------- área de recorte (compartida: foto grande y miniaturas) ---------- */
.crop-container{
  position:relative;
  background:var(--card);
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  box-shadow: 0 0 0 1.5px var(--ink);
  max-width:100%;
  max-height:100%;
}
.crop-container:active{ cursor:grabbing; }
.crop-container.is-loading{ opacity:.35; }

.image-movable{
  position:absolute; top:50%; left:50%;
  transform-origin:center;
  pointer-events:none;
}
.image-movable img{ width:100%; height:100%; object-fit:cover; display:block; }

.crop-frame{ position:absolute; inset:0; box-sizing:border-box; pointer-events:none; }
.crop-frame::after{
  content:'';
  position:absolute; inset:0;
  border: 1.5px dashed rgba(255,255,255,.85);
}

.btn-icon{
  border: var(--line-soft);
  background:var(--card);
  border-radius: var(--r-sm);
  width:1.9rem; height:1.9rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem;
  cursor:pointer;
  line-height:1;
  flex-shrink:0;
}
.btn-icon:hover{ background:var(--yellow-pale); }
.zoom-slider{ flex-grow:1; min-width:0; accent-color:var(--ink); }

.color-row{ display:flex; align-items:center; gap:.5rem; font-size:.76rem; }
.color-row label{ min-width:5.2rem; color:var(--ink-60); font-weight:500; flex-shrink:0; }
.color-row input[type="range"]{ flex-grow:1; accent-color:var(--ink); }

/* Ícono de flecha del nav inferior (Atrás/Continuar) — SVG de línea fina,
   válido tanto en el modo normal del wizard como en el editor full-size. */
.wizard-nav .nav-arrow{ display:inline-flex; align-items:center; }
.wizard-nav .nav-arrow svg{ width:16px; height:16px; display:block; }

/* =========================================================
   MODO EDITOR — activo cuando body.is-photo-editor
   (el Paso 2 tiene fotos cargadas). El chrome del wizard entero cede
   lugar al editor: se oculta el header del sitio y el stepline, y el
   editor pasa a ocupar el alto completo de la ventana gráfica.

   Nota de estructura: .wizard-nav NO es hijo de .shell en el HTML, es
   su hermano (ambos hijos directos de <body>). Se mantiene siempre
   position:fixed (mismo patrón que usa el resto del proyecto para este
   mismo elemento) en vez de integrarlo al flex-column de <body> — atarlo
   a un alto calculado en dvh resultó frágil en navegadores mobile reales
   (la barra de direcciones que aparece/desaparece podía dejarlo debajo del
   viewport visible, forzando scroll para verlo). position:fixed lo ancla
   siempre al viewport real sin depender de ese cálculo. A cambio, el
   editor reserva su propio padding-bottom para que el nav fijo no tape el
   filmstrip — mismo mecanismo que usa .shell en el resto del wizard.
   ========================================================= */
html.is-photo-editor{ height:100%; }
body.is-photo-editor{
  height:100vh;
  height:100dvh; /* dvh evita el salto por la barra de direcciones del navegador mobile */
  overflow:hidden; /* el scroll, si hace falta, queda contenido dentro del editor, no de la página */
  display:flex;
  flex-direction:column;
}
body.is-photo-editor header.nav{ display:none; }
body.is-photo-editor .shell{
  padding:0;
  max-width:none;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
body.is-photo-editor .stepline{ display:none; }
body.is-photo-editor .panel{ flex:1; min-height:0; display:none; }
body.is-photo-editor .panel.is-active{ display:flex; flex-direction:column; }
body.is-photo-editor .panel-head{ display:none; } /* el título "Subí y editá tus fotos" cede lugar al editor */
body.is-photo-editor #dropzoneMore{ display:none; } /* el filmstrip ya tiene su propio botón "+" */
/* Visibilidad de la dropzone inicial vs. el editor cargado — antes se
   manejaba con estilos inline desde JS (elemento.style.display), lo cual
   tiene más prioridad en cascada que cualquier regla de clase de acá abajo
   y terminaba pisando el "display:flex" que necesita la cadena de flex del
   editor para calcular su alto — colapsando el stage a 0px. Ahora la
   visibilidad depende únicamente de la clase is-photo-editor. */
#loadedWrap{ display:none; }
body.is-photo-editor #dzWrap{ display:none; }
body.is-photo-editor #loadedWrap{ flex:1; min-height:0; display:flex; flex-direction:column; }
body.is-photo-editor .photo-editor{
  flex:1; min-height:0; display:flex; flex-direction:column;
  /* espacio reservado para que el nav inferior fijo no tape el filmstrip */
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}
body.is-photo-editor .pe-stage{ flex:1; height:auto; min-height:0; max-height:none; }

/* Nav inferior: se mantiene fixed (igual que en el resto del wizard) — solo
   cambia su apariencia (fondo transparente, sin borde, botones compactos). */
body.is-photo-editor .wizard-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:transparent;
  border-top:none;
  padding:.5rem .9rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  z-index:20;
}
body.is-photo-editor .wizard-nav .btn{
  padding:.5rem .65rem;
  box-shadow:none;
}
body.is-photo-editor .wizard-nav .nav-label{ display:none; }
body.is-photo-editor .wizard-nav .price-peek .amt{
  color:#fff;
  background:var(--ink);
  padding:.15rem .55rem;
  border-radius:var(--r-sm);
}

/* Botones Atrás/Continuar en modo editor: tecla física (cuerpo claro, borde
   negro, base oscura gruesa asomando abajo tipo keycap), como en la
   referencia de teclado — en vez del pill-button ghost/primary normal. */
body.is-photo-editor .wizard-nav #btnBack,
body.is-photo-editor .wizard-nav #btnNext{
  width:3.1rem; height:3.1rem;
  padding:0;
  border-radius: 1rem;
  background:var(--card);
  border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transform:none;
}
body.is-photo-editor .wizard-nav #btnBack:hover,
body.is-photo-editor .wizard-nav #btnNext:hover{
  background:var(--yellow-pale);
  transform:none;
}
body.is-photo-editor .wizard-nav #btnBack:active,
body.is-photo-editor .wizard-nav #btnNext:active{
  box-shadow: 0 1px 0 var(--ink);
  transform: translateY(3px);
}
body.is-photo-editor .wizard-nav #btnBack:disabled,
body.is-photo-editor .wizard-nav #btnNext:disabled{
  opacity:.35;
  box-shadow: 0 4px 0 var(--ink);
  transform:none;
}
body.is-photo-editor .wizard-nav .nav-arrow svg{ width:22px; height:22px; }

/* En el editor de fotos, el botón Continuar muestra "OK" en vez de la
   flecha — confirma la edición de esta foto/paso, no un simple "seguir".
   La visibilidad de .nav-arrow/.nav-ok se controla directamente desde JS
   (updateNavState(), vía style.display) y no acá — evita que ambos textos
   queden visibles a la vez por cualquier desajuste de timing con la clase
   is-photo-editor. Acá solo queda la tipografía del "OK". */
.nav-ok{ display:none; font-weight:800; font-size:.8rem; letter-spacing:.02em; }

/* ---------- barra de iconos superior (tipo WhatsApp) ---------- */
.pe-toolbar{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem;
  overflow-x:auto; /* si no entran todos los iconos en una pantalla muy angosta, se desliza en vez de romper el layout */
  flex-shrink:0;
}
.pe-icon-btn{
 width: auto;
/*  width:2.3rem;*/
  height:2.3rem;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--ink-60);
  display:flex; align-items:center; justify-content:center;
  gap:.35rem;
  cursor:pointer;
  flex-shrink:0;
}
.pe-icon-btn svg{ width:19px; height:19px; flex-shrink:0; }
.pe-icon-btn:hover{ background:var(--ink-08); color:var(--ink); }
.pe-icon-btn.is-on{ background:var(--ink); color:#fff; }
.pe-icon-btn.pe-danger:hover{ background:var(--danger); color:#fff; }
.pe-toolbar-spacer{ flex-grow:1; }

/* Etiqueta de texto junto al ícono — oculta por defecto (solo ícono, como
   hasta ahora). Los 3 controles de "specs" (zoom/tamaño/copias) la muestran
   antes, desde 640px, porque son pocos y hay lugar de sobra; el resto de
   los controles (encuadre/color + quitar) esperan a 1200px, cuando ya
   entran los 7 botones con texto sin amontonarse. */
.pe-icon-label{ display:none; font-size:.72rem; font-weight:600; white-space:nowrap; }
@media (min-width:640px){
  .pe-icon-btn-specs{ width:auto; height:auto; padding:.5rem .85rem .5rem .65rem; border-radius:999px; }
  .pe-icon-btn-specs .pe-icon-label{ display:inline; }
}
@media (min-width:1200px){
  .pe-icon-btn{ width:auto; height:auto; padding:.5rem .85rem .5rem .65rem; border-radius:999px; }
  .pe-icon-btn .pe-icon-label{ display:inline; }
  /* En pantallas muy anchas, los controles no deben irse a los extremos —
     se centra la barra con un ancho máximo, como el resto del contenido. */
  .pe-toolbar{ max-width:70rem; margin:0 auto; width:100%; }
}

/* Separador entre el grupo de encuadre/color (rotar, espejo, B/N, ajustes)
   y el grupo de especificaciones del pedido (zoom, tamaño, copias) — mismo
   recurso visual que un separador de menú, para que se lean como dos
   familias de opciones distintas. */
.pe-toolbar-sep{
  width:1px; height:1.4rem;
  background:var(--ink-15);
  flex-shrink:0;
  margin:0 .15rem;
}

/* ---------- paneles desplegables (ajustes, zoom, tamaño, copias) ----------
   Misma apariencia que el drawer del header en mobile (.site-header-drawer):
   full-width, fondo paper, borde inferior — no una tarjeta flotante con
   esquinas redondeadas. position:absolute DENTRO de .pe-stage: flotan por
   encima de la vista previa de la foto en vez de empujarla hacia abajo — la
   foto nunca cambia de tamaño al abrir un panel. Comparten la clase
   .pe-dropdown y se abren de a uno (acordeón), identificados por [data-panel]. */
.pe-dropdown{
  display:none;
  position:absolute;
  top:0; left:0; right:0;
  z-index:5;
  flex-direction:column; gap:.6rem;
  padding:.9rem 1.1rem 1rem;
  background:var(--paper);
  border-bottom: var(--line);
}
.pe-dropdown.is-open{ display:flex; }
.pe-dropdown .field{ margin:0; }

/* ---------- "Aplicar a todas las fotos" dentro del panel de tamaño ---------- */
.pe-apply-all{
  display:flex; align-items:center; gap:.5rem;
  padding-top:.3rem;
  border-top: 1px solid var(--ink-08);
}
.pe-apply-all label{
  display:flex; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:500; color:var(--ink-60);
  cursor:pointer;
}
.pe-apply-all input[type="checkbox"]{ accent-color:var(--ink); width:1rem; height:1rem; }
.pe-apply-all .btn{ visibility:hidden; margin-left:auto; }
.pe-apply-all.is-checked .btn{ visibility:visible; }

/* ---------- stage: foto grande, ocupa el alto disponible ---------- */
.pe-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding: .5rem 1rem;
  min-height: 300px;
  height: 52vh;
  max-height: 640px;
}
.pe-stage .crop-container{ max-width:100%; max-height:100%; }

/* ---------- zoom (dentro de su dropdown) ---------- */
.pe-zoom-row{
  display:flex; align-items:center; gap:.5rem;
}

/* ---------- stepper de copias (−/input/+), mismo patrón que el zoom ---------- */
.pe-stepper{
  display:flex; align-items:center; gap:.5rem;
}
.pe-stepper .input{ text-align:center; flex:1 1 auto; min-width:0; }

/* ---------- precio de la foto activa, como badge flotando sobre la
   esquina inferior derecha de la vista previa (no ocupa espacio propio,
   deja toda la foto visible detrás) ---------- */
.pe-price{
  position:absolute;
  right:.6rem; bottom:.6rem;
  z-index:4;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.85rem;
  color:var(--ink);
  background: rgba(245,217,73,.55); /* var(--yellow) al ~50% de opacidad */
  backdrop-filter: blur(3px); /* legibilidad sobre fotos con fondo claro */
  border-radius:var(--r-sm);
  padding:.4rem .6rem;
  white-space:nowrap;
  pointer-events:none;
}

/* ---------- carrusel de miniaturas ---------- */
.pe-filmstrip-wrap{
  position:relative;
  flex-shrink:0;
}
/* Difuminado en los extremos del carrusel — mask-image funde a transparente
   los primeros/últimos ~28px, así se insinúa que hay más miniaturas para
   deslizar sin depender de un color de fondo específico detrás. */
.pe-filmstrip-wrap::before,
.pe-filmstrip-wrap::after{
  content:'';
  position:absolute; top:0; bottom:0;
  width:1.75rem;
  z-index:2;
  pointer-events:none;
}
.pe-filmstrip-wrap::before{ left:0; background:linear-gradient(90deg, var(--paper), transparent); }
.pe-filmstrip-wrap::after{ right:0; background:linear-gradient(270deg, var(--paper), transparent); }

.pe-filmstrip{
  display:flex; gap:.5rem;
  overflow-x:auto;
  padding: .75rem 1.1rem 1.1rem;
  scroll-behavior:smooth;
}
.pe-thumb{
  flex:0 0 auto;
  width:3.4rem; height:3.4rem;
  border-radius:var(--r-sm);
  overflow:hidden;
  position:relative;
  border: 2px solid transparent;
  cursor:pointer;
  background:var(--ink-08);
}
.pe-thumb.is-active{ border-color:var(--ink); }
.pe-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-thumb-status{
  position:absolute; bottom:2px; right:2px;
  width:.9rem; height:.9rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem;
  background:rgba(19,18,17,.65);
  color:#fff;
}
.pe-thumb-status.is-pending{ background:rgba(19,18,17,.4); }
.pe-thumb-status.is-error{ background:var(--danger); }
.pe-thumb-add{
  flex:0 0 auto;
  width:3.4rem; height:3.4rem;
  border-radius:var(--r-sm);
  border:1.5px dashed var(--ink-15);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-40);
  font-size:1.3rem;
  cursor:pointer;
  background:var(--paper);
}
.pe-thumb-add:hover{ border-color:var(--ink-40); color:var(--ink-60); }

@media (max-width:640px){
  .pe-stage{ height:44vh; min-height:260px; }
}

/* =========================================================
   ESTADO DE SUBIDA (se usa en el ícono del filmstrip, no ya en
   tarjetas — se sube todo junto al confirmar el Paso 2)
   ========================================================= */
.upload-status{ font-family:var(--font-mono); font-size:.62rem; white-space:nowrap; display:flex; align-items:center; gap:.35rem; }
.upload-status.is-uploading{ color:var(--ink-60); }
.upload-status.is-ok{ color:#0a7a3d; }
.upload-status.is-error{ color:var(--danger); }
.upload-status.is-pending{ color:var(--ink-40); }

/* =========================================================
   OVERLAY DE SUBIDA — pantalla completa mientras se procesan/suben
   las fotos al confirmar el Paso 2. La edición es client-side (canvas),
   así que el tiempo real depende del equipo del usuario: el overlay
   existe para que esa espera se sienta intencional, no como que la
   página se colgó.
   ========================================================= */
.upload-overlay{
  position:fixed; inset:0;
  z-index:80;
  background: rgba(19,18,17,.55);
  backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; pointer-events:none;
  transition: opacity .22s ease;
}
.upload-overlay.is-active{ opacity:1; pointer-events:all; }

.upload-overlay-box{
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(19,18,17,.35));
  padding: 2.25rem 2rem;
  width:100%; max-width: 21rem;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

.upload-spinner{
  color: var(--ink);
  animation: upload-spin 1s linear infinite;
  margin-bottom: 1.1rem;
}
@keyframes upload-spin{ to{ transform: rotate(360deg); } }

.upload-overlay-title{
  font-family: var(--font-serif);
  font-weight:600;
  font-size: 1.05rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.upload-overlay-sub{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--ink-60);
  margin-top:.4rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}

.upload-overlay-bar{
  width:100%; height:.4rem;
  background: var(--ink-08);
  border-radius: 999px;
  overflow:hidden;
  margin-top: 1.25rem;
}
.upload-overlay-bar-fill{
  height:100%;
  background: var(--ink);
  width:0%;
  transition: width .3s ease;
}

.upload-overlay-hint{
  font-family: var(--font-mono);
  font-size:.62rem;
  color: var(--ink-40);
  margin-top: 1rem;
  letter-spacing:.02em;
}

/* Si alguna foto termina en error, el overlay lo señala sin cerrarse solo —
   el usuario decide si reintentar ahí mismo o revisar la tarjeta. */
.upload-overlay.has-error .upload-overlay-box{ box-shadow: 0 0 0 2px var(--danger), var(--shadow-lg, 0 12px 40px rgba(19,18,17,.35)); }
.upload-overlay.has-error .upload-spinner{ display:none; }
.upload-overlay.has-error .upload-overlay-title{ color: var(--danger); }
.upload-overlay-actions{ display:none; gap:.6rem; margin-top:1.25rem; }
.upload-overlay.has-error .upload-overlay-actions{ display:flex; }