/* estilo.css — lo que es PROPIO del menu-service.
 *
 * Todo lo generico (tokens, tipografia, sidebar, card, tabla, badge,
 * btn, form, filtros, modal, login, paginador) vive en
 * shared/frontend/chatello-base.css y se copia aca con
 * ./scripts/sync-frontend-shared.sh --apply. No redefinir nada de eso
 * en este archivo: el sentido de la base es que un cambio de marca se
 * haga en un solo lugar y se propague.
 *
 * Tampoco declarar @media (prefers-color-scheme: dark) aca. El modo
 * oscuro lo resuelve theme-dark.css invirtiendo los tokens, y carga
 * DESPUES de este archivo justamente para poder pisarlos.
 */

/* --- Campos del editor a ancho completo ---
   La base ya NO pone `width: 100%` global en los inputs (estiraba los filtros
   de todos los servicios). Aca si corresponde: el editor de articulos vive en
   una columna angosta y sus campos ocupan el ancho disponible. */
.campo input,
.campo select,
.campo textarea,
.nombre-preview + input { width: 100%; }

/* Los filtros del catalogo tampoco los dimensiona ya la base. */
.filters input,
.filters select { width: auto; min-width: 140px; }
.filters input[type="search"] { flex: 1; min-width: 180px; }

/* --- Vista de dos columnas (lista + detalle) --- */

.editor-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  .editor-grid { grid-template-columns: 1fr; }
}

/* --- Filas de la lista de articulos --- */

tr.fila-articulo { cursor: pointer; }
tr.fila-articulo.selected { background: var(--chatello-beige-light); }

/* Lineas del comparador de recetas/insumos */
tr.linea-faltante td { background: var(--danger-bg); }
tr.linea-unidad-difiere td { background: var(--warn-bg); }

/* --- Aviso de captura pendiente (sin borde, a diferencia de .aviso) --- */

.aviso-pendiente {
  background: var(--warn-bg);
  color: var(--warn);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12.5px;
}

/* --- Nombre derivado del articulo (preview en el editor) --- */

.nombre-preview {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  padding: 10px 0 4px;
}
.nombre-preview .vacio { color: var(--muted); font-weight: 400; font-style: italic; }

/* --- Lista de familias parecidas en el modal del 409 --- */

.modal ul.similares { margin: 10px 0; padding-left: 20px; }
.modal ul.similares li { margin-bottom: 4px; }