/* El panel de alta.
 *
 * MOVIL PRIMERO. Esto se usa en el patio, de pie, con una mano y con sol dando
 * en la pantalla (AGENTS.md §4: el 95 % entra desde el telefono). El ancho
 * estrecho es el caso normal; el escritorio es la excepcion que ensancha.
 *
 * Se mide a 360, 375, 390 y 430 px con `banco-telefono.html`.
 *
 * La paleta y los nombres de las variables son los MISMOS que
 * `catalogo/estilo/catalogo.css`, que a su vez salieron de `inventario/maqueta.html`.
 * No se copia el archivo —es de otra reserva— pero las dos pantallas del mismo
 * producto tienen que parecerse.
 *
 * Tipografias del sistema: este panel puede acabar detras de una sesion, y pedir
 * la fuente a un tercero le manda la IP de quien lo abre.
 */

:root {
  --ground: #e9ecef;
  --paper: #ffffff;
  --paper-2: #f5f7f8;
  --ink: #0e1519;
  --ink-2: #465561;
  --ink-3: #5a6874;
  --line: #dde3e7;
  --line-2: #edf1f3;
  --marine: #12546f;
  --marine-ink: #ffffff;
  --marine-wash: #e1edf3;
  --stop: #ac2318;
  --stop-wash: #f7e0de;
  --ok: #14603d;
  --ok-wash: #dcefe4;
  --ojo: #6b4205;
  --ojo-wash: #fbeed3;
  --sombra: 0 1px 2px rgba(14, 21, 25, 0.05), 0 8px 24px -12px rgba(14, 21, 25, 0.18);
  --radio: 10px;
  --diana: 44px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a1218;
    --paper: #111e26;
    --paper-2: #0d1920;
    --ink: #e6eef3;
    --ink-2: #b3c4ce;
    --ink-3: #93a7b4;
    --line: #243743;
    --line-2: #1a2a34;
    --marine: #6fb8d6;
    --marine-ink: #06131a;
    --marine-wash: #12303e;
    --stop: #f08078;
    --stop-wash: #321614;
    --ok: #74d3a4;
    --ok-wash: #103223;
    --ojo: #f0c96f;
    --ojo-wash: #322612;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  --ground: #0a1218;
  --paper: #111e26;
  --paper-2: #0d1920;
  --ink: #e6eef3;
  --ink-2: #b3c4ce;
  --ink-3: #93a7b4;
  --line: #243743;
  --line-2: #1a2a34;
  --marine: #6fb8d6;
  --marine-ink: #06131a;
  --marine-wash: #12303e;
  --stop: #f08078;
  --stop-wash: #321614;
  --ok: #74d3a4;
  --ok-wash: #103223;
  --ojo: #f0c96f;
  --ojo-wash: #322612;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Sin desborde lateral pase lo que pase: es lo primero que se mira a 360 px. */
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Que el foco SIEMPRE se vea: se navega con teclado y sin foco visible no se puede. */
:focus-visible {
  outline: 3px solid var(--marine);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- la franja del cartel ---------- */

.franja {
  background: var(--stop-wash);
  color: var(--ink);
  border-bottom: 2px solid var(--stop);
  padding: 10px 16px;
}

.franja__titulo {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stop);
}

.franja__texto {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

/* ---------- cabecera ---------- */

.cabecera {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.cabecera__interior {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

.cabecera__titulo {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.cabecera__nota {
  margin: 2px 0 0;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* ---------- el cuerpo ---------- */

.envoltorio {
  max-width: 640px;
  margin: 0 auto;
  /* El hueco de abajo es para que el ultimo boton no quede debajo de la barra del
     navegador del telefono. */
  padding: 16px 16px 96px;
}

.tarjeta,
.identidad {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta {
  padding: 16px;
}

.tarjeta__pie {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ---------- la caja de la identidad ---------- */

.identidad {
  margin-bottom: 16px;
}

.identidad__resumen {
  padding: 12px 16px;
  min-height: var(--diana);
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  border-radius: var(--radio);
}

.identidad__cuerpo {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line-2);
}

.identidad__cuerpo .campo__etiqueta { margin-top: 12px; }

/* ---------- campos ---------- */

.campo { margin-bottom: 16px; }

.campo__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
}

.campo__opcional {
  font-weight: 400;
  color: var(--ink-3);
}

.campo__ayuda {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.campo__error {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--stop);
}

.control {
  width: 100%;
  /* 44 px de diana minima (ARQUITECTURA-V1.md §13.1) y 16 px de letra: por debajo
     de 16, Safari del iPhone hace zoom solo al tocar el campo y descuadra la
     pagina entera. */
  min-height: var(--diana);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radio);
}

.control::placeholder { color: var(--ink-3); }

.control--mal {
  border-color: var(--stop);
  background: var(--stop-wash);
}

/* Las dos cajas cortas caben juntas hasta en 360 px: son de cuatro y de seis
   digitos, y separarlas gastaria una pantalla entera de desplazamiento. */
.pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo--precio .control { font-size: 1.25rem; font-weight: 600; }

.control-dinero { position: relative; }

.control-dinero__signo {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-3);
  pointer-events: none;
}

.control--dinero { padding-left: 28px; }

/* ---------- botones ---------- */

.botonera {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.boton {
  min-height: var(--diana);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  cursor: pointer;
}

.boton--principal {
  color: var(--marine-ink);
  background: var(--marine);
  border-color: var(--marine);
}

.boton[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* ---------- el bloque de estado ---------- */

.hueco-estado:empty { display: none; }

.aviso {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--paper-2);
}

.aviso__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aviso__texto {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.aviso__texto--ojo {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ojo-wash);
  color: var(--ojo);
  font-weight: 600;
}

.aviso__lista,
.aviso__campos {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.aviso__lista { list-style: none; padding-left: 0; }
.aviso__lista li { padding: 2px 0; }

.aviso__pie {
  margin: 10px 0 0;
  font-size: 0.75rem;
  /* --ink-2 y no --ink-3: sobre el fondo del aviso de fallo, el tono mas claro se
     quedaba en 4,55:1 de contraste. Pasaba, pero por los pelos, y esta linea se
     lee cuando algo ha ido mal. */
  color: var(--ink-2);
}

/* `word-break` para que un identificador largo no ensanche la pagina a 360 px. */
.aviso__pie code {
  font-size: 0.75rem;
  word-break: break-all;
}

.aviso--trabajando { border-left-color: var(--marine); background: var(--marine-wash); }
.aviso--exito { border-left-color: var(--ok); background: var(--ok-wash); }
.aviso--exito .aviso__titulo { color: var(--ok); }
.aviso--medias { border-left-color: var(--ojo); }
.aviso--medias .aviso__titulo { color: var(--ojo); }
/* ⚠️ La duda: el servidor pudo haber ejecutado y la respuesta se perdio. Ni el
   verde del exito ni el rojo del fallo, porque no es ninguna de las dos cosas;
   el lavado ambar la distingue del «preparada pero sin publicar» de siempre.
   IMPORTANTE 3 de la revision de Astra del 5-sep-2026. */
.aviso--incierto { background: var(--ojo-wash); }
.aviso--fallo { border-left-color: var(--stop); background: var(--stop-wash); }
.aviso--fallo .aviso__titulo { color: var(--stop); }

.giro {
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid var(--marine);
  border-top-color: transparent;
  border-radius: 50%;
  animation: gira 0.8s linear infinite;
}

@keyframes gira { to { transform: rotate(360deg); } }

/* Quien pidio menos movimiento no ve la rueda dar vueltas. */
@media (prefers-reduced-motion: reduce) {
  .giro { animation: none; }
}

/* ---------- el paso de las fotos ---------- */

.tarjeta--fotos { margin-top: 20px; }

.tarjeta__titulo {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.tarjeta__nota {
  margin: 0 0 4px;
  font-size: 0.875rem;
  color: var(--ink-2);
  /* Un VIN de 17 caracteres no cabe en 360 px: parte por donde haga falta antes
     que empujar la pagina a lo ancho. */
  overflow-wrap: anywhere;
}

/* La casilla de archivo se esconde de la vista pero SIGUE recibiendo el foco del
   teclado y sigue existiendo para un lector de pantalla. No se usa `display:none`
   ni `visibility:hidden`: eso la sacaria del recorrido y el boton dejaria de
   funcionar con teclado. */
.solo-para-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.botonera--elegir { margin-top: 16px; }

/* Una etiqueta haciendo de boton: `min-height` sola no la centra, hace falta el
   flex. Y la diana sigue siendo la misma que la de los demas botones. */
.boton--elegir {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* El cerco del foco lo pinta la etiqueta cuando el foco esta en su casilla. */
.solo-para-lectores:focus-visible + .boton--elegir {
  outline: 3px solid var(--marine);
  outline-offset: 2px;
}

.hueco-fotos { margin-top: 16px; }

.fotos__vacio {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radio);
  font-size: 0.875rem;
  color: var(--ink-3);
}

.fotos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
}

.foto {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  /* Cada fila llega a la diana entera: en el patio se toca con el pulgar. */
  min-height: var(--diana);
  border-top: 1px solid var(--line-2);
}

.foto:first-child { border-top: 0; }

.foto__senal {
  flex: none;
  width: 20px;
  text-align: center;
  line-height: 1.4;
}

/* ⚠️ `min-width: 0` es lo que impide que un nombre de archivo largo ensanche la
   pagina entera: sin el, un hijo de flex no encoge por debajo de su contenido. */
.foto__cuerpo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.foto__nombre {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.foto__estado {
  font-size: 0.8125rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.foto__mal {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--stop);
  overflow-wrap: anywhere;
}

.foto--lista { background: var(--ok-wash); }
.foto--lista .foto__estado { color: var(--ok); font-weight: 600; }
.foto--fallo { background: var(--stop-wash); }
.foto--preparando,
.foto--subiendo { background: var(--marine-wash); }

/* ⚠️ Las casillas apagadas se tienen que VER apagadas. Mientras una foto sube,
   la identidad y la direccion de la API se bloquean (BLOCKER 1 del 4-sep-2026);
   si siguieran con el mismo aspecto, alguien escribiria dentro sin entender por
   que no pasa nada. */
.control[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* El boton de quitar una foto que NO se subio.
   ⚠️ Solo sale para fotos que no estan `lista` y con la cola parada: la vista
   decide eso, no el CSS. Aqui solo se le da la diana entera y sitio propio, para
   que en el patio no se toque por error el de la foto de al lado. */
.foto__quitar {
  flex: none;
  /* Se empuja a la derecha del todo, lejos del texto de la fila. */
  margin-left: auto;
  align-self: center;
  min-height: var(--diana);
  min-width: var(--diana);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--stop);
  background: var(--paper);
  /* ⚠️ El borde va del color del texto, NO de `--line`.
     Medido el 4-sep-2026 con `--line`: el fondo del boton contra el de la fila
     daba 1,26 en claro y 1,02 en oscuro, y el borde 1,3. O sea, un boton SIN
     contorno visible: se lee como texto suelto, y en el patio con sol un boton
     que no se ve no lo pulsa nadie. Justo lo contrario de lo que este boton
     viene a arreglar, que es sacar a alguien de un atasco. */
  border: 1px solid currentColor;
  border-radius: var(--radio);
  cursor: pointer;
}

/* El resumen de la cola usa los mismos avisos que el resto del panel; solo le
   falta el tono de «se paro», que es un no cerrado y se lee como tal. */
.aviso--parada { border-left-color: var(--stop); background: var(--stop-wash); }
.aviso--parada .aviso__titulo { color: var(--stop); }
.aviso--a-medias { border-left-color: var(--ojo); }
.aviso--a-medias .aviso__titulo { color: var(--ojo); }

/* ---------- publicar y el enlace ---------- */

.hueco-publicacion:empty { display: none; }

/* Lo que falta para poder publicar, y el aviso de que ya se puede. Los dos van
   con el tono de «ojo»: no son un error —no ha fallado nada— pero tampoco son un
   exito, y pintarlos de verde seria decir que ya esta hecho. */
.publicar__falta,
.publicar__listo {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--ojo-wash);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ojo);
  border-radius: var(--radio);
}

.enlace {
  margin-top: 16px;
  padding: 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  /* ⚠️ Sin esto, un enlace largo dentro de una caja de 360 px ensancha la pagina
     entera y aparece la barra horizontal. `min-width: 0` es lo que deja encoger
     al hijo por debajo de su contenido; es el mismo arreglo que ya lleva la fila
     de una foto con nombre largo. */
  min-width: 0;
}

.enlace__titulo {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}

/* ⚠️⚠️ EL ENLACE TIENE QUE PODER COGERSE A MANO, SIEMPRE.
   `user-select: all` hace que un solo toque seleccione la direccion entera: en un
   telefono, esa es la diferencia entre copiarla y pelearse con ella arrastrando.
   Y es lo que sostiene la promesa de esta pantalla: el boton de copiar puede
   fallar —el navegador puede negarse—, pero el enlace se ve y se coge igual. */
.enlace__url {
  margin: 0;
  min-width: 0;
}

.enlace__url code {
  display: block;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  /* Una direccion no tiene espacios donde partirse: sin esto se sale de la caja. */
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.enlace__ojo {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--ojo);
}

.enlace__vacio {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--stop);
}

/* El boton de copiar: diana entera y ancho completo, para tocarlo con el pulgar
   sin apuntar. No es el boton principal de la pantalla —ese es Publicar—, asi
   que va con el aspecto normal y no con el marino. */
.boton--copiar {
  width: 100%;
  margin-top: 12px;
  min-height: var(--diana);
}

/* ⚠️⚠️ Lo que paso al copiar, y NUNCA un «copiado» que no lo sea.
   El verde sale solo cuando el portapapeles cumplio de verdad; si se negara o no
   contestara, sale el tono de parada y el enlace se queda arriba, a la vista. */
.enlace__copia {
  margin: 10px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.enlace__copia--exito { color: var(--ok); }
.enlace__copia--fallo { color: var(--stop); }

/* ---------- escritorio ---------- */

@media (min-width: 700px) {
  .envoltorio { padding-top: 24px; }
  .tarjeta { padding: 24px; }
  .botonera { flex-direction: row-reverse; justify-content: flex-end; }
  .boton { min-width: 200px; }
  /* Los de elegir foto se leen en su orden: primero la camara, que es lo que se
     usa de pie en el patio. El `row-reverse` de arriba los daria del reves. */
  .botonera--elegir { flex-direction: row; justify-content: flex-start; }
  /* El de copiar vive dentro de la caja del enlace, no en una botonera: en
     pantalla ancha no tiene por que ocupar la fila entera. */
  .boton--copiar { width: auto; min-width: 200px; }
}