.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.page h1 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0 0 4px;
}
.page .sub {
  color: var(--text-sub);
  font-size: .85rem;
  margin-bottom: 24px;
}

.form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  align-items: start;
}

/* CADA CAMPO SON TRES RENGLONES FIJOS: rótulo · control · lo que cuelgue
   (una ayuda, un botón, un campo que aparece solo).

   La versión anterior era una columna flex que empujaba el control al
   FONDO de la celda. Eso alinea bien mientras el control sea lo último
   del campo -- pero apenas uno tiene algo debajo, su control sube y la
   fila queda en escalera. Se veía en Ingreso de mercadería: el nombre
   del proveedor quedaba más arriba que la fecha, y "Agregar ítem"
   entero desparramado, porque cuatro de sus campos llevan ayuda abajo.

   Con tres renglones el control siempre cae en el MISMO renglón, y lo
   que cuelgue queda en el tercero sin mover nada. Para que además
   arranquen todos a la misma altura, el rótulo ocupa DOS renglones
   siempre: "Producto" y "Nombre del producto nuevo" miden igual. */
.form-field {
  display: grid;
  /* La altura del renglón del rótulo va ACÁ y no en el <label>: cada
     campo es su propia grilla, así que un campo sin rótulo -- un botón
     suelto como "Confirmar remito" -- dejaba ese renglón en 0 y su
     control subía por encima del de los vecinos. Fijándola en la
     grilla, el hueco existe aunque no haya rótulo.
     2,05rem = dos renglones de .72rem a 1,25 de interlínea, más el
     margen de abajo. */
  grid-template-rows: 2.05rem auto 1fr;
  min-width: 0;
}
.form-field label {
  font-size: .72rem;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Apoyado sobre el control: con el rótulo de un renglón y el de dos
     pegados abajo, los controles quedan a la misma altura. */
  display: flex;
  align-items: flex-end;
  padding-bottom: 6px;
}

/* Un campo sin rótulo empieza directo por el control, y el control va
   en el renglón del control -- no en el del rótulo. */
.form-field > :first-child:not(label) { grid-row: 2; }

/* Un campo que ocupa toda la fila y no es un control -- la ayuda de la
   conversión bulto→unidad -- no necesita el rótulo de dos renglones ni
   el renglón vacío: es un texto que aparece y desaparece. */
.form-field.solo-texto { display: block; }

/* Se nombra por EXCLUSIÓN, no enumerando tipos. La lista anterior era
   text, email y number, así que los once campos de fecha de la app
   salían sin estilo -- blancos, con el calendario del navegador. Con
   esta forma, un tipo nuevo (tel, url, hora) entra vestido solo. */
.form-field select,
.form-field textarea,
.form-field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: .92rem;
  outline: none;
}
.form-field input:focus { border-color: var(--gold); }

/*  El campo de foto lo estaba pintando el navegador  ──────────────────
 *
 *  La regla de arriba EXCLUYE `[type="file"]`, asi que este campo se
 *  quedaba con el control nativo del sistema: boton gris, "Ningun
 *  archivo seleccionado" al lado, sin borde ni fondo, y con la letra
 *  del sistema operativo en vez de la nuestra.
 *
 *  Y encima se salia del formulario: un item de grilla arranca con
 *  `min-width:auto`, asi que ese texto nativo --que no podemos
 *  acortar-- estira la celda y desborda sobre la de al lado. Por eso
 *  el `min-width: 0`, que es lo que realmente frena el desborde.
 *
 *  Es la misma leccion que ya costo una vez con los botones sin clase:
 *  un control que no vestimos lo viste el sistema operativo, y se nota.
 *
 *  Se viste `input[type="file"]` A SECAS, sin scope, a proposito: hay
 *  seis en la app y dos NO estan adentro de un `.form-field` (el logo
 *  del local y el fondo del catalogo). Arreglar solo el que se vio
 *  garantiza que el proximo salga igual de feo. Ninguno tiene clase
 *  propia, asi que --a diferencia de los botones-- aca no hace falta
 *  el `:not([class])`: no hay nada vestido que esto pueda pisar.
 */
input[type="file"] {
  min-width: 0;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  color: var(--text-sub);
  font-family: var(--sans);
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
input[type="file"]:hover {
  border-color: var(--border-accent);
  background: var(--bg-hover);
}
input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--gold);
}

/*  El boton de adentro del control. Es la unica parte del widget nativo
 *  que se puede vestir; el texto de al lado ("Ningun archivo
 *  seleccionado") lo escribe el navegador y no se toca. */
