/* ==========================================================================
   INV-2026 · Vista de captura por el cliente
   Mobile-first. Diseñada a 390px; escala hacia arriba centrada.
   Se carga DESPUÉS de base.css y sobrescribe lo que esta vista necesita.
   ========================================================================== */

/* El cliente usa su propio teléfono, de pie y a veces a contraluz. 16px en el
   cuerpo y en los campos evita que iOS haga zoom automático al enfocar, que
   descoloca la previsualización justo cuando la está mirando. */
body { font-size: 16px; }
input, select, textarea { font-size: 16px; }

:root { --barra-h: 88px; }

body { background: var(--bg); }

.app {
  max-width: 480px; margin: 0 auto; min-height: 100vh;
  background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-md);
}

/* --- Encabezado ----------------------------------------------------------- */
.head {
  position: sticky; top: 0; z-index: 10;
  background: var(--sidebar-bg); color: var(--sidebar-text);
  padding: var(--s4) var(--s5) var(--s3);
}
.head__row { display: flex; align-items: center; gap: var(--s3); }
.head__wordmark {
  font-size: 15px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--text-on-brand);
}
.head__ticket {
  margin-left: auto; font-size: var(--fs-xs); color: var(--sidebar-muted);
  font-variant-numeric: tabular-nums;
}
.head__title { font-size: var(--fs-h1); font-weight: 700; margin-top: var(--s3); }
.head__sub { font-size: var(--fs-sm); color: var(--sidebar-muted); margin-top: 2px; }

/* Pasos: el cliente necesita saber cuánto falta, usa esto una vez en su vida */
.pasos { display: flex; gap: var(--s2); margin-top: var(--s4); }
.paso { flex: 1; height: 3px; border-radius: var(--r-full); background: var(--sidebar-hover); }
.paso.is-done { background: var(--brand); }

/* --- Previsualización -----------------------------------------------------
   Los controles que cambian lo que se ve viven aquí, no en el formulario de
   abajo: el cliente cambia la disposición o el color y el resultado está a la
   vista, sin tener que desplazarse. */