input[type="file"]::file-selector-button {
  margin: 0 10px 0 0;
  padding: 4px 12px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--gold-text);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease;
}
input[type="file"]:hover::file-selector-button {
  background: var(--gold-dim, rgba(201, 169, 110, .14));
}

input[type="file"]::-webkit-file-upload-button {
  margin: 0 10px 0 0;
  padding: 4px 12px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--gold-text);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
input[type="file"]:hover::-webkit-file-upload-button {
  background: var(--gold-dim, rgba(201, 169, 110, .14));
}

.photo-preview {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  display: none;
}
.photo-preview.show { display: inline-block; }
/*  Sin foto no hay nada que previsualizar: un <img> vacio igual ocupa
 *  44x44 con borde, y en dos lugares el marcado le pone `show` desde
 *  el arranque. Se apaga por lo que ES, no archivo por archivo, asi la
 *  proxima vista previa que se agregue ya queda cubierta. Va DESPUES
 *  de `.show`: misma especificidad, gana la ultima. */
.photo-preview:not([src]), .photo-preview[src=""] { display: none; }

.btn-add {
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: #1a1a1a;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-add:hover { filter: brightness(1.08); }
.btn-add:disabled { opacity: .5; cursor: not-allowed; }

.form-status { font-size: .82rem; margin-top: 12px; color: var(--text-sub); }
.form-status.error { color: var(--error-text); }
.form-status.ok { color: var(--green-text); }
/* Amarillo: salió bien PERO falta un paso tuyo. Sin esto el aviso
   de "el precio no entró" salía en gris de texto comun, que es lo
   mismo que no avisar. */
.form-status.warn { color: var(--warning-text); font-weight: 600; }

.product-list { display: flex; flex-direction: column; gap: 10px; }



/* En un teléfono, una fila de gestión son un nombre y hasta TRES botones
   ("Renombrar", "Desactivar", "Borrar"). Los botones no se achican, así
   que se quedaban con todo el ancho. Medido a 375 en Catálogo y en
   Gastos: 12 nombres afuera, el mismo componente las dos veces.
   Con `wrap` y un mínimo de verdad para el nombre, los botones bajan
   solos a la segunda línea cuando no entran. */




/* En una FILA hay ancho de sobra y `nowrap` es lo que corresponde. En una
   TARJETA el ancho lo fija la grilla (130px y pico), así que un texto que
   no entra se sale por el costado y se le monta a la tarjeta de al lado.
   Lo vio Canu con las ofertas, cuyo rótulo es más largo que "OK · 48".
   Acortar el texto no alcanza: el día que un número tenga un dígito más,
   vuelve. Acá la píldora ocupa el ancho de la tarjeta y se acomoda en dos
   renglones si hace falta. Feo entra; salido, no. */
.product-card .stock-pill {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
}

.cat-tag {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-sub);
  background: var(--bg-hover);
  padding: 3px 9px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
/* El grupo se distingue de la categoría: son dos cosas distintas y
   verlos iguales confunde al mirar el catálogo. */
.cat-tag.grupo {
  color: var(--gold-text);
  background: var(--gold-dim, rgba(201, 169, 110, .14));
  border: 1px solid var(--border-accent);
  text-transform: none;
}



/* Un tilde NO tiene rótulo arriba: el texto va al lado del cuadradito,
   así que ese <label> ES el control y va en el renglón del control. Sin
   esto quedaba trepado al renglón del rótulo, 30px más alto que sus
   vecinos de fila -- se veía en "Descontar stock" al lado de "Medio de
   pago", y en "Recurrente" de Gastos.

   Antes esto se tapaba con un `style="display:flex"` puesto en el campo,
   que además le rompía la grilla. */
.form-field > label.auth-row {
  grid-row: 2;
  /* La misma altura que tiene un campo de texto (10px de relleno arriba
     y abajo + una línea + el borde). Sin esto el tilde mide menos que
     sus vecinos y arranca a otra altura -- y si el texto es largo y
     entra en dos renglones, como "Recurrente (se repite todos los
     meses)", el desfase se nota todavía más. */
  min-height: 42px;
  align-items: center;
  padding-bottom: 0;
}

/* "Agregar ítem" tiene doce campos y con columnas automáticas quedaban
   siete en un renglón, uno solo en el siguiente y tres abajo -- porque
   la ayuda de la conversión ocupa el ancho completo y parte la fila
   justo ahí. Con cuatro columnas fijas cada renglón queda parejo, y
   los campos que aparecen y desaparecen (producto nuevo, categoría,
   grupo) reacomodan sin dejar a nadie solo. */
.form-grid.remito-item { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .form-grid.remito-item { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .form-grid.remito-item { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .form-grid.remito-item { grid-template-columns: 1fr; } }