.preview {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  padding: var(--s4) var(--s5) var(--s4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
/* La foto y la capa de texto comparten la misma caja cuadrada, así que el
   estampado cae siempre donde va sin importar el tamaño de pantalla. */
.lienzo {
  position: relative; width: 100%; max-width: 268px; aspect-ratio: 1 / 1;
  /* La proporción real la fija el JS: no todas las fotos son cuadradas. */
  margin: 0 auto; border-radius: var(--r-lg); overflow: hidden;
  background: var(--lienzo-foto); border: 1px solid var(--border);
}
.lienzo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Disposición: miniaturas que dibujan el arreglo. Cuatro etiquetas de texto
   ocupaban una fila con desplazamiento; el dibujo se entiende antes y cabe. */
.disp { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.disp__btn {
  width: 46px; height: 46px; padding: 5px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-faint);
  display: grid; place-items: center;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.disp__btn:hover { border-color: var(--border-strong); }
.disp__btn.is-active { border-color: var(--brand); background: var(--row-selected); color: var(--brand); }
.disp__btn svg { width: 100%; height: 100%; }

/* Texto explicativo, ahora al frente de la sección de captura */
.seccion__desc--vista {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--text-muted);
}
.seccion__desc--vista svg { width: 14px; height: 14px; flex-shrink: 0; }

/* --- Cuerpo --------------------------------------------------------------- */
.body { flex: 1; padding: var(--s5) var(--s5) calc(var(--barra-h) + var(--s6)); }

/* Dos bloques: lo que el cliente escribe y lo que va a pagar. El cobro va al
   final porque es una decisión comercial, no creativa. */
.seccion { margin-bottom: var(--s8); }
.seccion:last-child { margin-bottom: 0; }
.seccion__titulo {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  padding-bottom: var(--s2); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}
.seccion__desc { font-size: var(--fs-sm); color: var(--text-muted); margin: calc(var(--s5) * -1 + var(--s2)) 0 var(--s4); }
.seccion--cobro { padding-top: var(--s5); border-top: 2px solid var(--border); }

.campo { margin-bottom: var(--s6); }
.campo:last-child { margin-bottom: 0; }
.campo__label {
  display: flex; align-items: baseline; gap: var(--s2);
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s2);
}
.campo__contador {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.campo__contador.is-limite { color: var(--warning); }
.campo__ayuda { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s2); }

.input {
  width: 100%; height: 52px; padding: 0 var(--s4);
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.input::placeholder { font-weight: 400; letter-spacing: normal; color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: none; }
.input.is-error { border-color: var(--danger); }
.input--numero { width: 110px; text-align: center; font-size: 22px; }

/* --- Selección por tarjetas ----------------------------------------------- */
/* Las opciones seleccionables viven en components.css: las usan la captura
   del cliente y el modal de origen de traspaso. */

/* --- Plantillas y colores -------------------------------------------------- */
.chips-row { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); }
.chip-op {
  flex-shrink: 0; padding: var(--s2) var(--s4);
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  background: var(--surface); color: var(--text-muted);
  transition: all var(--transition);
}
.chip-op.is-active { border-color: var(--brand); background: var(--brand); color: var(--text-on-brand); }

/* Color del vinil, justo bajo la imagen: cambia la tinta del estampado */
.colores { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.colores:empty { display: none; }
.color-op { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.color {
  position: relative; width: 38px; height: 38px; border-radius: var(--r-full);
  border: 2px solid var(--border-strong);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.color.is-active { border-color: var(--brand); transform: scale(1.08); box-shadow: 0 0 0 3px var(--row-selected); }
.color.is-agotado { opacity: .45; cursor: not-allowed; }
.color.is-agotado::after {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(to top left, transparent 46%, var(--danger) 46%, var(--danger) 54%, transparent 54%);
  border-radius: var(--r-full);
}
.color__nombre { font-size: var(--fs-label); color: var(--text-muted); }
.color.is-active + .color__nombre { color: var(--brand); font-weight: 700; }

/* --- Aviso de bloqueo ------------------------------------------------------ */
.aviso {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--danger-soft); border: 1px solid var(--danger);
  margin-bottom: var(--s5);
}
.aviso svg { width: 18px; height: 18px; color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.aviso__texto { display: block; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.aviso__texto strong { color: var(--danger); }
.aviso--info { background: var(--info-soft); border-color: var(--info); }
.aviso--info svg { color: var(--info); }

/* --- Barra fija de acción --------------------------------------------------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 480px; margin: 0 auto;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--sombra-barra);
}
.barra__resumen {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s2);
}
.barra__total { font-size: var(--fs-h2); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.btn-principal {
  width: 100%; height: 52px; border-radius: var(--r-md);
  background: var(--brand); color: var(--text-on-brand);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  transition: background var(--transition);
}
.btn-principal:hover:not([disabled]) { background: var(--brand-hover); }
.btn-principal[disabled] { background: var(--neutral-soft); color: var(--text-faint); cursor: not-allowed; }
.btn-principal svg { width: 18px; height: 18px; }

/* --- Confirmación ---------------------------------------------------------- */
.exito { padding: var(--s10) var(--s5); text-align: center; }
.exito__icono {
  width: 68px; height: 68px; border-radius: var(--r-full);
  background: var(--success-soft); color: var(--success);
  display: grid; place-items: center; margin: 0 auto var(--s5);
}
.exito__icono svg { width: 32px; height: 32px; }
.exito__titulo { font-size: var(--fs-display); font-weight: 700; margin-bottom: var(--s2); }
.exito__folio {
  display: inline-block; margin: var(--s4) 0;
  padding: var(--s2) var(--s5); border-radius: var(--r-md);
  background: var(--surface-sunken); border: 1px dashed var(--border-strong);
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.exito__eta {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--info-soft); color: var(--info);
  font-weight: 600; margin: var(--s5) 0;
}
.exito__eta svg { width: 18px; height: 18px; }
.resumen { text-align: left; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.resumen__fila {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.resumen__fila:last-child { border-bottom: 0; }
.resumen__fila dt { color: var(--text-muted); }
.resumen__fila dd { margin: 0; font-weight: 600; text-align: right; }

.oculto { display: none !important; }

/* El lienzo se puede ampliar sólo cuando hay algo escrito; el JS pone la
   clase. La afordancia reusa .jersey-foto__lupa de components.css. */
.lienzo--ampliable { cursor: zoom-in; }
.lienzo--ampliable:hover { border-color: var(--brand); }